/* V8 · Control room.
   The page reads as a live operations console: a blueprint grid behind everything, corner-bracket
   panels, a radar dial for the five nodes, a pipeline monitor beside the leak cards, rolling
   odometer numbers, gauges with a day 0–14 scrub, bar columns for the check, a lit logo wall.
   Same copy, same tokens as V7-A; only layout and motion change. */

.v8{--v8-grid:rgba(244,246,248,.035); --v8-rule:rgba(35,43,54,.9); --br:14px}

/* blueprint ground: an 80px grid with a slow scan line */
.v8::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg,var(--v8-grid) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(0deg,var(--v8-grid) 1px,transparent 1px) 0 0/80px 80px;
  -webkit-mask:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 85%);
  mask:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 85%)}
.v8::after{content:""; position:fixed; left:0; right:0; top:0; height:160px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--ace-rgb),.035) 70%,rgba(var(--ace-rgb),.09) 99%,transparent);
  animation:v8scan 9s linear infinite}
@keyframes v8scan{from{transform:translateY(-160px)}to{transform:translateY(100vh)}}

/* corner brackets on console panels */
.v8 .v8-br{position:relative}
.v8 .v8-br::before{content:""; position:absolute; inset:-1px; pointer-events:none; z-index:3;
  background:
    linear-gradient(var(--ace),var(--ace)) 0 0/var(--br) 1px, linear-gradient(var(--ace),var(--ace)) 0 0/1px var(--br),
    linear-gradient(var(--ace),var(--ace)) 100% 0/var(--br) 1px, linear-gradient(var(--ace),var(--ace)) 100% 0/1px var(--br),
    linear-gradient(var(--ace),var(--ace)) 0 100%/var(--br) 1px, linear-gradient(var(--ace),var(--ace)) 0 100%/1px var(--br),
    linear-gradient(var(--ace),var(--ace)) 100% 100%/var(--br) 1px, linear-gradient(var(--ace),var(--ace)) 100% 100%/1px var(--br);
  background-repeat:no-repeat}

/* header: a scroll-progress trace along the bottom edge */
.v8 .v8-prog{position:absolute; left:0; right:0; bottom:-1px; height:2px; z-index:4; pointer-events:none;
  background:var(--ace); transform-origin:left; transform:scaleX(var(--sp,0)); box-shadow:0 0 12px rgba(var(--ace-rgb),.7)}
.v8 .mtick{background:#08090b}
.v8 .mtick .tick{border-right:0}
.v8 .mtick .tick::before{content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-bottom:6px solid var(--ace); margin-right:2px; flex:none}
.v8 .mtick .tick small{color:var(--ace); opacity:.75}
/* v8-a: the tape, its items, icons and markers sit on the ticker's vertical centre */
.v8 .mtick-clip{display:flex; align-items:center}
.v8 .mtick .ticker,.v8 .mtick .ticker .track{height:100%; align-items:center}
.v8 .mtick .tick{height:100%; line-height:1}
.v8 .mtick .tick span,.v8 .mtick .tick small{display:block; line-height:1}
.v8 .mtick .tick small{transform:translateY(.052em)} /* the smaller label shares the name's baseline */

/* ── hero: copy left, radar dial right, the readout list under the dial ── */
.v8 .hero{padding-top:clamp(40px,7vh,84px)}
@media (min-width:961px){ .v8 .hero .wrap{grid-template-columns:1.02fr .98fr; align-items:start} }
.v8 .hero-h1{font-size:clamp(3rem,7vw,6.6rem)}
.v8 .hero-meta{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:0; padding:0; border:1px solid var(--v8-rule)}
.v8 .hero-meta span{padding:14px 18px; border-right:1px solid var(--v8-rule)}
.v8 .hero-meta span:last-child{border-right:0}
.v8 .chamber{min-height:0; display:flex; flex-direction:column; gap:0; border:1px solid var(--v8-rule);
  background:linear-gradient(180deg,rgba(10,13,17,.86),rgba(7,8,10,.7))}
.v8 .chamber-lbl{position:static; order:-1; padding:12px 16px; border-bottom:1px solid var(--v8-rule);
  display:flex; align-items:center; gap:10px; background:#08090b}
.v8 .chamber-lbl::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ace); box-shadow:0 0 8px var(--ace);
  animation:v8blink 1.6s steps(2,end) infinite}
