/* ============================================================
   unify — launch landing page
   ============================================================ */

/* Active site fonts — self-hosted (assets/fonts/): Bricolage Grotesque (display) +
   Hanken Grotesk (body), variable woff2 with ttf fallback. Mono = system stack (--mono). */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/BricolageGrotesque-VariableFont.woff2') format('woff2'),
      url('assets/fonts/BricolageGrotesque-VariableFont.ttf') format('truetype');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('assets/fonts/HankenGrotesk-VariableFont.woff2') format('woff2'),
      url('assets/fonts/HankenGrotesk-VariableFont.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Self-hosted Mohol + Outfit (earlier brand pairing) — kept available but not currently
   applied; the active display/body fonts are set on --font-display / --font-body below. */
@font-face{
  font-family:'Mohol';
  src:url('assets/fonts/Mohol-Bold.woff2') format('woff2'),
      url('assets/fonts/Mohol-Bold.woff') format('woff'),
      url('assets/fonts/Mohol-Bold.otf') format('opentype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Outfit';
  src:url('assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --violet:#7061f0;
  --violet-deep:#5a4de0;
  --violet-ink:#4a3fb0;
  --violet-soft:#8a78f0; /* light violet — feature subtitles; echoes the tick-circle lavender */
  --amber:#f6a723;
  --amber-ink:#bd640d;
  --ink:#16133a;
  --ink-60:rgba(22,19,58,.62);
  --ink-45:rgba(22,19,58,.46);
  --cream:#f8f7ff;
  --paper:#f8f7ff;
  --butter:#b8b0f8;
  --line:rgba(112,97,240,.15);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  overflow-x:hidden;
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-transform:lowercase;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
/* form controls don't inherit text-transform by default — force them to (keeps everything lowercase) */
button,input,select,textarea,::placeholder{ text-transform:inherit; }
::selection{background:rgba(112,97,238,.22);}

/* ---------- shared atoms ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:lowercase; color:var(--violet-ink);
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--violet); }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
.sec-h{ font-size:clamp(30px,4.4vw,52px); }
.sec-sub{ margin-top:16px; font-size:clamp(16px,1.6vw,19px); color:var(--ink-60); font-weight:500; max-width:56ch; text-wrap:pretty; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; height:54px; padding:0 28px; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:.1px;
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease, color .2s;
  white-space:nowrap;
}
.btn--primary{ background:var(--violet); color:#fff; box-shadow:0 14px 30px -10px rgba(106,77,240,.62), 0 2px 0 rgba(255,255,255,.25) inset; }
.btn--primary:hover{ background:var(--violet-deep); transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(106,77,240,.72); }
.btn--primary:active{ transform:translateY(0) scale(.985); }
.btn--ghost{ background:rgba(255,255,255,.7); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px rgba(112,97,238,.4); }
.btn--sm{ height:46px; padding:0 22px; font-size:15.5px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:74px;
  display:flex; align-items:center;
  transition:background .3s ease, box-shadow .3s ease, height .3s ease, backdrop-filter .3s;
}
.nav.is-stuck{
  height:64px;
  background:rgba(248,247,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(38,26,78,.5);
}
.nav__in{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:24px; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:30px; margin-left:14px; }
.nav__links a{ font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--ink); opacity:.78; transition:opacity .18s; }
.nav__links a:hover{ opacity:1; }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav__burger{ display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:22px; height:2.4px; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .2s; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:49; background:rgba(248,247,255,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.mobilemenu.is-open{ opacity:1; pointer-events:auto; }
.mobilemenu a{ font-family:var(--font-display); font-weight:600; font-size:30px; padding:12px; color:var(--ink); }
.mobilemenu .btn{ margin-top:18px; }

/* ============================================================
   HERO — floating product cards + centred content (no scroll-jack)
   ============================================================ */
/* the hero is a sticky stage that pins while the scroll drives the transition.
   height = hero (100vh) + the scroll travel that drives the transition. Trimmed so the
   pin releases just as the notifications finish landing (see ANIM_END in app.js) instead
   of leaving a frozen tail of scroll before the next section. */
.herotrack{ position:relative; height:185vh; }
.hero{
  position:sticky; top:0; height:var(--appvh,100svh); min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:84px 20px;
  background:
    radial-gradient(56% 50% at 12% 12%, rgba(112,97,238,.20) 0%, rgba(112,97,238,0) 60%),
    radial-gradient(52% 48% at 90% 86%, rgba(118,103,240,.18) 0%, rgba(118,103,240,0) 62%),
    radial-gradient(70% 60% at 84% 8%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(80% 70% at 16% 92%, rgba(238,240,255,.92) 0%, rgba(238,240,255,0) 72%),
    var(--paper);
}
/* world holds the logo / headline / CTA / floating cards — recedes on scroll */
.hero__world{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  transform-origin:50% 46%; will-change:transform,opacity;
}
.hero__glow{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(70vmin,720px); height:min(70vmin,720px); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.78) 0%, rgba(238,240,255,.40) 36%, rgba(238,240,255,0) 70%);
  filter:blur(8px); pointer-events:none; z-index:1;
}
.field{ position:absolute; inset:0; z-index:2; pointer-events:none; transform-origin:50% 50%; will-change:transform; }
/* orbit card = a real app listing card in miniature: photo on top, white footer with
   the item's condition + a violet price, plus the app's partner / %-off / ticket badges */
.card{
  position:absolute; left:50%; top:50%;
  width:clamp(64px, calc(var(--w) * 1.06vmin), 138px);
  aspect-ratio:var(--ar,1);
  transform:translate(-50%,-50%);
  border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
  border:1px solid rgba(40,28,90,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 26px -12px rgba(38,26,78,.40), 0 2px 6px rgba(38,26,78,.10), 0 0 0 1px rgba(38,26,78,.04);
  will-change:transform;
}
/* ---- ticket cards: a real torn ticket, not just a rounded rectangle ----
   photo 'face' on top, a white perforation, then a SOLID VIOLET tear-off stub
   with two punched edge notches — reads as a ticket even at tiny orbit size. */
.card--ticket{
  background:transparent; border:0; overflow:visible;
  box-shadow:0 16px 24px -13px rgba(74,63,176,.55), 0 3px 8px -4px rgba(38,26,78,.22);
}
.tkt{
  --stub:clamp(16px,2.8vmin,25px);      /* violet tear-off stub height */
  --notch:clamp(5.5px,1.08vmin,10px);   /* edge punch-out radius       */
  position:relative; flex:1 1 auto; min-height:0; container-type:inline-size;
  display:flex; flex-direction:column;
  background:#fff; border-radius:13px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(112,97,238,.22) inset;
  /* punch a semicircle out of each side, centred on the tear line */
  -webkit-mask:
    radial-gradient(circle calc(var(--notch) + .8px) at left  calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .8px)),
    radial-gradient(circle calc(var(--notch) + .8px) at right calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .8px));
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle calc(var(--notch) + .8px) at left  calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .8px)),
    radial-gradient(circle calc(var(--notch) + .8px) at right calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .8px));
  mask-composite:intersect;
}
/* bold dashed perforation sitting on the seam between face and stub */
.tkt__perf{
  position:absolute; left:calc(var(--notch) + 2px); right:calc(var(--notch) + 2px);
  bottom:calc(var(--stub) - 1px); height:2px; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 3px, transparent 3px 6.5px);
}
/* the stub: a solid violet tear-off so tickets never read as white-footer items.
   NOTE: needs the .card--ticket prefix to outrank the base .card__foot (same class
   specificity, defined later) which would otherwise force the stub white. */
