/* =========================================================
   bebuzz, styles.css (v4 · TalktoFont)
   Dark mode · neon cyan/magenta · big editorial type
   ========================================================= */

/* ---------- TALKTO FONT ---------- */
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-Light.ttf') format('truetype');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-Normal.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-UltraBold.ttf') format('truetype');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TalktoFont';
  src:url('assets/fonts/TalktoFont-Heavy.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:'TalktoFont','Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none}
input,textarea{font:inherit;color:inherit}

/* ---------- TOKENS ---------- */
:root{
  --bg:#06000d;
  --bg-2:#0a0218;
  --bg-3:#13062a;
  --surface:rgba(255,255,255,0.035);
  --surface-2:rgba(255,255,255,0.065);
  --surface-3:rgba(255,255,255,0.10);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.18);

  --text:#fafafa;
  --muted:#9b96b3;
  --muted-2:#6b6680;

  /* Brand from real logo: cyan + magenta glitch */
  --violet:#a855f7;
  --violet-bright:#c084fc;
  --pink:#ec4899;
  --magenta:#fe14f3;
  --cyan:#00d4fe;
  --indigo:#6366f1;
  --amber:#f59e0b;
  --good:#34d399;
  --warn:#f59e0b;

  --grad:linear-gradient(110deg,#00d4fe 0%,#c084fc 45%,#fe14f3 100%);
  --grad-soft:linear-gradient(135deg,rgba(168,85,247,0.18),rgba(254,20,243,0.10));

  --radius:18px;
  --radius-lg:28px;
  --radius-xl:36px;
  --max:1300px;
  --shadow-deep:0 30px 80px -30px rgba(0,0,0,0.6);
  --shadow-violet:0 30px 80px -20px rgba(168,85,247,0.45);
}

.container{max-width:var(--max);margin:0 auto;padding:0 28px}

h1,h2,h3,h4{font-family:'TalktoFont','Inter',sans-serif;font-weight:700;letter-spacing:-0.045em;line-height:1}
.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:grad-shimmer 9s ease-in-out infinite;
}
@keyframes grad-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- GLOBAL FX ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--grad);z-index:200;
  box-shadow:0 0 16px rgba(0,212,254,0.6);
  transition:width .1s linear;
}
.cursor-spotlight{
  position:fixed;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,0.22),transparent 60%);
  pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:opacity .3s;opacity:0;
}
body.has-spotlight .cursor-spotlight{opacity:1}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:150;
  opacity:0.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;
  /* No justify-content here. Layout is driven by:
       .nav__logo         (flex-start by default)
       .nav__links        (flex:1 + justify-content:center → fills middle, centered)
       .nav__lang + .nav__cta + .nav__menu-btn (cluster on the right naturally) */
  padding:16px 28px;
  background:transparent;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,background .4s ease,padding .3s ease,backdrop-filter .4s ease;
}
.nav.is-scrolled{
  border-color:var(--border);
  background:rgba(6,0,13,0.85);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  padding:12px 28px;
}

.nav__logo{display:inline-flex;align-items:center;gap:8px;line-height:0}
.nav__logo-wordmark{
  height:48px;width:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(0,212,254,0.30));
  user-select:none;
  transition:transform .3s ease;
}
.nav__logo:hover .nav__logo-wordmark{transform:scale(1.04)}
.nav__logo-wordmark--footer{height:48px;filter:drop-shadow(0 0 10px rgba(0,212,254,0.25))}
/* Legacy (kept for fallback if any other element still references) */
.nav__logo-icon{
  width:34px;height:34px;
  filter:drop-shadow(0 0 12px rgba(0,212,254,0.35));
}
.nav__logo-text{
  font-family:'TalktoFont','Inter',sans-serif;font-weight:700;
  font-size:22px;letter-spacing:-0.04em;color:#fff;
}

.nav__links{
  display:flex;align-items:center;gap:30px;
  flex:1;                   /* take all remaining horizontal space */
  justify-content:center;   /* center the link items within that space */
  padding:0 24px;           /* breathing room around the centered cluster */
}
.nav__links a{color:var(--muted);font-weight:500;font-size:14.5px;line-height:1;transition:color .2s}
.nav__links a:hover{color:var(--text)}

/* Language switcher — flag dropdown in the nav.
   Sits naturally next to .nav__cta because nav__links uses flex:1 to
   absorb all remaining middle space, leaving the lang+cta+burger trio
   clustered on the right. A small margin-right separates lang from the
   Brand Access pill on desktop. */
.nav__lang{
  position:relative;display:inline-flex;align-items:center;
  margin-right:8px;
}
/* Dashboard variant — placed inside .db-top__actions which already
   controls gap/alignment, so this is just a structural marker. */
.nav__lang--db{margin:0}
.nav__lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  font:inherit;
}
.nav__lang-btn:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18)}
.nav__lang-flag{font-size:18px;line-height:1;letter-spacing:0}
.nav__lang-chev{opacity:.7;transition:transform .2s ease}
.nav__lang.is-open .nav__lang-chev{transform:rotate(180deg)}
.nav__lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;
  padding:6px;
  background:rgba(11,5,24,0.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  opacity:0;transform:translateY(-6px) scale(0.98);
  pointer-events:none;visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:120;
}
.nav__lang.is-open .nav__lang-menu{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;visibility:visible;
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav__lang-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  font-size:14px;font-weight:500;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.nav__lang-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.nav__lang-item .nav__lang-flag{font-size:18px;flex-shrink:0}
.nav__lang-item.is-active{background:rgba(168,85,247,0.14);color:#fff}
.nav__lang-item.is-active::after{
  content:"";margin-left:auto;
  width:16px;height:16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:contain;background-repeat:no-repeat;
}
.nav__lang-item.is-soon{opacity:.45;cursor:not-allowed}
.nav__lang-item.is-soon:hover{background:transparent;color:rgba(255,255,255,0.85)}
.nav__lang-tag{
  margin-left:auto;
  font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  padding:2px 6px;border-radius:5px;border:1px solid rgba(255,255,255,0.10);
}

/* Mobile-only burger button (hidden on desktop) */
.nav__menu-btn{
  display:none;
  width:40px;height:40px;
  padding:0;border:0;border-radius:10px;
  background:transparent;color:#fff;
  align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease;
}
.nav__menu-btn:hover{background:rgba(255,255,255,0.06)}
.nav__menu-btn svg{display:block}
/* Header CTA, high-contrast white pill with dual-color glow so it stands
   out against the hero gradient. Overrides .btn--primary background/color. */
.btn.nav__cta{
  padding:10px 18px;font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#0b0518;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.65),
    0 0 24px rgba(254,0,242,0.45),
    0 0 36px rgba(0,212,254,0.35),
    0 10px 24px -6px rgba(254,0,242,0.55);
}
.btn.nav__cta:hover{
  background:#fff;color:#0b0518;
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.85),
    0 0 36px rgba(254,0,242,0.60),
    0 0 48px rgba(0,212,254,0.50),
    0 16px 32px -6px rgba(254,0,242,0.65);
}
.nav__cta-icon{flex-shrink:0;opacity:.95;color:#0b0518;transition:transform .25s ease}
.btn.nav__cta:hover .nav__cta-icon{transform:translate(2px,-2px)}
/* When scrolled past hero, the nav darkens, give the CTA a subtle scale-down
   for visual rhythm but keep the same white pill so it stays the focal point. */
.nav.is-scrolled .btn.nav__cta{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55),
    0 0 22px rgba(254,0,242,0.50),
    0 0 30px rgba(0,212,254,0.40),
    0 10px 20px -6px rgba(254,0,242,0.50);
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav{padding:10px 16px}
  .nav__logo-wordmark{height:46px}
  .nav__logo-text{font-size:18px}
  .nav__logo-icon{width:28px;height:28px}
  /* Swap Brand Access pill for the burger trigger on mobile.
     Use .btn.nav__cta to match the desktop selector's specificity. */
  .btn.nav__cta{display:none}
  .nav__menu-btn{display:inline-flex}
  /* Push flag + burger to the right side of the nav (no flex:1 nav__links
     to absorb middle space on mobile because it's display:none here). */
  .nav__lang{margin-left:auto;margin-right:8px}
}

/* ─────────────────────────────────────────────────────────────
   Mobile menu overlay (≤980px). Backdrop blur + side panel with
   navigation links and a Brand Access CTA at the bottom.
   ───────────────────────────────────────────────────────────── */
.mob-menu{
  position:fixed;inset:0;z-index:300;
  pointer-events:none;
  display:flex;align-items:stretch;justify-content:flex-end;
}
.mob-menu__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;
  transition:opacity .35s ease;
}
.mob-menu.is-open{pointer-events:auto}
.mob-menu.is-open .mob-menu__backdrop{opacity:1}

.mob-menu__panel{
  position:relative;
  width:78vw;max-width:340px;
  margin:14px 14px 14px 0;
  padding:64px 26px 28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 30% 78%, rgba(254,0,242,0.32) 0%, transparent 50%),
    radial-gradient(circle at 78% 28%, rgba(0,212,254,0.18) 0%, transparent 55%),
    rgba(8,3,18,0.94);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.06);
  display:flex;flex-direction:column;
  transform:translateX(110%);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.16,.64,1), opacity .25s ease;
}
.mob-menu.is-open .mob-menu__panel{
  transform:translateX(0) !important;
  opacity:1 !important;
}
.mob-menu__close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.mob-menu__close:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}

.mob-menu__nav{
  display:flex;flex-direction:column;align-items:center;
  flex:1;justify-content:center;
  gap:34px;
  padding:20px 0;
}
.mob-menu__nav a{
  color:#fff;text-decoration:none;
  font-size:22px;font-weight:500;letter-spacing:-0.005em;
  transition:transform .2s ease,opacity .2s ease;
}
.mob-menu__nav a:active{transform:scale(0.96);opacity:.7}

.mob-menu__cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:8px;
  padding:18px 28px;
  width:100%;
  border-radius:999px;
  background:linear-gradient(110deg,#FE00F2 0%,#C084FC 50%,#FE00F2 100%);
  background-size:200% 200%;
  color:#fff;text-decoration:none;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-0.005em;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 14px 36px -10px rgba(254,0,242,0.65),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform .2s ease, background-position .35s ease;
}
.mob-menu__cta:hover{background-position:100% 100%}
.mob-menu__cta:active{transform:scale(0.98)}