@keyframes v8blink{50%{opacity:.25}}
.v8 .orb-box{position:relative; inset:auto; height:clamp(300px,36vw,460px); pointer-events:auto}
.v8 .orb-box canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y}
.v8 .orb-box canvas:active{cursor:grabbing}
.v8 .ports{display:none!important}
.v8 .portlist{display:block; margin:0; border-top:1px solid var(--v8-rule)}
.v8 .portlist li{border-bottom:1px solid var(--v8-rule); transition:background .3s}
.v8 .portlist li:last-child{border-bottom:0}
.v8 .portlist li.hot{background:rgba(var(--ace-rgb),.06)}
.v8 .portlist button{padding:13px 16px; align-items:center}
.v8 .portlist button span{font-size:.98rem}
.v8 .portlist li.hot button span{color:var(--ace)}
.v8 .portlist p{padding:0 16px 16px 52px}
/* Reply node: the speed-to-lead line, a green check under 5 minutes, a red cross past 15 */
.portlist .sla{display:block; margin-top:10px; font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; line-height:1.75}
.portlist .sla span{display:block}
.portlist .sla .ok{color:var(--ace)}
.portlist .sla .no{color:#ff5a4d}

/* ── leak: cards as a console table, the pipeline monitor rides beside them ── */
.v8 .kinetic{padding:18px 0; border-top:1px solid var(--v8-rule); border-bottom:1px solid var(--v8-rule)}
.v8 .leak-grid .seq{gap:0; border:1px solid var(--v8-rule); background:rgba(7,8,10,.6)}
.v8 .seq-card{border:0; border-radius:0; border-right:1px solid var(--v8-rule); border-bottom:1px solid var(--v8-rule); background:transparent}
.v8 .leak-grid .seq-card:nth-child(2n){border-right:0}
.v8 .leak-grid .seq-card:nth-child(5){border-right:0}
.v8 .seq-card::before{display:none}
.v8 .seq-card:hover,.v8 .seq-card:focus-visible{transform:none; background:rgba(var(--ace-rgb),.05)}
.v8 .seq-card.is-hot{background:rgba(var(--ace-rgb),.05)}
.v8 .seq-card.is-hot::before{opacity:1; animation-play-state:running}
.v8 .seq-card.is-hot::after{transform:scaleX(1)}
.v8 .seq-card .loss{display:inline-flex; align-items:center; gap:8px}
/* the leak marker is the winged bill (the #i-wingbill drawing: green note, white wings flapping slowly) */
.v8 .seq-card .loss::before{content:""; width:32px; height:17px; background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="-32 -26 64 34"%3E%3Cg fill="%23f4f6f8" stroke="%2307080a" stroke-opacity=".35" stroke-width=".7"%3E%3Cg transform="translate(-11 -4) scale(-1 1)"%3E%3Cg%3E%3CanimateTransform attributeName="transform" type="rotate" values="-10;-38;-10" dur="1.4s" repeatCount="indefinite" calcMode="spline" keySplines=".45 0 .55 1;.45 0 .55 1"/%3E%3Cpath d="M0 0C4-9 12-12 19-11Q18-6 14-5.5Q15-2.5 10-2.5Q10 .5 5 1Q2 2.5 0 2Z"/%3E%3Cpath fill="none" d="M3-1L13-7.5M3 .6L9.5-3"/%3E%3C/g%3E%3C/g%3E%3Cg transform="translate(11 -4)"%3E%3Cg%3E%3CanimateTransform attributeName="transform" type="rotate" values="-10;-38;-10" dur="1.4s" repeatCount="indefinite" calcMode="spline" keySplines=".45 0 .55 1;.45 0 .55 1"/%3E%3Cpath d="M0 0C4-9 12-12 19-11Q18-6 14-5.5Q15-2.5 10-2.5Q10 .5 5 1Q2 2.5 0 2Z"/%3E%3Cpath fill="none" d="M3-1L13-7.5M3 .6L9.5-3"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath data-part="note" fill="%234ade9f" d="M-10.5-6h21a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5h-21a1.5 1.5 0 0 1-1.5-1.5v-9a1.5 1.5 0 0 1 1.5-1.5z"/%3E%3Cpath data-part="inner" fill="none" stroke="%230b5a3c" stroke-width=".8" d="M-10.4-4.4h20.8v8.8h-20.8z"/%3E%3Ccircle r="3.4" fill="%232fbf84" stroke="%230b5a3c" stroke-width=".8"/%3E%3Ctext y="2.2" text-anchor="middle" font-size="6" font-weight="700" font-family="Arial,sans-serif" fill="%23063b26"%3E%24%3C/text%3E%3C/svg%3E') center/contain no-repeat; flex:none}
.v8 .ghost-node{margin:0; border:0; border-radius:0; border-top:1px dashed var(--line-2)}
.v8 .orb-stage{border:1px solid var(--v8-rule); background:rgba(8,10,13,.82)}
.v8 .orb-stage canvas{display:block; width:100%; height:100%}
.v8 .stage-lbl{margin-top:10px}

/* ── tool bands: alternate directions, prompt-style labels ── */
.v8 .toolbelt .tband:nth-child(2) .ticker{animation-direction:reverse}
.v8 .tband-lbl::after{content:""; width:7px; height:13px; background:var(--ace); margin-left:2px; animation:v8blink 1.1s steps(2,end) infinite; flex:none}

/* ── instrument: gauges, odometers and one scrub for all three cards ── */
.v8 #instrument{background:linear-gradient(180deg,rgba(12,15,20,.96),rgba(8,10,13,.96))}
.v8 .v8-scrub{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:0 0 18px;
  padding:18px 20px; border:1px solid var(--v8-rule); background:#08090b}
.v8 .v8-scrub .end{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; color:var(--dim); font-variant-numeric:tabular-nums}
.v8 .v8-scrub .end b{color:var(--ace); font-weight:500}
.v8 .v8-range{position:relative; height:34px}
.v8 .v8-range .ticks{position:absolute; left:0; right:0; top:50%; height:12px; transform:translateY(-50%); pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,246,248,.22) 0 1px,transparent 1px calc(100% / 14));
  background-size:calc(100% + 1px) 100%}
.v8 .v8-range .fill{position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:calc(var(--d,0) / 14 * 100%);
  background:var(--ace); box-shadow:0 0 10px rgba(var(--ace-rgb),.6); pointer-events:none}
.v8 .v8-range input{position:absolute; inset:0; width:100%; margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:ew-resize}
.v8 .v8-range input::-webkit-slider-runnable-track{height:34px; background:linear-gradient(rgba(35,43,54,.9),rgba(35,43,54,.9)) 0 50%/100% 3px no-repeat}
.v8 .v8-range input::-moz-range-track{height:3px; background:rgba(35,43,54,.9)}
.v8 .v8-range input::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:6px; border-radius:2px; background:var(--text);
  border:0; box-shadow:0 0 0 4px rgba(var(--ace-rgb),.25),0 0 18px rgba(var(--ace-rgb),.55)}
