/* Plus Jakarta Sans — variable 200-800, self-hosted. */
@font-face{font-family:"Jakarta";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/jakarta-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jakarta";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/jakarta-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Script fallbacks — fetched only when these glyphs appear on the page. */
@font-face{font-family:"NotoScript";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/noto-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:"NotoScript";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/noto-devanagari.woff2") format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"NotoScript";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/noto-bengali.woff2") format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1;}
@font-face{font-family:"NotoScript";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/noto-thai.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}


/* ============================================================
   BOOMBALLE — Golden Hour, Refined
   ------------------------------------------------------------
   Amber is the ONLY colour in layout chrome.
   Rose and teal are DATA ONLY — score bars, meters, status.
   Never use --data-* for buttons, borders, headings or icons.
   ============================================================ */

:root{
  /* ground */
  --ground:    #100B14;
  --ground-2:  #17101E;
  --surface:   #1B1422;
  --surface-2: #241B2D;
  --line:      #302540;
  --line-2:    #3D3050;

  /* ink */
  --ink:   #F8F4F2;
  --ink-2: #B9AEBE;
  --ink-3: #7E7386;

  /* the one accent */
  --amber:   #F5A623;
  --amber-2: #FFC868;
  --on-amber:#2A1B05;

  /* DATA ONLY */
  --data-rose: #F2637F;
  --data-teal: #3FBFA8;

  --f: "Jakarta", "NotoScript", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gut:  clamp(20px, 5vw, 60px);
  --maxw: 1180px;
  --r:    16px;

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg, video{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{
  position:absolute; left:var(--gut); top:-60px; z-index:200;
  background:var(--amber); color:var(--on-amber); font-weight:700;
  padding:10px 16px; border-radius:8px; text-decoration:none; transition:top .18s ease;
}
.skip:focus{ top:12px; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.stack{ display:flex; flex-direction:column; }
.gap-s{ gap:12px } .gap-m{ gap:22px } .gap-l{ gap:36px } .gap-xl{ gap:clamp(56px,9vw,96px) }
.band{ padding-block:clamp(60px,11vw,112px); }
.band--tight{ padding-block:clamp(42px,8vw,72px); }
.rule{ height:1px; border:0; margin:0; background:var(--line); }
.center{ text-align:center; }

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
h1{ font-size:clamp(40px,8.4vw,78px); font-weight:800; line-height:.98; letter-spacing:-.045em; }
h2{ font-size:clamp(30px,5.4vw,52px); font-weight:800; line-height:1.02; letter-spacing:-.04em; }
h3{ font-size:clamp(18px,3.2vw,22px); font-weight:700; line-height:1.25; letter-spacing:-.025em; }
p{ margin:0; }

.eyebrow{
  font-family:var(--f-mono); font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
  margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--amber); opacity:.6; flex:none; }
.eyebrow--plain::before{ display:none; }

.lede{ color:var(--ink-2); font-size:clamp(16px,2.1vw,18.5px); line-height:1.6; max-width:58ch; }
.small{ color:var(--ink-3); font-size:13.5px; line-height:1.55; }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* The Golden Hour headline: 500 setup, tracked hinge, 800 amber payoff. */
.hx{ display:block; }
.hx .a{ display:block; font-size:clamp(26px,5vw,46px); font-weight:500; letter-spacing:-.035em; line-height:1.02; color:var(--ink-2); }
.hx .b{
  display:block; font-family:var(--f-mono); font-size:clamp(10px,1.5vw,12px);
  font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); padding:clamp(8px,1.4vw,14px) 0;
}
.hx .c{ display:block; font-size:clamp(44px,9.6vw,92px); font-weight:800; letter-spacing:-.055em; line-height:.92; color:var(--amber-2); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(16,11,20,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding:12px var(--gut);
  display:flex; align-items:center; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px; margin-right:auto;
  font-weight:800; letter-spacing:-.045em; font-size:19px;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand__mark{ width:24px; height:24px; border-radius:7px; background:var(--amber); flex:none; position:relative; }
.brand__mark::after{ content:""; position:absolute; inset:7px 9px; background:var(--ground); border-radius:2px; }

.nav__links{ display:none; gap:4px; }
.nav__links a{
  color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:8px 13px; border-radius:8px; letter-spacing:-.01em;
}
.nav__links a:hover{ color:var(--ink); background:rgba(248,244,242,.06); }
.nav__links a[aria-current="page"]{ color:var(--amber-2); font-weight:700; }
/* Below 940px the bar is brand + toggle only — the CTA lives in the panel,
   so it isn't competing with the menu button for thumb space. */
.nav__in > .btn{ display:none; }
@media (min-width:940px){
  .nav__links{ display:flex; }
  .nav__toggle{ display:none !important; }
  .nav__in > .btn{ display:inline-flex; }
}

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; padding:0;
  background:none; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); cursor:pointer;
}
.nav__toggle span{ position:relative; width:16px; height:1.5px; background:currentColor; border-radius:2px; }
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle span::before{ top:-5px; } .nav__toggle span::after{ top:5px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); }