/* Lock body scroll while menu is open */
body.menu-open{overflow:hidden}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-weight:600;font-size:15px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s;
  white-space:nowrap;will-change:transform;
}
.btn--primary{
  background:var(--grad);color:#fff;
  box-shadow:0 10px 30px -8px rgba(168,85,247,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -10px rgba(254,20,243,0.55),inset 0 1px 0 rgba(255,255,255,0.25)}
.btn--ghost{
  border:1px solid var(--border-strong);color:var(--text);
  background:var(--surface);backdrop-filter:blur(10px);
}
.btn--ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn--lg{padding:15px 28px;font-size:16px}
.btn.btn--primary.btn--lg{margin:5px}
.btn.btn--ghost.btn--lg{margin:5px}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;
  padding:120px 28px 80px;
  display:flex;align-items:center;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mesh{
  position:absolute;inset:-10%;
  background:
    radial-gradient(circle at 20% 30%,rgba(0,212,254,0.30) 0%,transparent 35%),
    radial-gradient(circle at 80% 20%,rgba(192,132,252,0.30) 0%,transparent 38%),
    radial-gradient(circle at 70% 80%,rgba(254,20,243,0.28) 0%,transparent 35%),
    radial-gradient(circle at 30% 90%,rgba(99,102,241,0.20) 0%,transparent 35%);
  filter:blur(40px);
  animation:mesh-drift 18s ease-in-out infinite alternate;
}
@keyframes mesh-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(2%,-2%) scale(1.05)}}
.blob{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform;pointer-events:none}
.blob--1{width:420px;height:420px;background:#00d4fe;top:-120px;left:-80px;opacity:0.28}
.blob--2{width:380px;height:380px;background:#fe14f3;bottom:-80px;right:-60px;opacity:0.28}
.blob--3{width:320px;height:320px;background:#a855f7;top:45%;left:55%;opacity:0.22}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%);
}

.hero__inner{
  position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;
}
@media (max-width:980px){.hero__inner{grid-template-columns:1fr;gap:40px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border:1px solid var(--border-strong);
  border-radius:999px;font-size:12.5px;color:var(--muted);
  background:var(--surface);backdrop-filter:blur(10px);
  margin-bottom:28px;letter-spacing:0.02em;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.hero__title{
  font-size:clamp(48px,7.5vw,108px);
  font-weight:800;letter-spacing:-0.075em;line-height:0.88;margin-bottom:28px;
}
.hero__sub{
  font-size:18px;font-weight:400;color:#d2d0e0;
  max-width:540px;margin-bottom:36px;
}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}

/* ---------- MCP install (Claude Code) ---------- */
.mcp-install{display:flex;flex-direction:column;gap:11px;width:fit-content;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px 15px;margin-bottom:30px;backdrop-filter:blur(10px)}
.mcp-install__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mcp-install__logos{display:inline-flex;align-items:center;gap:8px}
.mcp-ic{width:24px;height:24px;border-radius:7px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10)}
.mcp-x{color:var(--muted);font-size:14px;font-weight:500}
.mcp-install__label{font-size:13px;color:var(--muted);font-weight:500}
.mcp-install__label strong{color:var(--text);font-weight:600}
.mcp-install__demo{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--cyan);white-space:nowrap;transition:color .2s}
.mcp-install__demo svg{width:11px;height:11px}
.mcp-install__demo:hover{color:#fff}
.mcp-install__cmd{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:11px;padding:8px 8px 8px 14px;min-width:0}
.mcp-install__code{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#eafdff;white-space:nowrap;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.mcp-install__code::-webkit-scrollbar{display:none}
.mcp-install__code .mcp-prompt{color:var(--cyan);margin-right:9px;user-select:none}
.mcp-install__copy{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;transition:background .2s,border-color .2s,color .2s}
.mcp-install__copy:hover{background:var(--surface-3)}
.mcp-install__copy svg{width:14px;height:14px}
.mcp-install__copy.is-copied{background:rgba(52,211,153,0.15);border-color:rgba(52,211,153,0.45);color:#7dffb8}
@media (max-width:980px){
  .mcp-install{width:100%;max-width:min(460px, calc(100vw - 56px));margin-left:0;margin-right:0}
  .mcp-install__demo{margin-left:0}
}
@media (max-width:560px){
  .mcp-install{padding:12px}
  .mcp-install__head{justify-content:center;text-align:center}
  .mcp-install__cmd{padding:7px 7px 7px 12px;gap:8px}
  .mcp-install__code{font-size:12.5px}
  .mcp-install__copy{padding:7px 10px}
  .mcp-install__copy .mcp-copy-txt{display:none}
}

.hero__trust{display:flex;align-items:center;gap:14px}
.trust__items{display:flex;align-items:center;gap:14px}
.trust__avatars{display:flex}
.ta{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'TalktoFont','Inter',sans-serif;font-size:13px;font-weight:700;
  color:#fff;border:2px solid var(--bg);margin-left:-10px;
}
.ta:first-child{margin-left:0}
.ta--1{background:linear-gradient(135deg,#00d4fe,#a855f7)}
.ta--2{background:linear-gradient(135deg,#6366f1,#fe14f3)}
.ta--3{background:linear-gradient(135deg,#fe14f3,#f59e0b)}
.ta--4{background:linear-gradient(135deg,#00d4fe,#34d399)}
.trust__text{display:flex;flex-direction:column;font-size:13.5px;text-align:left}
.trust__text strong{font-weight:600}
.trust__text span{color:var(--muted)}

.hero__scroll-hint{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:var(--muted-2);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;z-index:3;
  animation:floaty 2s ease-in-out infinite;
}
.hero__scroll-hint span{width:1px;height:28px;background:var(--muted-2)}
@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

.split-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.split-word > span{display:inline-block;will-change:transform,opacity}

/* When a word lives inside .grad, the inner split span loses the parent's
   background-clip:text (overflow:hidden breaks the clip path). Reapply
   the gradient directly to the inner span so the word stays visible. */
.grad .split-word > span{
  background:var(--grad);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:grad-shimmer 9s ease-in-out infinite;
}

/* ---------- PHONE FRAME (pure CSS · matches 390/844 bebuzz screen) ---------- */
.hero__phone{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  perspective:1400px;min-height:600px;
}
.phone-mock{
  position:relative;
  width:300px;
  height:682px;
  background:linear-gradient(160deg,#15082e,#06000d);
  border-radius:46px;
  padding:9px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 60px 100px -30px rgba(0,212,254,0.30),
    0 30px 80px -20px rgba(254,20,243,0.22);
  transform:rotate3d(0,1,0.05,-6deg) rotateX(2deg);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.phone-mock:hover{transform:rotate3d(0,1,0.05,-2deg) rotateX(0deg)}

/* Dynamic island / notch */
.phone-mock::before{
  content:'';
  position:absolute;
  top:18px;left:50%;
  transform:translateX(-50%);
  width:100px;height:28px;
  background:#000;
  border-radius:999px;
  z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* Inner glare */
.phone-mock::after{
  content:'';
  position:absolute;inset:0;
  border-radius:46px;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 22%,transparent 78%,rgba(255,255,255,0.05) 100%);
  pointer-events:none;
  z-index:4;
  mix-blend-mode:screen;
}

/* ---------- BBZ APP (animated bebuzz screen, search → done) ---------- */
.bbz-app{
  position:relative;
  font-family:'TalktoFont','Inter',sans-serif;
  background:#000;
  padding:32px 20px 70px;
  display:flex;flex-direction:column;
  font-size:11px;color:#fff;
  overflow:hidden;
  width:100%;height:100%;
  border-radius:38px;
  z-index:1;
}

.bbz-header{
  display:flex;align-items:center;padding:0 2px;
  margin-bottom:18px;
  position:relative;z-index:5;
}
.bbz-logo{
  width:79px;height:30px;
  margin-left:-6px;
  filter:drop-shadow(0 0 10px rgba(0,212,254,0.25));
  user-select:none;
}

.bbz-card{
  display:flex;align-items:center;gap:12px;
  margin-top:0;margin-bottom:18px;
  position:relative;z-index:5;
}
.bbz-card__logo{
  width:52px;height:52px;border-radius:50%;
  background:#fff;
  flex-shrink:0;
  object-fit:cover;
  display:block;
}
.bbz-card__name{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:600;letter-spacing:-0.02em;
}

.bbz-meta{
  display:grid;grid-template-columns:auto auto auto;
  gap:5px 10px;align-items:start;
  margin-bottom:10px;
  position:relative;z-index:5;
}
.bbz-meta > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.bbz-meta > div > span{
  color:#fff;
  font-size:9.5px;font-weight:600;
}
.bbz-meta b{
  font-weight:700;font-size:12px;color:#FFAA00;
  font-family:'TalktoFont','Inter',sans-serif;
}
.bbz-chips{display:flex;gap:4px;flex-wrap:wrap}
.bbz-chip{
  padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:none;
  font-size:8.5px;color:#fff;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
  font-weight:500;
}

.bbz-ring{
  position:relative;flex:1;
  display:flex;align-items:center;justify-content:center;
  margin:50px 0;
  min-height:160px;
  isolation:isolate;
}
/* Dual-color background glow (centered, oversize so blurred edges fall off-screen) */
.bbz-glow{
  position:absolute;
  width:170%;height:200%;
  top:-50%;
  border-radius:50%;
  filter:blur(54px);
  opacity:0.5;
  pointer-events:none;
  z-index:0;
}
.bbz-glow--left{
  left:-55%;
  background:radial-gradient(circle at 65% 50%,#22d3ee 0%,#22d3ee 10%,transparent 60%);
}
.bbz-glow--right{
  right:-55%;
  background:radial-gradient(circle at 35% 50%,#fe14f3 0%,#fe14f3 10%,transparent 60%);
}

/* Shazam pulse waves */
.bbz-pulses{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.bbz-pulse{
  position:absolute;
  width:180px;height:180px;
  border-radius:50%;
  border:1.5px solid rgba(254,20,243,0.55);
  opacity:0;
  animation:bbzPulse 4s cubic-bezier(.22,1,.36,1) infinite;
}
.bbz-pulse:nth-child(1){animation-delay:0s}
.bbz-pulse:nth-child(2){animation-delay:1s}
.bbz-pulse:nth-child(3){animation-delay:2s}
.bbz-pulse:nth-child(4){animation-delay:3s}
@keyframes bbzPulse{
  0%{transform:scale(0.55);opacity:0;border-color:rgba(254,20,243,0.7)}
  20%{opacity:0.7}
  100%{transform:scale(1.5);opacity:0;border-color:rgba(34,211,238,0.3)}
}

.bbz-ring__svg{
  width:100%;height:100%;
  max-width:198px;max-height:198px;
  position:relative;z-index:2;
}
/* Soften the dual-color glow during the Done state */
.bbz-app.is-done .bbz-glow{opacity:0.22;transition:opacity 0.8s}
.bbz-app.is-done .bbz-pulses{opacity:0.4;transition:opacity 0.6s}
.bbz-ring__track{transition:opacity 0.4s}
.bbz-ring__progress{
  stroke-dasharray:552.92; /* 2π × r=88 */
  stroke-dashoffset:552.92;
  transition:stroke-dashoffset 0.15s linear,opacity 0.4s;
  filter:drop-shadow(0 0 10px rgba(254,20,243,0.6));
}
.bbz-ring__done{
  opacity:0;
  transition:opacity 0.5s 0.1s;
  filter:drop-shadow(0 0 14px rgba(254,20,243,0.85));
}
.bbz-ring__center{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.bbz-timer{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:27px;font-weight:700;color:#fff;letter-spacing:-0.04em;
}
.bbz-go{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:38px;font-weight:700;color:#fff;
  letter-spacing:-0.05em;display:none;
}
.bbz-app.is-done .bbz-timer{display:none}
.bbz-app.is-done .bbz-go{display:block}
.bbz-app.is-done .bbz-ring__progress{opacity:0}
.bbz-app.is-done .bbz-ring__track{opacity:0}
.bbz-app.is-done .bbz-ring__done{opacity:1}

.bbz-avatars{
  display:flex;justify-content:center;gap:7px;
  padding:4px 0;
  margin-bottom:20px;
  position:relative;z-index:5;
}
.bbz-avatar{
  position:relative;
  width:44px;height:44px;border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}
.bbz-avatar__placeholder{
  position:absolute;inset:0;
  display:flex;align-items:flex-start;justify-content:center;
  color:rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.03);
  z-index:1;
}
.bbz-avatar__placeholder svg{
  width:78%;height:78%;
  margin-top:3px;
}
.bbz-avatar img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  z-index:2;
  opacity:0;transform:scale(0.55);
  transition:opacity 0.6s cubic-bezier(.22,1,.36,1),transform 0.6s cubic-bezier(.22,1,.36,1);
}
.bbz-avatar.is-visible img{opacity:1;transform:scale(1)}
.bbz-avatar.is-visible{
  border-color:rgba(254,20,243,0.4);
  box-shadow:0 0 0 1px rgba(254,20,243,0.2);
}

.bbz-status{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;z-index:5;
}
.bbz-dots{display:flex;gap:7px;align-items:center}
.bbz-dots i{
  width:6px;height:6px;border-radius:50%;
  background:#fe14f3;
  animation:bbzDot 1.4s infinite;
  box-shadow:0 0 8px rgba(254,20,243,0.6);
}
.bbz-dots i:nth-child(2){animation-delay:0.2s;width:11px;height:11px}
.bbz-dots i:nth-child(3){animation-delay:0.4s}
@keyframes bbzDot{
  0%,100%{opacity:0.35;transform:scale(0.7)}
  50%{opacity:1;transform:scale(1)}
}
.bbz-status__searching,.bbz-status__done{display:flex;flex-direction:column;align-items:center;gap:6px}
.bbz-status__searching b,.bbz-status__done b{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;letter-spacing:-0.035em;line-height:1;
}
/* Direct child only, the data-bbz-views span sits inside <b> and must keep
   the big white style of its parent; only the subtitle gets the muted look. */
.bbz-status__searching > span,.bbz-status__done > span{
  font-size:12px;color:#8492A6;font-weight:500;letter-spacing:0.01em;
}
.bbz-status__done{display:none}
.bbz-app.is-done .bbz-status__searching{display:none}
.bbz-app.is-done .bbz-status__done{display:flex}

/* ---------- BBZ APP END ---------- */

/* The bebuzz screen (single image OR multi-screen container for scrollytelling) */
.phone-mock__screen,
.phone-mock__screens{
  position:relative;
  width:100%;
  height:100%;
  border-radius:38px;
  overflow:hidden;
  background:#000;
  display:block;
  z-index:1;
}
.phone-mock__screen{
  object-fit:cover;
  object-position:center top;
}
.phone-mock__screens .viz-screen{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:0;transform:scale(1.02);
  transition:opacity .5s ease,transform .6s ease;
}
.phone-mock__screens .viz-screen.is-active{opacity:1;transform:scale(1)}

/* Step 1, composite screen : SVG background + live video overlay */
.viz-screen--video{
  display:block; /* override img-only styles where needed */
}
.viz-screen__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  /* fill (not cover) → SVG coords map linearly to container coords,
     so the % positions on .viz-video below match the SVG rect exactly. */
  object-fit:fill;
  display:block;
}
.viz-video{
  position:absolute;
  /* Bounds from the SVG video frame (rect x=30 y=240 w=330 h=316 rx=35 inside 390×844) */
  left:7.69%;
  top:28.44%;
  width:84.62%;
  height:37.44%;
  border-radius:25px;
  object-fit:cover;
  background:#000;
  z-index:2;
  pointer-events:none;
}

/* ────────────────────────────────────────────────────────────
   Step 02, Audience & Location  (native HTML, no static SVG)
   Reproduces both screens (Categories + Target Area) as real DOM
   so the animation can drive actual chips/toggles/roller.
   ──────────────────────────────────────────────────────────── */
.viz-screen--audience{display:block;color:#fff;font-size:11px}
.aud-stage{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:18px 14px 16px;
}
.aud-stage--cat{opacity:1}
.aud-stage--cat > .aud-btn{margin-top:14px}
.aud-stage--cat .aud-title{margin-bottom:25px}
.aud-stage--target{opacity:0}

/* Header bar */
.aud-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;margin-bottom:4px;
}
.aud-head__logo{
  height:30px;width:auto;
  filter:drop-shadow(0 0 8px rgba(0,212,254,0.22));
  user-select:none;
}
.aud-head__icon{
  width:20px;height:20px;color:#fff;
  flex-shrink:0;
}
.aud-back{
  align-self:flex-start;color:#fff;line-height:0;
  padding:4px 4px;background:none;border:0;cursor:pointer;
  margin-top:10px;
}
.aud-back svg{
  width:9px;height:16px;display:block;
  filter:drop-shadow(0 0 6px rgba(0,212,254,0.25));
}
.aud-title{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-1px;line-height:1;
  text-align:center;color:#fff;margin:18px 0 6px;
}

/* Sections wrapper, block of categories, hugs content (no vertical centering) */
.aud-sections{
  display:flex;flex-direction:column;align-items:center;
}

/* Section subtitle (cyan/blue label) */
.aud-subtitle{
  font-size:9.5px;font-weight:700;color:#6E83AD;letter-spacing:0.02em;
  text-align:center;margin:15px 0 4px;
  width:100%;
}
.aud-sections > .aud-subtitle:first-child{margin-top:6px}

/* Rows of chips, centered horizontally */
.aud-row{
  display:flex;justify-content:center;gap:5px;flex-wrap:wrap;
  margin:0 0 3px;width:100%;
}
.aud-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:#fff;font-size:10.5px;font-weight:600;
  white-space:nowrap;
  transition:background .35s ease,box-shadow .35s ease,color .25s ease;
}
.aud-chip i{font-style:normal;font-size:10px;line-height:1}
.aud-chip--dim{opacity:0.55}
.aud-chip--on{
  background:#FE14F3;
  box-shadow:0 0 14px rgba(254,20,243,0.55);
}
/* Hide specific chips on mobile to keep the phone screen tight */
@media (max-width:980px){
  .aud-chip--mobile-hide{display:none}
}

/* Bottom selected panel (Fashion + Sport ring outlines), tight to categories above */
.aud-selected{
  display:flex;justify-content:center;gap:10px;
  margin-top:6px;padding:2px 0 0;
  border-top:0;
}
.aud-sel-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;
  border:1.5px solid #FE14F3;background:transparent;
  color:#fff;font-size:11.5px;font-weight:600;
  box-shadow:0 0 10px rgba(254,20,243,0.30);
}
.aud-sel-chip i{font-style:normal;font-size:11px}

/* Cyan outlined Next button */
.aud-btn{
  position:relative;
  width:100%;padding:13px;border-radius:999px;
  border:1.5px solid #00D4FE;background:transparent;
  color:#fff;font-size:14px;font-weight:700;
  font-family:'TalktoFont','Inter',sans-serif;letter-spacing:-0.01em;
  cursor:pointer;margin-top:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.aud-btn svg{width:16px;height:16px;flex-shrink:0}
.aud-btn--magenta{
  border-color:#FE14F3;
  box-shadow:0 0 12px rgba(254,20,243,0.30);
}
.aud-btn--muted{
  border-color:rgba(0,212,254,0.45);
  color:rgba(255,255,255,0.55);
}

/* ── Step 03, Set Your Budget (HTML rebuild) ── */
.aud-stage--budget{padding:18px 14px 16px}
.aud-creators{
  list-style:none;padding:0;margin:6px 0 12px;
  display:flex;flex-direction:column;gap:20px;flex:1;
}
.aud-creators li{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:11px;
  padding:1px 0;
}
.aud-creators li img:not(.aud-ig){
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;display:block;
  border:1.5px solid rgba(255,255,255,0.08);
}
.aud-creators li > div{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.aud-creators li b{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:13.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aud-creators li span{font-size:12px;color:rgba(255,255,255,0.55);font-weight:500;margin-top:3px}

/* Instagram icon (official 2022 logo) */
.aud-ig{
  flex-shrink:0;display:block;
  width:20px;height:20px;
  filter:drop-shadow(0 0 6px rgba(188,48,129,0.45));
}

/* ── Searching state (skeleton backdrop + centered overlay) ── */
.aud-search{
  display:none;position:relative;flex:1;
  margin:6px 0 12px;
}
.aud-stage--budget.is-searching .aud-creators{display:none}
.aud-stage--budget.is-searching .aud-search{display:block}

/* skeleton rows, match aud-creators layout */
.aud-skeleton{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:20px;
}
.aud-skeleton li{
  display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:11px;
  padding:1px 0;
}
.sk-avatar{
  width:42px;height:42px;border-radius:50%;
  background:#14171B;
  position:relative;overflow:hidden;
}
.sk-lines{display:flex;flex-direction:column;gap:5px;min-width:0}
.sk-line{
  display:block;height:11px;border-radius:6px;
  background:#14171B;
  position:relative;overflow:hidden;
}
.sk-line--s{width:48px}
.sk-line--l{width:78px}
/* shimmer overlay */
.sk-avatar::after,
.sk-line::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 100%);
  animation:skShimmer 1.4s ease-in-out infinite;
}
@keyframes skShimmer{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* centered overlay (spinner + texts) */
.aud-search__overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:9px;
  padding:0 24px;
  pointer-events:none;
}
.aud-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(254,0,242,0.20);
  border-top-color:#FE00F2;
  animation:audSpin 0.85s linear infinite;
  filter:drop-shadow(0 0 8px rgba(254,0,242,0.55));
}
@keyframes audSpin{to{transform:rotate(360deg)}}
.aud-search__sub{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18.5px;font-weight:800;color:#FE00F2;
  letter-spacing:-0.01em;line-height:1.1;
  text-shadow:0 0 12px rgba(254,0,242,0.45);
}
.aud-search__sub em{font-style:normal;color:#FE00F2}
.aud-search__txt{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:11.5px;font-weight:500;color:#8492A6;
  line-height:1.35;max-width:240px;
}

/* Slider */
.aud-slider{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:10px 0 14px;
}
.aud-slider__track{
  position:relative;width:100%;height:10px;
  background:rgba(255,255,255,0.10);border-radius:999px;
}
.aud-slider__fill{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#FE14F3,#FF66E8);
  border-radius:999px;
  width:0%;
  box-shadow:0 0 12px rgba(254,20,243,0.55);
}
.aud-slider__knob{
  position:absolute;top:50%;left:0;
  transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;
  background:#FE14F3;
  box-shadow:
    0 0 0 4px rgba(254,20,243,0.20),
    0 0 14px rgba(254,20,243,0.6);
}
.aud-slider__value{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#FE14F3;
  letter-spacing:-0.02em;
}

/* ── Step 03, Influencer Speech (HTML rebuild) ── */
.aud-stage--speech{padding:18px 14px 16px}

/* Big media card with video bg @30% and central chip */
.is-card{
  position:relative;
  flex:1 1 auto;min-height:0;
  width:100%;
  border-radius:24px;
  overflow:hidden;
  background:#0a0a0a;
  margin:14px 0 14px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.55);
}
.is-card__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.15;
  pointer-events:none;
  display:block;
}
.is-card__content{
  position:relative;z-index:2;
  width:100%;height:100%;
}
.is-state{
  position:absolute;inset:0;
  display:flex;flex-direction:column;width:100%;
  padding:22px 22px 50px;
  opacity:0;
  transform:scale(0.94);
  filter:blur(5px);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1),
    filter .22s ease;
}
.is-state.is-state--active{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  pointer-events:auto;
}
.is-state--empty{align-items:center;padding-top:125px}
.is-state--filled{align-items:flex-start;padding-top:22px}
.is-count{
  position:absolute;bottom:18px;right:22px;
  z-index:3;
}
.is-text{
  display:flex;align-items:flex-start;gap:8px;
  color:#fff;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:15px;font-weight:500;letter-spacing:-0.005em;
  line-height:1.4;
  text-align:left;
}
.is-text b{font-weight:800}
.is-text .is-prompt__bar{margin-top:4px;flex-shrink:0}
.is-prompt{
  align-self:flex-start;
  display:flex;align-items:center;gap:8px;
  color:#fff;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:19px;font-weight:500;letter-spacing:-0.015em;
  line-height:1.1;
}
.is-prompt b{font-weight:800}
.is-prompt__bar{
  display:inline-block;
  width:3px;height:22px;
  background:#FE00F2;
  box-shadow:0 0 8px rgba(254,0,242,0.55);
  border-radius:2px;
}
.is-or{
  margin:14px 0 12px;
  color:#fff;opacity:0.85;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:13px;font-weight:500;
}
.is-generate{
  width:100%;
  padding:14px 18px;
  border-radius:999px;
  background:transparent;
  border:2px solid #FE00F2;
  color:#fff;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:16px;font-weight:700;letter-spacing:-0.01em;
  box-shadow:0 0 18px rgba(254,0,242,0.30);
  cursor:pointer;
}
.is-count{
  color:#FE00F2;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-0.01em;
  text-shadow:0 0 8px rgba(254,0,242,0.45);
}

/* Intonation tone row */
.is-tones{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin:0 0 14px;
}
.is-tone{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;
  color:rgba(255,255,255,0.55);
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:-0.01em;
  transition:color .3s ease;
}
.is-tone__icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#14171B;
  transition:background .3s ease, box-shadow .3s ease;
}
.is-tone__icon svg{width:22px;height:22px;color:#E0E0E0;display:block}
.is-tone.is-tone--active{color:#fff}
.is-tone.is-tone--active .is-tone__icon{
  background:#FE00F2;
  box-shadow:0 0 16px rgba(254,0,242,0.50);
}
.is-tone.is-tone--active .is-tone__icon svg{color:#fff}

/* Bottom actions */
.is-actions{
  display:flex;gap:10px;
  margin-top:auto;
}
.is-btn{
  flex:1;padding:13px 8px;border-radius:999px;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;
}
.is-btn--cancel{
  background:transparent;
  border:1.5px solid #FE00F2;
  color:#FE00F2;
  box-shadow:0 0 12px rgba(254,0,242,0.20);
}
.is-btn--ok{
  background:#00D4FE;
  border:0;
  color:#fff;
  box-shadow:0 0 14px rgba(0,212,254,0.40);
}

/* ── Step 08, Buzz Tracking (HTML rebuild) ── */
.aud-stage--track{padding:18px 14px 16px}

/* Headline, back chevron + title inline */
.bt-headline{
  display:flex;align-items:center;gap:14px;
  margin:18px 0 10px;
}
.bt-headline__back{
  width:12px;height:20px;color:#fff;
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(0,212,254,0.20));
}
.bt-headline__title{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:22px;font-weight:800;color:#fff;
  letter-spacing:-1px;line-height:1;
}

/* Also update tabs spacing since title is now larger/full-width */

.bt-tabs{
  display:flex;justify-content:space-between;gap:8px;
  margin:14px 0 18px;
}
.bt-tab{
  flex:1;
  padding:11px 6px;
  border-radius:20px;
  background:#14171B;
  border:1px solid rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.50);
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.bt-tab.is-active{
  background:#0C0F14;
  border-color:rgba(0,212,254,0.30);
  color:#00D4FE;
  box-shadow:0 0 12px rgba(0,212,254,0.15);
}

/* Avatar row, 5 creators */
.bt-avatars{
  display:flex;justify-content:space-between;align-items:center;
  margin:15px 0 18px;
}
.bt-avatar{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid rgba(255,255,255,0.06);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.bt-avatar.is-active{
  border-color:#FE00F2;
  box-shadow:0 0 14px rgba(254,0,242,0.45);
  transform:scale(1.08);
}

/* Profile row, Clicks (left) | Photo (center) | Engagement (right) */
.bt-profile{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  margin:6px 0 12px;
}
.bt-profile__stat{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;
}
.bt-profile__stat-val{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-0.02em;line-height:1;
  transition:color .3s ease;
}
.bt-profile__stat--left .bt-profile__stat-val{color:#00D4FE}
.bt-profile__stat--right .bt-profile__stat-val{color:#FE00F2}
.bt-profile__stat-lbl{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:10.5px;font-weight:600;color:#8492A6;
  letter-spacing:-0.5px;text-transform:uppercase;
}
.bt-profile__photo-wrap{
  position:relative;flex-shrink:0;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(254,0,242,0.30) 0%,
    rgba(254,0,242,0.10) 50%,
    transparent 70%);
  display:flex;align-items:center;justify-content:center;
}
.bt-profile__photo{
  width:90px;height:90px;border-radius:50%;
  object-fit:cover;display:block;
  border:3px solid #FE00F2;
  box-shadow:0 0 24px rgba(254,0,242,0.55);
}

/* Name centered below photo */
.bt-profile__name{
  text-align:center;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}
/* IG badge overlaid at bottom-center of the photo (black circle + icon) */
.bt-profile__photo-wrap{position:relative}
.bt-profile__ig{
  position:absolute;
  bottom:-2px;left:50%;
  transform:translateX(-50%);
  width:30px;height:30px;
  background:#0C0F14;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2.5px #0C0F14, 0 2px 8px rgba(0,0,0,0.55);
  z-index:2;
}
.bt-profile__ig img{
  width:18px;height:18px;display:block;
  filter:drop-shadow(0 0 4px rgba(188,48,129,0.5));
}

/* Details columns, Followers / Deals / Rating */
.bt-details{
  display:flex;justify-content:space-around;align-items:center;
  background:#0C0F14;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:18px;
  padding:14px 10px;
  margin:0 0 14px;
}
.bt-detail{
  display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;
}
.bt-detail + .bt-detail{
  border-left:1px solid rgba(255,255,255,0.06);
}
.bt-detail__val{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-0.02em;line-height:1;
}
.bt-detail__lbl{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:10.5px;font-weight:600;color:#8492A6;
  letter-spacing:0.04em;text-transform:uppercase;
  margin-top:4px;
}

/* 24h click activity mini-chart (12 bars × 2h = 24h) */
.bt-activity{
  background:#0C0F14;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:16px;
  padding:12px 12px 12px;
  margin:0 0 12px;
}
.bt-activity__head{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 10px;
}
.bt-activity__title{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:11px;font-weight:700;color:#fff;
  letter-spacing:-0.005em;
}
.bt-activity__peak{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:10.5px;font-weight:700;color:#FE00F2;
  letter-spacing:-0.005em;
  text-shadow:0 0 6px rgba(254,0,242,0.45);
}
.bt-bars{
  display:flex;align-items:flex-end;justify-content:space-between;
  width:100%;height:60px;gap:4px;
}
.bt-bar{
  flex:1;
  background:linear-gradient(180deg,#FE00F2 0%,#A20D9C 100%);
  border-radius:3px 3px 0 0;
  min-height:4px;
  box-shadow:0 -2px 8px rgba(254,0,242,0.30);
  transition:height .6s cubic-bezier(.22,1,.36,1);
}

/* Views (Buzzers / Map) magic-transition switch */
.bt-views{
  position:relative;
  flex:1 1 auto;min-height:0;
  width:100%;
}
.bt-view{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;
  transform:scale(0.94);
  filter:blur(5px);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1),
    filter .22s ease;
}
.bt-view.is-active{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  pointer-events:auto;
}

/* Globe, rendered by Cobe (WebGL canvas, auto-rotating dotted Earth) */
.bt-globe{
  position:relative;
  align-self:center;
  width:280px;height:280px;
  margin:-6px 0 4px;
  filter:drop-shadow(0 0 18px rgba(254,0,242,0.20))
         drop-shadow(0 0 42px rgba(254,0,242,0.12));
}
.bt-globe__canvas{
  width:100%;height:100%;display:block;
}
/* Atmosphere halo around the cobe canvas */
.bt-globe::before{
  content:'';
  position:absolute;inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle,
    transparent 60%,
    rgba(254,0,242,0.10) 72%,
    rgba(254,0,242,0) 82%);
  pointer-events:none;
  z-index:0;
}

/* Glowing pings, all magenta, scattered across continents */
.bt-globe__ping{
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  pointer-events:none;
  z-index:2;
}
.bt-globe__ping::before,
.bt-globe__ping::after{
  content:'';position:absolute;inset:0;border-radius:50%;
}
.bt-globe__ping::before{
  background:#FE00F2;
  box-shadow:0 0 10px rgba(254,0,242,0.85),
             0 0 18px rgba(254,0,242,0.45);
}
.bt-globe__ping::after{
  background:rgba(254,0,242,0.45);
  animation:btPing 1.8s ease-out infinite;
}
.bt-globe__ping--1{top:38%;left:22%;animation-delay:0s}
.bt-globe__ping--2{top:28%;left:52%;animation-delay:0.4s}
.bt-globe__ping--3{top:58%;left:38%;animation-delay:0.8s}
.bt-globe__ping--4{top:48%;left:70%;animation-delay:1.2s}
.bt-globe__ping--5{top:32%;left:78%;animation-delay:0.2s}
.bt-globe__ping--6{top:64%;left:62%;animation-delay:1.0s}
.bt-globe__ping--2::after,
.bt-globe__ping--3::after,
.bt-globe__ping--4::after,
.bt-globe__ping--5::after,
.bt-globe__ping--6::after{
  animation-delay:inherit;
}
@keyframes btPing{
  0%   {transform:scale(1); opacity:0.7}
  100% {transform:scale(3); opacity:0}
}

/* Audience location list */
.bt-locations{
  display:flex;flex-direction:column;gap:10px;
  background:#0C0F14;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:16px;
  padding:14px 12px;
  margin-top:auto;
}
.bt-location{
  display:flex;align-items:center;gap:10px;
}
.bt-location__name{
  width:88px;flex-shrink:0;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:14px;font-weight:600;color:#fff;
  letter-spacing:-0.005em;
}
.bt-location__bar-track{
  flex:1;height:6px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.bt-location__bar{
  display:block;height:100%;
  background:linear-gradient(90deg,#FE00F2,#00D4FE);
  border-radius:999px;
  box-shadow:0 0 8px rgba(254,0,242,0.40);
}
.bt-location__pct{
  width:38px;flex-shrink:0;text-align:right;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:12px;font-weight:800;color:#FE00F2;
  letter-spacing:-0.005em;
}

/* Bottom action, Report the Deal */
.bt-report{
  margin-top:auto;
  width:100%;
  padding:13px;
  border-radius:999px;
  background:transparent;
  border:1.5px solid #FE00F2;
  color:#FE00F2;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;
  box-shadow:0 0 12px rgba(254,0,242,0.25);
}

/* ── Step 06, Influencer Recording (HTML rebuild) ── */
.aud-stage--rec{padding:18px 14px 16px;overflow:hidden}
.aud-stage--rec .aud-head,
.aud-stage--rec .aud-back{position:relative;z-index:3}

.ir-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:blur(3px) brightness(0.90);
  transform:scale(1.03);
  z-index:1;
  pointer-events:none;
  display:block;
}
.ir-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.40) 100%);
  z-index:2;
  pointer-events:none;
}

/* Intonation pill, glassy minimal, icon + label */
.ir-intonation{
  position:relative;z-index:3;
  align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  margin:18px 0 0;
  padding:7px 14px;
  background:rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
}
.ir-intonation__icon{
  display:inline-flex;align-items:center;justify-content:center;
}
.ir-intonation__icon svg{
  width:18px;height:18px;color:#00D4FE;
  filter:drop-shadow(0 0 6px rgba(0,212,254,0.55));
}
.ir-intonation__label{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:12.5px;font-weight:700;color:#fff;
  letter-spacing:0.01em;
}

/* Centered SLOGAN text */
.ir-text{
  position:relative;z-index:3;
  margin:auto 0;
  padding:0 12px;
  color:#fff;
  text-align:center;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:20px;font-weight:500;line-height:1.45;
  letter-spacing:-0.005em;
  text-shadow:0 1px 8px rgba(0,0,0,0.65);
}
.ir-text b{font-weight:800}

/* Record button, outer ring + red dot, red recording arc traces around */
.ir-record{
  position:relative;z-index:3;
  align-self:center;
  width:68px;height:68px;border-radius:50%;
  background:transparent;
  border:3px solid #fff;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,255,255,0.18);
}
.ir-record__ring{
  position:absolute;
  top:50%;left:50%;
  width:74px;height:74px;
  display:block;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center center;
  overflow:visible;
}
.ir-record__ring circle{
  fill:none;
  stroke:#EE1D52;
  stroke-width:6;   /* covers the 3px white border with overflow on both sides */
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:irRecordProgress 8s linear infinite;
  filter:drop-shadow(0 0 6px rgba(238,29,82,0.65));
}
@keyframes irRecordProgress{
  0%   { stroke-dashoffset:100; }
  90%  { stroke-dashoffset:0;   }
  100% { stroke-dashoffset:0;   }
}
.ir-record__dot{
  width:48px;height:48px;border-radius:50%;
  background:#EE1D52;
  box-shadow:0 0 14px rgba(238,29,82,0.55);
  animation:irPulse 1.6s ease-in-out infinite;
}
@keyframes irPulse{
  0%,100% { transform:scale(1);   opacity:1; }
  50%     { transform:scale(0.85); opacity:0.7; }
}

/* ── Step 05, Confirm Team Videos (HTML rebuild) ── */
.aud-stage--confirm{padding:18px 14px 16px}
.cf-title{margin:18px 0 16px;font-size:22px;letter-spacing:-1px}

/* Avatar status row */
.cf-avatars{
  list-style:none;padding:0;margin:0 0 16px;
  display:flex;justify-content:center;align-items:center;gap:12px;
}
.cf-avatar{
  position:relative;flex-shrink:0;
  width:40px;height:40px;border-radius:50%;
}
.cf-avatar img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
}
.cf-avatar--check img,
.cf-avatar--cross img{filter:brightness(0.55)}
.cf-avatar--current{
  box-shadow:0 0 0 2.5px #00D4FE, 0 0 14px rgba(0,212,254,0.55);
}
.cf-avatar--pending img{filter:brightness(0.75)}
.cf-badge{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.cf-badge svg{width:24px;height:24px}
.cf-badge--check{filter:drop-shadow(0 0 6px rgba(0,212,254,0.45))}
.cf-badge--cross{filter:drop-shadow(0 0 6px rgba(254,0,242,0.45))}

/* Gray skeleton loader (last avatar) */
.cf-avatar--loading .cf-skeleton{
  position:absolute;inset:0;border-radius:50%;
  background:#14171B;
  overflow:hidden;
}
.cf-avatar--loading .cf-skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 100%);
  animation:skShimmer 1.4s ease-in-out infinite;
}

/* Big vertical video preview, grows to fill available vertical space */
.cf-video{
  position:relative;
  flex:1 1 auto;min-height:252px;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  background:#0a0a0a;
  margin:0 0 16px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.55);
}
.cf-video video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.15);
  transform-origin:center;
  display:block;
  transition:opacity .5s ease;
}

/* Timer text */
.cf-time{
  text-align:center;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:28px;font-weight:800;color:#fff;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}

/* Bottom action buttons */
.cf-actions{
  display:flex;gap:10px;
  padding:0 2px;
  margin-top:auto;
}
.cf-btn{
  flex:1;padding:13px 8px;border-radius:999px;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;
}
.cf-btn--cancel{
  background:transparent;
  border:1.5px solid #FE00F2;
  color:#FE00F2;
  box-shadow:0 0 12px rgba(254,0,242,0.20);
}
.cf-btn--confirm{
  background:#00D4FE;
  border:0;
  color:#fff;
  box-shadow:0 0 14px rgba(0,212,254,0.40);
}

/* ── Step 04, Deal Speech (HTML rebuild) ── */
.aud-stage--accept{padding:18px 14px 14px}

/* ── "A new Deal!!" full-screen overlay layer (fires per dealTL loop) ──
   Covers the entire phone screen, plays the burst animation, then dissolves
   to reveal the deal underneath. Does not affect underlying layout. */
.deal-pop{
  /* Now lives directly inside the viz-screen (sibling of .aud-stage),
     so inset:0 covers the full phone screen and never interferes with
     the carousel's flex layout. */
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
/* Darkened radial dim, focuses attention on the centered burst while
   still letting the carousel video peek through at the corners. */
.deal-pop__bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(8,2,20,0.78) 0%,
    rgba(4,0,12,0.62) 55%,
    rgba(0,0,0,0.28) 100%);
}
.deal-pop__text{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0) rotate(-15deg);
  opacity:0;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:38px;font-weight:800;
  letter-spacing:-0.04em;line-height:1;
  background:linear-gradient(135deg,#FE00F2 0%,#A855F7 45%,#00D4FE 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:
    drop-shadow(0 0 12px rgba(254,0,242,0.55))
    drop-shadow(0 0 24px rgba(168,85,247,0.35));
  white-space:nowrap;
}
.deal-pop__bang{
  -webkit-text-fill-color:#FE00F2;color:#FE00F2;
}
.deal-pop__ring{
  position:absolute;top:50%;left:50%;
  width:40px;height:40px;
  border-radius:50%;
  border:3px solid #FE00F2;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.deal-pop__ring--2{border-color:#00D4FE;border-width:2px}
.deal-pop__sparkle{
  position:absolute;top:50%;left:50%;
  font-size:24px;color:#fff;
  text-shadow:0 0 14px rgba(254,0,242,0.95),0 0 22px rgba(168,85,247,0.65);
  opacity:0;
  transform:translate(-50%,-50%) scale(0);
}

/* Active state, JS toggles .is-on to fire animations */
.deal-pop.is-on{
  animation:dealOverlay 2.5s ease-out forwards;
}
.deal-pop.is-on .deal-pop__text{
  animation:dealText 2s cubic-bezier(.34,1.56,.64,1) .15s forwards;
}
.deal-pop.is-on .deal-pop__ring--1{
  animation:dealRing 1.5s cubic-bezier(.22,1,.36,1) .15s forwards;
}
.deal-pop.is-on .deal-pop__ring--2{
  animation:dealRing 1.75s cubic-bezier(.22,1,.36,1) .30s forwards;
}
.deal-pop.is-on .deal-pop__sparkle--1{animation:dealSparkle1 1.5s ease-out .20s forwards}
.deal-pop.is-on .deal-pop__sparkle--2{animation:dealSparkle2 1.5s ease-out .28s forwards}
.deal-pop.is-on .deal-pop__sparkle--3{animation:dealSparkle3 1.5s ease-out .32s forwards}
.deal-pop.is-on .deal-pop__sparkle--4{animation:dealSparkle4 1.5s ease-out .24s forwards}

@keyframes dealOverlay{
  0%   {opacity:0}
  10%  {opacity:1}
  85%  {opacity:1}
  100% {opacity:0}
}
@keyframes dealText{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(0)    rotate(-15deg)}
  18%  {opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(4deg)}
  30%  {transform:translate(-50%,-50%) scale(0.92) rotate(-2deg)}
  42%  {transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}
  55%  {transform:translate(-50%,-50%) scale(1)    rotate(0)}
  82%  {opacity:1;transform:translate(-50%,-50%) scale(1)    rotate(0)}
  100% {opacity:0;transform:translate(-50%,-50%) scale(0.7)  rotate(4deg)}
}
@keyframes dealRing{
  0%   {transform:translate(-50%,-50%) scale(0.4);opacity:0.85;border-width:3px}
  100% {transform:translate(-50%,-50%) scale(7);  opacity:0;   border-width:1px}
}
@keyframes dealSparkle1{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  25%  {opacity:1;transform:translate(calc(-50% - 38px),calc(-50% - 32px)) scale(1.4) rotate(180deg)}
  100% {opacity:0;transform:translate(calc(-50% - 110px),calc(-50% - 78px)) scale(0.3) rotate(540deg)}
}
@keyframes dealSparkle2{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  25%  {opacity:1;transform:translate(calc(-50% + 40px),calc(-50% - 28px)) scale(1.4) rotate(180deg)}
  100% {opacity:0;transform:translate(calc(-50% + 115px),calc(-50% - 70px)) scale(0.3) rotate(540deg)}
}
@keyframes dealSparkle3{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  25%  {opacity:1;transform:translate(calc(-50% - 32px),calc(-50% + 36px)) scale(1.4) rotate(-180deg)}
  100% {opacity:0;transform:translate(calc(-50% - 98px),calc(-50% + 84px)) scale(0.3) rotate(-540deg)}
}
@keyframes dealSparkle4{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  25%  {opacity:1;transform:translate(calc(-50% + 34px),calc(-50% + 34px)) scale(1.4) rotate(-180deg)}
  100% {opacity:0;transform:translate(calc(-50% + 108px),calc(-50% + 82px)) scale(0.3) rotate(-540deg)}
}

/* Brand identity row (Shoes Slogan + category tags) */
.ds-brand{
  display:flex;align-items:center;gap:12px;
  margin:12px 0 14px;
}
.ds-brand__logo{
  width:54px;height:54px;border-radius:50%;
  object-fit:cover;background:#fff;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}
.ds-brand__info{
  display:flex;flex-direction:column;gap:8px;min-width:0;
}
.ds-brand__name{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-0.02em;line-height:1;
}

/* Category tag (Fashion), dark gray fill, cyan icon */
.ds-tags{display:flex;gap:8px;flex-wrap:wrap}
.ds-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:12px;font-weight:600;color:#fff;
  background:#1A1F26;
  border:0;
}
.ds-tag i{font-style:normal;font-size:13px;line-height:1;flex-shrink:0}

/* Carousel viewport, both cards stacked, magic crossfade between them */
.ds-viewport{
  position:relative;width:100%;
  overflow:hidden;
  flex:1 1 auto;min-height:240px;
  margin:0 0 12px;
}
.ds-track{
  position:relative;width:100%;height:100%;
}
.ds-card{
  position:absolute;inset:0;
  border-radius:22px;
  overflow:hidden;
  background:#0a0a0a;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.55);
  opacity:0;
  transform:scale(0.94);
  filter:blur(5px);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1),
    filter .22s ease;
}
.ds-card.is-active{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  pointer-events:auto;
}
.ds-card video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* Force own compositor layer, fixes Chrome's quirk where autoplay
     videos inside a transformed parent (.phone-mock--exec) sometimes
     paint as a blank frame until the page is interacted with. */
  transform:translateZ(0);
  will-change:transform;
  background:#0a0a0a;
}
.ds-card__video--dim{opacity:0.30}
.ds-card__text{
  position:absolute;inset:0;
  display:grid;place-items:center;
  text-align:center;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:18px;font-weight:500;line-height:1.4;
  color:#fff;letter-spacing:-0.005em;
  padding:24px 18px;
  pointer-events:none;
}
.ds-card__text b{font-weight:800;color:#FE00F2}

/* Dots indicator */
.ds-dots{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin:0 0 14px;
}
.ds-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background .35s ease,width .35s ease;
}
.ds-dot.is-active{
  background:#FE00F2;
  width:18px;border-radius:999px;
  box-shadow:0 0 10px rgba(254,0,242,0.45);
}

/* Bottom action row, Decline / Timer / Accept */
.ds-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top:auto;padding:0 2px;
}
.ds-action{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex-shrink:0;
}
.ds-action__btn{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.ds-action__btn svg{width:26px;height:26px}
.ds-action--decline .ds-action__btn{
  background:#FE14F3;
  box-shadow:0 0 18px rgba(254,20,243,0.45);
}
.ds-action--accept .ds-action__btn{
  background:#00D4FE;
  box-shadow:0 0 18px rgba(0,212,254,0.45);
}
.ds-action__label{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:13px;font-weight:700;color:#fff;
  letter-spacing:-0.01em;
}

/* Timer pill, magenta fill rises from bottom inside the oval */
.ds-timer{
  position:relative;
  width:90px;height:130px;
  flex-shrink:0;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.18);
  overflow:hidden;
  background:transparent;
}
.ds-timer__fill{
  position:absolute;left:0;right:0;bottom:0;
  height:0%;
  background:linear-gradient(180deg,#FE14F3 0%,#C811BD 100%);
  box-shadow:inset 0 0 16px rgba(254,20,243,0.45);
  transition:height .25s linear;
}
.ds-timer__inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:1px;
  pointer-events:none;
  z-index:2;
}
.ds-timer__num{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:30px;font-weight:800;color:#fff;
  letter-spacing:-0.04em;line-height:1;
}
.ds-timer__unit{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:14px;font-weight:700;color:#fff;
  align-self:flex-end;margin-bottom:4px;
}

/* ── Step 01, Upload Video & CTA (HTML rebuild) ── */
.aud-stage--upload{padding:18px 14px 16px}
.aud-title--multiline{line-height:1.1;margin:10px 0 12px}
.aud-video-frame{
  flex:1;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#0a0a0a;
  margin:4px 0 14px;
  min-height:180px;
  box-shadow:0 8px 30px -8px rgba(0,0,0,0.6);
}
.aud-video-frame video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.aud-actions{
  display:flex;flex-direction:column;gap:10px;
  margin-top:0;
}
.aud-actions .aud-btn{margin-top:0}

/* ── Target Area screen ── */
.aud-stage--target{padding-top:24px}
.aud-toggles{
  list-style:none;padding:0;margin:10px 0 0;
  display:flex;flex-direction:column;gap:0;
}
.aud-toggles li{
  display:flex;align-items:center;gap:10px;
  padding:5px 4px;font-size:15px;font-weight:600;color:#fff;
}
.aud-tg-ico{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
}
.aud-tg-lbl{flex:1}

/* Toggle switch */
.aud-switch{
  position:relative;flex-shrink:0;
  width:36px;height:18px;border-radius:999px;
  background:rgba(255,255,255,0.45);
  transition:background .35s ease;
}
.aud-switch::after{
  content:'';position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:left .35s cubic-bezier(.22,1,.36,1),background .35s ease;
}
.aud-switch.is-on{background:#FE14F3;box-shadow:0 0 10px rgba(254,20,243,0.4)}
.aud-switch.is-on::after{left:20px}

/* Roller, vertical city picker, fades top/bottom */
.aud-roller{
  position:relative;flex:1;margin:18px 0 8px;
  min-height:170px;max-height:180px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
.aud-roller__pill{
  position:absolute;left:24px;right:24px;top:50%;
  transform:translateY(-50%);
  height:34px;border-radius:17px;
  background:rgba(255,255,255,0.08);
  pointer-events:none;
}
.aud-roller__list{
  list-style:none;padding:0;margin:0;
  position:absolute;left:0;right:0;top:50%;
  /* translateY anchors the LIST's TOP at the container's center;
     the offset to a specific item is set via GSAP. */
  will-change:transform;
}
.aud-roller__list li{
  height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:rgba(255,255,255,0.30);
  text-align:center;
  transition:color .35s ease,font-weight .35s ease;
}
.aud-roller__list li.is-target{color:#fff;font-weight:700}

/* Tap ripple, sits AS A CHILD of the tapped element (chip or button) so
   it follows the parent's position automatically. Inset of -4 makes it
   slightly larger than the parent; scale animates from 0.7 → 1 → 1.9. */
.aud-tap{
  position:absolute;
  top:-4px;right:-4px;bottom:-4px;left:-4px;
  border-radius:999px;
  border:2.5px solid #FE14F3;
  background:radial-gradient(circle,rgba(254,20,243,0.28) 0%,rgba(254,20,243,0) 70%);
  box-shadow:0 0 18px rgba(254,20,243,0.65);
  opacity:0;
  transform:scale(0.7);
  transform-origin:center;
  pointer-events:none;
  z-index:4;
}

/* floating chips */
.float-chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:500;
  background:rgba(15,5,36,0.85);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -8px rgba(168,85,247,0.4);
  white-space:nowrap;z-index:4;
  animation:float-chip 4s ease-in-out infinite;
}
.float-chip .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.float-chip--1{top:calc(8% + 15px);left:-6%;animation-delay:0s}
.float-chip--2{top:42%;right:-8%;animation-delay:1.3s;background:rgba(0,212,254,0.15);border-color:rgba(0,212,254,0.4);color:#7ce8ff}
.float-chip--3{bottom:14%;left:-4%;animation-delay:2.6s;background:rgba(254,20,243,0.13);border-color:rgba(254,20,243,0.4);color:#ffb6f8}
@keyframes float-chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:980px){
  /* Make room for the 320×727 phone (was 300×682, scaled 1.067×) */
  .hero__phone{min-height:750px}
  /* All phone mockups scale up to 320×727 visible on mobile */
  .phone-mock{
    transform:scale(1.067);
    transform-origin:top center;
    margin-bottom:46px;
  }
  /* Float chips: with scale 1.067 on top-center, visible content only
     extends ~10px each side of the original 300px box — keep them close
     to the original desktop offsets. */
  .float-chip--1{left:-8%}
  .float-chip--2{right:-8%}
  .float-chip--3{left:-6%}
}

/* ---------- MARQUEE ---------- */
.marquee-wrap{
  padding:30px 0;border-block:1px solid var(--border);
  background:linear-gradient(180deg,transparent,rgba(168,85,247,0.04),transparent);
  overflow:hidden;
}
.marquee-wrap--small{padding:30px 0}
.marquee__lede{
  text-align:center;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;
}
.marquee{overflow:hidden;width:100%}
.marquee__track{
  display:inline-flex;align-items:center;gap:42px;white-space:nowrap;
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-0.01em;
  animation:scroll-left 40s linear infinite;
}
.marquee__track--logos{font-size:clamp(20px,2.4vw,30px);gap:36px;animation-duration:34s;letter-spacing:0}
.marquee--reverse .marquee__track{animation-direction:reverse}
.marquee__track .sep{color:var(--cyan);font-size:0.5em;opacity:0.6}
.marquee__track > span:not(.sep):not(.logo-chip){
  background:linear-gradient(90deg,#fafafa,#9b96b3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-chip{color:rgba(255,255,255,0.55);font-weight:600;transition:color .3s;cursor:default}
.logo-chip:hover{color:#fff}

/* Brand logos in marquee, invert SVG to white, dim, hover-pop */
.brand-logo{
  height:clamp(22px,2.4vw,30px);
  width:auto;
  flex-shrink:0;
  filter:brightness(0) invert(1);
  opacity:0.55;
  transition:opacity .35s ease, transform .35s ease;
  user-select:none;
}
.brand-logo:hover{opacity:1;transform:scale(1.05)}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTION COMMON ---------- */
.section{padding:140px 0;position:relative}
.section__head{max-width:780px;margin:0 auto 80px;text-align:center}
.section__head--left{text-align:left;margin-left:0;margin-bottom:60px}
/* Mobile: re-center the left-aligned section head so it doesn't look orphan
   on narrow widths (applies to FAQ + similar two-column layouts). */
@media (max-width:980px){
  .section__head--left{text-align:center}
}
.tag{
  display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);
  margin-bottom:24px;
}
.tag--accent{
  color:var(--violet-bright);
  border-color:rgba(192,132,252,0.3);background:rgba(168,85,247,0.08);
}
.section__title{font-size:clamp(40px,5.5vw,80px);margin-bottom:20px;letter-spacing:-0.065em;line-height:0.92}
.section__lede{font-size:clamp(15px,1.3vw,19px);color:var(--muted);max-width:600px;margin:0 auto}
.section__head--left .section__lede{margin-left:0}

/* ---------- FLOW (scrollytelling) ---------- */
.flow__layout{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
/* Lift the steps slightly so their visual center aligns with the
   viewport area BELOW the fixed nav (compensates for nav height). */
.flow__layout > .flow__steps{margin-top:-90px}
@media (max-width:980px){.flow__layout > .flow__steps{margin-top:0}}
@media (max-width:980px){.flow__layout{grid-template-columns:1fr;gap:40px}}

.flow__steps{display:flex;flex-direction:column;gap:14px}
.section__head--mid{margin-top:120px;margin-bottom:60px}
@media (max-width:980px){.section__head--mid{margin-top:80px;margin-bottom:40px}}
.flow__step{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:24px 26px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  transition:all .4s ease;cursor:pointer;opacity:0.5;
}
.flow__step.is-active{
  opacity:1;
  background:linear-gradient(135deg,rgba(0,212,254,0.10),rgba(254,20,243,0.06));
  border-color:rgba(168,85,247,0.4);
  transform:translateX(6px);
  box-shadow:0 30px 60px -30px rgba(168,85,247,0.5);
}
.flow__num{
  font-family:'TalktoFont','Inter',sans-serif;font-weight:700;font-size:22px;
  color:var(--muted-2);transition:color .3s;
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
}
.flow__step.is-active .flow__num{background:var(--grad);color:#fff}
.flow__step h3{font-size:20px;margin-bottom:6px}
.flow__step p{color:var(--muted);font-size:14.5px}

.flow__viz{position:relative;height:100%}
.flow__sticky{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px;align-items:center}
.phone-mock--flow{
  width:300px;
  height:682px;
  /* 20% smaller via zoom, resizes both the layout box AND all inner
     content proportionally so no design breaks. */
  zoom:0.8;
  transform:none;
  filter:drop-shadow(0 50px 80px rgba(0,212,254,0.18)) drop-shadow(0 30px 60px rgba(254,20,243,0.14));
}
.phone-mock--flow:hover{transform:none}

.flow__progress{
  width:100%;max-width:240px;
  height:3px;border-radius:999px;background:rgba(255,255,255,0.06);overflow:hidden;
}
.flow__progress i{
  display:block;height:100%;width:20%;
  background:var(--grad);transition:width .4s ease;border-radius:999px;
}

/* ─────────────────────────────────────────────────────────────
   Mobile (≤980px) overrides
   - Hero: large centered title, "world" span larger, ctas not flex
   - Flow scrollytelling: show only the active step (sticky-style),
     phone visible directly below in the same viewport, swap on scroll
   ───────────────────────────────────────────────────────────── */
@media (max-width:980px){

  /* Hero ----------------------------------------------------- */
  /* Reorder so CTAs and trust appear AFTER the phone on mobile.
     `.hero__copy` becomes display:contents so its 4 children become
     direct grid items of .hero__inner, alongside .hero__phone.
     The single-column grid then lays everything out vertically and
     we control the order with the `order` property. */
  .hero__inner{gap:28px}
  .hero__copy{display:contents}
  .hero__title  {order:1}
  .hero__sub    {order:2}
  .hero__phone  {order:3}
  .mcp-install  {order:4}
  .hero__ctas   {order:5}
  .hero__trust  {order:6}

  .hero__title{
    font-size:64px;
    text-align:center;
    line-height:0.95;
    margin-bottom:0;
  }
  .hero__title .grad{
    font-size:72px;
    line-height:1;
  }
  .hero__sub{
    padding:0 45px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;          /* gap on .hero__inner handles spacing */
  }
  .hero__ctas{
    display:revert;
    text-align:center;
    margin-bottom:0;
  }
  /* Center the trust block + chips below for consistency */
  .hero__trust{justify-content:center}
  .trust__items{flex-wrap:wrap;justify-content:center;text-align:center}

  /* Flow scrollytelling ------------------------------------- */
  /* Switch to stacked layout: active step on top, phone below,
     both visible at once thanks to the existing GSAP pin. */
  .flow__layout{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }
  /* Hide non-active steps so only one appears at a time. The JS
     already toggles .is-active as the user scrolls, so this gives
     the requested "category swaps at top, phone updates below"
     parallax effect for free. */
  .flow__steps{gap:0}
  .flow__step{
    display:none;
    padding:18px 20px;
  }
  .flow__step.is-active{
    display:grid;
    transform:none;            /* no translateX on mobile (looks off without siblings) */
    opacity:1;
  }
  .flow__step h3{font-size:18px}
  .flow__step p{font-size:13.5px}

  /* Phone on mobile at 231×526 visible (another 15% smaller than 272×619).
     Native phone is 300×682 → scale(0.771) gives 231×526 visible.
     Using transform:scale because `zoom` has known bugs on iOS Safari
     (inner SVG and absolutely-positioned content don't always scale).
     Layout box stays 300×682 — visible content is smaller, so we use a
     negative margin-bottom to pull following content up. */
  .phone-mock--flow{
    zoom:1;
    transform:scale(0.771) !important;
    transform-origin:top center;
    margin-top:0;
    /* 682 × (1 - 0.771) = 156 → pull next sibling up over the empty space */
    margin-bottom:-156px;
  }
  /* Sticky no longer needed when parent is GSAP-pinned + content
     is already minimal; flatten to plain flex. */
  .flow__sticky{
    position:static;
    top:auto;
    gap:10px;
  }
  .flow__progress{max-width:200px}
}


/* ---------- CREATOR EXEC ---------- */
.exec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){
  /* Mobile: 3D parallax reveal on the creator-exec cards.
     Each card animates from a slightly tilted, faded-out pose to its
     final flat pose as it scrolls through the viewport. A perspective
     on the grid provides the 3D depth; transform-style:preserve-3d on
     the cards ensures rotations don't flatten under iOS Safari. */
  .exec__grid{
    grid-template-columns:1fr;
    gap:32px;
    margin-top:20px;
    perspective:1200px;
    transform-style:preserve-3d;
  }
  .exec__card{
    /* Back to natural flow layout — no absolute stacking. */
    transform-style:preserve-3d;
    transform-origin:center center;
    will-change:transform,opacity;
    /* GSAP owns transforms via scroll scrub; disable any CSS transition
       so the scrub isn't fighting a .4s ease curve. */
    transition:none !important;
  }
  /* Cancel desktop hover lift — GSAP controls transform here */
  .exec__card:hover{transform:none;border-color:var(--border)}
}
.exec__card{
  padding:32px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:all .4s ease;position:relative;overflow:hidden;
}
.exec__card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,0.4)}
.exec__num{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--violet-bright);letter-spacing:0.08em;margin-bottom:18px;
}
.exec__card h3{font-size:22px;margin-bottom:10px}
.exec__card p{color:var(--muted);font-size:14.5px;margin-bottom:22px}

.exec__visual{
  padding:18px;border-radius:14px;
  background:rgba(0,0,0,0.25);border:1px solid var(--border);
  min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}

/* When the visual hosts a phone-mock instead of bubbles/rec-frame.
   The phone-mock keeps its native 300×682 design (all paddings, fonts and
   gaps unchanged) and scales as ONE unit via transform so every inner
   element shrinks proportionally with the card width. */
.exec__visual--phone{
  padding:0;background:transparent;border:0;
  min-height:0;
  /* Fixed 35% reduction of the 300×682 native phone → 195×443 visual size */
  width:195px;
  height:443px;
  max-width:100%;
  margin:0 auto;
  position:relative;
  overflow:visible;
}
.phone-mock--exec{
  position:absolute;
  top:0;left:0;
  width:300px;height:682px;
  transform-origin:top left;
  transform:scale(0.65) !important;
  /* No hover animation — these phones are small visual mockups inside
     bento cards, not interactive elements. Locking transition prevents
     the brief flicker when the parent .exec__card lifts on hover. */
  transition:none !important;
  filter:drop-shadow(0 30px 60px rgba(0,212,254,0.16))
         drop-shadow(0 18px 36px rgba(254,20,243,0.12));
}
.phone-mock--exec:hover{transform:scale(0.65) !important}
.phone-mock--exec .viz-screen{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:1;
  transform:scale(1); /* override default scale(1.02) so videos render flush */
}
.bubble{padding:10px 14px;border-radius:14px;font-size:13px;max-width:80%}
.bubble--in{background:rgba(255,255,255,0.05);align-self:flex-start;border-bottom-left-radius:4px}
.bubble--out{background:var(--grad);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;font-weight:600}
.exec__visual--rec{align-items:center}
.rec-frame{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-radius:10px;background:rgba(239,68,68,0.12);
  border:1px solid rgba(239,68,68,0.3);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:13px;
}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse 1.4s infinite}
.exec__visual--approve{padding:14px}
.approve-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,0.03);font-size:13px;
  font-family:'JetBrains Mono',monospace;
}
.approve-row button{
  padding:5px 12px;border-radius:8px;background:var(--grad);
  color:#fff;font-size:12px;font-weight:600;font-family:'TalktoFont','Inter',sans-serif;
}

/* ---------- STAY IN CONTROL ---------- */
.control__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:980px){.control__grid{grid-template-columns:1fr}}
.control__card{
  padding:36px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
}
@media (max-width:980px){.control__card{grid-template-columns:1fr;gap:32px}}
/* Mobile: phone-mock--exec stays small (195×443) so it remains a visual
   accent inside the exec cards alongside the text — not a hero element.
   Container size unchanged from desktop (195×443), scale stays 0.65, and
   the hover override below mirrors the base to neutralise specificity. */
@media (max-width:980px){
  .phone-mock--exec,
  .phone-mock--exec:hover{
    transform:scale(0.65) !important;
  }
}
.control__card h3{font-size:26px;margin-bottom:10px}
.control__card p{color:var(--muted);font-size:15px;margin-bottom:18px}
.bullets{display:flex;flex-direction:column;gap:8px}
.bullets li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--muted);
}
.bullets li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--grad);flex-shrink:0;
}

