/* ============================================================
   BubbleTeam landing — production styles
   Brand tokens + page layout. No external dependencies.
   ============================================================ */

@font-face {
  font-family: "Gunterz";
  src: url("../fonts/Gunterz-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bt-navy:#000424; --bt-white:#FFFFFF;
  --bt-pink:#FF045A; --bt-pink-2:#FF40A3; --bt-pink-solid:#FF0860;
  --bt-grad-pink:linear-gradient(135deg,#FF045A 0%,#FF40A3 100%);
  --bt-grad-pink-h:linear-gradient(90deg,#FF045A 0%,#FF40A3 100%);
  --bt-ink-1:#000424; --bt-ink-2:#2A2E48; --bt-ink-3:#6B6E84;
  --bt-line:#E6E7EE; --bt-surface-1:#FFFFFF; --bt-surface-2:#F6F7FB; --bt-surface-3:#ECEDF3;
  --bt-dark-1:#000424; --bt-dark-2:#0A0E2E; --bt-dark-3:#141838; --bt-dark-line:rgba(255,255,255,0.10);
  --bt-on-dark-1:#FFFFFF; --bt-on-dark-2:#B8BBD0; --bt-on-dark-3:#6B6E84;
  --bt-success:#2BD67B; --bt-warn:#FFB020; --bt-danger:#FF045A; --bt-info:#3B7BFF;
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,4,36,0.06),0 1px 1px rgba(0,4,36,0.04);
  --shadow-md:0 8px 24px rgba(0,4,36,0.08),0 2px 6px rgba(0,4,36,0.05);
  --shadow-lg:0 24px 60px rgba(0,4,36,0.14),0 8px 16px rgba(0,4,36,0.06);
  --shadow-pink:0 16px 40px rgba(255,4,90,0.32);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --font-display:"Gunterz","Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --tracking-tight:-0.02em; --tracking-display:-0.01em; --tracking-eyebrow:0.14em;
}

* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-body); background:var(--bt-surface-2); color:var(--bt-ink-1); -webkit-font-smoothing:antialiased; }
.screen { max-width:440px; margin:0 auto; }
.sec { padding: var(--space-8) var(--space-5); }
.pad { padding:0 var(--space-5); }
.eyebrow { font-weight:600; font-size:12px; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--bt-ink-3); }
.htitle { font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-tight); color:var(--bt-navy); line-height:1.05; font-size:30px; }
.grad { background:var(--bt-grad-pink-h); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
p { color:var(--bt-ink-2); }
svg.ic { width:22px; height:22px; }
a { color:inherit; }

.hdr { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5); position:sticky; top:0; background:rgba(246,247,251,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:5; }
.hdr img { height:24px; }
.hdr-right { display:flex; gap:10px; align-items:center; }
.lang { font-size:13px; color:var(--bt-ink-3); border:1px solid var(--bt-line); border-radius:var(--radius-pill); padding:6px 12px; background:#fff; text-decoration:none; }
.lang a { text-decoration:none; color:var(--bt-ink-3); }
.lang a.active { color:var(--bt-pink-solid); font-weight:600; }
.hdr-tg { font-size:13px; font-weight:600; color:var(--bt-pink-solid); border:1px solid var(--bt-line); border-radius:var(--radius-pill); padding:6px 14px; background:#fff; text-decoration:none; }

.hero { padding: var(--space-6) var(--space-5) var(--space-7); }
.hero h1 { font-family:var(--font-display); text-transform:uppercase; font-size:42px; line-height:1.03; letter-spacing:var(--tracking-tight); color:var(--bt-navy); margin-top:var(--space-4); }
.hero p { font-size:16px; line-height:1.5; margin-top:var(--space-4); }
.cta { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }
.btn { display:flex; align-items:center; justify-content:center; height:54px; border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:600; font-size:16px; text-decoration:none; border:none; cursor:pointer; width:100%; }
.btn-primary { background:var(--bt-grad-pink); color:#fff; box-shadow:var(--shadow-pink); }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn-ghost { border:1px solid var(--bt-line); color:var(--bt-ink-1); background:#fff; }
.micro { font-size:12px; color:var(--bt-ink-3); margin-top:var(--space-4); text-align:center; }

.yw { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--space-5); }
.yw .col { border-radius:var(--radius-lg); padding:var(--space-5); border:1px solid var(--bt-line); }
.yw .you { background:#fff; } .yw .we { background:var(--bt-navy); color:#fff; border-color:transparent; }
.yw h4 { font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-3); }
.yw .we h4 { color:var(--bt-pink-2); }
.yw ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.yw li { font-size:14px; line-height:1.35; padding-left:20px; position:relative; }
.yw li::before { content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--bt-pink-solid); }
.yw .we li { color:#E8E9F2; } .yw .we li::before { background:var(--bt-pink-2); }
.yw .you li { color:var(--bt-ink-2); }

.benes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--space-5); }
.bene { background:#fff; border:1px solid var(--bt-line); border-radius:var(--radius-lg); padding:var(--space-5); }
.bene .ic { width:38px; height:38px; border-radius:11px; background:#FFE7F0; display:flex; align-items:center; justify-content:center; margin-bottom:10px; color:var(--bt-pink-solid); }
.bene b { font-size:15px; display:block; margin-bottom:3px; }
.bene span { font-size:13px; color:var(--bt-ink-3); line-height:1.4; }

.steps { display:flex; flex-direction:column; gap:12px; margin-top:var(--space-5); }
.step { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--bt-line); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); }
.step .n { flex:0 0 36px; height:36px; border-radius:50%; background:var(--bt-grad-pink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; }
.step .t b { display:block; font-size:15px; color:var(--bt-ink-1); }
.step .t span { font-size:13px; color:var(--bt-ink-3); }
.note24 { margin-top:var(--space-4); font-size:13px; color:var(--bt-ink-3); display:flex; align-items:center; gap:8px; }
.note24 svg { color:var(--bt-pink-solid); }

.social { background:var(--bt-navy); color:#fff; border-radius:var(--radius-xl); padding:var(--space-7) var(--space-5); margin-top:var(--space-5); }
.social h2 { font-family:var(--font-display); text-transform:uppercase; font-size:30px; line-height:1.05; letter-spacing:var(--tracking-tight); }
.social p { color:#C9CBDC; font-size:15px; margin-top:var(--space-3); }

.proof { text-align:center; }
.proof .lead { font-size:15px; max-width:340px; margin:var(--space-3) auto 0; }
.cab { text-align:left; background:#fff; border:1px solid var(--bt-line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-5); margin-top:var(--space-6); }
.cab-cap { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bt-ink-3); text-align:center; margin-bottom:var(--space-4); }
.cab-hi { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--bt-ink-2); margin-bottom:var(--space-4); }
.cab-hi .dot { width:28px; height:28px; border-radius:50%; background:var(--bt-grad-pink); }
.earn { background:var(--bt-grad-pink); border-radius:var(--radius-lg); padding:var(--space-5); color:#fff; }
.earn .lbl { font-size:13px; opacity:.92; } .earn .num { font-family:var(--font-display); font-size:44px; letter-spacing:-.02em; margin-top:4px; line-height:1; } .earn .num small { font-size:20px; opacity:.8; }
.fc { display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--space-4); }
.fc .l { font-size:13px; color:var(--bt-ink-3); } .fc .v { font-family:var(--font-display); font-size:22px; color:var(--bt-pink-solid); }
.barbg { height:8px; border-radius:99px; background:var(--bt-surface-3); margin-top:8px; overflow:hidden; } .barbg>i { display:block; height:100%; width:71%; background:var(--bt-grad-pink-h); }
.fc2 { display:flex; justify-content:space-between; font-size:11px; color:var(--bt-ink-3); margin-top:6px; }
.csect { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bt-ink-3); margin:var(--space-5) 0 var(--space-3); }
.hist { display:flex; flex-direction:column; gap:9px; }
.row { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:10px; }
.row .m { font-size:11px; color:var(--bt-ink-3); }
.row .t { height:10px; border-radius:99px; background:var(--bt-surface-3); overflow:hidden; } .row .t>i { display:block; height:100%; background:var(--bt-grad-pink-h); } .row .t.win>i { background:var(--bt-warn); }
.row .a { font-weight:600; font-size:12px; }
.proofnote { font-size:13px; color:var(--bt-ink-3); text-align:center; margin-top:var(--space-4); } .proofnote b { color:var(--bt-pink-solid); }

.chan { background:var(--bt-navy); color:#fff; border-radius:var(--radius-xl); padding:var(--space-7) var(--space-5); text-align:center; }
.chan h2 { font-family:var(--font-display); text-transform:uppercase; font-size:30px; letter-spacing:var(--tracking-tight); line-height:1.05; }
.chan p { color:#C9CBDC; font-size:15px; margin:var(--space-3) auto 0; max-width:440px; }
.btn-tg { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 28px; border-radius:var(--radius-pill); background:var(--bt-grad-pink); color:#fff; font-family:var(--font-body); font-weight:600; font-size:16px; text-decoration:none; box-shadow:var(--shadow-pink); margin-top:var(--space-5); }

.faq { display:flex; flex-direction:column; gap:10px; margin-top:var(--space-5); }
.qa { background:#fff; border:1px solid var(--bt-line); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); }
.qa b { display:block; font-size:15px; margin-bottom:6px; } .qa p { font-size:13px; color:var(--bt-ink-3); line-height:1.45; }

.form { background:var(--bt-navy); color:#fff; border-radius:var(--radius-xl); padding:var(--space-7) var(--space-5); margin-top:var(--space-5); }
.form h2 { font-family:var(--font-display); text-transform:uppercase; font-size:30px; letter-spacing:var(--tracking-tight); }
.form p { color:#C9CBDC; font-size:14px; margin-top:8px; }
.field { margin-top:var(--space-4); } .field label { display:block; font-size:12px; color:#B8BBD0; margin-bottom:6px; }
.field input { width:100%; height:50px; border-radius:var(--radius-md); border:1px solid var(--bt-dark-line); background:var(--bt-dark-2); color:#fff; padding:0 16px; font-family:var(--font-body); font-size:15px; }
.field input:focus { outline:none; border-color:var(--bt-pink-2); }
.form .btn-primary { margin-top:var(--space-5); } .form .micro { color:var(--bt-on-dark-3); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status { margin-top:var(--space-4); font-size:14px; text-align:center; min-height:18px; }
.form-status.ok { color:var(--bt-success); } .form-status.err { color:var(--bt-pink-2); }

.ft { padding:var(--space-7) var(--space-5) var(--space-8); text-align:center; }
.ft img { height:22px; opacity:.9; } .ft p { font-size:12px; color:var(--bt-ink-3); margin-top:var(--space-3); }

/* ---------- DESKTOP ---------- */
@media (min-width:900px){
  .screen { max-width:1120px; }
  .hdr { padding:24px 56px; }
  .sec { padding:88px 56px; }
  .pad { padding:0 56px; }
  .htitle { font-size:40px; }
  .hero { padding:80px 56px 88px; }
  .hero h1 { font-size:66px; }
  .hero p { font-size:19px; max-width:620px; }
  .hero .cta { flex-direction:row; max-width:560px; }
  .hero .cta .btn { flex:1; width:auto; }
  .hero .micro { text-align:left; }
  .yw { max-width:780px; }
  .yw .col { padding:32px; }
  .yw li { font-size:15px; }
  .benes { grid-template-columns:repeat(4,1fr); }
  .steps { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .note24 { grid-column:1 / -1; }
  .social { padding:64px; }
  .social h2 { font-size:40px; }
  .social p { font-size:17px; max-width:640px; }
  .proof { text-align:left; }
  .proof-grid { display:grid; grid-template-columns:1fr 440px; gap:56px; align-items:center; }
  .proof .htitle { font-size:44px; }
  .proof-text .lead { margin:14px 0 0; max-width:440px; }
  .cab { margin-top:0; }
  .proofnote { text-align:left; }
  .faq { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  .form { max-width:640px; margin:var(--space-5) auto 0; padding:56px; }
  .form h2 { font-size:40px; }
  .chan { max-width:840px; margin:0 auto; padding:64px; }
  .chan h2 { font-size:38px; }
  .chan p { font-size:17px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-tg { transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s; }
  .btn:active, .btn-tg:active { transform: scale(.985); }
}