/* sections/hero.html: headline, downloads and the live demo, a Noty window (#hv-stage, js/sections/hero.js).
   Uses core.css tokens only (window lights and the orb's glass are illustration details). The hero slides under the
   transparent sticky nav so its paper, dot grid and cobalt glow run to the top of the page with no seam. */
.hero{position:relative;isolation:isolate;margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + clamp(28px,5vw,80px)) 0 clamp(56px,7vw,112px);overflow:hidden;overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 1px 1px,var(--line-2) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(ellipse 62% 58% at 72% 42%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);mask:radial-gradient(ellipse 62% 58% at 72% 42%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%)}
/* the cobalt glow sits behind the demo window wherever it is */
.hero-visual::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1000px,150%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent 72%)}
@media (max-width:1023.98px){
  .hero-bg::before{-webkit-mask:radial-gradient(ellipse 90% 40% at 50% 72%,#000 0%,transparent 80%);mask:radial-gradient(ellipse 90% 40% at 50% 72%,#000 0%,transparent 80%)}
}

.hero-in{display:grid;gap:clamp(48px,6vw,64px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.hero-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(40px,4.5vw,80px)}}

/* ---- copy ---- */
.hero-copy{container-type:inline-size;min-width:0}
.hero-pill{margin-bottom:var(--space-6)}
.hero-pill .pill-tag{margin-right:0}
.hero-pill-text{min-width:0}
.hero-pill svg{width:15px;height:15px;color:var(--ink-3);transition:transform var(--d-2) var(--ease-out)}
.hero-pill:hover svg{transform:translateX(2px);color:var(--ink-2)}
.hero-kicker{display:flex;flex-wrap:wrap;margin-bottom:var(--space-5)}
.hero-kicker-win{color:var(--ink-3)}
/* the display headline: sized to the copy column (cqi) so "Ask anything." never breaks, capped by the display token */
.hero-title{margin:0 0 var(--space-6);font-size:min(var(--fs-display),15.2cqi);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.hero-title em{position:relative;white-space:nowrap}
.hero-lede{max-width:31em;margin-bottom:var(--space-7)}

/* downloads: the one cobalt action, Windows (when uploaded) as its quiet twin, then the fine print */
.hero-dl{gap:var(--space-3)}
.hero-dl .btn span{white-space:nowrap}
/* Mac + Windows: two equal buttons side by side when the column allows, else stacked full width */
.hero-dl-2{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%}
@container (max-width:659.98px){.hero-dl-2{grid-auto-columns:auto}}   /* natural widths still fit side by side */
@container (max-width:559.98px){.hero-dl-2{grid-auto-flow:row;grid-auto-columns:1fr;width:100%;max-width:30rem}}
.hero-meta-sep{display:none}
.hero-meta-win,.hero-meta-local{display:block}
.hero-dl-win .badge{margin-left:-1px;padding:2px 8px}
.hero-dl-more{--btn-px:20px;color:var(--ink)}
.hero-dl-more svg{color:var(--ink-3);transition:transform var(--d-2) var(--ease-out)}
.hero-dl-more:hover svg{transform:translateY(2px);color:var(--ink)}
.hero-meta{margin-top:var(--space-4)}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-5) 0 0;padding:var(--space-5) 0 0;list-style:none;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:var(--fs-xs);font-weight:550;line-height:1.4}
.hero-trust li{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:16px;height:16px;color:var(--ok)}
@media (min-width:1024px){.hero-trust{max-width:35rem}}

/* under 1024px the copy is centred above the demo */
@media (max-width:1023.98px){
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero-kicker{justify-content:center}
  .hero-title{max-width:none}
  .hero-lede{margin-inline:auto}
  .hero-dl{justify-content:center}
  .hero-trust{justify-content:center;width:100%;max-width:35rem}
}
@media (max-width:639.98px){.hero-title{font-size:min(15.6cqi,4.25rem)}}
@media (max-width:479.98px){
  .hero-pill{font-size:var(--fs-micro)}
  .hero-kicker-win{display:none}
  .hero-lede{margin-bottom:var(--space-6)}
  .hero-dl{width:100%}
  .hero-dl-more{display:none}
  .hero-trust{gap:var(--space-2) var(--space-4)}
}

/* ---- the demo: a Noty window on a cobalt glow ---- */
.hero-visual{position:relative;min-width:0;display:flex;justify-content:center;container-type:inline-size}
.stage{--orb:min(272px,62cqi);--buddy:clamp(78px,24cqi,118px);--pad:clamp(16px,5.4cqi,28px);
  position:relative;display:flex;flex-direction:column;width:100%;max-width:500px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--surface);box-shadow:var(--shadow-4)}
