/* ════════════════════════════════════════════════════════════════════════
   Stenuero v4 — "Convergence" scroll-cinematic chapters.
   Canvas-scrubbed frame sequences with pinned text beats.
   ════════════════════════════════════════════════════════════════════════ */
html{scroll-behavior:auto!important} /* smooth-scroll fights frame scrubbing */

.cine{position:relative;height:calc(var(--len,400) * 1vh);background:#05060a}
.cine-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cine-cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#05060a}

/* vignette + grain — sells the film look and swallows footage edges */
.cine-fx{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(5,6,10,.5) 80%,rgba(5,6,10,.95) 100%)}
.cine-fx::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* fade top/bottom edges of each chapter into the page background */
.cine-pin::before,.cine-pin::after{content:"";position:absolute;left:0;right:0;height:14vh;z-index:1;pointer-events:none}
.cine-pin::before{top:0;background:linear-gradient(var(--bg),transparent)}
.cine-pin::after{bottom:0;background:linear-gradient(transparent,var(--bg))}

.cine-layer{position:absolute;inset:0;z-index:2}
.cine-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 6vw;opacity:0;pointer-events:none;
  will-change:opacity}
.cine-big{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.6vw,88px);
  line-height:1.02;letter-spacing:-.02em;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.cine-sub{max-width:600px;color:var(--muted);margin-top:20px;font-size:clamp(15px,1.5vw,18px);
  text-shadow:0 2px 20px rgba(0,0,0,.8)}

/* app-name tags pinned over the four shards */
.cine-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;font-family:var(--display);font-weight:700;
  font-size:clamp(16px,2.2vw,28px);letter-spacing:.08em;padding:10px 24px;border-radius:999px;
  border:1px solid var(--border-2);background:rgba(8,8,13,.5);backdrop-filter:blur(8px);
  will-change:opacity}
.t-cyan{color:#7dedfc;box-shadow:0 0 34px rgba(6,182,212,.35)}
.t-magenta{color:#f9a8d4;box-shadow:0 0 34px rgba(236,72,153,.35)}
.t-violet{color:#c4b5fd;box-shadow:0 0 34px rgba(139,92,246,.35)}
.t-amber{color:#fcd34d;box-shadow:0 0 34px rgba(245,158,11,.35)}

.cine-scrolldown{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:11px;letter-spacing:.42em;color:var(--faint);
  z-index:2;animation:cineBob 2.2s ease-in-out infinite}
@keyframes cineBob{50%{transform:translate(-50%,7px)}}

/* SteLink showcase section (real-product proof after the cinematic hero) */
.showcase{position:relative;padding:120px 4vw 90px;text-align:center}

/* stats strip */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 54px;margin:70px auto 0;max-width:1000px}
.stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,40px);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:12.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}

/* "explore" link under an app row */
.app-more{display:inline-block;margin-top:18px;font-weight:600;font-size:14.5px;color:#7dedfc}
.app-more:hover{text-decoration:underline}

/* ghost button needs dark glass backing to survive bright frames */
.cine .btn-ghost{background:rgba(8,8,13,.55);backdrop-filter:blur(10px);color:#fff;
  border-color:rgba(255,255,255,.38);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cine .btn-ghost:hover{border-color:var(--cyan);background:rgba(8,8,13,.7)}
.cine .btn-primary{box-shadow:0 4px 28px rgba(139,92,246,.55),0 0 0 1px rgba(255,255,255,.12) inset}

/* ── Info sections (v4) ─────────────────────────────────────────────── */
.how,.tech,.roadmap,.faq{padding:110px 4vw;max-width:1200px;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px;counter-reset:none}
.step{position:relative;padding:30px 26px;border:1px solid var(--border);border-radius:20px;
  background:var(--panel);backdrop-filter:blur(10px)}
.step-n{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h4{font-family:var(--display);font-size:21px;margin:10px 0 8px}
.step p{color:var(--muted);font-size:14.5px}

.tech{text-align:center}
.tech-sub{color:var(--faint);margin-top:-26px;margin-bottom:0;font-size:15px}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;text-align:left}
.tech-card{padding:26px 24px;border:1px solid var(--border);border-radius:18px;background:var(--panel);
  transition:transform .3s,border-color .3s}
.tech-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.tech-card h4{font-family:var(--display);font-size:17px;margin-bottom:10px}
.tech-card p{color:var(--muted);font-size:14px}
.tech-card code{font-size:13px;background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px}

.road-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px}
.road-col{padding:30px 28px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}
.road-h{font-family:var(--display);font-size:15px;letter-spacing:.14em;margin-bottom:18px}
.road-h.done{color:#34d399}.road-h.next{color:var(--faint)}
.road-col li{padding:9px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:14.5px}
.road-col li:last-child{border-bottom:none}

.faq-list{max-width:780px;margin:48px auto 0}
.faq details{border:1px solid var(--border);border-radius:16px;background:var(--panel);
  margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--display);
  font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--faint);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:14.5px}

.manifesto{padding:120px 4vw;text-align:center}
.manif-line{max-width:820px;margin:0 auto;font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2.6vw,30px);line-height:1.5;color:var(--muted)}
.manif-line b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:900px){
  .steps,.tech-grid{grid-template-columns:1fr}
  .road-cols{grid-template-columns:1fr}
}

@media (max-width:640px){
  .cine{height:calc(var(--len,400) * .75vh)}
  .cine-tag{font-size:14px;padding:7px 16px}
}

@media (prefers-reduced-motion: reduce){
  .cine{height:auto}
  .cine-pin{position:relative;height:100vh}
  .cine-beat{position:relative;inset:auto;opacity:1!important;padding:34px 6vw;pointer-events:auto}
  .cine-tag{display:none}
  .cine-scrolldown{display:none}
}