.v8 .v8-range input::-moz-range-thumb{width:22px; height:22px; border-radius:2px; background:var(--text); border:0;
  box-shadow:0 0 0 4px rgba(var(--ace-rgb),.25),0 0 18px rgba(var(--ace-rgb),.55)}
.v8 .v8-range input:focus-visible{outline:2px solid var(--ace); outline-offset:4px}
.v8 #instrument .icard{padding:30px 28px 26px; opacity:1; transform:none}
.v8 .icard .gauge{position:absolute; top:22px; right:22px; width:104px; height:62px; overflow:visible}
.v8 .icard .gauge .bg{stroke:rgba(35,43,54,1); stroke-width:6; fill:none}
.v8 .icard .gauge .val{stroke:var(--ace); stroke-width:6; fill:none; stroke-dasharray:var(--g,0) 1; filter:drop-shadow(0 0 4px rgba(var(--ace-rgb),.6));
  transition:stroke-dasharray .45s var(--ease)}
.v8 .icard .gauge .tk{stroke:rgba(244,246,248,.3); stroke-width:1}
.v8 .icard .gauge .ndl{stroke:var(--text); stroke-width:2; transform-origin:52px 54px; transform:rotate(calc(-90deg + var(--g,0) * 180deg));
  transition:transform .5s var(--ease)}
.v8 .icard .flow{padding-right:120px}
.v8 #instrument .icard .hd b{font-size:clamp(3rem,5vw,4.6rem)}
.v8 .icard .spark .live{opacity:1; transition:clip-path .3s var(--ease)}
.v8 .icard .spark .area{opacity:.9; transition:clip-path .3s var(--ease)}
.v8 .icard .spark .rest{opacity:calc(1 - var(--p,0) * .7)}
.v8 .icard .bar i{transform:scaleX(calc(.04 + var(--p,0) * .96)); transition:transform .3s var(--ease)}

/* odometer: every character (digit wheel, symbol, letter, space) sits in an equal 1em box,
   top-aligned, so 95%, 4h, 0 lost, 21 yrs and $35M+ share one baseline */