/* screen card (real screen in faux phone frame) */
.control__visual--screen{display:flex;justify-content:center;align-items:center}

/* phone-mock variant for the control cards (Buzz Tracking · Buzzers + Map).
   Mirrors .exec__visual--phone: 35 % reduction of the native 300×682 frame
   via transform:scale(0.65) on .phone-mock--exec inside this wrapper. */
.control__visual--phone{
  display:flex;justify-content:center;align-items:center;
  width:100%;
  position:relative;
}
.control__visual--phone .exec-phone-wrap{
  width:195px;height:443px;
  max-width:100%;
  margin:0 auto;
  position:relative;
  overflow:visible;
}
.screen-card{
  position:relative;
  width:100%;max-width:240px;
  aspect-ratio:390/844;
  border-radius:32px;
  background:#000;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 30px 80px -20px rgba(0,212,254,0.18),
    0 20px 60px -20px rgba(254,20,243,0.16),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow:hidden;
  transition:transform .4s ease;
}
.screen-card:hover{transform:translateY(-6px) scale(1.02)}
.screen-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.screen-card__badge{
  position:absolute;top:12px;right:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:0.05em;
  background:rgba(6,0,13,0.7);backdrop-filter:blur(8px);
  border:1px solid var(--border-strong);color:#fff;
}
.screen-card__badge i{width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse 1.4s infinite}

