:root{
    --surface-0:#0b0b0f;
    --surface-1:#111118;
    --surface-2:#18181f;
    --surface-3:#1f1f28;
    --surface-4:#272733;
    --line:#232330;
    --line-subtle:#1a1a24;
    --ink-1:#e4e4f0;
    --ink-2:#868699;
    --ink-3:#44445a;
    --accent:#6366f1;
    --accent-hover:#818cf8;
    --accent-muted:#6366f118;
    --accent-border:#6366f130;
    --accent-strong:#818cf8;
    /* Call to action only. Never use these for brand/accent styling. */
    --cta:#f59e0b;
    --cta-strong:#fbbf24;
    --cta-ink:#1a1206;
    --cta-glow:rgba(245,158,11,.5);
    --font-sans:'Inter','system-ui',sans-serif;
    --font-mono:'JetBrains Mono','ui-monospace',monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--surface-0);
    color:var(--ink-1);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    /* The statements slide in from off both edges, so contain the sideways
       overflow. clip rather than hidden: hidden would make the body a scroll
       container, which breaks position:sticky for anything added later. */
    overflow-x:clip;
  }
  ::selection{background:var(--accent-muted);color:var(--ink-1)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--surface-0)}
  ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
  /* Firefox has no thumb pseudo element, so it takes the colors here */
  html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-0)}
  a{color:inherit;text-decoration:none}

  /* The fixed header spans the viewport, and body's overflow-x:clip cannot
     contain a fixed element, so on narrow screens the reveal offsets below
     were still widening the page and pushing the nav CTA off the right edge.
     Clipping at the root contains it. clip, not hidden, so the root never
     becomes a scroll container. */
  html{overflow-x:clip}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%}

  /* ===== Header ===== */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(11,11,15,.72);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    height:68px;
  }
  .logo{
    display:flex;align-items:center;gap:11px;
    font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink-1);
  }
  .logo .mark{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:18px;color:#fff;
    box-shadow:0 0 18px -4px var(--accent);
  }

  /* ===== Primary nav links ===== */
  .nav-links{display:flex;align-items:center;gap:8px}
  .nav-links a{
    font-family:var(--font-sans);font-size:14px;font-weight:500;
    color:var(--ink-2);padding:9px 14px;border-radius:8px;
    transition:color .25s ease, background .25s ease;
  }
  .nav-links a:hover{color:var(--ink-1);background:var(--surface-2)}
  .nav-links .nav-cta{
    color:var(--cta-ink);font-weight:600;
    background:linear-gradient(135deg,var(--cta) 0%,var(--cta-strong) 100%);
    box-shadow:0 6px 22px -10px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .nav-links .nav-cta:hover{color:var(--cta-ink);background:linear-gradient(135deg,var(--cta) 0%,var(--cta-strong) 100%);filter:brightness(1.06)}
  @media (max-width:560px){
    .nav-links a{padding:8px 9px;font-size:13px}
  }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-sans);font-weight:600;font-size:16px;
    padding:15px 28px;border-radius:10px;cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--cta) 0%,var(--cta-strong) 100%);
    color:var(--cta-ink);
    box-shadow:0 8px 30px -10px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 44px -12px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .btn-primary .arr{transition:transform .25s ease}
  .btn-primary:hover .arr{transform:translateX(3px)}
  /* The closing call to action carries more weight than the one in the hero */
  .btn-lg{font-size:19px;padding:19px 38px;border-radius:12px}

  /* ===== HERO ===== */
  .hero{
    position:relative;min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:84px 0 56px;overflow:hidden;
    /* Solid fill so the first screen stays clean. The video is revealed only
       once you scroll past the hero into the statements below. */
    background:
      radial-gradient(ellipse 900px 620px at 50% 22%, rgba(99,102,241,.13), transparent 60%),
      radial-gradient(circle at 50% 88%, rgba(99,102,241,.06), transparent 55%),
      var(--surface-0);
  }
  .hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 40%, #000 30%, transparent 80%);
    mask-image:radial-gradient(ellipse 80% 75% at 50% 40%, #000 30%, transparent 80%);
    animation:gridDrift 90s linear infinite;
  }
  @keyframes gridDrift{from{background-position:0 0}to{background-position:52px 52px}}

  .hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}

  .wordmark{
    font-size:clamp(72px,7.6vw,110px);
    font-weight:900;letter-spacing:-.055em;line-height:.85;
    background:linear-gradient(118deg,#e4e4f0 0%,#c7c9e4 24%,#818cf8 52%,#6366f1 74%,#a5b4fc 100%);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:gradientFlow 9s ease-in-out infinite;
  }
  @keyframes gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

  .hero .tagline{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    font-size:clamp(26px,4.6vw,52px);
    font-weight:800;letter-spacing:-.02em;line-height:1.02;
    color:var(--ink-1);margin-top:8px;
  }
  .hero .tagline .stage{white-space:nowrap}
  .hero .tagline .accent{color:var(--accent)}
  .hero .tagline .arrow-down{
    font-size:.9em;line-height:1;color:var(--accent);
    filter:drop-shadow(0 0 18px rgba(129,140,248,.35));
    animation:arrowNudge 1.8s ease-in-out infinite;
  }
  @keyframes arrowNudge{
    0%,100%{transform:translateY(0);opacity:.7}
    50%{transform:translateY(3px);opacity:1}
  }
  /* CTA sitting directly under the froto */
  .hero .froto-cta{display:flex;justify-content:center;margin-top:14px}

  /* scroll cue */
  .scroll-cue{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    color:var(--ink-3);
    transition:color .25s ease;
    animation:cueBob 2.2s ease-in-out infinite;
  }
  .scroll-cue:hover{color:var(--accent-strong)}
  .scroll-cue .cue-label{
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .scroll-cue .cue-arrow{width:22px;height:22px;display:block}
  @keyframes cueBob{
    0%,100%{transform:translate(-50%,0)}
    50%{transform:translate(-50%,7px)}
  }

  /* ===== Statements ===== */
  .statements{padding:38vh 0 46vh}

  /* One column. The pitch runs on text alone: the product is unfamiliar
     enough that showing it before the copy has framed it just reads as
     noise, so nothing competes with the words until the demo band below. */
  .st-wrap{display:block}
  .st-copy{min-width:0}
  .st-copy .statement:first-child{margin-top:0}
  .statement{
    font-size:clamp(32px,5vw,68px);
    font-weight:800;letter-spacing:-.03em;line-height:1.12;
    max-width:15ch;text-wrap:balance;
  }
  .statement.left{margin-right:auto;text-align:left}
  .statement.right{margin-left:auto;text-align:right}
  .statement.center{margin-left:auto;margin-right:auto;text-align:center}
  .statement + .statement{margin-top:70vh}

  /* Centered lead-in. Sits closer to the line it introduces than the
     statements sit to each other, so the setup and the punch stay paired. */
  .statement.lead{
    font-size:clamp(28px,3.4vw,46px);
    font-weight:700;letter-spacing:-.02em;color:var(--ink-1);max-width:none;
  }
  .statement.lead + .statement{margin-top:26vh}

  .statement.problem{color:var(--ink-2)}
  .statement.problem b{color:var(--ink-1);font-weight:900}
  /* The long "why" line: a notch smaller so it still reads as one thought */
  .statement.reason{color:var(--ink-2);font-size:clamp(27px,4vw,54px);max-width:19ch}
  .statement.reason b{color:var(--ink-1);font-weight:900}
  /* The longest line on the page: smaller again so it does not fill the screen */
  .statement.detail{color:var(--ink-2);font-size:clamp(23px,3.2vw,44px);max-width:24ch;line-height:1.2}
  .statement.detail b{color:var(--ink-1);font-weight:900}
  /* The payoff of the flashcards line: three separate hits, stacked and
     staggered, rather than one comma-run the eye skims past */
  .statement.consequence{color:var(--ink-1);max-width:none}
  .consequence .lead-in{
    display:block;font-size:clamp(18px,2vw,26px);
    font-weight:600;letter-spacing:0;color:var(--ink-3);margin-bottom:20px;
  }
  .consequence .damage{list-style:none;display:flex;flex-direction:column;gap:12px}
  .consequence .damage li{
    font-size:clamp(28px,4.2vw,58px);
    font-weight:800;letter-spacing:-.03em;line-height:1.08;
    display:flex;align-items:center;gap:18px;
  }
  .consequence .damage li::before{
    content:'';flex:none;width:9px;height:9px;border-radius:2px;
    background:var(--accent);box-shadow:0 0 14px -1px var(--accent);
  }
  /* Each hit arrives a beat after the one before it */
  .consequence .damage li{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .consequence.in .damage li{opacity:1;transform:none}
  .consequence.in .damage li:nth-child(1){transition-delay:.18s}
  .consequence.in .damage li:nth-child(2){transition-delay:.34s}
  .consequence.in .damage li:nth-child(3){transition-delay:.50s}
  /* The plan: block sits centered under its lead-in, but the steps stay
     left aligned inside it so the markers hold a straight edge */
  .statement.plan{max-width:none;display:flex;justify-content:center}
  .plan .steps{
    list-style:none;display:flex;flex-direction:column;gap:14px;text-align:left;
  }
  .plan .steps li{
    font-size:clamp(21px,2.7vw,38px);
    font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink-1);
    display:flex;align-items:center;gap:18px;
  }
  .plan .steps li::before{
    content:'';flex:none;width:9px;height:9px;border-radius:2px;
    background:var(--accent);box-shadow:0 0 14px -1px var(--accent);
  }
  /* Steps arrive one after another, like a plan being laid out */
  .plan .steps li{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .plan.in .steps li{opacity:1;transform:none}
  .plan.in .steps li:nth-child(1){transition-delay:.14s}
  .plan.in .steps li:nth-child(2){transition-delay:.26s}
  .plan.in .steps li:nth-child(3){transition-delay:.38s}
  .plan.in .steps li:nth-child(4){transition-delay:.50s}
  .plan.in .steps li:nth-child(5){transition-delay:.62s}

  /* The closing button belongs to the plan above it, so it sits closer than
     the statements sit to each other */
  .statement.cta{max-width:none;display:flex;justify-content:center}
  .statement.plan + .statement.cta{margin-top:26vh}

  /* The founder voice: quieter and lighter than the statements around it,
     with the hopeful half in white */
  .statement.empathy{
    color:var(--ink-2);font-size:clamp(24px,3.3vw,46px);
    font-weight:600;letter-spacing:-.02em;max-width:23ch;line-height:1.25;
  }
  .statement.empathy b{color:var(--ink-1);font-weight:800}

  /* The turn: white sentence, the two capabilities carry the brand color */
  .statement.solution{color:var(--ink-1);font-size:clamp(26px,3.8vw,52px);max-width:21ch}
  .statement.solution b{color:var(--accent-strong);font-weight:900}

  /* The demo: centered, and sized against the source rather than the page.
     The footage is 1920px wide, so this shows it near half scale. The old
     460px column was 22% and nothing in the product could be read. Going far
     below this width walks back into that problem. */
  .demo-band{margin-top:30vh}
  .clip{width:100%;max-width:1040px;margin:0 auto}
  .clip-frame{
    width:100%;border-radius:14px;overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface-1);
    box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 70px -40px rgba(99,102,241,.4);
  }
  .clip-video{display:block;width:100%;height:auto}
  .clip-cap{
    margin-top:16px;text-align:center;
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  }
  /* The button belongs to the demo it follows, so it sits close */
  .demo-band + .statement.cta{margin-top:18vh}

  /* The two studies behind the claim. */
  .statement.studies{
    max-width:900px;font-size:initial;font-weight:400;letter-spacing:normal;
    display:grid;grid-template-columns:1fr 1fr;gap:20px;
    width:100%;
  }
  .study-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    padding:26px 26px 22px;border-radius:14px;text-align:left;
    background:var(--surface-1);
    border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .study-card:hover{
    transform:translateY(-4px);
    background:var(--surface-2);
    border-color:var(--accent-border);
    box-shadow:0 18px 44px -22px rgba(99,102,241,.55);
  }
  .study-topic{
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong);
  }
  .study-finding{
    font-size:17px;font-weight:500;line-height:1.45;color:var(--ink-2);
  }
  .study-finding b{color:var(--ink-1);font-weight:700}
  .study-meta{
    font-size:13px;line-height:1.4;color:var(--ink-3);margin-top:auto;
  }
  .study-link{
    display:inline-flex;align-items:center;gap:7px;
    font-size:14px;font-weight:600;color:var(--ink-2);
    transition:color .25s ease;
  }
  .study-link .arr{transition:transform .25s ease}
  .study-card:hover .study-link{color:var(--accent-strong)}
  .study-card:hover .study-link .arr{transform:translateX(3px)}
  .statement.promise{color:var(--accent-strong);max-width:17ch}
  .statement.promise b{font-weight:900;color:var(--accent)}

  /* ===== Scroll reveal: slide in from the side the statement sits on ===== */
  .reveal{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.left{transform:translateX(-56px)}
  .reveal.right{transform:translateX(56px)}
  .reveal.center{transform:translateY(26px)}
  .reveal.in{opacity:1;transform:none}

  /* ===== Footer ===== */
  footer{border-top:1px solid var(--line);padding:38px 0;background:var(--surface-0)}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .foot .copy{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em}
  .foot .copy .accent{color:var(--accent)}

  /* ===== Responsive ===== */
  @media (max-width:860px){
    .wrap{padding:0 24px}
    .statements{padding:22vh 0 32vh}
    .statement{max-width:12ch}
    .statement.promise{max-width:13ch}
    .statement + .statement{margin-top:55vh}
    .statement.studies{grid-template-columns:1fr;max-width:none}
    .demo-band{margin-top:22vh}
    .demo-band + .statement.cta{margin-top:14vh}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .consequence .damage li,.plan .steps li{opacity:1;transform:none}
  }

  /* ===== Legal pages (privacy, terms) =====
     Ordinary readable documents, not part of the pitch. The landing page is
     built on huge type and vh-sized gaps; that would make a policy unreadable,
     so these opt out of all of it and use a normal measure and rhythm. The
     header is position:fixed, hence the top padding. */
  .legal{
    padding:132px 0 96px;
  }
  .legal .wrap{max-width:760px}
  .legal h1{
    font-size:clamp(34px,4.6vw,46px);
    font-weight:800;letter-spacing:-.03em;line-height:1.1;
    margin-bottom:10px;
  }
  .legal .updated{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
    margin-bottom:14px;
  }
  .legal .intro{color:var(--ink-2);font-size:17px;line-height:1.65}
  .legal .intro + .intro{margin-top:14px}
  .legal hr{
    border:0;border-top:1px solid var(--line);
    margin:40px 0;
  }
  .legal h2{
    font-size:22px;font-weight:700;letter-spacing:-.015em;
    margin:44px 0 14px;
  }
  .legal p{color:var(--ink-2);font-size:16px;line-height:1.7}
  .legal p + p{margin-top:14px}
  .legal b,.legal strong{color:var(--ink-1);font-weight:600}
  .legal ul{margin:14px 0 0;padding-left:22px}
  .legal li{color:var(--ink-2);font-size:16px;line-height:1.7}
  .legal li + li{margin-top:8px}
  .legal a{color:var(--accent-hover);text-decoration:none;border-bottom:1px solid var(--accent-border)}
  .legal a:hover{border-bottom-color:var(--accent-hover)}
  /* Pulled-out warnings. These are the three things users genuinely get wrong
     about Evoke (permanent shares, link-visible images, keep your own backups),
     so they get a visual stop rather than sitting flat in a paragraph. */
  .legal .callout{
    margin-top:18px;padding:16px 18px;
    background:var(--accent-muted);
    border:1px solid var(--accent-border);
    border-left:3px solid var(--accent);
    border-radius:10px;
  }
  .legal .callout p{color:var(--ink-1)}
  .legal .back{
    display:inline-block;margin-top:52px;
    font-size:14px;color:var(--ink-2);text-decoration:none;border:0;
  }
  .legal .back:hover{color:var(--ink-1)}

  /* Footer legal links */
  .foot .foot-links{display:flex;align-items:center;gap:18px}
  .foot .foot-links a{
    font-size:13px;color:var(--ink-2);text-decoration:none;
    transition:color .2s ease;
  }
  .foot .foot-links a:hover{color:var(--ink-1)}
  @media (max-width:560px){
    .legal{padding:108px 0 72px}
    .foot{justify-content:center;text-align:center}
  }