.v8 .odo{display:inline-flex; align-items:flex-start; height:1em; line-height:1; vertical-align:top; white-space:pre; font-variant-numeric:tabular-nums}
.v8 .odo>span{display:block; flex:none; height:1em; line-height:1}
.v8 .od{width:1ch; overflow:hidden; position:relative; transition:width .4s var(--ease)}
.v8 .od .ods{display:block; transform:translateY(calc(var(--d,0) * -1em)); transition:transform var(--odt,1.1s) var(--ease); transition-delay:calc(var(--k,0) * 70ms)}
.v8 .od .ods>span{display:block; height:1em; line-height:1}
.v8 .oc{overflow:hidden; max-width:1.2ch; transition:max-width .4s var(--ease),opacity .3s}
.v8 .od.blank{width:0}
.v8 .oc.blank{max-width:0; opacity:0}
/* while scroll drives the numbers, the wheels answer quickly */
.v8 .odo.now,.v8 .odo.now *{transition:none!important}
.v8 .odo.scrub .ods{--odt:.45s; transition-delay:calc(var(--k,0) * 22ms)}
.v8 .check-row .v,.v8 .facts li b,.v8 .icard .hd b{line-height:1}

/* ── the check: four bar columns on a graph grid ── */
.v8 .check-shot{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; border:1px solid var(--v8-rule); background:#08090b}
.v8 .check-top{grid-column:1/-1; margin:0; padding:14px 18px; border-bottom:1px solid var(--v8-rule)}
.v8 .check-row{flex-direction:column-reverse; align-items:stretch; gap:12px; padding:18px 14px 16px; border-bottom:0; border-right:1px solid var(--v8-rule)}
.v8 .check-row:last-child{border-right:0}
.v8 .check-row .k{width:auto!important; font-size:.62rem; text-align:left; min-height:2.7em}
.v8 .check-row .track{flex:none; height:clamp(150px,22vw,230px); width:100%;
  background:repeating-linear-gradient(0deg,rgba(244,246,248,.07) 0 1px,transparent 1px 25%),rgba(15,18,23,.8)}
.v8 .check-row .track i{transform-origin:bottom; transform:scaleY(var(--p)); left:22%; right:22%;
  background:linear-gradient(180deg,var(--ace),rgba(var(--ace-rgb),.35)); box-shadow:0 0 18px rgba(var(--ace-rgb),.35)}
.js .v8 .check-row .track i{transform:scaleY(calc(var(--p) * var(--ck,0) * var(--j,1))); transition:transform .35s var(--ease),filter .3s,box-shadow .3s;
  transition-delay:calc(var(--i) * 30ms)}
.js .v8 .check-shot.is-in .track i{transform:scaleY(calc(var(--p) * var(--ck,0) * var(--j,1)))}
.js .v8 .check-shot:not(.v8-k) .track{--ck:1}
.v8 .check-row{position:relative; transition:background .3s}
.v8 .check-row .track{position:relative}
.v8 .check-row .track b{position:absolute; left:0; right:0; bottom:calc(var(--lp,.5) * var(--ck,1) * var(--j,1) * 100%); height:1px; pointer-events:none;
  background:rgba(var(--ace-rgb),.7); box-shadow:0 0 10px rgba(var(--ace-rgb),.8); opacity:0; transition:opacity .3s,bottom .35s var(--ease)}
.v8 .check-row.hot{background:rgba(var(--ace-rgb),.05)}
.v8 .check-row.hot .track i{filter:brightness(1.18); box-shadow:0 0 26px rgba(var(--ace-rgb),.6)}
.v8 .check-row.hot .track b{opacity:1}
.v8 .check-row.hot .v{color:var(--ace)}
.v8 .check-row .v{transition:color .3s}
.v8 .check-row .v{width:auto; text-align:left; font-size:clamp(1.2rem,2vw,1.7rem); font-weight:650; letter-spacing:-.03em}

/* ── services: a bento, the first system takes the tall cell ── */
@media (min-width:901px){
  .v8 .svc{grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto}
  .v8 .svc-card:first-child{grid-row:span 2; padding:44px 40px}
  .v8 .svc-card:first-child .res{font-size:clamp(2rem,3.4vw,3rem); max-width:14ch}
  .v8 .svc-card:nth-child(2),.v8 .svc-card:nth-child(3){border-right:0}
  .v8 .svc-card:first-child{border-bottom:0}
}
.v8 .svc{gap:0; border:1px solid var(--v8-rule)}
.v8 .svc-card{border:0; border-radius:0; border-right:1px solid var(--v8-rule); border-bottom:1px solid var(--v8-rule); background:rgba(8,10,13,.7)}
.v8 .svc-card:hover{transform:none; background:rgba(var(--ace-rgb),.04)}
.v8 .svc-card:last-child{border-bottom:0}
.v8 .pill{border-radius:2px; transition:background .35s var(--ease),color .35s,border-color .35s,box-shadow .35s}
.v8 .pill:hover{background:var(--ace); border-color:var(--ace); color:#06120e; box-shadow:0 0 18px rgba(var(--ace-rgb),.45)}

/* ── proof: the statement as a wide console band, facts as KPI tiles ── */
.v8 .proof.pinned{grid-template-columns:1fr; gap:var(--cut)}
.v8 .pin .qband{position:relative; top:auto; padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px); border:1px solid var(--v8-rule);
  background:linear-gradient(180deg,rgba(12,16,21,.9),rgba(8,10,13,.7)); margin:0}
.v8 .pin .qband blockquote p{font-size:clamp(1.5rem,3.2vw,2.8rem); max-width:30ch}
.v8 .qband p.wl .w{opacity:.16; transition:opacity .2s}
.v8 .qband p.wl .w.lit{opacity:1}
.v8 .pin .qband .who{margin-top:clamp(28px,4vw,40px); line-height:1.8}
.v8 .proof-body{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:start}
.v8 .proof-body .facts{margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--v8-rule); border-top:1px solid var(--v8-rule)}
.v8 .facts li{display:flex; flex-direction:column; gap:12px; padding:26px 24px; border-bottom:1px solid var(--v8-rule); border-right:1px solid var(--v8-rule); line-height:1.5}
.v8 .facts li:nth-child(2n){border-right:0}
.v8 .facts li:nth-last-child(-n+2){border-bottom:0}
.v8 .facts li b{font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.045em; line-height:1}
.v8 .facts li>span{font-size:.92rem; color:#b6c0cc}
.v8 .facts li{transition:background .3s}
.v8 .facts li:hover{background:rgba(var(--ace-rgb),.035)}

/* ── testimonials: log entries, one lit at a time ── */
.v8 .revs{gap:0; background:none; border:1px solid var(--v8-rule)}
.v8 .rev{position:relative; background:rgba(8,10,13,.75); border-right:1px solid var(--v8-rule)}
.v8 .rev:last-child{border-right:0}
.v8 .rev::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--ace); transform:scaleX(0); transform-origin:left}
.v8 .rev.on::before{animation:v8fill 6s linear forwards}
.v8 .rev.on{background:rgba(var(--ace-rgb),.04)}
@keyframes v8fill{to{transform:scaleX(1)}}