/* ---------- BENTO ---------- */
.bento{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto);gap:18px;
}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bento{grid-template-columns:1fr}}

.bento__cell{
  padding:32px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  position:relative;overflow:hidden;transition:all .4s ease;
  display:flex;flex-direction:column;
}
.bento__cell:hover{transform:translateY(-4px);border-color:rgba(168,85,247,0.4)}
.bento__cell--big{
  grid-row:span 2;
  background:linear-gradient(160deg,rgba(0,212,254,0.10),rgba(254,20,243,0.06));
  border-color:rgba(168,85,247,0.3);
}
.bento__cell--wide{grid-column:span 2}
@media (max-width:980px){
  .bento__cell--big{grid-row:auto;grid-column:span 2}
  .bento__cell--wide{grid-column:span 2}
}
@media (max-width:560px){.bento__cell--big,.bento__cell--wide{grid-column:auto}}
.bento__label{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--violet-bright);font-weight:600;margin-bottom:18px;
}
.bento__cell h3{font-size:clamp(22px,2vw,32px);margin-bottom:12px}
.bento__cell p{color:var(--muted);font-size:14.5px;flex:1}
.bento__num{
  margin-top:20px;
  font-family:'TalktoFont','Inter',sans-serif;font-weight:700;
  font-size:clamp(64px,8vw,120px);line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bento__cell--big .bento__num [data-suffix]{font-size:0.5em}

.mini-funnel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.mini-funnel > div{
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
}
.mini-funnel b{display:block;font-family:'TalktoFont','Inter',sans-serif;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-funnel span{font-size:12px;color:var(--muted)}

.big-num{
  font-family:'TalktoFont','Inter',sans-serif;
  font-size:clamp(40px,5vw,72px);font-weight:700;line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- SHOWCASE (brand vs creator screens) ---------- */
.showcase-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;
}
@media (max-width:980px){.showcase-grid{grid-template-columns:1fr}}

.showcase-card{
  position:relative;
  padding:40px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
  min-height:520px;
  transition:transform .4s ease,border-color .4s ease;
}
.showcase-card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,0.35)}
.showcase-card--brand{
  background:linear-gradient(160deg,rgba(0,212,254,0.08),rgba(168,85,247,0.04));
  border-color:rgba(0,212,254,0.18);
}
.showcase-card--creator{
  background:linear-gradient(160deg,rgba(254,20,243,0.08),rgba(168,85,247,0.04));
  border-color:rgba(254,20,243,0.18);
}
.showcase-card__label{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:600;margin-bottom:24px;
  color:var(--violet-bright);
}
.showcase-card--brand .showcase-card__label{color:#7ce8ff}
.showcase-card--creator .showcase-card__label{color:#ffb6f8}
.showcase-card figcaption{
  font-family:'TalktoFont','Inter',sans-serif;font-weight:600;font-size:18px;
  margin-top:24px;color:var(--text);
}

.screen-stack{
  position:relative;flex:1;
  min-height:360px;
  display:flex;justify-content:center;align-items:center;
  perspective:1000px;
}
.screen-stack img{
  position:absolute;
  width:200px;aspect-ratio:390/844;
  border-radius:24px;
  background:#000;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
  object-fit:cover;object-position:top center;
  transition:transform .5s ease;
}
.screen-stack__a{
  transform:translate(-32%,-4%) rotate(-6deg);
  z-index:2;
}
.screen-stack__b{
  transform:translate(32%,4%) rotate(6deg);
  z-index:1;
  filter:brightness(0.85);
}
.showcase-card:hover .screen-stack__a{transform:translate(-38%,-6%) rotate(-8deg)}
.showcase-card:hover .screen-stack__b{transform:translate(38%,6%) rotate(8deg);filter:brightness(1)}

/* ---------- HORIZONTAL USE CASES ---------- */
.horizontal{position:relative;background:linear-gradient(180deg,transparent,rgba(168,85,247,0.04),transparent)}
.horizontal__intro{padding:140px 0 60px}
.horizontal__track-wrap{height:100vh;overflow:hidden;position:relative}
.horizontal__track{
  height:100%;display:flex;align-items:center;gap:26px;
  padding:0 8vw;will-change:transform;
}
.h-card{
  flex:0 0 clamp(320px,42vw,520px);
  height:74vh;max-height:600px;
  padding:36px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.h-card__cover{height:180px;border-radius:14px;margin:-12px -12px 22px;position:relative;overflow:hidden}
.h-card__cover::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 25% 30%,rgba(255,255,255,0.25),transparent 40%),
    radial-gradient(circle at 75% 70%,rgba(0,0,0,0.3),transparent 50%);
}
.h-card__index{font-family:'TalktoFont','Inter',sans-serif;font-size:14px;font-weight:600;color:var(--muted-2);letter-spacing:0.1em}
.h-card__force{font-size:11.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--violet-bright);margin-top:14px}
.h-card h3{font-size:clamp(32px,3.4vw,48px);margin-top:14px;margin-bottom:14px}
.h-card p{color:var(--muted);font-size:15px;flex:1}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip-list li{
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  font-size:12.5px;color:var(--muted);
}
.h-card--cta{
  background:linear-gradient(135deg,rgba(0,212,254,0.16),rgba(254,20,243,0.1));
  border-color:rgba(168,85,247,0.35);
  justify-content:center;text-align:center;align-items:center;
}
.h-card--cta h3{font-size:clamp(28px,3vw,40px)}
.h-card--cta p{flex:none;margin-bottom:24px}

