/* v8: layout rhythm. Layered on style.css + v6.css + v7.css */

/* framed stage (original CSS gradients + dot grid, no image assets) */
.stage{position:relative;border-radius:22px;border:.5px solid #1F1F23;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 70% at 0% 100%,rgba(245,165,36,.16),transparent 70%),
    radial-gradient(50% 60% at 100% 0%,rgba(167,139,250,.12),transparent 70%),
    radial-gradient(40% 50% at 70% 100%,rgba(61,220,151,.07),transparent 70%),
    #0B0B0D}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
.stage-hero{padding:40px 40px 0;margin-top:8px}
.stage-hero .app{margin-top:0;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 .5px #27272A;border-radius:14px 14px 0 0;border-bottom:0}
.s8-band{background:#0C0C0E;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}

/* centered section header */
.s8-hd{text-align:center;max-width:760px;margin:0 auto 48px}
.s8-hd .lede{margin:0 auto}

/* problem: wide chart + three points */
.pb-wide{max-width:1040px;margin:0 auto}
.pb-wide .card-h .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px 0 12px}
.dot.g{background:var(--green)}.dot.r{background:var(--red)}
.pb-wide .fk{padding:22px 24px 8px}
.pb-wide .fk-runs{justify-content:center;margin-top:14px}
.fk-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 24px 16px;border-top:.5px solid var(--line);color:var(--mut);font-size:12px}
.fk-foot b{font-weight:600}.fk-foot b.g{color:var(--green)}.fk-foot b.r{color:var(--red)}
.fk-foot span:last-child{color:var(--mut3)}
.pb3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1040px;margin:56px auto 0}
.pb3 .num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--amber);border:.5px solid rgba(245,165,36,.4);border-radius:5px;padding:2px 7px}
.pb3 h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:16px 0 8px;line-height:1.25}
.pb3 p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}