/* ── logo wall: the brands as a lit scoreboard instead of a moving strip ── */
.v8 .clients .clip{-webkit-mask:none; mask:none}
.v8 .clients .ltick{animation:none; width:auto; display:block}
.v8 .clients .ltick>div+div{display:none!important}
.v8 .clients .ltick>div{display:grid!important; grid-template-columns:repeat(9,1fr)}
.v8 .clients .lgo:nth-child(n+10){display:none}
.v8 .clients .lgo{padding:0 10px; height:76px; opacity:.32; border-right:1px solid var(--v8-rule); transition:opacity .5s,color .5s,background .5s}
.v8 .clients .lgo.lit{opacity:1; color:var(--ace); background:rgba(var(--ace-rgb),.05)}
.v8 .clients .lgo svg{max-width:100%}

/* ── faq: a console side panel, the questions as rows ── */
.v8 .faq-side{padding:clamp(26px,3vw,36px); border:1px solid var(--v8-rule); background:rgba(8,10,13,.8)}
@media (min-width:961px){ .v8 .faq-side{position:sticky; top:calc(var(--nav-h) + 30px)} }
.v8 .faq details{border:1px solid var(--v8-rule); border-top:0; padding:0 22px; background:rgba(8,10,13,.55); transition:background .3s}
.v8 .faq details:first-child{border-top:1px solid var(--v8-rule)}
.v8 .faq details[open]{background:rgba(var(--ace-rgb),.035)}
.v8 .faq details .faq-body{overflow:hidden}

/* ── close: the direct line as a terminal window ── */
.v8 .contact-card{border:1px solid var(--v8-rule); border-radius:0; padding:0; background:#08090b}
.v8 .contact-card .v8-bar{display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--v8-rule)}
.v8 .contact-card .v8-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.v8 .contact-card .v8-bar i:first-child{background:var(--ace)}
.v8 .contact-card .v8-in{padding:28px}
.v8 .contact-card .big::after{content:""; display:inline-block; width:.5em; height:1.05em; margin-left:4px; vertical-align:-.15em;
  background:var(--ace); animation:v8blink 1s steps(2,end) infinite}
.v8 .steps{position:relative}
.v8 .steps::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--ace);
  transform-origin:left; transform:scaleX(var(--st,0))}