/* ---------- VS TIMELINE ---------- */
.vs{display:flex;flex-direction:column;gap:30px;max-width:1100px;margin:0 auto}
.vs__row{display:grid;grid-template-columns:240px 1fr 120px;gap:30px;align-items:center}
@media (max-width:980px){.vs__row{grid-template-columns:1fr;gap:14px}}
.vs__label b{display:block;font-size:18px;font-family:'TalktoFont','Inter',sans-serif;margin-bottom:4px}
.vs__label span{color:var(--muted);font-size:13.5px}
.vs__bar{
  display:flex;height:60px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:rgba(255,255,255,0.02);
}
.vs__seg{
  width:var(--w);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  font-size:11.5px;font-weight:600;color:#fff;
  border-right:1px solid rgba(0,0,0,0.3);
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  padding:0 8px;text-align:center;
}
.vs__seg i{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500;margin-top:2px}
.vs__seg:last-child{border-right:0}
.vs__row--old .vs__seg{opacity:0.7}
.vs__seg--solo{background:var(--grad)!important;color:#fff;opacity:1;font-size:14px}
.vs__time{text-align:right;font-family:'TalktoFont','Inter',sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,32px)}
.vs__row--new .vs__time{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs__row--old .vs__time{color:var(--muted-2)}

/* ---------- FAQ ---------- */
.faq__container{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start}
@media (max-width:980px){.faq__container{grid-template-columns:1fr;gap:40px}}

.faq{display:flex;flex-direction:column;gap:10px}
.faq__item{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  transition:border-color .3s,background .3s;
}
.faq__item[open]{border-color:rgba(168,85,247,0.4);background:rgba(168,85,247,0.05)}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:22px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:16px;font-weight:600;font-family:'TalktoFont','Inter',sans-serif;
  letter-spacing:-0.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border-strong);
  background:
    linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
  transition:transform .3s,background .3s;
}
.faq__item[open] summary::after{transform:rotate(45deg);border-color:var(--violet);color:var(--violet-bright)}
.faq__body{padding:0 26px 22px;color:var(--muted);font-size:15px;max-width:65ch}

