/* ============ TOKENS ============ */
:root{
  --bg: #0b0710;
  --bg-alt: #150c22;
  --bg-soft: #1d1129;
  --ink: #f3eefb;
  --ink-dim: #b3a4c9;
  --primary: #6212e5;
  --primary-light: #9b6bff;
  --accent: #ff3da6;
  --line: rgba(243,238,251,0.12);
  --radius: 20px;
  --ff-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ff-body: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:500;
  overflow-x:hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
  cursor:auto;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--ff-display); margin:0; line-height:1.02; letter-spacing:-0.02em; }
p{ margin:0; }
section{ position:relative; }

/* theme morph targets */
body[data-theme="hero"]{ background:var(--bg); }
body[data-theme="benefits"]{ background:var(--bg-alt); }
body[data-theme="showcase"]{ background:#08060c; }
body[data-theme="proof"]{ background:var(--bg-soft); }
body[data-theme="cta"]{ background:var(--bg); }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  z-index:999; will-change:width;
}

/* ============ CURSOR ============ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:998;
  border-radius:50%; transform:translate(-50%,-50%);
  opacity:0;
}
.cursor-dot{ width:6px; height:6px; background:var(--accent); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--primary-light); transition:opacity .2s, width .2s, height .2s; }
@media (pointer:fine){
  .cursor-dot,.cursor-ring{ opacity:1; }
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,64px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(11,7,16,0.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.brand-mark{
  font-family:var(--ff-display); font-weight:700; font-size:1.4rem; letter-spacing:-0.02em;
}
.brand-dot{ color:var(--primary-light); }
.header-nav{ display:flex; align-items:center; gap:clamp(14px,3vw,32px); }
.nav-link{ font-size:.92rem; font-weight:600; color:var(--ink-dim); transition:color .25s; }
.nav-link:hover{ color:var(--ink); }
.nav-cta{
  font-size:.88rem; font-weight:700; padding:.65em 1.3em; border-radius:100px;
  background:var(--ink); color:var(--bg);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:1em 1.9em; border-radius:100px; font-weight:700; font-size:1rem;
  font-family:var(--ff-body); position:relative; white-space:nowrap;
}
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 12px 30px -10px rgba(98,18,229,.65); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-huge{ padding:1.3em 2.8em; font-size:1.15rem; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:2.4rem; }

/* ============ HERO ============ */
.hero-wrap{ height:340vh; position:relative; }
.hero-stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:
    radial-gradient(70% 60% at 50% 15%, rgba(98,18,229,.55), transparent 70%),
    radial-gradient(50% 40% at 85% 80%, rgba(255,61,166,.25), transparent 70%),
    var(--bg);
}
.hero-bg-glow{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(155,107,255,.18), transparent 60%);
  will-change:transform, opacity;
}
.hero-grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.25;
  mask-image: radial-gradient(60% 60% at 50% 40%, black, transparent 75%);
}
.hero-personas{ position:absolute; inset:0; pointer-events:none; }
.hero-personas .persona{
  position:absolute; border-radius:28px; object-fit:cover;
  width:min(20vw,190px); aspect-ratio:3/4;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  will-change:transform, opacity;
  border:1px solid rgba(255,255,255,.08);
}
.persona.p1{ top:10%; left:6%; }
.persona.p2{ top:56%; left:14%; }
.persona.p3{ top:8%; right:8%; }
.persona.p4{ top:58%; right:6%; }
.persona.p5{ top:32%; left:50%; transform:translateX(-50%); width:min(22vw,220px); }

.hero-copy{ position:relative; z-index:5; padding:0 20px; max-width:900px; }
.eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--primary-light); margin-bottom:1rem;
}
.hero-title{
  font-size:clamp(2.6rem,8vw,6rem); font-weight:700; color:var(--ink);
}
.hero-sub{
  margin-top:1.4rem; font-size:clamp(1rem,2vw,1.25rem); color:var(--ink-dim);
  max-width:560px; margin-left:auto; margin-right:auto; font-weight:500;
}
.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.scroll-hint-line{ width:1px; height:40px; background:var(--line); overflow:hidden; }
.scroll-hint-line i{ display:block; width:100%; height:14px; background:var(--accent); animation:scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint{ 0%{ transform:translateY(-20px);} 100%{ transform:translateY(46px);} }

/* split text */
.split-text .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-text .char{
  display:inline-block; transform:translateY(110%); opacity:0;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.split-text.in-view .char{ transform:translateY(0); opacity:1; }

/* ============ MARQUEE ============ */
.marquee-section{ padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.marquee{ width:100%; overflow:hidden; }
.marquee-track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  font-family:var(--ff-display); font-size:clamp(1.4rem,4vw,2.6rem); font-weight:600;
  color:transparent; -webkit-text-stroke:1px var(--ink-dim);
}
.marquee-track span{ padding:0 1.2rem; }
.marquee-track span:nth-child(2n){ -webkit-text-stroke:0; color:var(--primary-light); }

/* ============ BENEFITS ============ */
.benefits{ padding:clamp(100px,14vw,180px) clamp(20px,5vw,64px); overflow:hidden; }
.benefits-inner{ max-width:1200px; margin:0 auto; position:relative; z-index:3; }
.section-title{ font-size:clamp(2rem,4.6vw,3.4rem); font-weight:700; max-width:820px; }
.benefit-grid{
  margin-top:clamp(48px,6vw,90px); display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.benefit-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,3vw,40px); backdrop-filter:blur(6px);
}
.benefit-num{ font-family:var(--ff-display); font-size:.9rem; color:var(--accent); font-weight:700; }
.benefit-card h3{ font-size:1.5rem; margin-top:1rem; }
.benefit-card p{ margin-top:.8rem; color:var(--ink-dim); font-size:.98rem; line-height:1.55; }
.benefits-parallax-shape{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:1; pointer-events:none; will-change:transform;
}
.shape-a{ width:420px; height:420px; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); top:-10%; right:-10%; opacity:.5; }
.shape-b{ width:320px; height:320px; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); bottom:-10%; left:-6%; opacity:.35; }