/* ── custom web applications: its own section, its own classes ── */
.v8 .apps-panel{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:start;
  padding:clamp(32px,5vw,56px); border:1px solid var(--v8-rule); background:linear-gradient(180deg,rgba(12,16,21,.9),rgba(8,10,13,.7))}
.v8 .apps-title{font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; letter-spacing:-.04em; font-weight:650; margin:14px 0 0; max-width:16ch}
.v8 .apps-sub{margin-top:18px; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ace)}
.v8 .apps-body p{color:var(--muted); line-height:1.65; max-width:52ch}
.v8 .apps-body p b{color:var(--text); font-weight:600}
.v8 .apps-body .btn{margin-top:28px}
@media (max-width:900px){ .v8 .apps-panel{grid-template-columns:1fr} }

@media (max-width:960px){
  .v8 .chamber{margin-top:var(--cut)}
  .v8 .proof-body{grid-template-columns:1fr; gap:var(--cut)}
  .v8 .proof-body .quote + p{margin-top:72px!important}
  .v8 .pin .qband{padding-bottom:clamp(40px,6vw,72px); margin-bottom:0; border-bottom:1px solid var(--v8-rule)}
  .v8 .faq-wrap{gap:var(--cut)}
}
@media (max-width:900px){
  .v8 .svc-card{border-right:0}
  .v8 .revs{grid-template-columns:1fr}
  .v8 .rev{border-right:0; border-bottom:1px solid var(--v8-rule)}
  .v8 .rev:last-child{border-bottom:0}
  .v8 .icard .flow{padding-right:0}
  .v8 #instrument .icard{padding-top:96px}
}
@media (max-width:760px){
  .v8 .clients .ltick>div{grid-template-columns:repeat(3,1fr)}
  .v8 .clients .lgo{border-bottom:1px solid var(--v8-rule); height:64px}
  .v8 .clients .lgo:nth-child(3n){border-right:0}
  .v8 .clients .lgo:nth-child(n+7):nth-child(-n+9){border-bottom:0}
  .v8 .hero-meta{grid-template-columns:1fr 1fr 1fr; width:100%}
  .v8 .hero-meta span{padding:12px 10px; font-size:.6rem; letter-spacing:.1em}
  .v8 .v8-scrub{grid-template-columns:auto 1fr auto; gap:12px; padding:14px}
}
@media (max-width:600px){
  .v8 .proof-body .facts{grid-template-columns:1fr}
  .v8 .facts li{border-right:0!important; border-bottom:1px solid var(--v8-rule)!important; padding:24px 20px}
  .v8 .facts li:last-child{border-bottom:0!important}
  .v8 .check-row{padding:14px 8px 12px}
  .v8 .check-row .k{font-size:.5rem; letter-spacing:.08em}
  .v8 .check-row .v{font-size:1.05rem}
  .v8 .leak-grid .seq-card{border-right:0}
  .v8 .contact-card .v8-in{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){
  .v8::after{display:none}
  .js .v8 .check-row .track i{transform:scaleY(var(--p))!important}
  .v8 .od .ods{transition:none}
  .v8 .qband p.wl .w{opacity:1}
  .v8 .seq-card .loss::before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="-32 -26 64 34"%3E%3Cg fill="%23f4f6f8" stroke="%2307080a" stroke-opacity=".35" stroke-width=".7"%3E%3Cg transform="translate(-11 -4) scale(-1 1)"%3E%3Cg transform="rotate(-24)"%3E%3Cpath data-part="wing" d="M0 0C4-9 12-12 19-11Q18-6 14-5.5Q15-2.5 10-2.5Q10 .5 5 1Q2 2.5 0 2Z"/%3E%3Cpath data-part="feather" fill="none" d="M3-1L13-7.5M3 .6L9.5-3"/%3E%3C/g%3E%3C/g%3E%3Cg transform="translate(11 -4)"%3E%3Cg transform="rotate(-24)"%3E%3Cpath d="M0 0C4-9 12-12 19-11Q18-6 14-5.5Q15-2.5 10-2.5Q10 .5 5 1Q2 2.5 0 2Z"/%3E%3Cpath fill="none" d="M3-1L13-7.5M3 .6L9.5-3"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath data-part="note" fill="%234ade9f" d="M-10.5-6h21a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5h-21a1.5 1.5 0 0 1-1.5-1.5v-9a1.5 1.5 0 0 1 1.5-1.5z"/%3E%3Cpath data-part="inner" fill="none" stroke="%230b5a3c" stroke-width=".8" d="M-10.4-4.4h20.8v8.8h-20.8z"/%3E%3Ccircle r="3.4" fill="%232fbf84" stroke="%230b5a3c" stroke-width=".8"/%3E%3Ctext y="2.2" text-anchor="middle" font-size="6" font-weight="700" font-family="Arial,sans-serif" fill="%23063b26"%3E%24%3C/text%3E%3C/svg%3E')}
}

/* rate block — one audit line, three sizes, the band, and 04 · Retainers (approved mock B-green, option C: only the header figure is green) */
.rate{
  margin-top:26px; border:1px solid var(--v8-rule); background:rgba(8,10,13,.55);
  font-variant-numeric:tabular-nums;
}
.rate-h{
  margin:0; max-width:none; padding:16px 22px; border-bottom:1px solid var(--v8-rule);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.rate-h b{font-weight:500; color:var(--ace); transition:color .18s ease}
.rate-rows{margin:0}
.rate-rows>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:12px 22px; border-bottom:1px solid var(--v8-rule);
  transition:background .18s ease;
}
.rate-rows>div:hover{background:rgba(244,246,248,.02)}
.rate-rows dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); flex:0 0 auto;
}
.rate-rows dd{
  margin:0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:flex-end;
}
.rate-rows dd b{
  font-family:var(--mono); font-size:clamp(1rem,1.35vw,1.18rem); font-weight:500;
  color:var(--text); letter-spacing:-.01em;
}
.rate-band{
  margin:0; max-width:none; padding:16px 22px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:rgba(244,246,248,.03);
}
.rate-ret{
  margin:0; display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:20px 22px 20px 19px;
  border-top:2px solid rgba(var(--ace-rgb),.55);
  border-left:3px solid var(--ace);
  background:linear-gradient(90deg,rgba(var(--ace-rgb),.10),rgba(var(--ace-rgb),.03) 62%,rgba(var(--ace-rgb),.01));
}
.rate-ret dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ace);
}
.rate-ret dt i{display:block; margin-top:7px; font-style:normal; letter-spacing:.06em;
  text-transform:none; font-size:.86rem; color:var(--text); opacity:.85}