/* ---------- CTA ---------- */
.cta{padding:160px 0}
.cta__inner{
  max-width:820px;margin:0 auto;text-align:center;
  padding:70px 40px;border-radius:var(--radius-xl);
  background:
    radial-gradient(ellipse at top,rgba(168,85,247,0.22),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  position:relative;
  /* Glow halo via box-shadow (recreates the previous ::before+filter:blur effect).
     Box-shadow follows border-radius natively on every browser including iOS Safari,
     unlike a blurred pseudo-element which can leak past rounded corners due to
     overflow:hidden + z-index:-1 + filter compositing bugs. */
  box-shadow:
    /* Cyan glow (top-left axis, matches --grad 110deg start) */
    -20px -10px 90px -10px rgba(0, 212, 254, 0.32),
    /* Magenta glow (bottom-right axis, --grad end) */
    20px 30px 90px -10px rgba(254, 20, 243, 0.32),
    /* Soft ambient purple haze */
    0 40px 80px -20px rgba(168, 85, 247, 0.28);
}
/* Old ::before glow disabled — replaced by the box-shadow above. */
.cta__inner::before{display:none}
.cta__title{font-size:clamp(40px,6vw,80px);margin-bottom:18px;letter-spacing:-0.07em;line-height:0.92}
.cta__sub{font-size:clamp(15px,1.3vw,18px);color:var(--muted);margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}
.cta__form{
  display:flex;gap:8px;max-width:540px;margin:20px auto;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:999px;padding:6px;transition:border-color .2s;
}
.cta__form:focus-within{border-color:var(--violet)}
.cta__form input{flex:1;background:transparent;border:0;outline:0;padding:10px 18px;color:var(--text);font-size:15px}
.cta__form input::placeholder{color:var(--muted-2)}
.cta__contact{margin-top:30px;font-size:14px;color:var(--muted)}
.cta__contact a{color:var(--violet-bright);font-weight:500}
.cta__contact a:hover{text-decoration:underline}

/* Step 2 — detailed questions form (revealed after the email step) */
.cta__details{
  display:flex;flex-direction:column;gap:18px;
  max-width:560px;margin:0 auto;
  text-align:left;
}
.cta__details[hidden]{display:none}
.cta__details-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
}
.cta__field{display:flex;flex-direction:column;gap:6px}
.cta__field--wide{grid-column:1 / -1}
.cta__field > span{
  font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  padding-left:2px;
}
.cta__field input,
.cta__field select,
.cta__field textarea{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text);
  font:inherit;
  font-size:15px;
  transition:border-color .2s, background .2s;
}
.cta__field input:focus,
.cta__field select:focus,
.cta__field textarea:focus{
  outline:none;
  border-color:var(--violet);
  background:rgba(255,255,255,0.06);
}
.cta__field input::placeholder,
.cta__field textarea::placeholder{color:rgba(255,255,255,0.32)}
.cta__field textarea{resize:vertical;min-height:84px}
.cta__field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 7 11 1'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
.cta__details-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:6px;
}