.card--ticket .card__foot--tkt{
  height:var(--stub); padding:0 .7em 0 .5em; gap:.3em;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
}
.card--ticket .card__cond--tkt{ color:rgba(255,255,255,.92); font-weight:600; }
.card--ticket .card__price{ color:#fff; }
.tkt__qr{ flex:none; width:1.3em; height:1.3em; color:#fff; opacity:.95; }
/* the smallest orbit tickets have no room for both code + label — drop the code, keep the label */
@container (max-width:96px){ .tkt__qr{ display:none; } }
.card__ph{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--g); }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__sheen{ position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%); }
.card__bdg{
  position:absolute; top:.42em; left:.42em; z-index:3;
  display:inline-flex; align-items:center; gap:.28em;
  font-family:var(--font-display); font-weight:700; font-size:clamp(6px,.92vmin,9.5px); line-height:1;
  padding:.34em .52em; border-radius:999px; color:#fff; white-space:nowrap;
  box-shadow:0 2px 6px -1px rgba(20,14,55,.4);
}
.card__bdg svg{ width:1.05em; height:1.05em; }
.card__bdg--partner{ background:var(--violet); }
.card__bdg--off{ background:#e5484d; }
.card__bdg--ticket{ background:#5b46c9; }
.card__foot{
  flex:none; display:flex; align-items:center; gap:.4em;
  padding:.42em .55em; background:#fff;
  font-size:clamp(7px,1.12vmin,12px);
}
.card__cond{ flex:1; min-width:0; font-family:var(--font-body); font-weight:600; font-size:.82em; color:#1f9e74; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__cond--tkt{ color:var(--violet-ink); }
.card__price{ flex:none; font-family:var(--font-display); font-weight:700; font-size:1em; color:var(--violet); letter-spacing:-.01em; }
.field{ will-change:translate,transform; transition:translate .9s cubic-bezier(.2,.8,.2,1); }
/* Orbit cards retired — the hero backdrop below fills the space instead. Restore: remove this rule. */
#field{ display:none; }

/* ===== hero backdrop — quiet concentric halo where the orbit cards used to be =====
   Hairline brand-violet rings centred behind the headline; a calm nod to the retired orbit.
   Sits behind everything (world z3, notifications z7) and ignores pointer events. */
.herobg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:repeating-radial-gradient(circle at 50% 44%, transparent 0 84px, rgba(112,97,240,.075) 84px 86px);
  -webkit-mask-image:radial-gradient(circle at 50% 44%, transparent 9%, #000 30%, #000 56%, transparent 84%);
          mask-image:radial-gradient(circle at 50% 44%, transparent 9%, #000 30%, #000 56%, transparent 84%);
}

.hero__inner{ position:relative; z-index:5; max-width:760px; display:flex; flex-direction:column; align-items:center; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 12px; border-radius:999px;
  background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1.4px rgba(112,97,238,.2), 0 8px 22px -14px rgba(38,26,78,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--violet-ink);
}
.hero__badge .dot{ width:9px; height:9px; border-radius:50%; background:#27c08a; box-shadow:0 0 0 0 rgba(39,192,138,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(39,192,138,.5);} 70%{box-shadow:0 0 0 8px rgba(39,192,138,0);} 100%{box-shadow:0 0 0 0 rgba(39,192,138,0);} }
.hero__logo{ width:clamp(200px, 28vw, 320px); height:auto; margin-top:18px; filter:drop-shadow(0 16px 32px rgba(106,77,240,.22)); }
.hero h1{ margin-top:18px; font-size:clamp(34px,6vw,68px); }
.hero h1 .accent{ color:var(--violet); }
.hero__tag{ margin-top:20px; font-size:clamp(17px,2.2vw,22px); color:var(--ink-60); font-weight:500; max-width:30ch; text-wrap:balance; }
.hero__cta{ margin-top:26px; }
.hero__sub{ margin-top:15px; display:flex; align-items:center; gap:12px; }
.avatars{ display:flex; }
.avatars span{ width:34px; height:34px; border-radius:50%; border:2.4px solid var(--cream); margin-left:-11px; box-shadow:0 2px 6px rgba(38,26,78,.2); }
.avatars span:first-child{ margin-left:0; }
.hero__subtxt{ font-family:var(--font-display); font-weight:500; font-size:14.5px; color:var(--ink-45); }
.hero__subtxt b{ color:var(--ink); font-weight:600; }

.scrollcue{ display:none; }
.scrollcue svg{ width:18px; height:18px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.5;} 50%{transform:translateY(5px);opacity:1;} }

/* ---------- inline waitlist CTA (used in hero + final) ---------- */
.cta{ position:relative; height:54px; display:flex; align-items:center; }
.cta__form{ display:none; align-items:center; gap:6px; height:54px; padding:6px 6px 6px 22px; border-radius:999px; background:#fff; border:1px solid rgba(112,97,238,.22); box-shadow:0 14px 34px -14px rgba(70,58,110,.4); width:min(420px,88vw); }
.cta.is-open .btn{ display:none; }
.cta.is-open .cta__form{ display:flex; }
.cta__form input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--ink); }
.cta__form input::placeholder{ color:var(--ink-45); font-weight:500; }
.cta__send{ flex:none; cursor:pointer; border:none; width:42px; height:42px; border-radius:50%; background:var(--violet); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .15s; }
.cta__send:hover{ background:var(--violet-deep); } .cta__send:active{ transform:scale(.92); }
.cta__done{ display:none; align-items:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1.4px rgba(112,97,238,.2); font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.cta.is-done .btn,.cta.is-done .cta__form{ display:none; }
.cta.is-done .cta__done{ display:flex; }
.cta__check{ width:24px; height:24px; border-radius:50%; background:#27c08a; display:flex; align-items:center; justify-content:center; flex:none; }
.cta__check svg{ width:13px; height:13px; }

/* ============================================================
   MARQUEE / category strip
   ============================================================ */
.strip{ border-block:1px solid var(--line); background:rgba(255,255,255,.4); overflow:hidden; padding:18px 0; }
.strip__track{ display:flex; gap:48px; width:max-content; animation:marq 32s linear infinite; }
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__item{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); opacity:.62; white-space:nowrap; }
.strip__item .ic{ width:9px; height:9px; border-radius:50%; background:var(--violet); opacity:.65; }
@keyframes marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   NOTIFICATIONS — shared card, hero ring + scroll-driven drum
   ============================================================ */
.noti{
  position:relative;
  display:flex; gap:14px; align-items:center;
  width:min(540px,92vw);
  padding:15px 17px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  backdrop-filter:blur(20px) saturate(185%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -10px 22px -16px rgba(255,255,255,.6) inset,
    0 22px 48px -18px rgba(20,14,55,.42);
  color:var(--ink);
  transition:box-shadow .35s ease;
}
/* once fanned open, the cards no longer overlap — a tight, even shadow keeps each
   one clean instead of the heavy bottom shadow spilling onto the card below it */
.notistack.is-expanded .noti{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -10px 22px -16px rgba(255,255,255,.6) inset,
    0 8px 22px -14px rgba(20,14,55,.26);
}
.noti::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
.noti__icon{ flex:none; width:46px; height:46px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(20,14,55,.16); }
.noti__icon img{ width:30px; height:auto; }
.noti__body{ flex:1; min-width:0; text-align:left; }
.noti__row{ display:flex; align-items:baseline; gap:8px; }
.noti__app{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ink-45); white-space:nowrap; text-transform:uppercase; }
.noti__app span{ font-weight:700; color:var(--amber-ink); margin-left:4px; }
.noti__time{ margin-left:auto; font-size:13px; font-weight:600; color:var(--ink-45); white-space:nowrap; }
.noti__title{ margin-top:4px; font-family:var(--font-display); font-weight:700; font-size:16.5px; color:#1a1538; line-height:1.22; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noti__text{ margin-top:2px; font-size:14.5px; font-weight:500; color:var(--ink-60); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noti__amt{ color:var(--violet); font-weight:800; }
.noti__thumb{ flex:none; width:50px; height:50px; border-radius:13px; background:var(--c,linear-gradient(150deg,#8f7ff4,#5b46c9)); background-size:cover; box-shadow:0 5px 12px -4px rgba(70,50,160,.5); }
.noti__thumb--avatar{ display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#8f7ff4,#5b46c9); color:#fff; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em; }

/* notification stack — buzzes at rest, fans open + rises to centre on scroll */
.notistack{
  position:absolute; left:50%; top:50%; z-index:7;
  width:min(540px,92vw);
  transform:translate(-50%,-50%);
  will-change:transform,opacity; pointer-events:none;
}
.notistack.is-live{ pointer-events:auto; cursor:pointer; }
.notistack__shake{ position:relative; width:100%; will-change:transform; }
.notistack .noti{
  position:absolute; left:0; right:0; top:50%; width:auto;
  transform:translateY(-50%); transform-origin:50% 50%;
  will-change:transform,opacity;
}
/* lead card sits in its own buzz layer so only IT vibrates (not the deck behind) */
.notistack .noti-buzz{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); transform-origin:50% 50%;
  will-change:transform;
}
.notistack .noti-buzz > .noti{ position:relative; left:auto; right:auto; top:auto; transform:none; }
.noti--lead{ transform-origin:50% 50%; }
.notistack__shake.is-ringing .noti--lead{ animation:ring 4.2s cubic-bezier(.36,.07,.19,.97) infinite; }
.noti--lead::after{ content:""; position:absolute; inset:-2px; border-radius:24px; box-shadow:0 0 0 0 rgba(112,97,238,0); pointer-events:none; }
.notistack__shake.is-ringing .noti--lead::after{ animation:ringpulse 4.2s ease-out infinite; }
@keyframes ring{
  0%,76%,100%{ transform:translateX(0) rotate(0deg); }
  78%{ transform:translate(-4px,0) rotate(-1.5deg); }
  80%{ transform:translate(4px,0) rotate(1.5deg); }
  82%{ transform:translate(-4px,0) rotate(-1.3deg); }
  84%{ transform:translate(3px,0) rotate(1.1deg); }
  86%{ transform:translate(-3px,0) rotate(-.8deg); }
  88%{ transform:translate(2px,0) rotate(.5deg); }
  90%{ transform:translateX(0) rotate(0deg); }
}
@keyframes ringpulse{
  0%,74%,100%{ box-shadow:0 0 0 0 rgba(112,97,238,0); }
  78%{ box-shadow:0 0 0 0 rgba(112,97,238,.45); }
  90%{ box-shadow:0 0 0 16px rgba(112,97,238,0); }
}

/* drum — removed */
@media (max-width:560px){
  .noti__text{ font-size:14.5px; }
}
/* very short screens: drop the text cue — the buzzing card already invites the scroll */
@media (max-height:700px){ .scrollcue{ display:none; } }


/* ============================================================
   SECTIONS — generic
   ============================================================ */
section{ position:relative; }
.section{ padding:clamp(80px,11vw,140px) 0; }
.section--alt{ background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.5)); }
.section__head{ max-width:680px; }
.section__head.center{ margin:0 auto; text-align:center; }
.section__head.center .sec-sub{ margin-left:auto; margin-right:auto; }

/* ============================================================
   FEATURES — alternating phone + copy
   ============================================================ */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.feature + .feature{ margin-top:clamp(90px,12vw,150px); }
.feature--flip .feature__media{ order:2; }
/* feature title — big warm secondary-colour label (replaces the old rounded icon card) */
.feature__copy .icontag{
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,42px);
  letter-spacing:.01em; text-transform:lowercase; color:var(--amber-ink);
}
.feature__copy h3{ margin-top:12px; font-size:clamp(26px,3.2vw,40px); color:var(--violet-soft); }
.feature__copy p{ margin-top:16px; font-size:clamp(16px,1.55vw,18.5px); color:var(--ink-60); font-weight:500; max-width:46ch; text-wrap:pretty; }
.feature__list{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.feature__list li{ list-style:none; display:flex; align-items:center; gap:12px; font-weight:600; font-size:16px; color:var(--ink); }
.feature__list .tick{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(112,97,238,.12); display:flex; align-items:center; justify-content:center; }
.feature__list .tick svg{ width:13px; height:13px; }

.feature__media{ display:flex; align-items:center; justify-content:center; position:relative; }
.feature__media::before{ content:''; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(112,97,238,.16), rgba(112,97,238,0) 68%); filter:blur(8px); }

/* ---------- phone frame ---------- */
.phone{
  --ph:min(560px,72vh); --pw:calc(var(--ph)*0.49);
  position:relative; width:var(--pw); height:var(--ph);
  filter:drop-shadow(0 44px 70px rgba(38,26,78,.34)) drop-shadow(0 14px 28px rgba(38,26,78,.18));
}
.phone__screen{ position:absolute; left:5.9%; right:5.9%; top:2.6%; bottom:2.6%; border-radius:12%/5.6%; overflow:hidden; background:#f7f6fd; container-type:inline-size; }
.phone__island{ position:absolute; top:2.5%; left:50%; transform:translateX(-50%); width:30%; height:3.3%; min-height:15px; background:#000; border-radius:999px; z-index:9; }
.phone__frame{ position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }
/* real captured app screen, filling the phone cutout under the frame bezel */
.phone__shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; background:#f7f6fd; }
/* roadmap features show the app's real "coming soon" screen + a marketing sticker */
.phone__soon{
  position:absolute; z-index:8; top:6%; right:-5%;
  font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:.01em;
  color:#fff; background:linear-gradient(150deg,#7c6cf2,#5b46c9); padding:9px 17px; border-radius:999px;
  box-shadow:0 14px 28px -8px rgba(91,70,201,.6), inset 0 1px 0 rgba(255,255,255,.25); white-space:nowrap;
}
.phone--soon .phone__shot{ filter:saturate(.98); }

/* ---------- storage: hand-drawn unify-van animation (16:9 card) ---------- */
.feature__media--scene::before{ width:96%; }
.scene-card{
  position:relative; width:100%; max-width:580px; aspect-ratio:16/9;
  border-radius:26px; overflow:hidden; background:#f4f1e9;
  box-shadow:0 44px 70px -34px rgba(38,26,78,.42), 0 10px 26px -12px rgba(38,26,78,.18);
  outline:1px solid rgba(112,97,238,.16); outline-offset:-1px;
}
.scene-card__anim{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; pointer-events:none; }
.scene-card .phone__soon{ top:-13px; right:-10px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ position:relative; background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:24px; padding:34px 30px 30px; }
.step__n{ font-family:var(--mono); font-weight:700; font-size:14px; color:var(--violet); letter-spacing:.1em; }
.step__icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-top:14px; background:rgba(112,97,238,.1); }
.step__icon svg{ width:28px; height:28px; stroke:var(--violet-deep); }
.step h3{ margin-top:20px; font-size:23px; }
.step p{ margin-top:10px; font-size:16px; color:var(--ink-60); font-weight:500; text-wrap:pretty; }
.step__line{ display:none; }
.steps .step:last-child .step__line{ display:none; }

/* ============================================================
   STATS / waitlist band
   ============================================================ */
.band{
  position:relative; overflow:hidden; border-radius:36px; padding:clamp(44px,6vw,72px) clamp(28px,5vw,64px);
  background:linear-gradient(135deg,#7565f0,#5b46c9 60%,#4a3aa8);
  color:#fff; box-shadow:0 40px 80px -36px rgba(70,50,160,.7);
}
.band::after{ content:''; position:absolute; right:-10%; top:-40%; width:60%; height:180%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); }
.band__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.stat__n{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4.6vw,56px); line-height:1; letter-spacing:-.02em; }
.stat__l{ margin-top:10px; font-size:15.5px; font-weight:600; opacity:.82; }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.count{ display:flex; gap:clamp(12px,2.2vw,26px); margin-top:42px; flex-wrap:wrap; }
.count__cell{ flex:1; min-width:120px; background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:22px; padding:26px 18px; text-align:center; }
.count__n{ font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6vw,68px); line-height:1; color:var(--violet-deep); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.count__l{ margin-top:10px; font-family:var(--font-display); font-weight:600; font-size:13px; text-transform:lowercase; letter-spacing:.12em; color:var(--ink-45); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:50px; max-width:820px; }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{ width:100%; cursor:pointer; background:none; border:none; text-align:left; display:flex; align-items:center; gap:20px; padding:26px 4px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,22px); color:var(--ink); }
.qa__q .pm{ margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; background:rgba(112,97,238,.1); position:relative; transition:background .2s; }
.qa__q .pm::before,.qa__q .pm::after{ content:''; position:absolute; left:50%; top:50%; width:13px; height:2.4px; border-radius:2px; background:var(--violet-deep); transform:translate(-50%,-50%); transition:transform .25s; }
.qa__q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.qa.is-open .qa__q .pm::after{ transform:translate(-50%,-50%) rotate(0); }
.qa.is-open .qa__q .pm{ background:var(--violet); }
.qa.is-open .qa__q .pm::before,.qa.is-open .qa__q .pm::after{ background:#fff; }
.qa__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.qa__a p{ padding:0 4px 26px; font-size:17px; line-height:1.6; color:var(--ink-60); font-weight:500; max-width:64ch; text-wrap:pretty; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ position:relative; text-align:center; padding:clamp(90px,13vw,160px) 20px; overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(112,97,238,.2), transparent 64%),
    radial-gradient(50% 60% at 18% 100%, rgba(112,97,240,.16), transparent 66%),
    var(--paper);
  border-top:1px solid var(--line);
}
.final h2{ font-size:clamp(36px,6vw,72px); max-width:16ch; margin:0 auto; }
.final .hero__tag{ margin:20px auto 0; }
.final .cta{ margin:36px auto 0; justify-content:center; }
.final__badges{ margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.storebadge{ display:inline-flex; align-items:center; gap:11px; height:56px; padding:0 22px; border-radius:16px; background:var(--ink); color:#fff; }
.storebadge svg{ width:24px; height:24px; flex:none; }
.storebadge .sb-s{ font-size:11px; opacity:.72; line-height:1; font-weight:600; }
.storebadge .sb-b{ font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.1; }
.storebadge--soon{ opacity:.55; }
.storebadge--soon .sb-b{ font-size:15px; }
/* outlined store badges */
.appbadge{
  display:inline-flex; align-items:center; gap:11px; height:58px; padding:0 20px;
  border-radius:14px; background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.appbadge:hover{ transform:translateY(-2px); background:var(--ink); color:#fff; }
.appbadge:hover .appbadge__ico{ fill:#fff; }
.appbadge__ico{ width:27px; height:27px; flex:none; }
.appbadge__txt{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1; }
.appbadge__s{ font-size:11px; font-weight:600; opacity:.82; letter-spacing:.01em; }
.appbadge__b{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.12; margin-top:2px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:72px 0 36px; }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer__logo img{ height:30px; filter:brightness(0) invert(1); opacity:.95; }
.footer__bl{ margin-top:18px; font-size:15px; max-width:30ch; line-height:1.6; }
.footer__soc{ margin-top:22px; display:flex; gap:12px; }
.footer__soc a{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.footer__soc a:hover{ background:var(--violet); transform:translateY(-2px); }
.footer__soc svg{ width:19px; height:19px; fill:#fff; }
.footer__col h4{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:lowercase; color:#fff; }
.footer__col a{ display:block; margin-top:14px; font-size:15.5px; opacity:.72; transition:opacity .18s; }
.footer__col a:hover{ opacity:1; }
.footer__bot{ margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:14px; opacity:.6; flex-wrap:wrap; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__right .btn--ghost{ display:none; }
  .feature{ grid-template-columns:1fr; gap:40px; }
  .feature--flip .feature__media{ order:0; }
  .feature__media{ order:-1; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:34px; }
  .footer__logo{ grid-column:1/-1; }
}
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none; }
  .band__grid{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .card[data-edge="side"]{ display:none; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .footer__top{ grid-template-columns:1fr; }
  .band{ border-radius:26px; }
  .count__cell{ min-width:calc(50% - 8px); }
  /* stack the social proof so the avatars sit centred above the line
     instead of getting shoved to the edge when the text wraps */
  .hero__sub{ flex-direction:column; gap:10px; }
  .avatars{ justify-content:center; }
  .hero__subtxt{ text-align:center; max-width:26ch; text-wrap:balance; }
}
@media (prefers-reduced-motion: reduce){
  .card,.hero__badge .dot{ animation:none; }
  .strip__track{ animation:none; }
  .partnermarq{ animation:none; }
  .notistack__shake.is-ringing .noti--lead, .noti--lead::after{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partnerwall{
  margin-top:clamp(48px,7vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:980px; margin-left:auto; margin-right:auto;
}
.partner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:24px;
  padding:40px 28px; transition:transform .2s ease, box-shadow .2s ease;
}
.partner__logo{
  width:86px; height:86px; border-radius:22px; position:relative; flex:none;
  background:repeating-linear-gradient(45deg, rgba(112,97,238,.12) 0 9px, rgba(112,97,238,.04) 9px 18px);
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center;
}
.partner__logo::after{ content:attr(data-ph); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--violet-ink); opacity:.7; }
.partner__name{ margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); text-wrap:balance; }
.partner__meta{ margin-top:6px; font-size:14px; font-weight:600; color:var(--ink-45); }
.partner--cta{ border-style:dashed; border-color:rgba(112,97,238,.42); background:rgba(112,97,238,.05); }
.partner--cta:hover{ transform:translateY(-3px); box-shadow:0 18px 42px -22px rgba(106,77,240,.5); }
.partner__plus{
  width:86px; height:86px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:400; font-size:46px; line-height:1; color:var(--violet);
  background:rgba(112,97,238,.1);
}
.partner--cta .partner__meta{ color:var(--violet-ink); }
@media (max-width:760px){
  .partnerwall{ grid-template-columns:1fr; max-width:420px; }
}

/* ---- partner logo marquee ---- */
.partnermarq-wrap{
  margin-top:clamp(44px,6vw,64px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.partnermarq{ display:flex; align-items:center; gap:clamp(48px,6vw,84px); width:max-content; padding:8px 13px; animation:marq 40s linear infinite; animation-play-state:paused; }
/* hold on the opening frame (real logos leading, unis centred) until the strip scrolls into view, so it never appears mid-cycle on empty slots */
.partnermarq-wrap.in .partnermarq{ animation-play-state:running; }
.partnermarq-wrap.in:hover .partnermarq{ animation-play-state:paused; }
/* real logos float free — no box, just the transparent PNG, nice and large */
.plogo{ flex:none; height:150px; display:flex; align-items:center; justify-content:center; }
.plogo img{ height:122px; width:auto; max-width:none; object-fit:contain; display:block; }
/* placeholder + reserved slots keep a visible card so they read as "coming soon" */
.plogo--named,.plogo--empty{ width:232px; height:128px; border-radius:22px; padding:18px; text-align:center; }
.plogo--named{ flex-direction:column; gap:11px; background:rgba(255,255,255,.72); border:1px solid var(--line); box-shadow:0 14px 30px -20px rgba(38,26,78,.34), inset 0 1px 0 rgba(255,255,255,.7); }
.plogo__crest{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:repeating-linear-gradient(45deg, rgba(112,97,238,.14) 0 7px, rgba(112,97,238,.04) 7px 14px);
  box-shadow:inset 0 0 0 1px var(--line);
}
.plogo__name{ font-family:var(--font-display); font-weight:600; font-size:14px; line-height:1.2; color:var(--ink-60); text-wrap:balance; }
.plogo--empty{ background:rgba(255,255,255,.4); border:1px dashed rgba(38,26,78,.18); }
.plogo__label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-45); opacity:.8; }
@media (max-width:560px){ .plogo{ height:116px; } .plogo img{ height:92px; } .plogo--named,.plogo--empty{ width:188px; height:104px; } }

/* ---- partners page ---- */
.subpagetop{ padding:calc(74px + clamp(54px,9vw,96px)) 0 clamp(8px,3vw,24px); }
.subpagehead{ max-width:780px; }
.subpagehead .sec-h{ margin-top:18px; }

.pcards{ margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px); }
.pcard{
  display:flex; flex-direction:column; text-align:left;
  background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:26px;
  padding:clamp(26px,3vw,38px);
  box-shadow:0 18px 44px -30px rgba(38,26,78,.4);
  transition:transform .22s ease, box-shadow .22s ease;
}
.pcard:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -28px rgba(106,77,240,.46); }
.pcard__top{ display:flex; align-items:center; gap:20px; }
.pcard__logo{
  width:108px; height:108px; flex:none; border-radius:22px; background:#fff; padding:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -14px rgba(38,26,78,.32), inset 0 0 0 1px var(--line);
}
.pcard__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.pcard__head{ min-width:0; }
.pcard__chip{
  display:inline-block; margin-bottom:9px;
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:lowercase;
  color:var(--violet-ink); background:rgba(112,97,238,.1); padding:5px 12px; border-radius:999px;
}
.pcard__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.4vw,26px); color:var(--ink); line-height:1.08; text-wrap:balance; }
.pcard__offer{ margin-top:20px; font-size:16.5px; line-height:1.55; color:var(--ink-60); font-weight:500; text-wrap:pretty; }
.pcard__how{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.pcard__how h4{ margin:0; font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); }
.pcard__how p{ margin-top:9px; font-size:15.5px; line-height:1.5; color:var(--ink-60); font-weight:500; text-wrap:pretty; }

/* become-a-partner card spans the grid */
.pcard--join{
  grid-column:1 / -1; align-items:center; text-align:center;
  border-style:dashed; border-color:rgba(112,97,238,.42); background:rgba(112,97,238,.05);
}
.pcard--join h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,34px); color:var(--ink); text-wrap:balance; }
.pcard--join p{ margin-top:12px; max-width:54ch; font-size:17px; line-height:1.5; color:var(--ink-60); font-weight:500; text-wrap:pretty; }
.pcard--join .btn{ margin-top:26px; }

@media (max-width:820px){
  .pcards{ grid-template-columns:1fr; max-width:540px; margin-left:auto; margin-right:auto; }
}
@media (max-width:460px){
  .pcard__top{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ---- meet the team ---- */
.tcards{ margin-top:clamp(40px,5vw,60px); display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,2.2vw,26px); }
.tmember{
  flex:0 1 320px; max-width:360px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:26px;
  padding:clamp(28px,3vw,40px) clamp(22px,2.6vw,34px);
  box-shadow:0 18px 44px -30px rgba(38,26,78,.4);
  transition:transform .22s ease, box-shadow .22s ease;
}
.tmember:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -28px rgba(106,77,240,.46); }
.tmember__photo{
  width:128px; height:128px; border-radius:50%; position:relative; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#8f7ff4,#5b46c9);
  box-shadow:0 16px 32px -16px rgba(106,77,240,.6), inset 0 0 0 4px rgba(255,255,255,.55);
}
/* initials monogram shows until a real photo is dropped in (img onerror removes itself) */
.tmember__photo::after{ content:attr(data-initials); font-family:var(--font-display); font-weight:600; font-size:42px; color:#fff; letter-spacing:.02em; }
.tmember__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tmember__name{ margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:23px; color:var(--ink); text-wrap:balance; }
.tmember__role{ margin-top:6px; font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:lowercase; color:var(--violet-ink); }
.tmember__quote{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line); width:100%; }
.tmember__quote h4{ margin:0 0 10px; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); }
.tmember__quote p{ font-size:16px; line-height:1.55; color:var(--ink-60); font-weight:500; text-wrap:pretty; }
@media (max-width:560px){
  .tmember{ flex-basis:100%; max-width:420px; }
}

/* ============================================================
   BLOG
   ============================================================ */
.blogtop{ padding:calc(74px + clamp(54px,9vw,96px)) 0 clamp(28px,5vw,44px); }
.bloghead{ max-width:760px; }
.bloghead .sec-h{ margin-top:18px; }
.blogcats{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }
.blogcats button{
  cursor:pointer; border:none; font-family:var(--font-display); font-weight:600; font-size:14.5px;
  padding:10px 18px; border-radius:999px; color:var(--ink); background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.4px var(--line); transition:background .18s, color .18s, box-shadow .18s;
}
.blogcats button:hover{ box-shadow:inset 0 0 0 1.4px rgba(112,97,238,.4); }
.blogcats button.is-active{ background:var(--violet); color:#fff; box-shadow:none; }

/* ---- ad slots ---- */
.adslot{
  position:relative; width:100%; border-radius:20px; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(38,26,78,.045) 0 10px, rgba(38,26,78,.015) 10px 20px),
    rgba(255,255,255,.5);
  border:1px dashed rgba(38,26,78,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--ink-45);
}
.adslot__label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:lowercase; opacity:.75; }
.adslot__size{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink-60); }
.adslot--leaderboard{ height:124px; }
.adslot--infeed{ height:170px; grid-column:1/-1; }
@media (max-width:560px){ .adslot--leaderboard{ height:104px; } }

/* ---- featured post ---- */
.feat{
  margin-top:8px; display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:stretch;
  border-radius:28px; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(38,26,78,.4);
}
.feat__media{ position:relative; min-height:340px; background:var(--g,linear-gradient(150deg,#8f7ff4,#5b46c9)); }
.feat__media .ph{ position:absolute; left:18px; bottom:18px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.82); background:rgba(20,14,55,.32); padding:5px 10px; border-radius:999px; }
.feat__body{ padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; justify-content:center; }
.feat__cat{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--violet-ink); }
.feat__t{ font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.02em; font-size:clamp(28px,3.4vw,40px); margin-top:16px; color:var(--ink); text-wrap:balance; }
.feat__x{ margin-top:16px; font-size:17px; line-height:1.55; color:var(--ink-60); font-weight:500; max-width:46ch; text-wrap:pretty; }
.feat__meta{ margin-top:26px; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--ink-45); }
.feat__meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--ink-45); }
@media (max-width:820px){ .feat{ grid-template-columns:1fr; } .feat__media{ min-height:220px; } }

/* ---- post grid ---- */
.postgrid{ margin-top:clamp(28px,4vw,40px); display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post{ display:flex; flex-direction:column; cursor:pointer; }
.post__media{ position:relative; aspect-ratio:1.5; border-radius:18px; overflow:hidden; background:var(--g,linear-gradient(150deg,#8f7ff4,#5b46c9)); box-shadow:0 16px 30px -20px rgba(38,26,78,.4); transition:transform .22s ease; }
.post:hover .post__media{ transform:translateY(-4px); }
.post__media .ph{ position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.82); background:rgba(20,14,55,.3); padding:4px 8px; border-radius:999px; }
.post__cat{ margin-top:16px; font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.08em; color:var(--violet-ink); }
.post__t{ margin-top:9px; font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.18; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.post__x{ margin-top:9px; font-size:15px; line-height:1.5; color:var(--ink-60); font-weight:500; text-wrap:pretty; }
.post__meta{ margin-top:14px; font-size:13px; font-weight:600; color:var(--ink-45); }

/* ---- sponsored card ---- */
.post--sponsored .post__media{ box-shadow:0 16px 30px -20px rgba(38,26,78,.4), 0 0 0 1px rgba(112,97,238,.18); }
.post__spon{
  position:absolute; left:12px; top:12px; font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.06em; color:var(--violet-ink); background:rgba(255,255,255,.92);
  padding:5px 10px; border-radius:999px; box-shadow:0 4px 10px -4px rgba(38,26,78,.3);
}
.post__by{ margin-top:14px; font-size:13px; font-weight:600; color:var(--ink-45); display:flex; align-items:center; gap:7px; }
.post__by .swatch{ width:16px; height:16px; border-radius:5px; background:var(--g,linear-gradient(150deg,#8f7ff4,#5b46c9)); }
@media (max-width:880px){ .postgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .postgrid{ grid-template-columns:1fr; } }

/* ---- blog newsletter ---- */
.blognews{
  margin-top:clamp(56px,8vw,90px); position:relative; overflow:hidden; border-radius:32px;
  padding:clamp(40px,5.5vw,64px); text-align:center;
  background:linear-gradient(135deg,#7565f0,#5b46c9 60%,#4a3aa8); color:#fff;
  box-shadow:0 40px 80px -36px rgba(70,50,160,.7);
}
.blognews::after{ content:''; position:absolute; right:-8%; top:-50%; width:50%; height:200%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); }
.blognews h3{ position:relative; z-index:1; font-size:clamp(26px,3.4vw,40px); max-width:18ch; margin:0 auto; }
.blognews p{ position:relative; z-index:1; margin:16px auto 0; max-width:48ch; font-size:17px; font-weight:500; opacity:.9; }
.blognews .cta{ position:relative; z-index:1; margin:30px auto 0; justify-content:center; }
.blognews .cta__form{ border-color:transparent; }
.blognews .btn--primary{ background:#fff; color:var(--violet-ink); box-shadow:0 14px 30px -12px rgba(0,0,0,.3); }
.blognews .btn--primary:hover{ background:#fff; transform:translateY(-2px); }

/* ---- unify deals ---- */
.deals__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; }
.deals__head .sec-h{ margin-top:14px; }
.deals__head .sec-sub{ margin-top:14px; }
.deals__all{ flex:none; }
.dealgrid{ margin-top:clamp(32px,4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,24px); }
.deal{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:22px; padding:22px;
  box-shadow:0 20px 44px -30px rgba(38,26,78,.42);
  transition:transform .22s ease, box-shadow .22s ease;
}
.deal:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -28px rgba(106,77,240,.5); }
.deal__top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.deal__logo{
  width:62px; height:62px; flex:none; border-radius:16px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--line); display:flex; align-items:center; justify-content:center; padding:10px;
}
.deal__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.deal__badge{
  flex:none; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1;
  color:#fff; background:linear-gradient(135deg,#7565f0,#5b46c9); padding:10px 15px; border-radius:999px;
  box-shadow:0 12px 24px -12px rgba(106,77,240,.75);
}
.deal__meta{ margin-top:18px; display:flex; align-items:center; gap:10px; }
.deal__chip{
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:lowercase;
  color:var(--violet-ink); background:rgba(112,97,240,.1); padding:5px 11px; border-radius:999px;
}
.deal__loc{ font-size:13px; font-weight:600; color:var(--ink-45); }
.deal__t{ margin-top:13px; font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.18; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.deal__x{ margin-top:9px; font-size:14.5px; line-height:1.5; color:var(--ink-60); font-weight:500; text-wrap:pretty; flex:1 0 auto; }
.deal__foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.deal__code{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.03em; color:var(--violet-ink);
  background:rgba(112,97,240,.07); border:1px dashed rgba(112,97,240,.45); border-radius:11px; padding:8px 12px;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.deal__code:hover{ background:rgba(112,97,240,.14); border-color:rgba(112,97,240,.7); }
.deal__code svg{ width:14px; height:14px; flex:none; }
.deal__code.is-copied{ color:#1f9e74; border-color:rgba(31,158,116,.55); background:rgba(31,158,116,.1); }
.deal__terms{ font-size:11.5px; font-weight:600; line-height:1.32; color:var(--ink-45); text-align:right; }
.deals__cta{
  margin-top:clamp(20px,2.6vw,30px); display:flex; align-items:center; justify-content:space-between; gap:20px 30px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(112,97,240,.1), rgba(112,97,240,.03));
  border:1px dashed rgba(112,97,240,.4); border-radius:22px; padding:clamp(22px,3vw,30px) clamp(24px,3.4vw,38px);
}
.deals__cta h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.3vw,26px); color:var(--ink); text-wrap:balance; }
.deals__cta p{ margin-top:6px; font-size:15px; line-height:1.5; color:var(--ink-60); font-weight:500; max-width:54ch; text-wrap:pretty; }
.deals__cta .btn{ flex:none; }
@media (max-width:900px){ .dealgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dealgrid{ grid-template-columns:1fr; } .deals__cta .btn{ width:100%; } }