/* how it works: sticky stepper */
.stp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.stp-l{list-style:none;margin:0;padding:0}
.stp-i{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 28px;border-left:1px solid #1F1F23;position:relative;cursor:default}
.stp-i::before{content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:2px;background:var(--amber);transform:scaleY(0);transform-origin:top;transition:transform .4s}
.stp-i.on::before{transform:none}
.stp-t{transition:opacity .35s}
.stp-i:not(.on) .stp-t{opacity:.38}
.stp-t .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber)}
.stp-t h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:600;margin:12px 0 14px}
.stp-t p{color:var(--mut);font-size:16px;margin:0 0 14px;max-width:460px}
.stp-t ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--tx2)}
.stp-t li{display:flex;gap:10px}
.stp-t li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:1px;background:var(--amber)}
.stp-t .lnk{display:inline-block;margin-top:18px;font-size:14px;color:var(--tx);border-bottom:.5px solid var(--line3);padding-bottom:2px;align-self:flex-start}
.stp-stage{position:sticky;top:calc(50vh - 290px)}
.stage-stp{padding:36px;min-height:580px;display:flex;align-items:center}
.stp-cards{display:grid;width:100%}
.stp-card{grid-area:1/1;align-self:center;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .45s,transform .45s;pointer-events:none;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.stp-card.on{opacity:1;transform:none;pointer-events:auto}
.stp-slot:empty{display:none}

/* use cases: tabbed stage */
.uc-tabs{scroll-margin-top:96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:880px;margin:0 auto 18px}
.uc-tab{font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:14px 16px;border-radius:12px;border:.5px solid var(--line2);background:transparent;color:var(--mut);transition:background .2s,border-color .2s,color .2s}
.uc-tab i{grid-row:span 2;width:8px;height:8px;border-radius:2px;background:var(--c);opacity:.5}
.uc-tab b{font-weight:600;font-size:15px;color:var(--tx2)}
.uc-tab span{font-size:12.5px;color:var(--mut3)}
.uc-tab:hover{border-color:var(--line3)}
.uc-tab.on{background:#121214;border-color:color-mix(in srgb,var(--c) 55%,transparent);color:var(--tx)}
.uc-tab.on i{opacity:1;box-shadow:0 0 12px var(--c)}
.uc-tab.on b{color:var(--tx)}
.uc-tab:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.uc-stage{display:grid;border-radius:22px;border:.5px solid #1F1F23;overflow:hidden;background:#09090B}
.uc-pane{grid-area:1/1;position:relative;overflow:hidden;padding:56px 56px 48px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;border:0!important}
.uc-pane.on{opacity:1;visibility:visible;transition:opacity .35s}
.uc-pane.sec-a2{padding-top:56px;background:radial-gradient(70% 60% at 100% 0%,rgba(245,165,36,.08),transparent 70%),#09090B}
.uc-pane.sec-b{background:radial-gradient(70% 60% at 100% 0%,rgba(61,220,151,.07),transparent 70%),#07090A}
.uc-pane.sec-c{background:radial-gradient(70% 60% at 100% 0%,rgba(167,139,250,.08),transparent 70%),#09080C}
.uc-in{position:relative;z-index:1}
.uc-pane .hero3d,.uc-pane .ml3d,.uc-pane .mp3d{width:60%;height:460px}
.uc-h{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.03em;font-weight:600;margin:14px 0 16px;max-width:600px}
.uc-pane .sub{max-width:520px;font-size:17px}
.uc-pane .panel{margin-top:36px}

/* build vs buy: one comparison table */
.why8{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.why8-l .lede{margin-top:18px}
.cmp{border:.5px solid var(--line2);border-radius:16px;background:var(--bg2);overflow:hidden}
.cmp-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.75fr);gap:16px;align-items:center;padding:15px 22px;border-bottom:.5px solid var(--line);font-size:14.5px;color:var(--tx2)}
.cmp-h{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mut3);padding-top:16px;padding-bottom:12px;background:#0E0E10}
.cmp-h span:last-child{color:var(--amber)}
.cmp-y{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut3)}
.cmp-i{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber);display:flex;align-items:center;gap:8px}
.cmp-i i{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(245,165,36,.12);font-size:10px}
.cmp-f{padding:16px 22px 18px;color:var(--mut);font-size:14px;line-height:1.6;background:linear-gradient(90deg,rgba(245,165,36,.06),transparent)}

/* CTA stage */
.sec-cta{border-top:0}
.stage-cta{padding:96px 24px}
.stage-cta .cta-in{position:relative;z-index:1}

@media (max-width:980px){
  .stp{grid-template-columns:minmax(0,1fr);gap:0}
  .stp-stage{display:none}
  .stp-i{min-height:0;padding:32px 0 32px 22px}
  .stp-i:not(.on) .stp-t{opacity:1}
  .stp-i::before{transform:none;opacity:.6}
  .stp-slot{margin-top:24px}
  .pb3{grid-template-columns:minmax(0,1fr);gap:28px}
  .why8{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:820px){
  .stage-hero{padding:16px 12px 0;border-radius:16px}
  .s8-hd{text-align:left;margin-bottom:32px}
  .s8-hd .lede{margin:0}
  .pb-wide .fk{padding:14px 12px 6px}
  .pb-wide .fk-runs{justify-content:flex-start}
  .pb-wide .card-h span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fk-foot{padding:12px 14px 14px;font-size:11px}
  .uc-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .uc-tab{padding:10px;grid-template-columns:auto 1fr;column-gap:7px}
  .uc-tab span{display:none}
  .uc-tab i{grid-row:auto}
  .uc-tab b{font-size:12.5px}
  .uc-stage{border-radius:16px}
  .uc-pane{padding:28px 16px 20px}
  .uc-pane.sec-a2{padding-top:28px}
  .uc-pane .hero3d,.uc-pane .ml3d,.uc-pane .mp3d{width:100%;height:360px}
  .cmp-r{grid-template-columns:minmax(0,1fr) 84px 84px;gap:10px;padding:13px 14px;font-size:13px}
  .cmp-y,.cmp-i{font-size:10.5px}
  .cmp-i i{display:none}
  .stage-cta{padding:64px 18px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){.stp-card,.uc-pane,.stp-t,.stp-i::before{transition:none}}