.hv-bar{position:relative;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);height:46px;padding:0 12px 0 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.hv-lights{display:flex;gap:7px}
.hv-lights i{width:11px;height:11px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.hv-lights i:nth-child(2){background:#FEBC2E}
.hv-lights i:nth-child(3){background:#28C840}
.hv-title{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:var(--fs-xs);font-weight:650;letter-spacing:-.005em}
.hv-title img{width:18px;height:18px;border-radius:5px}
.hv-status{justify-self:end;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);font-size:var(--fs-micro);font-weight:600;line-height:1.3;white-space:nowrap}
.hv-st{display:grid;justify-items:start}
.hv-st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.hv-st svg{width:12px;height:12px;color:var(--ok);stroke-width:2.6}
.hv-status{overflow:hidden}
.stage[data-pill="listen"] .st-listen,.stage[data-pill="think"] .st-think,.stage[data-pill="done"] .st-done{opacity:1;transform:none;transition:opacity .3s ease .12s,transform .42s var(--ease-out) .12s}
.hv-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);transition:background-color .3s ease}
.hv-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.stage[data-pill="listen"] .hv-dot,.stage[data-pill="think"] .hv-dot{background:var(--accent)}
.stage[data-pill="listen"] .hv-dot::after{animation:hv-ping 1.4s var(--ease-out) infinite}
.stage[data-pill="think"] .hv-dot{animation:hv-blink 1s ease-in-out infinite}
@keyframes hv-ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
@keyframes hv-blink{50%{opacity:.35}}

.hv-body{position:relative;display:flex;flex-direction:column;padding:var(--pad) var(--pad) 0;
  background:radial-gradient(58% 42% at 50% 44%,var(--accent-soft),transparent 72%),var(--surface)}
/* each slot stacks the three examples in one grid cell, so it always reserves the tallest one: no layout shift */
.hv-slot{position:relative;z-index:3;display:grid;max-width:84%}
.hv-slot>*{grid-area:1/1}
.hv-slot-user{align-self:flex-end;justify-items:end;align-items:end}
.hv-slot-noty,.hv-slot-chip{align-self:flex-start;justify-items:start;align-items:start}
.hv-slot-chip{max-width:calc(100% - var(--buddy) - var(--space-2))}
.hv-slot-chip{margin-top:var(--space-3)}

/* bubbles */
.hv-bubble{position:relative;max-width:100%;padding:10px 15px 12px;border:1px solid var(--line);border-radius:var(--r-bubble);background:var(--surface);
  color:var(--ink);font-size:var(--fs-s);line-height:1.45;text-align:left;box-shadow:var(--shadow-2)}
