.scroll-story{position:relative;height:330svh;background:#080808;color:#f3f3ef;--progress:0;--detail-opacity:0;--intro-opacity:1;--mask-opacity:0;--solid-opacity:0;--world-opacity:1;--world-y:0px;--world-scale:1.08;--detail-y:40px;--hint-opacity:1}
.story-stage{position:sticky;top:76px;height:calc(100svh - 76px);min-height:480px;overflow:hidden;isolation:isolate;background:#080808}
.story-world,.story-photo,.code-plane,.world-shade,.story-mask{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.story-world{opacity:var(--world-opacity);transform:translateY(var(--world-y)) scale(var(--world-scale));will-change:transform,opacity}
.story-photo{background:url('/assets/hero-ai-actions.jpg') center 48%/cover;filter:grayscale(1) blur(3px);opacity:.16;transform:scale(1.12)}
.code-plane{inset:-12% -10%;width:120%;height:130%;display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:4vw;transform:perspective(1200px) rotateY(-12deg) rotateZ(-7deg) scale(1.03);transform-origin:center;mask-image:linear-gradient(0deg,transparent,#000 15%,#000 88%,transparent)}
.code-column{padding-top:3vh;overflow:hidden}
.code-column:nth-child(2){padding-top:13vh}.code-column:nth-child(3){padding-top:1vh;opacity:.65}
.code-line{display:flex;white-space:pre;height:clamp(29px,3.6vw,51px);align-items:center;gap:20px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(13px,1.8vw,26px);letter-spacing:-.035em;line-height:1.7;color:#a8aaa5;opacity:var(--line-opacity,0);filter:blur(var(--line-blur,0px));transform:translateX(var(--line-x,0px));will-change:opacity,transform}
.line-no{font-size:.62em;color:#3e423e;min-width:22px;text-align:right}.code-content{display:block;clip-path:inset(0 var(--line-clip,100%) 0 0)}
.code-key{color:#ededdf}.code-string{color:#8e9d91}.code-comment{color:#555d57}.code-call{color:#d3d7ce}
.code-line.is-focus{color:#f1f1e8;text-shadow:0 0 28px #ffffff20}
.world-shade{background:radial-gradient(ellipse at 50% 45%,transparent 8%,#08080855 65%,#080808e8 100%),linear-gradient(0deg,#080808 0%,transparent 20%,transparent 80%,#080808aa)}
.story-mask{z-index:2;opacity:var(--mask-opacity)}
.story-mask text{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:-.055em;text-anchor:middle;dominant-baseline:middle}
.solid-letters{opacity:var(--solid-opacity)}
.story-intro{position:absolute;left:max(24px,calc((100% - 1180px)/2));bottom:19%;display:flex;align-items:center;gap:16px;font-size:clamp(16px,2vw,24px);font-weight:600;letter-spacing:-.025em;opacity:var(--intro-opacity);transform:translateY(calc((1 - var(--intro-opacity))*-20px));z-index:3}
.intro-line{width:38px;height:1px;background:#e0e0d0}
.story-message{position:absolute;inset:0;z-index:4;text-align:center;pointer-events:none}
.story-eyebrow{position:absolute;top:var(--eyebrow-top,12%);left:16px;right:16px;opacity:var(--detail-opacity);font-size:clamp(9px,.8vw,12px);letter-spacing:.2em;color:#a5a79c}
.story-accessible-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-details{position:absolute;top:var(--details-top,68%);left:50%;width:min(650px,calc(100% - 40px));opacity:var(--detail-opacity);transform:translate(-50%,var(--detail-y));visibility:hidden}
.story-details.is-visible{visibility:visible;pointer-events:auto}
.story-details .lead{font-size:clamp(14px,1.2vw,17px);line-height:1.65;color:#a9aaa2;margin:0 auto;max-width:610px}
.story-details .hero-actions{justify-content:center;margin-top:26px;gap:12px}
.story-details .btn{background:#f3f3ef;color:#080808;border-color:#f3f3ef;font-size:12px;padding:13px 20px}
.story-details .secondary{color:#f3f3ef;background:transparent;border-color:#494a43}
.story-details .btn:hover{background:#d8dbd1;color:#080808}.story-details .secondary:hover{background:#20211d;color:#fff}
.story-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5;color:#b5b8aa;opacity:var(--hint-opacity);font:600 9px/1 Inter,sans-serif;letter-spacing:.22em;text-decoration:none}
.story-scroll svg{width:19px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2}
.story-scroll:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:8px}
.story-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff08;z-index:6}.story-progress span{display:block;width:100%;height:100%;background:#d8ddc4;transform:scaleX(var(--progress));transform-origin:left}
.story-arrival{position:absolute;bottom:calc(100svh - 76px);height:1px;width:1px;scroll-margin-top:76px}
@media(max-width:760px){.story-stage{top:70px;height:calc(100svh - 70px);min-height:520px}.scroll-story{height:280svh}.code-plane{grid-template-columns:1.25fr 1fr;width:190%;inset:-8% -50%;gap:26px;transform:perspective(900px) rotateY(-10deg) rotateZ(-10deg)}.code-column:last-child{display:none}.code-line{font-size:17px;height:36px}.story-intro{bottom:23%;left:24px}.story-details .lead{font-size:13px;line-height:1.6}.story-details .hero-actions{margin-top:20px;gap:8px}.story-details .btn{font-size:10px;padding:11px 13px}.story-scroll{bottom:22px}.story-eyebrow{font-size:8px;letter-spacing:.13em}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-stage{position:relative;top:0;height:calc(100svh - 76px)}.story-world{transform:none!important}.story-scroll,.story-progress,.story-intro{display:none}.story-details{transform:translateX(-50%)!important}.story-arrival{display:none}}
.scroll-story:not(.is-ready){height:auto}.scroll-story:not(.is-ready) .story-stage{position:relative;top:0;height:auto;min-height:650px;padding:90px 24px}.scroll-story:not(.is-ready) .story-message{position:relative}.scroll-story:not(.is-ready) .story-accessible-title{position:static;width:auto;height:auto;clip-path:none;white-space:normal;font-size:clamp(42px,7vw,96px);max-width:900px;margin:40px auto}.scroll-story:not(.is-ready) .story-eyebrow,.scroll-story:not(.is-ready) .story-details{position:static;opacity:1;visibility:visible;transform:none;margin:0 auto;width:min(650px,100%)}.scroll-story:not(.is-ready) .story-scroll,.scroll-story:not(.is-ready) .story-intro{display:none}

/* The three surfaces arrive first; their content follows as a separate beat. */
.metric-story.ticker{position:relative;overflow:visible;border:0;background:#080808;color:#0b0b0b}
.metric-stage{padding:80px 0}
.metric-story .ticker-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.metric-story .metric,.metric-story .metric:first-child{position:relative;min-width:0;min-height:288px;padding:34px 30px;border:1px solid #fff;border-radius:8px;background:#fff;color:#0b0b0b;transform-origin:center bottom}
.metric-content{position:relative}
.metric-story .metric b{font-size:64px;line-height:1;letter-spacing:-.055em;margin-bottom:36px;color:#0b0b0b}
.metric-story .metric h2{font-family:Manrope,Inter,sans-serif;font-size:23px;line-height:1.15;letter-spacing:-.035em;margin:0 0 12px;color:#0b0b0b}
.metric-story .metric p{font-size:14px;line-height:1.6;color:#41413c;max-width:260px;margin:0}
.metric-story.is-ready{height:175svh}
.metric-story.is-ready .metric-stage{position:sticky;top:76px;height:calc(100svh - 76px);min-height:440px;display:flex;align-items:center;padding:64px 0;perspective:1200px}
.metric-story.is-ready .metric{background:var(--card-bg,#080808);border-color:var(--card-border,#101010);opacity:var(--card-opacity,0);transform:translateY(var(--card-y,70px)) scale(var(--card-scale,.88)) rotateX(var(--card-tilt,7deg));box-shadow:0 24px 80px #00000018;will-change:transform,opacity}
.metric-story.is-ready .metric-content{opacity:var(--copy-opacity,0);transform:translateY(var(--copy-y,30px));filter:blur(var(--copy-blur,5px));will-change:transform,opacity}
@media(max-width:760px){
 .metric-story .ticker-track{grid-template-columns:1fr;gap:14px;width:calc(100% - 40px)}
 .metric-story .metric,.metric-story .metric:first-child{min-height:138px;padding:22px 24px}
 .metric-content{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;column-gap:18px;align-content:center}
 .metric-story .metric b{grid-column:1;grid-row:1/3;font-size:42px;margin:0;align-self:center}
 .metric-story .metric h2{grid-column:2;font-size:19px;margin:0 0 6px}
 .metric-story .metric p{grid-column:2;font-size:12px;line-height:1.55}
 .metric-story.is-ready{height:180svh}
 .metric-story.is-ready .metric-stage{min-height:520px;padding:24px 0}
}
@media(prefers-reduced-motion:reduce){
 .metric-story.is-ready{height:auto}
 .metric-story.is-ready .metric-stage{position:relative;top:0;height:auto;min-height:0;padding:64px 0}
 .metric-story.is-ready .metric,.metric-story.is-ready .metric-content{transform:none;filter:none;opacity:1;background:#fff;border-color:#fff;will-change:auto}
 .metric-story.is-ready .metric-content{background:transparent}
}