/* ============ SHOWCASE (horizontal scroll) ============ */
.showcase-wrap{ height:340vh; position:relative; }
.showcase-stage{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding-top:calc(var(--header-h) + 20px);
}
.showcase-head{ padding:0 clamp(20px,5vw,64px); margin-bottom:clamp(24px,4vw,48px); }
.showcase-track{
  display:flex; gap:24px; padding:0 clamp(20px,5vw,64px); will-change:transform;
}
.showcase-card{
  flex:0 0 clamp(240px,28vw,340px); background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; padding-bottom:22px;
}
.showcase-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.card-tag{
  margin:16px 20px 0; display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:100px; padding:.3em .9em;
}
.showcase-card h3{ margin:14px 20px 0; font-size:1.2rem; }
.showcase-card p{ margin:8px 20px 0; color:var(--ink-dim); font-size:.9rem; line-height:1.5; }
.showcase-card--cta{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(150deg, rgba(98,18,229,.35), rgba(255,61,166,.2));
  padding:40px 26px;
}
.card-cta-inner h3{ font-size:1.6rem; margin-top:.6rem; }
.card-cta-inner .btn{ margin-top:1.4rem; }

/* ============ PROOF ============ */
.proof{ padding:clamp(100px,14vw,180px) clamp(20px,5vw,64px); }
.proof-inner{ max-width:1200px; margin:0 auto; }
.stat-grid{
  margin-top:clamp(48px,6vw,90px); display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.stat{ border-top:1px solid var(--line); padding-top:20px; }
.stat-prefix{ font-family:var(--ff-display); font-size:clamp(2rem,4vw,3.2rem); font-weight:700; color:var(--primary-light); }
.stat-num{
  font-family:var(--ff-display); font-size:clamp(2.4rem,5.6vw,4.2rem); font-weight:700;
  color:var(--ink); display:inline-block;
}
.stat-label{ display:block; margin-top:.6rem; color:var(--ink-dim); font-size:.9rem; max-width:220px; }

/* ============ CTA ============ */
.cta-section{
  min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(60px,10vw,120px) 20px; position:relative; overflow:hidden;
}
.cta-glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 40%, rgba(98,18,229,.5), transparent 70%);
  z-index:0;
}
.cta-title{ font-size:clamp(2.6rem,8vw,5.6rem); font-weight:700; position:relative; z-index:1; }
.cta-sub{ margin-top:1.2rem; color:var(--ink-dim); font-size:1.1rem; position:relative; z-index:1; }
.cta-section .btn{ margin-top:2.4rem; position:relative; z-index:1; }

/* ============ FOOTER ============ */
.site-footer{
  padding:48px clamp(20px,5vw,64px) 40px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.footer-brand{ font-family:var(--ff-display); font-weight:700; font-size:1.2rem; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ font-size:.88rem; color:var(--ink-dim); }
.footer-links a:hover{ color:var(--ink); }
.footer-note{ width:100%; font-size:.78rem; color:var(--ink-dim); opacity:.6; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .benefit-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .header-nav .nav-link{ display:none; }
  .persona.p5{ display:none; }
  .hero-personas .persona{ width:26vw; }
}
@media (max-width:600px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .showcase-card{ flex-basis:70vw; }
  .persona.p1,.persona.p4{ opacity:.6; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .hero-wrap, .showcase-wrap{ height:auto; }
  .hero-stage, .showcase-stage{ position:relative; height:auto; padding:80px 20px; }
  .showcase-track{ flex-wrap:wrap; transform:none !important; }
  .split-text .char{ transition:none; transform:none; opacity:1; }
  .marquee-track{ animation:none !important; }
  * { scroll-behavior:auto !important; }
}