.rate-ret dd{margin:0; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.rate-ret .words{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.rate-ret a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ace); text-decoration:none; border-bottom:1px solid rgba(var(--ace-rgb),.45); padding-bottom:2px;
}
.rate-ret a:hover{border-bottom-color:var(--ace)}
@media (max-width:760px){
  .rate-rows>div, .rate-ret{flex-direction:column; align-items:flex-start; gap:8px}
  .rate-rows dd{justify-content:flex-start}
  .rate-ret{padding-left:16px}
  .rate-rows>div{padding:14px 16px}
  .rate-band{padding:14px 16px}
}

/* ── services motion. Cards read as live instrumentation: on hover or keyboard focus a soft light
   lifts off the top edge, a hairline sweeps across once, the outline tightens to green and the
   index line brightens. Entry is scroll-linked and CSS-only (no JS); every keyframe starts from a
   visible state, transforms and opacity only, so height and layout never move. The rate block is
   quieter: accents draw in as rows enter and the figures never move. Reduced motion: none of it. ── */
.v8 .svc-card:focus-visible{outline:none; background:rgba(var(--ace-rgb),.04)}
.v8 .svc-card:focus-visible::after{transform:scaleX(1)}
.v8 .svc-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(90deg,transparent,rgba(var(--ace-rgb),.95),transparent) -45% 0/45% 1px no-repeat,
    radial-gradient(520px 300px at 22% 0%,rgba(var(--ace-rgb),.11),transparent 70%)}
.v8 .svc-card:hover::before,.v8 .svc-card:focus-visible::before{opacity:1; background-position:145% 0,0 0}
.v8 .svc-card:hover,.v8 .svc-card:focus-visible{box-shadow:inset 0 0 0 1px rgba(var(--ace-rgb),.32)}
.v8 .svc-card .tag span{transition:color .3s}
.v8 .svc-card:hover .tag span,.v8 .svc-card:focus-visible .tag span{color:var(--text)}
.v8 .svc-card>*{position:relative}
.v8 .rate-rows>div,.v8 .rate-band,.v8 .rate-ret{position:relative}

