/* Homepage scroll film: one fixed canvas behind tall scenes; each scene pins a caption bottom-left
   while scroll scrubs the animation. Opaque content sections slide over the canvas. */
#cv,#cv2{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#cv2{opacity:0}
.veil{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(16,20,34,.82) 0%,rgba(16,20,34,.55) 34%,rgba(16,20,34,0) 60%),
             linear-gradient(to top,rgba(16,20,34,.9) 0%,rgba(16,20,34,.45) 36%,rgba(16,20,34,0) 62%),
             radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
.m-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:40}

/* Lenis drives the scrolling: the browser's own smooth scrolling must be off or the two fight and the page sticks */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

body.home header.top{background:rgba(16,20,34,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
body.home main{position:relative;z-index:5}
body.home main > section:not(.scene),body.home .trust,body.home footer{position:relative;z-index:6;background:var(--paper)}
body.home .trust{background:var(--surface)}
body.home main > section.cta-like{background:var(--surface)}

/* section rail */
.rail{position:fixed;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0;transition:opacity .3s}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);min-height:24px}
.rail button span{opacity:0;transform:translateX(6px);transition:.3s}
.rail button i{display:block;width:18px;height:1px;background:var(--muted);transition:.3s}
.rail button:hover span,.rail button.on span{opacity:1;transform:none}
.rail button.on{color:var(--ink)}
.rail button.on i{width:36px;background:var(--accent)}
.rail button:focus-visible{outline:2px solid var(--accent)}

/* scenes */
section.scene{position:relative;z-index:3;height:var(--len,240vh);padding:0;border-top:0}
.stick{padding-inline:max(16px,calc((100% - var(--wrap))/2 + 16px));position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:flex-end;padding-block:clamp(32px,8vh,90px) clamp(36px,8vh,96px)}
.cap{max-width:min(46rem,62vw);display:flex;flex-direction:column;gap:18px}
.cap .eyebrow{color:var(--accent);display:flex;gap:10px;flex-wrap:wrap}
.cap .eyebrow em{font-style:normal;color:var(--muted)}
.cap h1{font-size:clamp(2.2rem,min(5.4vw,8.6vh),5rem);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.cap h1 em{font-style:normal;color:var(--accent)}
.cap h2{font-size:clamp(2rem,min(4.4vw,7.6vh),4.2rem);line-height:1.02;letter-spacing:-.03em}
.cap p{max-width:36rem;font-size:clamp(15px,1.25vw,18px);color:#D4D8E2}
.cap .hero-ctas{margin-top:4px;align-items:center}
.cap a.more{color:var(--accent);font-weight:600;text-decoration:none;font-size:.95rem}
.cap a.more:hover{text-decoration:underline}
.cap h1,.cap h2,.cap p,.cap .eyebrow,.cap .flows,.proof{text-shadow:0 1px 2px rgba(8,10,18,.55),0 0 22px rgba(16,20,34,.55)}
.cap .chips span{text-shadow:none}
.proof{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proof span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.proof span:last-child{color:var(--ink)}
.cap .chips{display:flex;flex-wrap:wrap;gap:8px;max-width:40rem}
.cap .chips span{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(16,20,34,.78)}
.cap .flows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:40rem}
.cap .flows > div{border-top:1px solid rgba(168,220,231,.5);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.cap .flows b{font-family:var(--f-display);font-weight:600}
.cap .flows span{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.03em;line-height:1.6}
.hint{font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.hint i{display:block;width:1px;height:28px;background:linear-gradient(var(--accent),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* process track */
.stick.steps-track{justify-content:center;gap:clamp(24px,5vh,48px);overflow:hidden}
.ptrack{display:flex;gap:clamp(14px,2vw,28px);width:100%;will-change:transform}
.pstep{flex:0 0 min(78vw,25rem);min-width:0;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.pstep .n{font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--accent)}
.pstep h3{font-weight:600;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.pstep p{color:var(--muted);max-width:30ch}
.pstep.on{border-top-color:var(--accent)}

@media (max-width:760px){
  .veil{background:linear-gradient(to top,rgba(16,20,34,.96) 0%,rgba(16,20,34,.82) 45%,rgba(16,20,34,.25) 75%,rgba(16,20,34,0) 90%)}
  .cap{max-width:100%}
  .rail{display:none}
  .cap .flows{grid-template-columns:1fr}
  .cap .flows > div:nth-child(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){.hint i{animation:none}}