/* Step 3 — sent confirmation */
.cta__sent{
  max-width:520px;margin:0 auto;padding:8px 0 6px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cta__sent[hidden]{display:none}
.cta__sent-check{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(168,85,247,0.22),rgba(0,212,254,0.22));
  border:1px solid rgba(255,255,255,0.12);
  color:#22C55E;
  margin-bottom:6px;
}
.cta__sent h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0}
.cta__sent p{color:var(--muted);font-size:15px;line-height:1.55;margin:0;max-width:480px}

@media (max-width:560px){
  .cta__form{flex-direction:column;border-radius:18px;padding:10px}
  .cta__form .btn{width:100%}
  .cta__inner{padding:40px 24px}
  .cta__details-grid{grid-template-columns:1fr}
  .cta__details-actions{flex-direction:column-reverse}
  .cta__details-actions .btn{width:100%}
}

/* ---------- FOOTER ---------- */
.footer{padding:80px 0 30px;border-top:1px solid var(--border);background:var(--bg-2)}
.footer__inner{display:grid;grid-template-columns:1fr 2fr;gap:60px;margin-bottom:60px}
@media (max-width:980px){.footer__inner{grid-template-columns:1fr}}
.footer__brand{display:flex;flex-direction:column;gap:14px}
.footer__brand p{color:var(--muted);font-size:14.5px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer__cols h4{
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;font-weight:600;
}
.footer__cols a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .2s}
.footer__cols a:hover{color:var(--text)}
.footer__bottom{
  display:flex;justify-content:space-between;
  padding-top:30px;border-top:1px solid var(--border);
  color:var(--muted-2);font-size:12.5px;
}
@media (max-width:560px){.footer__bottom{flex-direction:column;gap:8px;text-align:center}}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
[data-anim]{opacity:0}
[data-anim].is-visible{opacity:1}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .section{padding:90px 0}
  .horizontal__intro{padding:90px 0 40px}
  .h-card{padding:28px}
  /* .hero__title font-size is now handled in the dedicated mobile block
     above (64px main, 72px on the .grad span "world"). */
  .screen-stack img{width:160px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,[data-anim]{opacity:1;transform:none}
}