/* HealthAI homepage. The stage is a fixed deep-teal scene in both themes (it is an
   illustration, not a surface), so its text uses the stage palette below; everything
   after the stage follows the site theme through site.css/experience.css tokens. */
.stage{--stage-bg:#06201b;--stage-text:#eef4ea;--stage-muted:#b9ccc0;--stage-soft:#a9bfb2;--stage-mint:#bfe8a3;--stage-mint-hi:#d6f3c0;--stage-ink:#0a2b24;--stage-line:rgba(238,244,234,.14);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100svh - 94px);background-color:var(--stage-bg);background-image:radial-gradient(60rem 42rem at 78% 42%,#0f3d33 0%,transparent 62%),radial-gradient(42rem 30rem at 6% 96%,#0b2d27 0%,transparent 70%);color:var(--stage-text)}
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.stage-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,32,27,.92) 0%,rgba(6,32,27,.55) 34%,rgba(6,32,27,0) 58%),linear-gradient(0deg,rgba(6,32,27,.7),rgba(6,32,27,0) 22%)}
.stage-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:24px;padding-block:clamp(44px,7vh,96px) 18px}
.stage-copy{max-width:680px}
.stage .eyebrow{color:#c9dccc;margin-bottom:26px}
.stage .status-dot:before{background:var(--stage-mint);box-shadow:0 0 0 4px rgba(191,232,163,.18)}
.stage h1{font-size:clamp(44px,4.8vw,78px);line-height:1.03;margin:0 0 28px;color:#f4f7ef}
.stage h1 em{color:var(--stage-mint)}
.stage-description{font-size:17px;line-height:1.75;max-width:540px;color:var(--stage-muted);margin:0}
.stage-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.stage .btn{border:1px solid transparent;translate:var(--mx,0) var(--my,0);transition:background .2s,border-color .2s,translate .35s cubic-bezier(.19,1,.22,1)}
.stage-btn-primary{background:var(--stage-mint);color:var(--stage-ink);font-weight:600}
.stage-btn-primary:hover{background:var(--stage-mint-hi)}
.stage-btn-ghost{background:transparent;color:var(--stage-text);border-color:rgba(238,244,234,.34)!important}
.stage-btn-ghost:hover{background:rgba(238,244,234,.08)}
.stage :focus-visible{outline-color:var(--stage-mint)!important}

/* The scene: WebGL particles on the canvas behind, glass cards in front. */
.stage-scene{position:relative;height:clamp(440px,64vh,660px);min-width:0}
.stage-art{position:absolute;inset:12% 6%;display:grid;place-items:center;color:var(--stage-mint);opacity:.85}
.stage-art svg{width:min(100%,520px);height:auto;filter:drop-shadow(0 0 18px rgba(191,232,163,.45))}
.webgl .stage-art{display:none}
.float-card{position:absolute;z-index:2;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:16px;background:rgba(13,46,39,.8);border:1px solid rgba(238,244,234,.16);box-shadow:0 28px 64px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--stage-text);transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .9s cubic-bezier(.19,1,.22,1),left .9s cubic-bezier(.19,1,.22,1),right .9s cubic-bezier(.19,1,.22,1),top .9s cubic-bezier(.19,1,.22,1),bottom .9s cubic-bezier(.19,1,.22,1);animation:card-bob 6s ease-in-out infinite alternate}
.float-card strong{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.float-card small{font-size:11px;color:var(--stage-soft)}
.float-card em{color:var(--stage-mint)}
.card-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stage-soft)}
.card-kicker b{font-weight:600;font-size:9px;letter-spacing:.1em;color:#f1d9a6;background:rgba(241,208,152,.14);border:1px solid rgba(241,208,152,.3);border-radius:20px;padding:3px 8px}
.card-rows{display:flex;flex-direction:column;font-size:12px}
.card-rows span{padding:7px 0;border-top:1px solid var(--stage-line)}
.card-voice{left:0;bottom:22%;flex-direction:row;align-items:center;gap:14px;animation-delay:-2s}
.card-voice span:last-child{display:flex;flex-direction:column;gap:2px}
.card-voice strong{font-size:13px}
.card-note{right:3%;top:6%;width:250px;animation-delay:-4s}
.card-sign{right:16%;bottom:9%;width:215px}
.chart-open .card-voice{left:-3%;bottom:30%}
.chart-open .card-note{right:-2%;top:1%}
.chart-open .card-sign{right:2%;bottom:16%}
.voice-bars{display:flex;align-items:center;gap:3px;height:30px}
.voice-bars i{display:block;width:3px;height:12px;border-radius:3px;background:var(--stage-mint);animation:voice-bar 1.1s ease-in-out infinite alternate}
.voice-bars i:nth-child(3n){height:26px;animation-delay:-.7s}.voice-bars i:nth-child(2n){height:18px;animation-delay:-.4s}.voice-bars i:nth-child(5n){height:9px;animation-delay:-.2s}
.motion-paused .float-card,.motion-paused .voice-bars i{animation-play-state:paused}
@keyframes voice-bar{to{transform:scaleY(.35)}}
@keyframes card-bob{from{translate:0 0}to{translate:0 -12px}}
.stage-controls{position:absolute;right:0;bottom:6px;z-index:3;display:flex;gap:8px}
.stage-controls button{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:30px;border:1px solid rgba(238,244,234,.3);background:rgba(6,32,27,.72);color:var(--stage-text);font-size:13px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.stage-controls button:hover{background:rgba(238,244,234,.1);border-color:rgba(238,244,234,.5)}
.stage-controls button[aria-pressed="true"]{border-color:var(--stage-mint)}
.stage-caption{position:absolute;left:0;bottom:18px;margin:0;font-size:11px;color:var(--stage-soft)}
.stage-baseline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;border-top:1px solid var(--stage-line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-soft)}
.stage-baseline a{min-height:44px;display:inline-flex;align-items:center;gap:10px;color:var(--stage-text);text-decoration:none;letter-spacing:.08em}
.stage-baseline a:hover{color:var(--stage-mint)}

/* How it works: five steps on one rail; the rail fills as you read. */
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:64px}
.how-head h2{margin:0}
.how-lead{max-width:380px;margin:0;color:var(--text-muted);font-size:17px}
.how-rail{position:relative;height:2px;background:var(--border);border-radius:2px;margin-inline:21px}
.how-rail span{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--how-progress,0));transform-origin:left;transition:transform .2s linear}
.how-steps{list-style:none;margin:-22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.how-step{position:relative;padding:0 6px 0 0}
.how-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg);font-size:13px;font-weight:600;color:var(--text);margin-bottom:26px;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.how-step.is-lit .how-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 6px var(--accent-soft)}
.how-step h3{font-size:24px;letter-spacing:-.03em;margin:0 0 12px}
.how-step p{font-size:15px;line-height:1.65;color:var(--text-muted);margin:0}
.how-more{margin-top:48px}