@media (prefers-reduced-motion:no-preference){
  .v8 .svc-card{transition:background .3s,box-shadow .3s}
  .v8 .svc-card::before{transition:opacity .35s ease,background-position 0s .35s}
  .v8 .svc-card:hover::before,.v8 .svc-card:focus-visible::before{transition:opacity .35s ease,background-position 1.1s cubic-bezier(.3,.6,.2,1)}

  @supports (animation-timeline: view()){
    /* cards: the index slides in, the headline settles, the pills arrive last on a short stagger */
    .v8 .svc-card .tag{animation:svc-in linear both; animation-timeline:view(); animation-range:entry 5% entry 70%; --dx:-14px}
    .v8 .svc-card .res{animation:svc-in linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; --dy:8px}
    .v8 .svc-card .pill{animation:svc-in linear both; animation-timeline:view(); animation-range:entry 30% cover 28%; --dy:10px}
    .v8 .svc-card .pill+.pill{animation-range:entry 45% cover 32%}
    /* rate block: a green accent draws down the left of each row as it enters, then hands back to neutral */
    .v8 .rate-rows>div::before{content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:var(--ace);
      transform-origin:top; animation:rate-tick linear both; animation-timeline:view(); animation-range:entry 0% cover 30%}
    /* the band gets the stronger reveal: a wipe from the left */
    .v8 .rate-band{animation:rate-wipe linear both; animation-timeline:view(); animation-range:entry 10% cover 30%}
    /* 04 · Retainers: its accent rules are drawn in, left edge first, then the top rule */
    .v8 .rate-ret{border-top-color:transparent; border-left-color:transparent}
    .v8 .rate-ret::before,.v8 .rate-ret::after{content:""; position:absolute; pointer-events:none}
    .v8 .rate-ret::before{left:-3px; top:-2px; bottom:0; width:3px; background:var(--ace); transform-origin:top;
      animation:rate-draw-y linear both; animation-timeline:view(); animation-range:entry 0% cover 25%}
    .v8 .rate-ret::after{left:-3px; right:0; top:-2px; height:2px; background:rgba(var(--ace-rgb),.55); transform-origin:left;
      animation:rate-draw-x linear both; animation-timeline:view(); animation-range:entry 20% cover 35%}
  }
}
@keyframes svc-in{from{opacity:.35; transform:translate(var(--dx,0),var(--dy,0))}to{opacity:1; transform:none}}
@keyframes rate-tick{0%{transform:scaleY(0); opacity:1}55%{transform:scaleY(1); opacity:1}100%{transform:scaleY(1); opacity:0}}
@keyframes rate-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rate-draw-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rate-draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .v8 .svc-card,.v8 .svc-card::before,.v8 .svc-card::after,.v8 .svc-card .tag span,.v8 .rate-h b,.v8 .rate-rows>div,.v8 .pill{transition:none}
}

/* services intro: the lead-catcher link (GHL URL goes in later), and the hero's Q4 line */
.v8 .svc-ghl{color:var(--ace); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; white-space:normal}
.v8 .svc-ghl:hover{text-decoration-thickness:2px}
.v8 .svc-ghl:focus-visible{outline:2px solid var(--ace); outline-offset:3px}
/* Q4 line: the hero strip's mono caps and colour ("against the build"), sized 1px under "You cannot outspend a broken handoff." */
/* the strip and the Q4 line share one width: the line sits centred under the strip, with room on both sides */
.v8 .hero-strip{display:grid; width:max-content; max-width:100%}
.v8 .hero-q{width:0; min-width:100%; margin:22px 0 0; padding:0 18px; box-sizing:border-box; max-width:none; text-align:center; text-wrap:balance; font-family:var(--mono); font-weight:400; font-size:calc(clamp(1.12rem,2vw,1.6rem) - 4px); letter-spacing:.14em; line-height:1.35; text-transform:uppercase; color:var(--dim)}
@media (max-width:760px){ .v8 .hero-strip{width:100%} .v8 .hero-q{padding:0 10px; letter-spacing:.1em} }
/* founder's closing line under the proof paragraph: set apart as its own quote, on a green-tinted panel */
.v8 .proof-body .quote-close{margin-top:28px; padding:22px 24px; background:rgba(var(--ace-rgb),.07); border-left-width:3px}
.v8 .proof-body .quote-close p{max-width:46ch; color:var(--text); font-weight:500}

/* rate rows: a lit row — a green wash with a 2px rule slides in from the left and the label steps forward; figures stay put */
.v8 .rate-rows>div::after{content:""; position:absolute; inset:0; pointer-events:none; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--ace) 0 2px,rgba(var(--ace-rgb),.10) 2px,rgba(var(--ace-rgb),.02) 70%,transparent)}
.v8 .rate-rows>div>*{position:relative; z-index:1}
.v8 .rate-rows>div.on::after,.v8 .rate-rows>div:hover::after{transform:scaleX(1)}
.v8 .rate-rows>div.on dt,.v8 .rate-rows>div:hover dt{color:var(--text); transform:translateX(6px)}
@media (prefers-reduced-motion:no-preference){
  .v8 .rate-rows>div::after{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .v8 .rate-rows dt{transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
}