.nav__panel{
  display:none; border-top:1px solid var(--line); background:var(--ground-2);
  padding:10px var(--gut) 18px;
}
.nav__panel.open{ display:block; }
@media (min-width:940px){ .nav__panel{ display:none !important; } }
.nav__panel a{
  display:block; text-decoration:none; color:var(--ink-2);
  font-size:17px; font-weight:500; letter-spacing:-.02em;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.nav__panel a[aria-current="page"]{ color:var(--amber-2); font-weight:700; }
.nav__panel .btn{ margin-top:16px; width:100%; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f); font-weight:800; font-size:15px; letter-spacing:-.02em;
  padding:15px 26px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--amber); color:var(--on-amber); box-shadow:0 10px 30px -14px rgba(245,166,35,.8); }
.btn--gold:hover{ background:var(--amber-2); }
.btn--ghost{ background:rgba(248,244,242,.05); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(248,244,242,.1); }
.btn--sm{ padding:10px 18px; font-size:13.5px; }
.btnrow{ display:flex; flex-wrap:wrap; gap:11px; }
@media (max-width:440px){ .btnrow .btn{ flex:1 1 100%; } }

/* ---------- live badge (chrome: neutral, not rose) ---------- */
.livedot{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  background:rgba(248,244,242,.1); color:var(--ink);
  padding:4px 9px; border-radius:999px; flex:none;
}
.livedot i{ width:5px; height:5px; border-radius:50%; background:var(--data-rose); animation:blip 1.7s ease-in-out infinite; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* ---------- split ---------- */
.split{ display:grid; gap:clamp(34px,6vw,72px); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--flip .split__media{ order:2; }
}
.split__media{ display:flex; justify-content:center; }

/* ---------- ticks ---------- */
.ticks{ display:flex; flex-direction:column; gap:13px; margin:0; padding:0; list-style:none; }
/* Block, not flex: the label and the description must flow as one paragraph,
   or a wrapping label fakes a second column. */
.ticks li{ position:relative; display:block; padding-left:19px; color:var(--ink-2); font-size:15.5px; line-height:1.5; }
.ticks li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:2px; background:var(--amber); transform:rotate(45deg); }
.ticks li b{ color:var(--ink); font-weight:700; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
/* Inside a half-width hero column, four across is too narrow and the labels
   wrap unevenly. Stay 2x2 there. */
@media (min-width:900px){ .split .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--ground); padding:22px 20px; }
.stat b{ display:block; font-size:clamp(26px,5.4vw,34px); font-weight:800; letter-spacing:-.05em; color:var(--amber-2); line-height:1.05; }
.stat span{ font-size:12.5px; color:var(--ink-3); }

/* ---------- cards ---------- */
.cards{ display:grid; gap:14px; }
@media (min-width:720px){ .cards--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.card__ic{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.24);
  color:var(--amber-2); margin-bottom:4px; flex:none;
}
.card__ic svg{ width:17px; height:17px; display:block; }
.card p{ color:var(--ink-2); font-size:14.5px; }

/* ---------- steps ---------- */
.flow{ display:grid; gap:12px; counter-reset:step; }
@media (min-width:800px){ .flow{ grid-template-columns:repeat(3,1fr); } }
.step{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:8px; }
.step__k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.step__v{ font-size:26px; font-weight:800; letter-spacing:-.04em; color:var(--amber-2); }
.step p{ font-size:14.5px; color:var(--ink-2); }