.hv-user{border-color:transparent;border-radius:var(--r-bubble-user);background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-brand)}
.hv-label{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:var(--fs-micro);font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hv-user .hv-label{color:#FFFFFF}
.hv-label svg{width:12px;height:12px}
.hv-label img{width:14px;height:14px;border-radius:4px}
.hv-text{display:block;overflow-wrap:anywhere;text-wrap:pretty}
.hv-typing{display:inline-flex;align-items:center;gap:12px;padding:11px 15px}
.hv-typing .hv-label{margin:0}
.hv-dots{display:inline-flex;gap:4px}
.hv-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.35;animation:hv-dot 1.1s ease-in-out infinite}
.hv-dots i:nth-child(2){animation-delay:.15s}
.hv-dots i:nth-child(3){animation-delay:.3s}
@keyframes hv-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* result chip: what Noty actually did */
.hv-chip{display:inline-flex;align-items:center;gap:11px;max-width:100%;padding:7px 12px 7px 7px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  color:var(--ink-2);font-size:var(--fs-xs);line-height:1.3;box-shadow:var(--shadow-2)}
.hv-chip-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);color:#FFFFFF;background:var(--grad-brand);box-shadow:var(--shadow-brand)}
.hv-chip-ic svg{width:18px;height:18px}
.hv-chip-text{display:grid;gap:2px;min-width:0}
.hv-chip-kind{font-size:var(--fs-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hv-chip-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-chip strong{color:var(--ink);font-weight:650}
.hv-chip-ok{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-left:2px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.hv-chip-ok svg{width:13px;height:13px;stroke-width:2.8}

/* the buddy pops up from the window's bottom edge when a reminder is set */
.hv-buddy{position:absolute;z-index:2;right:calc(var(--pad) * .7);bottom:0;width:var(--buddy);aspect-ratio:320/410;overflow:hidden;pointer-events:none}
.hv-buddy img{width:100%;height:auto}

/* pager: which example is playing (stories-style fill, driven by the script) */
.hv-pager{position:relative;z-index:3;display:flex;justify-content:center;gap:6px;padding:var(--space-5) 0 var(--space-5)}
.hv-pager i{position:relative;width:22px;height:4px;overflow:hidden;border-radius:var(--r-pill);background:var(--line-2)}
.hv-pager b{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hv-pager .ex-0 b{--p:1}
.live .hv-pager .ex-0 b{--p:0}

/* orb */
.orb-box{--lvl:.3;position:relative;z-index:1;align-self:center;width:var(--orb);aspect-ratio:1/1;margin:calc(var(--orb) * -.1) 0 calc(var(--orb) * -.08)}
.orb-box::before{content:"";position:absolute;inset:17%;border-radius:50%;border:1px solid var(--cobalt-200);opacity:.7}
:root[data-theme="dark"] .orb-box::before{border-color:var(--cobalt-700);opacity:.8}
.orb-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(62,116,255,.34),rgba(62,116,255,.12) 55%,rgba(62,116,255,0) 100%);
  opacity:calc(.55 + var(--lvl) * .45);transform:scale(calc(.9 + var(--lvl) * .12))}
.orb-rings{position:absolute;inset:0;opacity:.35;transition:opacity .8s ease}
.orb-rings i{position:absolute;inset:13%;border-radius:50%;border:1px solid var(--cobalt-300);opacity:0;animation:hv-ring 4.2s cubic-bezier(.25,.6,.3,1) infinite}
.orb-rings i:nth-child(2){animation-delay:-1.4s}
.orb-rings i:nth-child(3){animation-delay:-2.8s}
@keyframes hv-ring{0%{transform:scale(.9);opacity:0}18%{opacity:.9}100%{transform:scale(1.22);opacity:0}}
.stage[data-state="listen"] .orb-rings{opacity:1}
.stage[data-state="speak"] .orb-rings{opacity:.7}
.stage[data-state="think"] .orb-rings{opacity:.1}
.orb-scan{position:absolute;inset:18.6%;border-radius:50%;opacity:0;transition:opacity .5s ease;animation:hv-spin 1.3s linear infinite paused;
  background:conic-gradient(from 0deg,rgba(157,182,255,0) 0deg,rgba(157,182,255,0) 200deg,rgba(157,182,255,.95) 318deg,rgba(255,255,255,.95) 350deg,rgba(157,182,255,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.stage[data-state="think"] .orb-scan{opacity:1;animation-play-state:running}
@keyframes hv-spin{to{transform:rotate(360deg)}}
.orb-box::after{content:"";position:absolute;inset:22%;z-index:0;border-radius:50%;pointer-events:none;
  box-shadow:0 30px 60px -24px rgba(36,86,232,.7),0 0 0 1px rgba(255,255,255,.12)}
/* clip-path, not just overflow + radius: GPU-composited children (the spinning swirl, the blend layers) can escape a
   rounded overflow clip in Safari and Chrome and show the sphere's square box. The shadow sits on ::after above. */
.orb-sphere{position:absolute;inset:22%;z-index:1;border-radius:50%;overflow:hidden;isolation:isolate;
  -webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);
  background:radial-gradient(circle at 50% 118%,rgba(15,36,102,.6),rgba(15,36,102,0) 58%),radial-gradient(circle at 26% 26%,rgba(225,233,255,.95),rgba(225,233,255,0) 52%),
    linear-gradient(150deg,#9DB6FF 0%,#5B8CFF 34%,#2456E8 70%,#1B45C4 100%)}
.orb-swirl{position:absolute;inset:-35%;opacity:.55;mix-blend-mode:soft-light;animation:hv-spin 18s linear infinite;
  -webkit-clip-path:circle(29.4% at 50% 50%);clip-path:circle(29.4% at 50% 50%);
  background:conic-gradient(from 90deg,rgba(255,255,255,0),rgba(255,255,255,.35) 18%,rgba(255,255,255,0) 40%,rgba(195,211,255,.45) 70%,rgba(255,255,255,0))}
#orb-canvas{position:absolute;inset:0;width:100%;height:100%}
.orb-glow{position:absolute;inset:6%;border-radius:50%;mix-blend-mode:soft-light;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0));animation:hv-breathe 5s ease-in-out infinite}
@keyframes hv-breathe{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.95;transform:scale(1.05)}}
.orb-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 31% 21%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 3.5%),radial-gradient(ellipse 36% 25% at 34% 24%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),
    radial-gradient(closest-side,rgba(255,255,255,0) 80%,rgba(226,232,255,.2) 91%,rgba(255,255,255,.5) 98.5%,rgba(255,255,255,0) 100%);
  box-shadow:inset 0 -16px 34px rgba(15,36,102,.4),inset 0 12px 26px rgba(255,255,255,.2)}

/* ---- choreography. Without JS (or with reduced motion) example 1 shows complete and still. ---- */
.hv-slot>.ex-1,.hv-slot>.ex-2,.hv-typing{opacity:0}
.live .hv-slot>*{opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .38s var(--ease-out),transform .6s var(--ease-spring)}
.live .hv-slot-user>*{transform-origin:100% 100%}
.live .hv-slot-noty>*,.live .hv-slot-chip>*{transform-origin:0 0}
.live .hv-slot>.show{opacity:1;transform:none}
.live .hv-slot>.out{opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.live .hv-slot>.hv-typing.out{transform:scale(.96);transition-duration:.18s,.2s}
.live .w{display:inline-block;opacity:0;transform:translateY(.32em);transition:opacity .26s ease,transform .42s var(--ease-out)}
.live .w.on{opacity:1;transform:none}
.live .hv-chip-ok{transform:scale(0);transition:transform .5s var(--ease-spring) .28s}
.live .hv-chip.show .hv-chip-ok{transform:none}
.live .hv-buddy img{transform:translateY(104%);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.live .hv-buddy.show img{transform:none;transition:transform .9s var(--ease-spring)}
.stage.is-paused,.stage.is-paused *,.stage.is-paused *::before,.stage.is-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
  /* JS is on its way: hold the static example back so it doesn't flash, but show it if the script never runs */
  .js .stage:not(.live) .hv-slot>*,.js .stage:not(.live) .hv-st>span,.js .stage:not(.live) .hv-buddy{opacity:0}
  .js .stage:not(.live) .hv-slot>.ex-0,.js .stage:not(.live) .st-done,.js .stage:not(.live) .hv-buddy{animation:hv-reveal .5s 2s forwards}
}
@keyframes hv-reveal{to{opacity:1}}

/* narrow windows (phones) */
@container (max-width:419px){
  .stage{--orb:min(236px,66cqi);--buddy:clamp(70px,22cqi,92px)}
  .hv-slot{max-width:92%}
  .hv-slot-chip{max-width:calc(100% - var(--buddy) - var(--space-1))}
  .hv-bubble{font-size:14px;padding:9px 13px 11px}
  .hv-bar{height:42px;padding:0 10px 0 13px}
  .hv-lights{gap:6px}
  .hv-lights i{width:10px;height:10px}
  .hv-chip{gap:9px;padding-right:10px}
  .hv-chip-ic{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .orb-rings i{animation:none!important;opacity:.4}
  .orb-rings i:nth-child(2){transform:scale(1.12);opacity:.2}
  .orb-rings i:nth-child(3){display:none}
}