html, body {
  overflow-x: hidden;
}
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
    :root {
      --bg:      #1a1f2e;
      --bg2:     #1f2637;
      --bg3:     #252d40;
      --accent:  #2d8cdb;
      --orange:  #e8612a;
      --gold:    #f5c842;
      --text:    #eef2f7;
      --muted:   #7a90a8;
      --border:  rgba(255,255,255,0.08);
    }
 
    html, body { min-height: 100%; }
 
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Barlow', sans-serif;
      display: flex;
      justify-content: center;
      padding: 0 16px 60px;
    }
 
    .page {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
 
    /* ── TOPO ── */
    .top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 32px 0 28px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 32px;
    }
 
    .top-bar img {
      height: 44px;
      object-fit: contain;
    }
 
    /* ── PERFIL ── */
    .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 32px;
    }
 
    .profile-handle {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
 
    .profile-handle span { color: var(--accent); }
 
    .profile-bio {
      font-size: 14px;
      color: var(--muted);
      max-width: 340px;
      line-height: 1.65;
    }
 
    /* ── DIVIDER ── */
    .divider {
      width: 100%;
      height: 1px;
      background: var(--border);
      margin-bottom: 24px;
    }
 
    /* ── SECTION LABEL ── */
    .section-label {
      width: 100%;
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 12px;
    }
 
    /* ── BOTÕES ── */
    .links {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 28px;
    }
 
    .btn-link {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 14px 18px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      text-decoration: none;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      transition: background .18s, border-color .18s;
    }
 
    .btn-link:hover {
      background: var(--bg3);
      border-color: rgba(255,255,255,0.16);
    }
 
    .btn-link .btn-icon {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      background: rgba(255,255,255,0.05);
      color: var(--muted);
    }
 
    .btn-link .btn-label { flex: 1; }
 
    .btn-link .btn-label small {
      display: block;
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      margin-top: 1px;
    }
 
    .btn-link .btn-arr {
      font-size: 13px;
      color: var(--muted);
    }
 
    /* Destaque laranja */
    .btn-link.primary {
      background: var(--orange);
      border-color: transparent;
      color: #fff;
    }
    .btn-link.primary .btn-icon { background: rgba(0,0,0,0.15); color: #fff; }
    .btn-link.primary .btn-label small { color: rgba(255,255,255,0.7); }
    .btn-link.primary .btn-arr { color: rgba(255,255,255,0.7); }
    .btn-link.primary:hover { background: #d45522; }
 
    /* Destaque dourado */
    .btn-link.gold { border-color: rgba(245,200,66,0.2); }
    .btn-link.gold .btn-icon { color: var(--gold); }
    .btn-link.gold:hover { border-color: rgba(245,200,66,0.45); }
 
    /* Aulão azul */
    .btn-link.free .btn-icon { color: var(--accent); }
 
    /* ── REDES SOCIAIS ── */
    .socials {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 32px;
    }
 
    .social-btn {
      width: 42px;
      height: 42px;
      border-radius: 6px;
      background: var(--bg2);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 17px;
      text-decoration: none;
      transition: background .18s, border-color .18s, color .18s;
    }
 
    .social-btn:hover            { background: var(--bg3); border-color: rgba(255,255,255,0.18); color: var(--text); }
    .social-btn.fb:hover         { border-color: #1877f2; color: #1877f2; }
    .social-btn.ig:hover         { border-color: #e1306c; color: #e1306c; }
    .social-btn.wa:hover         { border-color: #25d366; color: #25d366; }
    .social-btn.yt:hover         { border-color: #ff0000; color: #ff0000; }
    .social-btn.li:hover         { border-color: #0a66c2; color: #0a66c2; }
    .social-btn.gh:hover         { border-color: #c9d1d9; color: #c9d1d9; }
    .social-btn.em:hover         { border-color: var(--accent); color: var(--accent); }
 
    /* ── FOOTER ── */
    .footer {
      font-size: 11px;
      color: rgba(122,144,168,0.45);
      text-align: center;
    }
    .footer a { color: inherit; text-decoration: none; }
    .footer a:hover { color: var(--muted); }