/* Inside the app: three real captures in a 3D stack that follows the pointer. */
.showcase{background:var(--surface-2);border-top:1px solid var(--border);overflow:clip}
.showcase-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.showcase-copy h2{margin:0 0 22px}
.showcase-copy>p:not(.eyebrow){color:var(--text-muted);font-size:17px;max-width:420px}
.showcase-copy .btn{margin-top:18px;translate:var(--mx,0) var(--my,0);transition:background .2s,translate .35s cubic-bezier(.19,1,.22,1)}
.showcase-note{font-size:13px!important;line-height:1.7;margin-top:28px}
.showcase-stack{position:relative;aspect-ratio:16/11.5;perspective:1700px;transform-style:preserve-3d}
.shot{position:absolute;margin:0;width:80%;border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface);box-shadow:0 34px 80px rgba(16,46,41,.2);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.19,1,.22,1),box-shadow .6s}
.shot img{display:block;width:100%;height:auto}
.shot a{display:block;line-height:0}
.shot-back{top:0;right:0;transform:rotateX(calc(6deg + var(--ry,0deg))) rotateY(calc(-16deg + var(--rx,0deg))) translate3d(0,0,-140px)}
.shot-mid{top:10%;right:9%;transform:rotateX(calc(6deg + var(--ry,0deg))) rotateY(calc(-16deg + var(--rx,0deg))) translate3d(0,0,-70px)}
.shot-front{top:20%;right:18%;transform:rotateX(calc(6deg + var(--ry,0deg))) rotateY(calc(-16deg + var(--rx,0deg)))}
.showcase-stack.is-fanned .shot-back{transform:rotateX(calc(4deg + var(--ry,0deg))) rotateY(calc(-10deg + var(--rx,0deg))) translate3d(40px,-26px,-160px)}
.showcase-stack.is-fanned .shot-mid{transform:rotateX(calc(4deg + var(--ry,0deg))) rotateY(calc(-10deg + var(--rx,0deg))) translate3d(12px,-8px,-80px)}
.showcase-stack.is-fanned .shot-front{transform:rotateX(calc(4deg + var(--ry,0deg))) rotateY(calc(-10deg + var(--rx,0deg))) translate3d(-24px,18px,20px);box-shadow:0 44px 100px rgba(16,46,41,.28)}
.shot-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text)}

@media(max-width:1100px){.stage-grid{grid-template-columns:1fr 1fr}.card-note{width:220px}.how-step h3{font-size:21px}}
@media(max-width:1000px){.stage-grid{grid-template-columns:1fr;padding-top:48px}.stage-copy{max-width:720px}.stage-scene{height:480px}.stage-glow{background:linear-gradient(180deg,rgba(6,32,27,.92) 0%,rgba(6,32,27,.6) 42%,rgba(6,32,27,0) 62%)}
.how-head{display:block}.how-lead{margin-top:18px}.how-rail{display:none}.how-steps{margin:0;grid-template-columns:1fr;gap:0}.how-step{display:grid;grid-template-columns:44px 1fr;column-gap:22px;padding:0 0 30px;position:relative}.how-step:not(:last-child):before{content:'';position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--border)}.how-num{grid-row:span 2;margin:0}.how-step h3{margin-top:8px}
.showcase-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:800px){.stage{min-height:0}.stage-baseline span{display:none}.stage-baseline{justify-content:center}
.showcase-stack{aspect-ratio:auto;perspective:none}.shot-back,.shot-mid{display:none}.shot-front{position:relative;top:auto;right:auto;width:100%;transform:none!important}}
@media(max-width:520px){.stage h1{font-size:42px}.stage-description{font-size:16px}.stage-scene{height:420px}.card-note{width:190px;right:0;top:13%}.card-note .card-rows{display:none}.card-sign{width:170px;right:6%;bottom:16%}.card-voice{bottom:34%}.float-card{padding:12px 14px}.float-card strong{font-size:15px}.stage-controls{left:0;right:auto;flex-wrap:wrap}.stage-controls button{font-size:12px;padding:9px 13px}.stage-caption{bottom:auto;top:0}}
@media(max-width:360px){.card-voice{display:none}.stage-controls button{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.float-card,.voice-bars i{animation:none!important}.float-card,.shot,.how-num,.how-rail span{transition:none!important}}
@media print{.stage{background:none;color:black;min-height:0}.stage-canvas,.stage-glow,.stage-scene,.stage-baseline{display:none}.stage h1,.stage-description,.stage .eyebrow{color:black}.showcase-stack{perspective:none}.shot-back,.shot-mid{display:none}.shot-front{position:relative;transform:none;width:100%}}