/* ---------- panel / feature box ---------- */
.panel{
  border:1px solid var(--line); border-radius:22px; padding:clamp(26px,5.4vw,52px);
  background:radial-gradient(120% 110% at 0% 0%, rgba(245,166,35,.09), transparent 58%), var(--surface);
}

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:13.5px; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; color:var(--ink-2); background:var(--ground-2);
}
.chip--on{ border-color:rgba(245,166,35,.4); color:var(--amber-2); }

/* ---------- table ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; min-width:520px; }
th,td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); font-size:14.5px; }
th{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400; background:var(--ground-2); }
td{ color:var(--ink-2); }
td b{ color:var(--ink); font-weight:700; }
tr:last-child td{ border-bottom:0; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0;
  font-weight:700; font-size:16.5px; letter-spacing:-.025em; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  margin-top:-6px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary{ color:var(--amber-2); }
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--amber-2); }
.faq p{ padding:0 0 22px; color:var(--ink-2); font-size:15px; max-width:70ch; }

/* ---------- finale ---------- */
.finale{
  position:relative; overflow:hidden; border-radius:26px; border:1px solid var(--line);
  padding:clamp(36px,8vw,80px) clamp(22px,6vw,60px); text-align:center;
  background:radial-gradient(100% 130% at 50% 0%, rgba(245,166,35,.18), transparent 64%), var(--ground-2);
}
.finale .lede{ margin-inline:auto; }
.finale .btnrow{ justify-content:center; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); background:var(--ground-2); }
.foot__grid{ display:grid; gap:32px; padding-block:52px; }
@media (min-width:800px){ .foot__grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.foot h4{ margin:0 0 14px; font-size:10.5px; font-family:var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:400; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot a{ color:var(--ink-2); text-decoration:none; font-size:14.5px; }
.foot a:hover{ color:var(--ink); }
.foot__bar{ border-top:1px solid var(--line); padding-block:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:12.5px; color:var(--ink-3); }

/* ============================================================
   MOCKUPS
   The frame is fluid AND its contents scale with it, because
   everything inside is expressed in container-query units.
   On phones the bezel is dropped entirely — never a phone
   inside a phone.
   ============================================================ */
.phone{
  width:100%; max-width:320px; flex:none;
  background:#0A0710; border:2px solid #2C2138; border-radius:42px; padding:9px;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(248,244,242,.04);
}
.screen{
  container-type:inline-size;
  aspect-ratio:9/18.4; width:100%;
  border-radius:33px; overflow:hidden; position:relative;
  background:var(--ground-2); isolation:isolate; transform:translateZ(0);
  /* every size below derives from the frame's own width */
  --sp:  4.7cqw;
  --t-h: 11.4cqw;
  --t-b: 4.2cqw;
  --t-l: 3.3cqw;
  --t-m: 2.8cqw;
}
@media (max-width:620px){
  .phone{ max-width:none; padding:0; border:0; border-radius:18px; box-shadow:0 20px 50px -28px rgba(0,0,0,.9); }
  .screen{ border-radius:18px; aspect-ratio:9/16.4; }
}

/* camera feed */
.feed{ position:absolute; inset:0; overflow:hidden; }
.feed .face{ position:absolute; inset:0; width:100%; height:100%; }
/* The grade does two jobs: it makes the feed read as lit video rather than
   flat artwork, and it buys enough contrast for the overlay UI to stay
   legible over a bright skin tone. */
.feed__grade{
  position:absolute; inset:0;
  background:
    radial-gradient(72% 42% at 50% 4%, rgba(255,200,104,.26), transparent 66%),
    linear-gradient(to top, rgba(8,5,12,.92) 4%, rgba(8,5,12,.55) 26%, transparent 52%),
    linear-gradient(to bottom, rgba(8,5,12,.55), transparent 22%),
    rgba(20,12,26,.2);
}
.feed--cool .feed__grade{
  background:
    radial-gradient(72% 42% at 50% 4%, rgba(150,190,255,.2), transparent 66%),
    linear-gradient(to top, rgba(8,5,12,.92) 4%, rgba(8,5,12,.55) 26%, transparent 52%),
    linear-gradient(to bottom, rgba(8,5,12,.55), transparent 22%),
    rgba(14,16,30,.22);
}

/* screen UI */
.ui{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; padding:var(--sp); }
.ui__top{ display:flex; align-items:center; gap:calc(var(--sp)*.45); }
.hostchip{
  display:flex; align-items:center; gap:calc(var(--sp)*.4); min-width:0;
  background:rgba(8,5,12,.62); border:1px solid rgba(248,244,242,.14);
  padding:calc(var(--sp)*.24) calc(var(--sp)*.6) calc(var(--sp)*.24) calc(var(--sp)*.24);
  border-radius:999px;
}
.hostchip b{ font-size:var(--t-m); font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.av{ width:calc(var(--sp)*1.5); height:calc(var(--sp)*1.5); border-radius:50%; flex:none; overflow:hidden; }
.av svg{ width:100%; height:100%; display:block; }
.ui .livedot{ font-size:var(--t-m); padding:calc(var(--sp)*.2) calc(var(--sp)*.5); letter-spacing:.1em; }
.ui .livedot i{ width:calc(var(--sp)*.28); height:calc(var(--sp)*.28); }
.viewers{
  margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-m); font-weight:700;
  background:rgba(8,5,12,.62); border:1px solid rgba(248,244,242,.14);
  padding:calc(var(--sp)*.24) calc(var(--sp)*.55); border-radius:999px;
}
.vtag{
  align-self:flex-start; margin-top:calc(var(--sp)*.6);
  font-family:var(--f-mono); font-size:var(--t-m); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  background:rgba(8,5,12,.6); border:1px solid rgba(245,166,35,.3);
  padding:calc(var(--sp)*.24) calc(var(--sp)*.5); border-radius:4px; color:var(--amber-2);
}
.rail{ position:absolute; right:var(--sp); bottom:calc(var(--sp)*3.4); z-index:4; display:flex; flex-direction:column; gap:calc(var(--sp)*.5); }
.rail span{
  width:calc(var(--sp)*2); height:calc(var(--sp)*2); border-radius:50%;
  display:grid; place-items:center; font-size:var(--t-l);
  background:rgba(8,5,12,.55); border:1px solid rgba(248,244,242,.16);
}
.chat{ margin-top:auto; display:flex; flex-direction:column; gap:calc(var(--sp)*.32); padding-right:calc(var(--sp)*3); }
.msg{
  font-size:var(--t-m); line-height:1.35; width:fit-content; max-width:100%;
  background:rgba(8,5,12,.72); padding:calc(var(--sp)*.26) calc(var(--sp)*.5);
  border-radius:calc(var(--sp)*.6); animation:msgIn .4s ease both;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.msg b{ color:var(--amber-2); font-weight:700; }
.msg--join{ background:rgba(63,191,168,.16); border:1px solid rgba(63,191,168,.32); }
.msg--join b{ color:var(--data-teal); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.composer{
  margin-top:calc(var(--sp)*.5); display:flex; align-items:center;
  border:1px solid rgba(248,244,242,.16); background:rgba(8,5,12,.45);
  border-radius:999px; padding:calc(var(--sp)*.45) calc(var(--sp)*.75);
  font-size:var(--t-m); color:var(--ink-3);
}

/* PK
   The two feeds fill the TOP 55% only. Full-height halves give each side a
   1:4.3 box, and no face survives a crop that narrow — you get a nose. */
.pk{ position:absolute; inset:0; z-index:3; }
.pk__grid{ position:absolute; inset:0 0 45% 0; display:grid; grid-template-columns:1fr 1fr; }
.pk__side{ position:relative; overflow:hidden; }
.pk__below{
  position:absolute; inset:55% 0 0 0; background:var(--ground-2);
  border-top:1px solid var(--line); padding:var(--sp);
  display:flex; flex-direction:column; gap:calc(var(--sp)*.4);
}
.pk__vs{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:8;
  font-weight:800; font-size:calc(var(--sp)*2.2); font-style:italic; letter-spacing:-.06em; color:#fff;
  text-shadow:0 0 14px rgba(0,0,0,.9);
}
.pk__hud{ position:absolute; top:var(--sp); left:0; right:0; z-index:7; padding-inline:var(--sp); display:flex; flex-direction:column; gap:calc(var(--sp)*.4); }
.pk__timer{
  align-self:center; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-l); font-weight:700; letter-spacing:.06em;
  background:rgba(8,5,12,.68); border:1px solid rgba(248,244,242,.18);
  padding:calc(var(--sp)*.2) calc(var(--sp)*.65); border-radius:999px;
}
.pk__scores{
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-m); font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.pk__scores .a{ color:var(--data-rose); } .pk__scores .b{ color:var(--data-teal); }
.pk__bar{ position:relative; height:calc(var(--sp)*.62); border-radius:999px; overflow:hidden; background:var(--data-teal); }
.pk__fill{ position:absolute; inset:0 auto 0 0; width:56%; background:var(--data-rose); animation:swing 8s ease-in-out infinite; }
@keyframes swing{ 0%,100%{width:56%} 24%{width:39%} 50%{width:68%} 76%{width:47%} }
.pk__teams{ position:absolute; bottom:var(--sp); left:0; right:0; z-index:7; padding-inline:var(--sp); display:flex; justify-content:space-between; gap:calc(var(--sp)*.5); }
/* Inside the lower panel it flows at the top instead of overlapping the chat. */
.pk__below .pk__teams{ position:static; padding-inline:0; }
.team{
  display:flex; align-items:center; gap:calc(var(--sp)*.35); min-width:0;
  font-size:var(--t-m); font-weight:700;
  background:rgba(8,5,12,.6); border:1px solid rgba(248,244,242,.14);
  padding:calc(var(--sp)*.2) calc(var(--sp)*.55) calc(var(--sp)*.2) calc(var(--sp)*.2); border-radius:999px;
}
.team .av{ width:calc(var(--sp)*1.2); height:calc(var(--sp)*1.2); }
.team--plain{ padding:calc(var(--sp)*.3) calc(var(--sp)*.6); }

/* quad */
.quad{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:rgba(248,244,242,.1); }
.quad__cell{ position:relative; overflow:hidden; }
.quad__tag{
  position:absolute; left:calc(var(--sp)*.4); bottom:calc(var(--sp)*.4); z-index:4;
  font-family:var(--f-mono); font-size:var(--t-m); font-weight:700;
  background:rgba(8,5,12,.68); padding:calc(var(--sp)*.15) calc(var(--sp)*.4); border-radius:3px;
}
.quad__meter{ position:absolute; left:calc(var(--sp)*.4); right:calc(var(--sp)*.4); bottom:calc(var(--sp)*1.7); z-index:4; height:calc(var(--sp)*.32); border-radius:999px; background:rgba(248,244,242,.22); overflow:hidden; }
.quad__meter b{ display:block; height:100%; border-radius:999px; }
.quad__cell--out::after{
  content:"Eliminated"; position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:rgba(8,5,12,.8); font-family:var(--f-mono); font-size:var(--t-m);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700;
}

/* seats */
/* The host feed behind a seat grid is ambience, not content — scrim it down
   or nine small faces have to fight one enormous one. */
.seats{
  position:absolute; inset:0; z-index:3; display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--sp)*.35); padding:calc(var(--sp)*3.4) var(--sp) calc(var(--sp)*4.6);
  align-content:start; background:rgba(8,5,12,.8);
}
.seat{ aspect-ratio:1; border-radius:calc(var(--sp)*.8); position:relative; overflow:hidden; background:rgba(248,244,242,.05); border:1px solid rgba(248,244,242,.1); display:grid; place-items:center; }
.seat__fill{ position:absolute; inset:0; }
.seat__glow{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,5,12,.72), transparent 56%); }
.seat--host{ border-color:rgba(245,166,35,.6); }
.seat__n{ position:absolute; left:calc(var(--sp)*.3); bottom:calc(var(--sp)*.22); z-index:3; font-family:var(--f-mono); font-size:var(--t-m); font-weight:700; color:#fff; text-shadow:0 1px 3px #000; }
.seat__plus{ font-size:calc(var(--sp)*1.5); color:var(--ink-3); font-weight:200; }

/* wallet card — the hero anchor.
   Absolute by default (overlays the feed); flows in place when it is a
   direct child of .ui, so it can sit above the chat instead. */
.ui > .wallet{ position:static; margin:calc(var(--sp)*.55) 0 0; }
.wallet{
  position:absolute; left:var(--sp); right:var(--sp); bottom:var(--sp); z-index:6;
  border:1px solid rgba(248,244,242,.12); border-radius:calc(var(--sp)*1.5);
  background:rgba(23,16,30,.92); overflow:hidden;
}
.wallet__top{ display:flex; align-items:baseline; gap:calc(var(--sp)*.4); padding:calc(var(--sp)*.7) var(--sp) calc(var(--sp)*.4); }
.wallet__top span{ font-family:var(--f-mono); font-size:var(--t-m); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.wallet__top b{ margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:calc(var(--sp)*1.5); font-weight:700; letter-spacing:-.04em; color:var(--amber-2); }
.wallet__spark{ display:flex; align-items:flex-end; gap:calc(var(--sp)*.13); height:calc(var(--sp)*2); padding:0 var(--sp) calc(var(--sp)*.7); }
.wallet__spark i{ flex:1; background:rgba(245,166,35,.32); border-radius:2px 2px 0 0; }
.wallet__spark i:last-child{ background:var(--amber); }
.wallet__foot{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(248,244,242,.1); padding:calc(var(--sp)*.5) var(--sp);
  font-size:var(--t-m); color:var(--ink-3);
}
.wallet__foot b{ color:var(--data-teal); font-weight:700; }

/* gift moment — amber only, no rainbow of effect colours */
.gift{
  position:absolute; left:var(--sp); right:var(--sp); top:calc(var(--sp)*3.4); z-index:6;
  display:flex; align-items:center; gap:calc(var(--sp)*.5);
  padding:calc(var(--sp)*.35) calc(var(--sp)*.6) calc(var(--sp)*.35) calc(var(--sp)*.35);
  border-radius:999px; color:var(--on-amber);
  background:linear-gradient(90deg, var(--amber-2), var(--amber));
  box-shadow:0 8px 26px -10px rgba(245,166,35,.8);
  animation:giftIn 5.4s ease-in-out infinite;
}
@keyframes giftIn{
  0%,14%   { opacity:0; transform:translateX(-115%) }
  26%,78%  { opacity:1; transform:none }
  92%,100% { opacity:0; transform:translateX(-115%) }
}
.gift .av{ width:calc(var(--sp)*1.6); height:calc(var(--sp)*1.6); box-shadow:0 0 0 1.5px rgba(255,255,255,.8); }
.gift__t{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.gift__t b{ font-size:var(--t-m); font-weight:800; letter-spacing:-.02em; }
.gift__t span{ font-size:var(--t-m); font-weight:600; opacity:.72; }
.gift__amt{
  margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-m); font-weight:700; background:rgba(255,255,255,.55);
  padding:calc(var(--sp)*.12) calc(var(--sp)*.45); border-radius:999px;
}
.coins{ position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; }
.coin{
  position:absolute; bottom:-4%; width:calc(var(--sp)*.9); height:calc(var(--sp)*.9);
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #FFE9A8, var(--amber) 62%, #C97E10);
  box-shadow:0 0 8px rgba(245,166,35,.75); animation:coinUp linear infinite;
}
@keyframes coinUp{
  0%   { opacity:0; transform:translateY(0) scale(.5) rotate(0) }
  14%  { opacity:1 }
  76%  { opacity:1 }
  100% { opacity:0; transform:translateY(-360px) scale(1.1) rotate(320deg) }
}

/* ============================================================
   HERO — the page IS the design.
   No phone illustration here: on a phone the browser frame already
   is the phone. The wallet card is a real page element.
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero__light{
  position:absolute; top:-18%; left:-14%; width:92%; height:78%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 52% at 34% 24%, rgba(245,166,35,.26), transparent 70%),
    radial-gradient(38% 44% at 72% 46%, rgba(245,166,35,.10), transparent 72%);
  filter:blur(12px);
  animation:breathe 12s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ opacity:.7 } to{ opacity:1 } }
.hero > *{ position:relative; z-index:1; }

/* page-scale earnings card — the hero's anchor */
.earn{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(245,166,35,.06), transparent 60%), var(--surface);
  width:100%; max-width:440px;
}
.earn__top{ display:flex; align-items:baseline; gap:12px; padding:20px 22px 12px; }
.earn__top span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.earn__top b{
  margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(30px,7vw,40px); font-weight:700; letter-spacing:-.045em; color:var(--amber-2); line-height:1;
}
.earn__spark{ display:flex; align-items:flex-end; gap:2px; height:clamp(48px,11vw,64px); padding:0 22px 18px; }
.earn__spark i{ flex:1; background:rgba(245,166,35,.24); border-radius:2px 2px 0 0; }
.earn__spark i:last-child{ background:var(--amber); }
.earn__foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:1px solid var(--line); padding:14px 22px;
  font-size:13px; color:var(--ink-3);
}
.earn__foot b{ color:var(--data-teal); font-weight:700; }
.earn__live{
  display:flex; align-items:center; gap:9px; padding:13px 22px;
  border-top:1px solid var(--line); background:rgba(248,244,242,.02);
  font-size:13px; color:var(--ink-2);
}
.earn__live .dot{ width:6px; height:6px; border-radius:50%; background:var(--data-rose); flex:none; animation:blip 1.7s ease-in-out infinite; }
.earn__live b{ color:var(--ink); font-weight:700; }

/* Gradient identities. Legible at 20px, never look like clip-art, and
   they carry no implied face — so nothing can render "wrong". */
.grad-1{ background:conic-gradient(from 210deg,#6B4A7A,#B07D5E,#E8C88A,#6B4A7A); }
.grad-2{ background:conic-gradient(from 40deg,#245F57,#3FBFA8,#1B3F49,#245F57); }
.grad-3{ background:conic-gradient(from 130deg,#8A5A24,#F5A623,#5B3E7A,#8A5A24); }
.grad-4{ background:conic-gradient(from 300deg,#7C3B63,#F2637F,#3D2A52,#7C3B63); }
.grad-5{ background:conic-gradient(from 80deg,#1F5F86,#5AA9D6,#24304A,#1F5F86); }
.ga{ border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }

/* ============================================================
   ABSTRACT FEED
   A lit room shot slightly out of focus. Sells "live camera in the
   dark" without asking vector art to be photoreal, and leaves the
   product UI as the thing you actually look at.
   ============================================================ */
.feed--abs{
  position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(58% 34% at 32% 16%, rgba(255,200,104,.50), transparent 68%),
    radial-gradient(44% 30% at 76% 40%, rgba(245,166,35,.22), transparent 72%),
    radial-gradient(70% 46% at 50% 104%, rgba(10,6,14,.94), transparent 68%),
    linear-gradient(162deg,#2E1E38 0%,#1B1226 46%,#0E0916 100%);
}
.feed--abs.is-cool{
  background:
    radial-gradient(58% 34% at 32% 16%, rgba(150,205,255,.42), transparent 68%),
    radial-gradient(44% 30% at 76% 40%, rgba(63,191,168,.22), transparent 72%),
    radial-gradient(70% 46% at 50% 104%, rgba(6,10,18,.94), transparent 68%),
    linear-gradient(162deg,#1B2E3A 0%,#131E2A 46%,#080D16 100%);
}
.bokeh{ position:absolute; inset:0; overflow:hidden; }
.bokeh i{
  position:absolute; border-radius:50%; display:block;
  background:radial-gradient(circle at 38% 34%, rgba(255,226,168,.62), rgba(245,166,35,.16) 62%, transparent 72%);
  filter:blur(calc(var(--sp)*.32));
  animation:drift 16s ease-in-out infinite alternate;
}
.is-cool .bokeh i{
  background:radial-gradient(circle at 38% 34%, rgba(198,232,255,.5), rgba(63,191,168,.14) 62%, transparent 72%);
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(4%,-5%,0) scale(1.1) }
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line); background:var(--ground-2); padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; gap:32px; width:max-content; animation:slide 38s linear infinite; }
.marquee__track span{
  display:flex; align-items:center; gap:32px; white-space:nowrap;
  font-weight:700; font-size:clamp(15px,3.4vw,19px); letter-spacing:-.03em; color:var(--ink-2);
}
.marquee__track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- reveal ----------
   Gated on .js so a failed or blocked script can never leave the page blank.
   Without JS every .rv element simply renders, visible, in place. */
.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease; }
.js .rv.in{ opacity:1; transform:none; }

/* Animations inside mockups only run while the mockup is on screen. */
.screen:not(.live-on) *{ animation-play-state:paused !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .rv{ opacity:1; transform:none; }
}