*{box-sizing:border-box}
html{color-scheme:dark;background:#07030f}
body{margin:0;background:#07030f}
img{max-width:100%}
[hidden]{display:none!important}
:root{
--bg:#07030f; --panel:#130a24; --panel2:#1b1030; --deep:#3d155f;
--line:#271746; --line2:#3b2760;
--ink:#f2ecfa; --dim:#a094b8; --faint:#6d6088;
--violet:#a06bff; --pink:#ff7aa2;
--disp:'Sora',system-ui,-apple-system,sans-serif;
--body:'Inter',system-ui,-apple-system,sans-serif;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
--gut:clamp(20px,5.5vw,100px);
--glen:url("data:image/jpeg;base64,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");
--ease:cubic-bezier(.22,1,.36,1);
color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance;
overflow-wrap:break-word}
p,li,span,b,em,u{overflow-wrap:break-word}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:rgba(160,107,255,.3)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono)}
/* ── header ── */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);
background:rgba(7,3,15,.7);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.stuck{border-bottom-color:var(--line);background:rgba(7,3,15,.93)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:14px var(--gut);max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.navright{display:flex;align-items:center;gap:6px;flex:none}
.brand img{height:26px;width:auto;display:block}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-size:14.5px;color:var(--dim);position:relative;padding:5px 0;transition:color .25s}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--violet);transition:right .35s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{right:0}
.cta{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:600;
background:linear-gradient(135deg,var(--violet),#7c3fe0);
font-size:14.5px;padding:12px 20px;border-radius:4px;border:0;cursor:pointer;
font-family:var(--body);white-space:nowrap;
transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(160,107,255,.32)}
.cta.lg{font-size:16px;padding:16px 26px}
@media(max-width:960px){
.navlinks{display:none}
header .cta{min-height:40px}
.brand img{height:22px}
header .cta{font-size:13px;padding:10px 14px}
header .cta .full{display:none}
}
@media(min-width:961px){header .cta .short{display:none}}
.burger{display:none;width:40px;height:40px;flex:none;border:0;padding:0;cursor:pointer;
background:transparent;position:relative;border-radius:4px}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);border-radius:2px;
transition:transform .32s var(--ease),opacity .2s}
.burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:19.5px} .burger i:nth-child(3){top:25px}
body.menu .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobmenu{position:fixed;inset:0;z-index:55;background:var(--bg);
background-image:radial-gradient(120% 60% at 100% 0%,rgba(61,21,95,.5),transparent 60%);
display:flex;flex-direction:column;justify-content:flex-start;
padding:calc(88px + env(safe-area-inset-top,0px)) var(--gut) calc(44px + env(safe-area-inset-bottom,0px));
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
body.menu .mobmenu{opacity:1;visibility:visible}
body.menu{overflow:hidden}
.mobmenu a{display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.015em;
font-size:clamp(26px,8vw,40px);padding:14px 0;color:var(--ink);
border-bottom:1px solid var(--line);
opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.menu .mobmenu a{opacity:1;transform:none}
.mobmenu a:nth-child(1){transition-delay:.05s} .mobmenu a:nth-child(2){transition-delay:.11s}
.mobmenu a:nth-child(3){transition-delay:.17s} .mobmenu a:nth-child(4){transition-delay:.23s}
.mobmenu a:nth-child(5){transition-delay:.29s} .mobmenu a:nth-child(6){transition-delay:.35s} .mobmenu a:nth-child(7){transition-delay:.41s}
.mobmenu a:last-of-type{border-bottom:0}
@media(max-height:720px){
.mobmenu{padding-top:calc(80px + env(safe-area-inset-top,0px))}
.mobmenu a{font-size:clamp(22px,6.4vw,30px);padding:11px 0}
.mobmenu .cta{margin-top:22px}
}
.mobmenu a.cur{color:var(--violet)}
.mobmenu .cta{margin-top:30px;align-self:flex-start;
opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease) .3s,transform .4s var(--ease) .3s}
body.menu .mobmenu .cta{opacity:1;transform:none}
@media(max-width:960px){ .burger{display:block} }
@media(min-width:961px){ .mobmenu{display:none} }
/* ── hero ── */
.hero{padding:clamp(48px,7vh,90px) 0 clamp(52px,8vh,96px);position:relative;overflow:hidden}
.heroglow{position:absolute;right:-10%;top:-30%;width:70%;height:120%;pointer-events:none;
background:radial-gradient(closest-side,rgba(61,21,95,.55),transparent 70%);filter:blur(10px)}
.herorow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4.5vw,64px);align-items:center;position:relative}
.hero h1{font-size:clamp(31px,3.9vw,53px);line-height:1.07}
.hero h1 em{font-style:normal;color:var(--pink)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
color:var(--violet);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.kicker::before{content:'';width:26px;height:1px;background:var(--violet);display:block}
.lede{color:var(--dim);font-size:clamp(15.5px,1.25vw,18px);max-width:52ch;margin-top:20px}
.heroacts{display:flex;gap:18px;align-items:center;margin-top:30px;flex-wrap:wrap}
.textlink{color:var(--violet);font-size:15px;display:inline-flex;gap:8px;align-items:center;
padding:10px 2px;min-height:44px}
.textlink b{transition:transform .3s var(--ease);display:inline-block;font-weight:400}
.textlink:hover b{transform:translateX(4px)}
@media(max-width:920px){.herorow{grid-template-columns:1fr;gap:30px}.usp{order:2}.herocopy{order:1}}
/* hero USP visual */
.usp{position:relative;border:1px solid var(--line);border-radius:10px;
background:linear-gradient(165deg,#170c2b,#0b0518);padding:16px;overflow:hidden;
box-shadow:0 30px 80px -30px rgba(61,21,95,.9)}
.usp canvas{width:100%;height:auto;aspect-ratio:112/76;display:block;border-radius:6px}
@media(max-width:640px){.usp canvas{aspect-ratio:1/1}}
.uspcap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;
font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.uspcap b{color:var(--violet);font-weight:400}
/* ── router / inner pages ── */
main.page{display:none}
main.page.on{display:block}
.navlinks a.cur{color:var(--ink)}
.navlinks a.cur::after{right:0}
.phero{padding:clamp(58px,9vh,110px) 0 clamp(30px,4.5vh,54px);position:relative;overflow:hidden}
.phero::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;
background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.pglow{position:absolute;left:50%;top:-38%;width:min(1100px,120vw);aspect-ratio:1;
transform:translateX(-50%);pointer-events:none;
background:radial-gradient(closest-side,rgba(61,21,95,.62),rgba(61,21,95,.14) 58%,transparent 74%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(29px,4.1vw,50px);line-height:1.07;max-width:24ch;margin-top:18px}
.phero .lede{color:var(--dim);font-size:clamp(16px,1.6vw,19px);max-width:66ch;margin-top:22px}
.prose{padding:clamp(44px,6vh,72px) 0}
main.page:not(#top) .band{padding:clamp(44px,6vh,74px) 0}
.prose + .prose{padding-top:0}
.pblock{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.6fr);min-width:0;
gap:clamp(22px,4vw,64px);align-items:start}
.pblock .pk h2{font-size:clamp(21px,2.35vw,29px);line-height:1.16;position:sticky;top:96px}
.pblock .pbody > :first-child{margin-top:0}
.pblock p{color:var(--dim);font-size:16.5px}
.pblock p + p{margin-top:14px}
.pblock .deflist{margin-top:0}
@media(max-width:900px){
.pblock{grid-template-columns:1fr;gap:16px}
.pblock .pk h2{position:static}
}
.deflist{display:grid;gap:2px;margin-top:18px}
.deflist > div{padding:20px 22px;background:linear-gradient(180deg,rgba(27,16,48,.72),rgba(19,10,36,.5));
border-radius:4px;box-shadow:0 1px 0 rgba(160,107,255,.09) inset,0 8px 22px -18px rgba(0,0,0,.9)}
.deflist b{display:block;font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.deflist span{display:block;color:var(--dim);font-size:15.5px;margin-top:7px}
.layers{display:grid;gap:14px;margin-top:8px}
.layer{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 22px;align-items:start;
padding:26px 26px 26px 0;border-top:1px solid var(--line)}
.layer:first-child{border-top:0;padding-top:6px}
.layer .ln{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;color:var(--violet);
padding-top:6px;white-space:nowrap}
.layer h3{font-size:clamp(19px,2.2vw,25px);line-height:1.18}
.layer p{color:var(--dim);font-size:16px;margin-top:11px;max-width:68ch}
.layer p + p{margin-top:11px}
@media(max-width:640px){
.layer{grid-template-columns:1fr;gap:10px;padding-right:0}
.layer .ln{padding-top:0}
}
.plc{margin-top:22px;border-radius:6px;padding:20px 22px;
background:rgba(255,122,162,.05);box-shadow:0 0 0 1px rgba(255,122,162,.22) inset}
.plc b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;
text-transform:uppercase;color:var(--pink);margin-bottom:9px}
.plc p{color:var(--dim);font-size:15px}
.plc p + p{margin-top:9px}
.csx{margin-top:20px;border-radius:6px;padding:24px 26px;
background:linear-gradient(180deg,rgba(27,16,48,.6),rgba(19,10,36,.35));
box-shadow:0 1px 0 rgba(160,107,255,.08) inset,0 14px 34px -26px rgba(0,0,0,.9)}
.csx h3{font-size:19px;color:var(--faint);font-style:italic;font-weight:500}
.csx .row{margin-top:16px}
.csx .row b{color:var(--ink);font-family:var(--disp);font-size:15.5px}
.csx .row span{color:var(--faint);font-style:italic;font-size:15.5px}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pillrow span{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--dim);padding:8px 13px;border-radius:100px;background:rgba(160,107,255,.08);
box-shadow:0 0 0 1px rgba(160,107,255,.16) inset}
/* ── inner page hero: copy + visual ── */
.pherorow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,60px);align-items:center}
.phero h1{max-width:none}
.phero .lede{max-width:52ch}
@media(max-width:940px){
.pherorow{grid-template-columns:1fr;gap:28px}
.phero .lede{max-width:60ch}
}
/* shared visual panel chrome */
.pvis{position:relative;border-radius:10px;padding:clamp(15px,1.5vw,20px);
background:linear-gradient(165deg,rgba(27,16,48,.92),rgba(11,5,20,.94));
box-shadow:0 0 0 1px rgba(160,107,255,.15) inset,0 34px 80px -46px #000,0 0 60px -30px rgba(160,107,255,.35)}
.pvtop{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;
letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.pvtop b{margin-left:auto;color:var(--violet);font-weight:400}
.pvis .lbl{font-family:var(--mono);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--faint)}
@media(prefers-reduced-motion:reduce){ .pvis *{animation:none!important} }
/* 1 · what we do · the spectrum */
.vspec .stop{border-radius:7px;padding:13px 14px 15px;background:rgba(160,107,255,.06);
box-shadow:0 0 0 1px rgba(160,107,255,.13) inset}
.vspec .mini{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:10px}
.vspec .mini i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--violet),rgba(160,107,255,.25));
transform-origin:bottom;animation:sgrow 3.6s var(--ease) infinite}
.vspec .mini i:nth-child(1){height:38%;animation-delay:0s}
.vspec .mini i:nth-child(2){height:62%;animation-delay:.12s}
.vspec .mini i:nth-child(3){height:46%;animation-delay:.24s}
.vspec .mini i:nth-child(4){height:82%;animation-delay:.36s}
.vspec .mini i:nth-child(5){height:55%;animation-delay:.48s}
.vspec .mini i:nth-child(6){height:70%;animation-delay:.6s}
.vspec .mini i:nth-child(7){height:44%;animation-delay:.72s}
@keyframes sgrow{0%,72%,100%{transform:scaleY(1)}82%{transform:scaleY(.62)}}
.vspec .water{display:flex;align-items:center;gap:10px;margin:14px 0 13px}
.vspec .water span{font-family:var(--mono);font-size:9px;letter-spacing:1.7px;
text-transform:uppercase;color:var(--pink);white-space:nowrap}
.vspec .water i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,122,162,.5),rgba(255,122,162,.08))}
.vspec .srow{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:5px;
background:rgba(255,255,255,.022);margin-top:5px;position:relative;overflow:hidden}
.vspec .srow::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(160,107,255,.14),transparent);
transform:translateX(-100%);animation:sweep 4.4s linear infinite}
.vspec .srow:nth-child(2)::after{animation-delay:.5s}
.vspec .srow:nth-child(3)::after{animation-delay:1s}
.vspec .srow:nth-child(4)::after{animation-delay:1.5s}
.vspec .srow:nth-child(5)::after{animation-delay:2s}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.vspec .srow b{font-family:var(--disp);font-size:13.5px;color:var(--ink);min-width:96px}
.vspec .srow em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.6px;color:var(--faint)}
@media(max-width:420px){ .vspec .srow b{min-width:0} .vspec .srow{flex-wrap:wrap;gap:2px 10px} }
/* 2 · ecosystem · the layer stack */
.vstack .stk{display:grid;gap:7px;position:relative}
.vstack .sk{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;align-items:center;
padding:14px 15px;border-radius:6px;position:relative;overflow:hidden;
background:linear-gradient(180deg,rgba(160,107,255,.09),rgba(160,107,255,.03));
box-shadow:0 0 0 1px rgba(160,107,255,.15) inset}
.vstack .sk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--violet);
opacity:.25;transition:opacity .4s}
.vstack .sk::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(160,107,255,.2),transparent);
opacity:0;animation:rise 5.2s var(--ease) infinite}
.vstack .sk:nth-child(1)::after{animation-delay:2.4s}
.vstack .sk:nth-child(2)::after{animation-delay:1.6s}
.vstack .sk:nth-child(3)::after{animation-delay:.8s}
.vstack .sk:nth-child(4)::after{animation-delay:0s}
@keyframes rise{0%,100%{opacity:0}8%{opacity:1}26%{opacity:0}}
.vstack .sk u{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--violet)}
.vstack .sk b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--ink);line-height:1.25}
.vstack .sk span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.vstack .own{display:flex;align-items:center;gap:9px;margin-top:13px;padding:11px 13px;border-radius:6px;
background:rgba(255,122,162,.06);box-shadow:0 0 0 1px rgba(255,122,162,.2) inset}
.vstack .own svg{width:14px;height:14px;flex:none;stroke:var(--pink);stroke-width:1.7;fill:none}
.vstack .own span{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink)}
/* 3 · our work · redacted dashboard */
.vred .rd{border-radius:7px;padding:14px;background:rgba(7,3,15,.55);
box-shadow:0 0 0 1px rgba(160,107,255,.12) inset}
.vred .rdh{display:flex;align-items:center;gap:9px;padding-bottom:11px;
border-bottom:1px solid rgba(160,107,255,.12)}
.vred .rdh .lbl{margin-left:auto}
.red{display:inline-block;border-radius:2px;height:11px;
background:repeating-linear-gradient(45deg,rgba(255,122,162,.34) 0 4px,rgba(255,122,162,.16) 4px 8px);
animation:redin 6s var(--ease) infinite}
@keyframes redin{0%,100%{opacity:1;transform:scaleX(1)}46%{opacity:1;transform:scaleX(1)}
52%{opacity:.25;transform:scaleX(.2)}60%{opacity:1;transform:scaleX(1)}}
.red.w1{width:98px} .red.w2{width:52px;height:17px} .red.w3{width:40px;height:17px}
.vred .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.vred .kpis u{text-decoration:none;border-radius:5px;padding:10px 11px;background:rgba(160,107,255,.05);
box-shadow:0 0 0 1px rgba(160,107,255,.11) inset}
.vred .kpis em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.vred .kpis s{display:block;text-decoration:none;font-family:var(--mono);font-size:17px;
font-weight:500;color:var(--ink);line-height:1}
.vred .rdname{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--ink)}
.vred .rdk{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
color:var(--violet);min-width:78px}
.vred .rows span:last-child{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.vred .spark{margin-top:12px;height:74px;border-radius:5px;background:rgba(160,107,255,.04);
box-shadow:0 0 0 1px rgba(160,107,255,.1) inset;padding:9px;display:block}
.vred .spark svg{width:100%;height:100%;display:block;overflow:visible}
.vred .spark path{fill:none;stroke:var(--violet);stroke-width:1.6;stroke-linecap:round;
stroke-dasharray:520;stroke-dashoffset:520;animation:draw 4.6s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:520}45%,100%{stroke-dashoffset:0}}
.vred .rows{margin-top:11px;display:grid;gap:6px}
.vred .rows div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;
background:rgba(255,255,255,.02)}
.vred .rows span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.vred .rdnote{margin-top:12px;font-size:11.5px;color:var(--faint)}
/* 4 · about · the altitude drop */
.valt .ar{padding:12px 14px;border-radius:6px;position:relative;
background:linear-gradient(180deg,rgba(160,107,255,.085),rgba(160,107,255,.02));
box-shadow:0 0 0 1px rgba(160,107,255,.14) inset}
.valt .ar + .ar{margin-top:6px}
.valt .ar b{display:block;font-family:var(--disp);font-size:14px;color:var(--ink)}
.valt .ar span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.valt .drop{height:62px;position:relative;margin:4px 0}
.valt .drop i{position:absolute;left:26px;top:0;bottom:0;width:1px;
background:linear-gradient(180deg,rgba(160,107,255,.55),rgba(255,122,162,.55))}
.valt .drop b{position:absolute;left:22px;width:9px;height:9px;border-radius:50%;background:var(--pink);
box-shadow:0 0 0 5px rgba(255,122,162,.12);animation:fall 3.4s var(--ease) infinite}
@keyframes fall{0%{top:-4px;opacity:0}12%{opacity:1}72%,100%{top:56px;opacity:0}}
.valt .drop em{position:absolute;left:46px;top:50%;transform:translateY(-50%);font-style:normal;
font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.valt .ar.you{background:linear-gradient(180deg,rgba(255,122,162,.11),rgba(255,122,162,.03));
box-shadow:0 0 0 1px rgba(255,122,162,.28) inset}
.valt .ar.you b{color:#ffd9e4}
/* ══════════════ v10 · page components ══════════════ */
.lead2{color:var(--dim);font-size:16.5px;max-width:70ch}
.lead2 + .lead2{margin-top:14px}
.note{margin-top:16px;font-size:13.5px;color:var(--faint);max-width:74ch}
/* ── demonstration cards ── */
.demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
a.demo{color:inherit;text-decoration:none}
.demo{position:relative;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;min-width:0;
background:linear-gradient(168deg,rgba(27,16,48,.8),rgba(11,5,20,.88));
box-shadow:0 0 0 1px rgba(160,107,255,.15) inset,0 26px 60px -46px #000;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.demo:hover{transform:translateY(-3px);
box-shadow:0 0 0 1px rgba(160,107,255,.36) inset,0 34px 70px -42px #000,0 0 54px -30px rgba(160,107,255,.45)}
/* v13 · the visual is a window into another product, so it wears a browser
frame and that product's own accent. --acc / --acc2 are RGB triplets. */
.dviz{--acc:160,107,255; --acc2:255,122,162; position:relative}
.dchrome{display:flex;align-items:center;gap:6px;padding:10px 12px;position:relative;z-index:5;
background:rgba(3,1,8,.8);box-shadow:0 1px 0 rgba(var(--acc),.18)}
.dchrome > i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.13);flex:none}
.durl{flex:1;min-width:0;margin-left:5px;font-family:var(--mono);font-size:9px;letter-spacing:.3px;
color:var(--dim);background:rgba(255,255,255,.045);border-radius:100px;padding:5px 10px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px;
box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.durl::before{content:'';width:5px;height:5px;border-radius:50%;flex:none;
background:rgb(var(--acc));box-shadow:0 0 8px rgba(var(--acc),.9);animation:lpulse 2.6s var(--ease) infinite}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.35}}
.dopen{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;
background:rgba(255,255,255,.05);transition:background .3s var(--ease),transform .3s var(--ease)}
.dopen svg{width:11px;height:11px;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;
stroke-linejoin:round;transition:stroke .3s}
.demo:hover .dopen{background:rgb(var(--acc));transform:translate(1px,-1px)}
.demo:hover .dopen svg{stroke:#05020c}
.dscreen{position:relative;height:176px;padding:16px 17px;overflow:hidden;
background:radial-gradient(130% 110% at 100% 0%,rgba(var(--acc),.16),transparent 64%),
radial-gradient(90% 80% at 0% 100%,rgba(var(--acc2),.09),transparent 62%),#06030d}
.dscreen::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,rgba(var(--acc),.06),rgba(var(--acc),.4),rgba(var(--acc),.06))}
.dtag{position:absolute;right:11px;top:11px;z-index:4;font-family:var(--mono);font-size:8px;
letter-spacing:1.4px;text-transform:uppercase;color:rgb(var(--acc));
background:rgba(3,1,8,.8);border-radius:100px;padding:5px 10px;
box-shadow:0 0 0 1px rgba(var(--acc),.34) inset}
.dbody{padding:19px 18px 20px;display:flex;flex-direction:column;flex:1;min-width:0}
.dbody h3{font-size:19.5px;line-height:1.2}
.dhost{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;color:var(--faint);margin-top:8px;
overflow-wrap:anywhere}
.dbody > p{color:var(--dim);font-size:14.5px;margin-top:13px}
.dstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:17px}
.dstats u{text-decoration:none;border-radius:5px;padding:10px;background:rgba(160,107,255,.055);
box-shadow:0 0 0 1px rgba(160,107,255,.13) inset;min-width:0}
.dstats s{display:block;text-decoration:none;font-family:var(--mono);font-size:15px;color:var(--ink);
font-weight:500;line-height:1.05}
.dstats em{display:block;font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:1.1px;
text-transform:uppercase;color:var(--faint);margin-top:7px;line-height:1.4}
.dproof{margin-top:16px;padding-top:15px;border-top:1px solid rgba(160,107,255,.12);
font-size:14px;color:#cfc3e2}
.dproof b{color:var(--violet);font-weight:400;font-family:var(--mono);font-size:9px;
letter-spacing:1.7px;text-transform:uppercase;display:block;margin-bottom:8px}
.dlink{margin-top:auto;padding-top:17px;display:inline-flex;align-items:center;gap:8px;
color:var(--violet);font-size:14px;min-height:34px;align-self:flex-start}
.dlink b{font-weight:400;transition:transform .3s var(--ease);display:inline-block}
.demo:hover .dlink b{transform:translateX(4px)}
@media(max-width:840px){.demos{grid-template-columns:minmax(0,1fr)}.dscreen{height:164px}}
/* viz · re-ranking leaderboard (media battle) */
.vlb{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px}
.vlb .fr{position:relative;height:11px;margin-bottom:2px}
.vlb .fr span{position:absolute;left:0;top:0;font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;
text-transform:uppercase;color:rgb(var(--acc2));opacity:0;animation:fcyc 9s steps(1,end) infinite}
.vlb .fr span:nth-child(2){animation-delay:3s}
.vlb .fr span:nth-child(3){animation-delay:6s}
@keyframes fcyc{0%,32%{opacity:1}33.4%,100%{opacity:0}}
.vlb .r{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.vlb .r i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.8px;color:var(--dim);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlb .r u{text-decoration:none;display:block;height:9px;border-radius:2px;width:40%;
background:linear-gradient(90deg,rgb(var(--acc)),rgba(var(--acc),.3))}
/* rows are the 2nd–5th divs; the front label is the 1st */
.vlb .r:nth-of-type(2) u{animation:lbA 9s var(--ease) infinite} /* Lovin */
.vlb .r:nth-of-type(3) u{animation:lbB 9s var(--ease) infinite} /* Times */
.vlb .r:nth-of-type(4) u{animation:lbC 9s var(--ease) infinite} /* Daily */
.vlb .r:nth-of-type(5) u{animation:lbD 9s var(--ease) infinite} /* FreeHour */
@keyframes lbA{0%,28%{width:100%}36%,61%{width:86%}69%,94%{width:19%}100%{width:100%}}
@keyframes lbB{0%,28%{width:50%}36%,61%{width:45%}69%,94%{width:100%}100%{width:50%}}
@keyframes lbC{0%,28%{width:63%}36%,61%{width:53%}69%,94%{width:55%}100%{width:63%}}
@keyframes lbD{0%,28%{width:17%}36%,61%{width:100%}69%,94%{width:80%}100%{width:17%}}
.vlb .ft{font-family:var(--mono);font-size:8px;letter-spacing:1.3px;text-transform:uppercase;
color:var(--faint);margin-top:4px}
/* viz · efficiency quadrant (football) */
.vq{position:relative;height:100%}
.vq .plane{position:absolute;left:30px;right:8px;top:20px;bottom:22px;
box-shadow:inset 1px -1px 0 rgba(var(--acc),.2)}
.vq .plane::before,.vq .plane::after{content:'';position:absolute;background:rgba(var(--acc),.08)}
.vq .plane::before{left:0;right:0;top:50%;height:1px}
.vq .plane::after{top:0;bottom:0;left:50%;width:1px}
.vq .d{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(var(--acc),.55);
transform:translate(-50%,50%);opacity:0;animation:dpop .55s var(--ease) forwards}
.vq .d.hi{width:11px;height:11px;background:rgb(var(--acc2));
animation:dpop .55s var(--ease) forwards,dpulse 2.8s var(--ease) infinite 1.2s}
@keyframes dpop{to{opacity:1}}
@keyframes dpulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc2),.34)}55%{box-shadow:0 0 0 9px rgba(var(--acc2),0)}}
.vq .hl{position:absolute;font-family:var(--mono);font-size:8.5px;letter-spacing:1.1px;color:rgb(var(--acc2));
white-space:nowrap;opacity:0;animation:dpop .6s var(--ease) .9s forwards}
.vq .ay,.vq .ax{position:absolute;font-family:var(--mono);font-size:7.5px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--faint)}
.vq .ay{left:0;top:16px;width:26px;line-height:1.3}
.vq .ax{left:30px;bottom:2px}
/* viz · century timeline (elections) */
.vc{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px}
.vc .lbl2{font-family:var(--mono);font-size:8px;letter-spacing:1.4px;text-transform:uppercase;
color:var(--faint)}
.vcrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vcturn{font-family:var(--mono);font-size:12px;color:rgb(var(--acc));font-weight:500}
/* seat share, the shape every election night carries */
.share{display:flex;height:26px;flex:none;border-radius:5px;overflow:hidden;
box-shadow:0 0 0 1px rgba(var(--acc),.2) inset}
.share i{display:flex;align-items:center;justify-content:center;min-width:0;
transform-origin:left;animation:shgrow 1.6s var(--ease) both}
.share em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;
color:#fff;white-space:nowrap;overflow:hidden}
.share .pl{background:linear-gradient(90deg,rgba(var(--acc2),.85),rgba(var(--acc2),.55))}
.share .pn{background:linear-gradient(90deg,rgba(var(--acc),.85),rgba(var(--acc),.55));
animation-delay:.12s}
.share .ot{background:rgba(255,255,255,.14);animation-delay:.24s}
@keyframes shgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 13 districts across 3 bands: the district grid, not a generic bar row */
.grid13{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;flex:none}
.grid13 i{height:24px;border-radius:2px;background:rgba(var(--acc),.34);
animation:cellin 3.4s var(--ease) infinite}
.grid13 i.b{background:rgba(var(--acc2),.46)}
.grid13 i:nth-child(3n){animation-delay:.25s}
.grid13 i:nth-child(3n+1){animation-delay:.5s}
@keyframes cellin{0%,100%{opacity:.45}50%{opacity:1}}
/* viz · industry rebuild (ecosystem demo) */
.vi{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px}
.vi .chips{display:flex;gap:5px;flex-wrap:wrap;padding-right:98px}
.vi .chips b{font-family:var(--mono);font-size:8px;letter-spacing:1.2px;text-transform:uppercase;
color:var(--faint);padding:6px 9px;border-radius:100px;background:rgba(var(--acc),.05);
box-shadow:0 0 0 1px rgba(var(--acc),.13) inset;font-weight:400;
animation:chipc 12s steps(1,end) infinite}
.vi .chips b:nth-child(2){animation-delay:3s}
.vi .chips b:nth-child(3){animation-delay:6s}
.vi .chips b:nth-child(4){animation-delay:9s}
@keyframes chipc{0%,24%{color:var(--ink);background:rgba(var(--acc),.16);
box-shadow:0 0 0 1px rgba(var(--acc),.4) inset}
25%,100%{color:var(--faint);background:rgba(var(--acc),.05);
box-shadow:0 0 0 1px rgba(var(--acc),.13) inset}}
/* the operating picture itself: four metrics that change with the industry */
.kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.kpi4 u{text-decoration:none;border-radius:5px;padding:8px 8px 9px;min-width:0;
background:rgba(var(--acc),.06);box-shadow:0 0 0 1px rgba(var(--acc),.14) inset;
animation:kpiin 12s var(--ease) infinite}
.kpi4 u:nth-child(2){animation-delay:.1s}
.kpi4 u:nth-child(3){animation-delay:.2s}
.kpi4 u:nth-child(4){animation-delay:.3s}
@keyframes kpiin{0%,20%{opacity:1}24%{opacity:.25}28%,100%{opacity:1}}
.kpi4 em{display:block;font-style:normal;font-family:var(--mono);font-size:7px;
letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi4 s{display:block;text-decoration:none;font-family:var(--mono);font-size:13px;
color:var(--ink);margin-top:5px;line-height:1}
.vitrend{position:relative;border-radius:5px;padding:7px 9px 5px;
background:rgba(var(--acc),.04);box-shadow:0 0 0 1px rgba(var(--acc),.1) inset}
.vitrend svg{width:100%;height:26px;display:block;overflow:visible}
.vitrend path{fill:none;stroke:rgb(var(--acc));stroke-width:1.5;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;
animation:draw 5s var(--ease) infinite}
.vitrend span{display:block;margin-top:4px;font-family:var(--mono);font-size:7.5px;
letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
/* viz · money story + gates (projects ecosystem) · 9 Sep 2026 */
.vp,.vs{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px}
.vp .lbl2,.vs .lbl2{font-family:var(--mono);font-size:8px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vprow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vpturn{font-family:var(--mono);font-size:12px;color:rgb(var(--acc));font-weight:500;white-space:nowrap}
.vpturn em{font-style:normal;font-size:8.5px;color:var(--faint);letter-spacing:.6px;margin-left:4px}
.vpbar{display:flex;height:26px;flex:none;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--acc),.2) inset}
.vpbar i{display:flex;align-items:center;justify-content:center;min-width:0;transform-origin:left;animation:shgrow 1.6s var(--ease) both}
.vpbar i.paid{width:55.7%;background:linear-gradient(90deg,rgba(var(--acc),.9),rgba(var(--acc),.55))}
.vpbar i.open{width:44.3%;background:repeating-linear-gradient(135deg,rgba(var(--acc2),.34) 0 4px,rgba(var(--acc2),.14) 4px 8px);animation-delay:.14s}
.vpbar em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;color:#fff;white-space:nowrap;overflow:hidden}
.vpgates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.vpgates u{text-decoration:none;border-radius:5px;padding:7px 6px 8px;text-align:center;min-width:0;
background:rgba(var(--acc),.06);box-shadow:0 0 0 1px rgba(var(--acc),.16) inset;animation:cellin 3.4s var(--ease) infinite}
.vpgates u:nth-child(2n){animation-delay:.3s} .vpgates u:nth-child(3n){animation-delay:.6s}
.vpgates u.ret{box-shadow:0 0 0 1px rgba(var(--acc2),.5) inset;background:rgba(var(--acc2),.08)}
.vpgates em{display:block;font-style:normal;font-family:var(--mono);font-size:7px;letter-spacing:1.1px;color:var(--faint)}
.vpgates s{display:block;text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--ink);margin-top:3px;line-height:1}
.vpgates u.ret s{color:rgb(var(--acc2))}
/* viz · plan progress + status (strategy ecosystem) */
.vsprog{position:relative;height:9px;border-radius:3px;background:rgba(var(--acc),.12);box-shadow:0 0 0 1px rgba(var(--acc),.16) inset;flex:none}
.vsprog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,rgb(var(--acc)),rgba(var(--acc),.55));
transform-origin:left;animation:shgrow 1.6s var(--ease) both}
.vsprog u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#f5b544;box-shadow:0 0 6px rgba(245,181,68,.8)}
.vsstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.vsstat u{text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border-radius:5px;padding:8px 8px 9px;min-width:0;
background:rgba(var(--acc),.06);box-shadow:0 0 0 1px rgba(var(--acc),.14) inset}
.vsstat i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:dpulse 2.8s var(--ease) infinite}
.vsstat i.ok{background:#4ade80} .vsstat i.risk{background:#f5b544} .vsstat i.behind{background:rgb(var(--acc2))} .vsstat i.ns{background:rgba(255,255,255,.3);animation:none}
.vsstat u:nth-child(2) i{animation-delay:.4s} .vsstat u:nth-child(3) i{animation-delay:.8s}
.vsstat b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500;line-height:1}
.vsstat em{font-style:normal;font-family:var(--mono);font-size:7px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ── Automation page · 9 Sep 2026 ── */
[data-page="automation"] .phero h1{font-size:clamp(28px,3.5vw,44px)}
.calc{display:flex;flex-direction:column;gap:14px}
.calcrow label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--dim);margin-bottom:8px}
.calcrow label b{font-family:var(--mono);font-size:15px;color:var(--ink);font-weight:500;white-space:nowrap}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--violet) var(--pct,12%),rgba(160,107,255,.18) var(--pct,12%))}
.calc input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(160,107,255,.18)}
.calc input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--violet)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;margin-top:-7px;
box-shadow:0 0 0 4px rgba(160,107,255,.28),0 2px 8px rgba(0,0,0,.5)}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(160,107,255,.28),0 2px 8px rgba(0,0,0,.5)}
.calc input[type=range]:focus-visible{outline:none}
.calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(160,107,255,.6)}
.calcout{margin-top:4px;border-radius:8px;padding:18px 18px 16px;
background:linear-gradient(180deg,rgba(160,107,255,.12),rgba(160,107,255,.04));box-shadow:0 0 0 1px rgba(160,107,255,.22) inset}
.calcbig{display:flex;align-items:baseline;gap:12px}
.calcbig s{text-decoration:none;font-family:var(--disp);font-weight:600;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calcbig em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--violet)}
.calcsub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(160,107,255,.16)}
.calcsub b{display:block;font-family:var(--mono);font-size:17px;color:var(--ink);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.calcsub span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint);margin-top:6px;line-height:1.4}
.calcrate label{display:block;font-size:12.5px;color:var(--faint);margin-bottom:6px}
.calcratein{display:flex;align-items:center;gap:12px}
.calcratein input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);background:rgba(7,3,15,.6);border:0;border-radius:6px;padding:10px 12px;
box-shadow:0 0 0 1px rgba(160,107,255,.2) inset}
.calcratein input::placeholder{color:var(--faint)}
.calcratein input:focus-visible{outline:none;box-shadow:0 0 0 1px var(--violet) inset}
.calcratein b{font-family:var(--mono);font-size:16px;color:var(--pink);font-weight:500;white-space:nowrap}
.calcnote{font-size:12.5px;color:var(--faint);line-height:1.5}
@media(max-width:520px){.calcsub{grid-template-columns:1fr 1fr}}
.autolist > div{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 20px;align-items:start}
.autolist > div u{text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:2.2px;color:var(--violet);padding-top:5px;grid-row:1 / span 2}
.autolist > div span{margin-top:0;max-width:74ch}
.autolist b{font-size:19px}
.autodemos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:840px){.autodemos{grid-template-columns:1fr}}
.autodemo{--acc:160,107,255;display:flex;flex-direction:column;border-radius:10px;padding:24px 26px 22px;min-width:0;color:inherit;
background:linear-gradient(168deg,rgba(27,16,48,.8),rgba(11,5,20,.88));
box-shadow:0 0 0 1px rgba(var(--acc),.22) inset,0 26px 60px -46px #000;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.autodemo:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(var(--acc),.5) inset,0 34px 70px -42px #000,0 0 54px -30px rgba(var(--acc),.45)}
.adk{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:rgb(var(--acc));display:flex;gap:8px;align-items:center}
.adk b{font-weight:400;transition:transform .3s var(--ease);display:inline-block}
.autodemo:hover .adk b{transform:translateX(4px)}
.autodemo h3{font-size:clamp(19px,1.8vw,23px);line-height:1.2;margin-top:12px}
.autodemo ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.autodemo li{position:relative;padding-left:18px;color:var(--dim);font-size:15px;line-height:1.5}
.autodemo li::before{content:'';position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:rgb(var(--acc));box-shadow:0 0 8px rgba(var(--acc),.7)}
.adhost{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;color:var(--faint);overflow-wrap:anywhere}
/* ── v15 · ecosystem hero · scattered systems funnelling into one warehouse ── */
.archfig{margin:0;color:var(--dim)}
.archfig svg{width:100%;height:auto;display:block;overflow:visible}
.archfig figcaption{margin-top:16px;font-size:12.5px;color:var(--faint);line-height:1.55}
.archfig text{font-family:var(--mono);text-anchor:middle}
.vweb .lnk{fill:none;stroke:rgba(255,122,162,.14);stroke-width:1}
.vweb .fun{fill:none;stroke:rgba(160,107,255,.22);stroke-width:1}
.vweb .fun.p{stroke:rgba(160,107,255,.75);stroke-dasharray:16 340;
animation:webflow 4s linear infinite}
@keyframes webflow{from{stroke-dashoffset:356}to{stroke-dashoffset:0}}
.vweb .nd{fill:rgba(255,122,162,.65)}
.vweb .nd.big{fill:var(--pink)}
.vweb .wh{fill:url(#whFill2);stroke:rgba(160,107,255,.6);stroke-width:1.2}
.vweb .wht{font-family:var(--disp);font-weight:600;font-size:15px;fill:var(--ink)}
.vweb .whs{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;fill:var(--violet)}
.archfig .whc{font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;fill:var(--faint)}
@media(prefers-reduced-motion:reduce){
.vweb .fun.p{animation:none;stroke-dasharray:none;stroke:rgba(160,107,255,.4)}
}
/* this page's hero gives the visual the wider half */
.pherorow.diag{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media(max-width:940px){ .pherorow.diag{grid-template-columns:minmax(0,1fr)} }
/* ── three cards with a drawn glyph ── */
.sellcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
@media(max-width:860px){.sellcards{grid-template-columns:minmax(0,1fr)}}
.sc{border-radius:8px;padding:20px;min-width:0;
background:linear-gradient(180deg,rgba(27,16,48,.7),rgba(19,10,36,.42));
box-shadow:0 0 0 1px rgba(160,107,255,.12) inset;
transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.sc:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(160,107,255,.32) inset,0 22px 46px -34px #000}
/* v14 · each card draws its own argument rather than a generic chart shape */
.sc .g{height:104px;margin-bottom:18px;border-radius:8px;overflow:hidden;
background:radial-gradient(120% 100% at 100% 0%,rgba(160,107,255,.1),transparent 66%),
rgba(7,3,15,.42);
box-shadow:0 0 0 1px rgba(160,107,255,.1) inset}
.sc .g svg{width:100%;height:100%;display:block}
.sc .g text{font-family:var(--mono);font-size:7px;letter-spacing:.7px;
fill:var(--faint);text-anchor:middle}
.sc .g .hi{fill:var(--violet)}
.sc .g .pk{fill:var(--pink)}
.gbox{fill:rgba(160,107,255,.08);stroke:rgba(160,107,255,.24);stroke-width:1}
.gbox.on{fill:rgba(160,107,255,.2);stroke:rgba(160,107,255,.6)}
.gbox.off{fill:rgba(255,122,162,.05);stroke:rgba(255,122,162,.2)}
.gline{fill:none;stroke:rgba(160,107,255,.42);stroke-width:1;stroke-linecap:round}
.gline.dim{stroke:rgba(255,122,162,.26);stroke-dasharray:2.5 2.5}
.gbar{fill:rgba(160,107,255,.55)}
.gbar.a{fill:rgba(160,107,255,.28)}
.gdot{fill:var(--violet)}
.gdot.off{fill:rgba(255,122,162,.4)}
.gspark{fill:none;stroke:var(--pink);stroke-width:1.4;stroke-linejoin:round;
stroke-linecap:round;stroke-dasharray:150;stroke-dashoffset:150;
animation:gdraw 4.5s var(--ease) infinite}
@keyframes gdraw{0%{stroke-dashoffset:150}45%,100%{stroke-dashoffset:0}}
.gpulse{animation:gpul 3.2s var(--ease) infinite}
.gpulse:nth-of-type(2){animation-delay:.4s}
.gpulse:nth-of-type(3){animation-delay:.8s}
@keyframes gpul{0%,70%,100%{opacity:.35}82%{opacity:1}}
@media(prefers-reduced-motion:reduce){
.gspark{animation:none;stroke-dashoffset:0}
.gpulse{animation:none;opacity:1}
.ar-edge path:nth-child(6),.ar-edge path:nth-child(1){animation:none;stroke-dasharray:none}
}
.sc h3{font-size:17.5px}
.sc p{color:var(--dim);font-size:14.5px;margin-top:10px}
.sc ul{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:6px}
.sc li{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
color:var(--faint);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.sc li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--violet);
flex:none;margin-top:6px}
/* ── delivery tiers ── */
.tiers{display:grid;gap:8px;margin-top:6px}
.tier{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:14px;align-items:center;
border-radius:7px;padding:16px 18px;position:relative;overflow:hidden;
background:linear-gradient(90deg,rgba(160,107,255,.13),rgba(160,107,255,.03));
box-shadow:0 0 0 1px rgba(160,107,255,.15) inset}
.tier:nth-child(2){background:linear-gradient(90deg,rgba(160,107,255,.1),rgba(160,107,255,.025))}
.tier:nth-child(3){background:linear-gradient(90deg,rgba(255,122,162,.1),rgba(255,122,162,.02));
box-shadow:0 0 0 1px rgba(255,122,162,.2) inset}
.tier b{display:block;font-family:var(--disp);font-size:16px;color:var(--ink)}
.tier span{display:block;color:var(--dim);font-size:14.5px;margin-top:4px}
.tier em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--violet);white-space:nowrap;text-align:right;line-height:1.5}
.tier:nth-child(3) em{color:var(--pink)}
@media(max-width:560px){.tier{grid-template-columns:minmax(0,1fr)}.tier em{text-align:left}}
/* ── ecosystem layers, with a visual per layer ── */
.layer .lrow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:clamp(18px,3vw,40px);align-items:start}
@media(max-width:820px){.layer .lrow{grid-template-columns:minmax(0,1fr);gap:20px}}
.lv{border-radius:8px;padding:15px 16px;min-width:0;
background:linear-gradient(170deg,rgba(27,16,48,.72),rgba(11,5,20,.72));
box-shadow:0 0 0 1px rgba(160,107,255,.13) inset}
.lv .lvt{font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--faint);margin-bottom:13px}
/* 01 · one definition */
.lv .defs{display:grid;gap:5px}
.lv .defs u{text-decoration:none;display:flex;align-items:center;gap:9px;border-radius:4px;padding:8px 10px;
background:rgba(255,122,162,.06);box-shadow:0 0 0 1px rgba(255,122,162,.18) inset;
font-family:var(--mono);font-size:9px;letter-spacing:.6px;color:var(--dim);
animation:merge 5.4s var(--ease) infinite}
.lv .defs u:nth-child(2){animation-delay:.18s}
.lv .defs u:nth-child(3){animation-delay:.36s}
@keyframes merge{0%,42%{opacity:1;transform:none}62%,86%{opacity:.15;transform:translateY(8px) scale(.96)}
100%{opacity:1;transform:none}}
.lv .one{margin-top:9px;border-radius:4px;padding:10px;text-align:center;
background:rgba(160,107,255,.1);box-shadow:0 0 0 1px rgba(160,107,255,.32) inset;
font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink);
opacity:.2;animation:onein 5.4s var(--ease) infinite}
@keyframes onein{0%,48%{opacity:.2}66%,88%{opacity:1}100%{opacity:.2}}
/* 02 · sources into a warehouse */
.lv .flow{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,.85fr);gap:8px;align-items:center}
.lv .src{display:grid;gap:4px}
.lv .src i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--dim);
padding:5px 7px;border-radius:3px;background:rgba(160,107,255,.06);
box-shadow:0 0 0 1px rgba(160,107,255,.12) inset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
animation:pipe 3.6s var(--ease) infinite}
.lv .src i:nth-child(2){animation-delay:.3s} .lv .src i:nth-child(3){animation-delay:.6s}
.lv .src i:nth-child(4){animation-delay:.9s} .lv .src i:nth-child(5){animation-delay:1.2s}
@keyframes pipe{0%,72%,100%{box-shadow:0 0 0 1px rgba(160,107,255,.12) inset}
82%{box-shadow:0 0 0 1px rgba(160,107,255,.5) inset}}
.lv .arrow{position:relative;height:2px;background:rgba(160,107,255,.16);border-radius:2px;overflow:hidden}
.lv .arrow::after{content:'';position:absolute;inset:0;width:40%;border-radius:2px;background:var(--violet);
animation:shuttle 2.2s var(--ease) infinite}
@keyframes shuttle{0%{transform:translateX(-110%)}70%,100%{transform:translateX(260%)}}
.lv .whs{border-radius:5px;padding:14px 10px;text-align:center;
background:rgba(160,107,255,.09);box-shadow:0 0 0 1px rgba(160,107,255,.3) inset;
font-family:var(--mono);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
.lv .whs em{display:block;font-style:normal;color:var(--violet);margin-top:5px;font-size:7.5px}
/* 03 · tiered access */
.lv .tiered{display:grid;gap:5px}
.lv .tiered u{text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:10px;
align-items:center;border-radius:4px;padding:9px 10px;background:rgba(160,107,255,.055);
box-shadow:0 0 0 1px rgba(160,107,255,.12) inset}
.lv .tiered b{font-family:var(--mono);font-size:9px;letter-spacing:1.1px;color:var(--ink);font-weight:400}
.lv .tiered s{text-decoration:none;display:flex;gap:3px}
.lv .tiered s i{width:5px;height:5px;border-radius:50%;background:rgba(160,107,255,.22)}
.lv .tiered s i.on{background:var(--violet)}
/* 04 · ask */
.lv .ask{border-radius:5px;padding:10px 12px;background:rgba(7,3,15,.5);
box-shadow:0 0 0 1px rgba(160,107,255,.16) inset;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.lv .ask .q{color:var(--ink)}
.lv .ask .cur{display:inline-block;width:6px;height:11px;background:var(--violet);
vertical-align:-1px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.lv .ans{margin-top:8px;border-radius:5px;padding:11px 12px;background:rgba(160,107,255,.08);
box-shadow:0 0 0 1px rgba(160,107,255,.26) inset}
.lv .ans s{text-decoration:none;display:block;font-family:var(--mono);font-size:17px;color:var(--ink)}
.lv .ans em{display:block;font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:1.2px;
text-transform:uppercase;color:var(--violet);margin-top:6px}
/* ── monday morning panel ── */
/* v13 · clock as a header bar, rows filling the panel underneath */
.monday{border-radius:10px;padding:clamp(18px,2.6vw,28px);margin-top:8px;
background:linear-gradient(150deg,rgba(61,21,95,.42),rgba(19,10,36,.6));
box-shadow:0 0 0 1px rgba(160,107,255,.17) inset}
.mhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 16px;
padding-bottom:clamp(14px,2vh,20px);border-bottom:1px solid rgba(160,107,255,.16)}
.mhead b{font-family:var(--mono);font-size:clamp(30px,4vw,44px);color:var(--ink);font-weight:500;
letter-spacing:-.02em;line-height:1}
.mhead em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:2.4px;
text-transform:uppercase;color:var(--violet)}
.mhead u{text-decoration:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--faint)}
.mhead u::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--violet);
box-shadow:0 0 10px rgba(160,107,255,.9);animation:lpulse 2.6s var(--ease) infinite}
.monday .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px;
margin-top:clamp(6px,1.4vh,12px)}
.monday .rows div{display:grid;gap:7px;align-content:start;padding:16px 0;
border-bottom:1px solid rgba(160,107,255,.1)}
.monday .rows div:nth-last-child(-n+2){border-bottom:0;padding-bottom:2px}
.monday .rows b{font-family:var(--mono);font-size:9px;letter-spacing:1.6px;color:var(--violet);
font-weight:400}
.monday .rows span{color:var(--dim);font-size:15px}
@media(max-width:700px){
.monday .rows{grid-template-columns:minmax(0,1fr)}
.monday .rows div:nth-last-child(-n+2){border-bottom:1px solid rgba(160,107,255,.1);padding-bottom:16px}
.monday .rows div:last-child{border-bottom:0;padding-bottom:2px}
.mhead u{margin-left:0;width:100%}
}
/* ── founder story rail ── */
.story{display:grid;gap:0;margin-top:8px;position:relative}
.story .ev{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:20px;position:relative;
padding:0 0 26px 0}
.story .ev:last-child{padding-bottom:0}
.story .ev .mk{position:relative;width:96px;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--violet);padding-top:3px}
.story .ev::before{content:'';position:absolute;left:107px;top:12px;bottom:-4px;width:1px;
background:linear-gradient(180deg,rgba(160,107,255,.4),rgba(160,107,255,.08))}
.story .ev:last-child::before{display:none}
.story .ev::after{content:'';position:absolute;left:104px;top:7px;width:7px;height:7px;border-radius:50%;
background:var(--violet);box-shadow:0 0 0 4px rgba(160,107,255,.12)}
.story .ev .tx{padding-left:22px}
.story .ev .tx b{display:block;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink)}
.story .ev .tx span{display:block;color:var(--dim);font-size:15px;margin-top:6px}
@media(max-width:620px){
.story .ev{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:22px}
.story .ev .mk{width:auto;padding-top:0}
.story .ev::before{left:3px;top:16px}
.story .ev::after{left:0;top:4px}
.story .ev .tx{padding-left:0}
}
/* v14 · the founder quote gets its own band and the full column width */
.quoteband{position:relative;overflow:hidden}
.quoteband::after{content:'';position:absolute;left:50%;top:-40%;width:70%;aspect-ratio:1;
transform:translateX(-50%);pointer-events:none;
background:radial-gradient(closest-side,rgba(160,107,255,.16),transparent 70%)}
/* max-width in px, not ch: ch here resolves against the figure's body font,
not the blockquote's display font, and collapses the band to a column */
.bigquote{margin:0 auto;position:relative;max-width:920px;text-align:center}
.bigquote blockquote{margin:0;font-family:var(--disp);font-weight:600;
font-size:clamp(21px,2.7vw,33px);line-height:1.24;letter-spacing:-.015em;
background:linear-gradient(180deg,#ffffff,#d4c8ea);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-wrap:balance}
.bigquote figcaption{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:6px 14px;margin-top:clamp(24px,3.5vh,36px)}
.qpic{width:46px;height:46px;border-radius:50%;flex:none;background-image:var(--glen);
background-size:cover;background-position:50% 22%;
box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(160,107,255,.6),0 0 26px -6px rgba(160,107,255,.55)}
.bigquote figcaption b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
.bigquote figcaption em{font-style:normal;font-family:var(--mono);font-size:9.5px;
letter-spacing:1.8px;text-transform:uppercase;color:var(--violet)}
@media(max-width:620px){ .bigquote blockquote{font-size:21px} }
/* ── team cards ── */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}
@media(max-width:1000px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.team{grid-template-columns:minmax(0,1fr)}}
.tc{position:relative;border-radius:9px;padding:20px 18px 18px;min-width:0;display:flex;flex-direction:column;
background:linear-gradient(178deg,rgba(27,16,48,.72),rgba(11,5,20,.7));
box-shadow:0 0 0 1px rgba(160,107,255,.13) inset;
transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tc:hover{transform:translateY(-3px);
box-shadow:0 0 0 1px rgba(160,107,255,.34) inset,0 26px 52px -38px #000}
.tc.tmpl{background:rgba(255,122,162,.035);box-shadow:0 0 0 1px rgba(255,122,162,.22) inset}
.tc.tmpl:hover{box-shadow:0 0 0 1px rgba(255,122,162,.4) inset,0 26px 52px -38px #000}
.tc .av{width:64px;height:64px;border-radius:50%;position:relative;overflow:hidden;flex:none;
background:linear-gradient(150deg,rgba(160,107,255,.3),rgba(61,21,95,.5));
box-shadow:0 0 0 1px rgba(160,107,255,.32),0 0 0 5px rgba(160,107,255,.07);
display:flex;align-items:flex-end;justify-content:center}
.tc.tmpl .av{background:linear-gradient(150deg,rgba(255,122,162,.22),rgba(61,21,95,.4));
box-shadow:0 0 0 1px rgba(255,122,162,.3),0 0 0 5px rgba(255,122,162,.06)}
.tc .av svg{width:44px;height:44px;display:block;fill:rgba(242,236,250,.42)}
.tc.tmpl .av svg{fill:rgba(255,217,228,.4)}
.tc .av b{align-self:center;font-family:var(--mono);font-size:19px;font-weight:500;
letter-spacing:1.5px;color:rgba(242,236,250,.85)}
.tc .nm{margin-top:16px;font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--ink);
letter-spacing:-.01em}
.tc.tmpl .nm{color:var(--faint);font-weight:500}
.tc .rl{font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--violet);margin-top:7px}
.tc.tmpl .rl{color:var(--pink)}
.tc .li{margin-top:14px;padding-top:13px;border-top:1px solid rgba(160,107,255,.12);
color:var(--dim);font-size:14px;line-height:1.5}
.tc.tmpl .li{border-top-color:rgba(255,122,162,.16)}
.tc .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:15px}
.tc .tags span{font-family:var(--mono);font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase;
color:var(--faint);padding:5px 8px;border-radius:100px;background:rgba(160,107,255,.07);
box-shadow:0 0 0 1px rgba(160,107,255,.14) inset}
.tc .flag{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:7.5px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--pink);background:rgba(7,3,15,.7);border-radius:100px;padding:4px 9px;
box-shadow:0 0 0 1px rgba(255,122,162,.3) inset}
.tc .flag.ok{color:var(--violet);box-shadow:0 0 0 1px rgba(160,107,255,.3) inset}
@media(prefers-reduced-motion:reduce){
.vlb .r u,.vq .d,.vq .hl,.vc .tl,.vc .ticks i,.vi .chips b,.vi .stk div::after,
.lv .defs u,.lv .one,.lv .src i,.lv .arrow::after,.lv .ask .cur{animation:none!important}
.vlb .fr span{animation:none!important;opacity:0}
.vlb .fr span:first-child{opacity:1}
.vq .d,.vq .hl{opacity:1}
.vc .tl{stroke-dashoffset:0}
.lv .one{opacity:1}
}
/* ══════════════ v17 · alignment ══════════════
Pages keep the two-column rhythm by default. A section that reads badly
that way (heavy panel right, empty gutter left) opts into a centred
column with .pblock.mid instead of the whole page being centred. */
.pblock.mid{display:block;max-width:940px;margin-inline:auto}
.pblock.mid .pk h2{position:static;text-align:center;
margin:0 auto clamp(20px,3vh,28px);max-width:24ch}
.pblock.mid .pbody > p{max-width:74ch;margin-inline:auto}
/* the Monday panel: lighter intro, centred, panel at the column width */
.mondayintro{font-size:15.5px;color:var(--dim);max-width:68ch;margin:0 auto 26px;
text-align:center}
.monday{max-width:880px;margin-inline:auto}
/* ── page CTA panel ── */
.pcta{padding:clamp(46px,6.5vh,80px) 0 clamp(62px,9vh,110px);position:relative;text-align:left}
.pcta::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.ctapanel{position:relative;overflow:hidden;border-radius:12px;
padding:clamp(20px,3.4vw,46px);
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,3.6vw,54px);align-items:center;
background:linear-gradient(150deg,rgba(61,21,95,.55),rgba(19,10,36,.75) 52%,rgba(11,5,20,.85));
box-shadow:0 0 0 1px rgba(160,107,255,.22) inset,0 40px 90px -50px #000}
.ctapanel::before{content:'';position:absolute;right:-14%;top:-60%;width:60%;aspect-ratio:1;pointer-events:none;
background:radial-gradient(closest-side,rgba(160,107,255,.3),transparent 70%)}
.ctapanel > *{position:relative}
.ctawho{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ctapic{width:46px;height:46px;border-radius:50%;flex:none;background-image:var(--glen);
background-size:cover;background-position:50% 22%;
box-shadow:0 0 0 1px rgba(160,107,255,.4),0 0 0 5px rgba(160,107,255,.09)}
.ctawho b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--ink)}
.ctawho em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
letter-spacing:1.7px;text-transform:uppercase;color:var(--violet);margin-top:3px}
.ctapanel h2{font-size:clamp(25px,3.2vw,40px);line-height:1.08;max-width:17ch}
.ctapanel > div > p{color:#cfc3e2;font-size:16px;margin-top:14px;max-width:46ch}
.ctapanel .cta{margin-top:26px}
.ctameta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px}
.ctameta span{font-family:var(--mono);font-size:10px;letter-spacing:1.7px;text-transform:uppercase;
color:var(--faint);display:flex;align-items:center;gap:8px}
.ctameta span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--violet);flex:none}
.ctapoints{display:grid;gap:2px}
.ctapoints div{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px;align-items:start;
padding:15px 17px;border-radius:6px;background:rgba(7,3,15,.4);
box-shadow:0 0 0 1px rgba(160,107,255,.12) inset}
.ctapoints b{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--violet);padding-top:2px}
.ctapoints span{font-size:14.5px;color:var(--dim);line-height:1.5}
@media(max-width:900px){
.ctapanel{grid-template-columns:minmax(0,1fr);gap:28px}
.ctapanel h2{max-width:20ch}
}
/* ── small phones ── */
@media(max-width:400px){
.nav{gap:10px;padding:11px var(--gut)}
.navright{gap:2px}
.brand img{height:20px}
header .cta{font-size:12px;padding:9px 11px}
.burger{width:40px;height:40px}
.pvis{padding:13px}
.vred .kpis{grid-template-columns:1fr;gap:6px}
.vred .kpis u{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vred .kpis em{margin-bottom:0}
.ctapoints div{padding:13px 14px;gap:11px}
.ctapanel .cta.lg{width:100%;justify-content:center;font-size:15px;padding:16px 14px}
.ctameta{gap:6px 14px}
.ctameta span{font-size:9px;letter-spacing:1.3px}
}
/* ── generic section ── */
section{position:relative}
.band{padding:clamp(60px,8.5vh,104px) 0;position:relative}
.band::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.shead{margin-bottom:30px}
.shead .n{font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
color:var(--violet);display:flex;align-items:center;gap:12px;margin-bottom:13px}
.shead .n::after{content:'';flex:1;height:1px;max-width:320px;
background:linear-gradient(90deg,var(--line),transparent)}
.shead h2{max-width:24ch}
h2{font-size:clamp(25px,3.1vw,38px);line-height:1.12}
h3{font-size:19px;font-weight:600}
.sub{color:var(--dim);max-width:62ch;margin-top:14px}
/* reveals */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
/* ── journey ── */
#journey{height:640vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
/* v12 · the stage is a container, not the whole viewport. It scales with the
window up to --stage, then stops, so an ultrawide does not stretch it. */
:root{--stage:1300px}
#jc{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
width:min(100%,var(--stage));height:100%;display:block}
.jui{position:relative;z-index:2;height:100%;display:grid;
grid-template-columns:minmax(290px,34%) 1fr;
max-width:var(--stage);margin:0 auto;
padding:clamp(80px,11vh,112px) var(--gut) clamp(30px,5vh,54px);pointer-events:none}
/* beyond the container, fade the ground and mark the edges so the
containment reads as deliberate rather than as a crop */
@media(min-width:1400px){
#jc{box-shadow:1px 0 0 rgba(160,107,255,.1) inset,-1px 0 0 rgba(160,107,255,.1) inset}
.sticky::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(7,3,15,.55),rgba(7,3,15,0) calc(50% - var(--stage)/2)),
linear-gradient(270deg,rgba(7,3,15,.55),rgba(7,3,15,0) calc(50% - var(--stage)/2))}
}
@media(min-width:1900px){ :root{--stage:1420px} }
.jcol{display:flex;flex-direction:column;justify-content:center;gap:26px;padding-right:36px}
.jstage{font-family:var(--mono);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
color:var(--violet)}
.jtitle{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.5vw,42px);
line-height:1.08;margin-top:12px;min-height:2.2em}
.jbody{color:var(--dim);font-size:clamp(14.5px,1.15vw,17px);max-width:42ch;margin-top:12px;min-height:4.4em}
.jtitle span,.jbody span{display:block;transition:opacity .4s var(--ease),transform .4s var(--ease)}
/* step rail · always visible, so you always know where you are */
.rail{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);padding-left:0}
.rail i{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10px;
letter-spacing:1.7px;text-transform:uppercase;color:var(--faint);font-style:normal;
padding:7px 0 7px 14px;position:relative;transition:color .35s var(--ease)}
.rail i::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;
background:var(--violet);transform:scaleY(0);transform-origin:top;
transition:transform .35s var(--ease)}
.rail i.done{color:var(--dim)}
.rail i.on{color:var(--ink)}
.rail i.on::before,.rail i.done::before{transform:scaleY(1)}
.rail i b{font-weight:400;color:var(--violet);opacity:.55}
.rail i.on b{opacity:1}
.jhint{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
color:var(--faint);display:flex;align-items:center;gap:10px}
.jhint em{font-style:normal;width:17px;height:25px;border:1px solid var(--line2);
border-radius:9px;position:relative;display:block;flex:none}
.jhint em::after{content:'';position:absolute;left:50%;top:5px;width:2px;height:5px;
background:var(--violet);transform:translateX(-50%);animation:sc 1.8s infinite}
@keyframes sc{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
@media(max-width:920px){
#journey{height:600vh}
.jui{grid-template-columns:1fr;padding-top:clamp(66px,9vh,88px);align-content:start}
.jcol{justify-content:flex-start;padding-right:0;gap:16px}
.jtitle{font-size:clamp(24px,7vw,34px);min-height:2.2em;margin-top:9px}
.jbody{min-height:5.2em;font-size:14.5px;margin-top:9px;max-width:none}
.rail{flex-direction:row;border-left:0;border-top:1px solid var(--line);gap:0}
.rail i{flex:1;padding:9px 0 0;justify-content:center;font-size:8.5px;letter-spacing:1px;gap:5px}
.rail i::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:2px;
transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.rail i.on::before,.rail i.done::before{transform:scaleX(1)}
.rail i span{display:none}
.jhint{display:none}
}
/* ── quotes ── */
.quotes{display:flex;flex-direction:column;max-width:920px;margin-top:6px}
.quotes p{font-size:clamp(16px,1.85vw,22px);font-family:var(--disp);font-weight:500;color:var(--ink);
padding:17px 0;border-bottom:1px solid var(--line);transition:color .3s,padding-left .35s var(--ease);
position:relative}
.quotes p::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;
background:var(--violet);transition:width .35s var(--ease)}
.quotes p:hover{color:var(--violet);padding-left:22px}
.quotes p:hover::before{width:14px}
/* ── mechanism ── */
.mech{position:relative;margin-top:42px}
.mechline{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line);border-radius:2px}
.mechline i{position:absolute;inset:0;background:linear-gradient(90deg,var(--pink),var(--violet));
transform:scaleX(0);transform-origin:left;display:block;border-radius:2px}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step .dot{width:16px;height:16px;border-radius:50%;background:var(--bg);
border:2px solid var(--line2);margin-bottom:18px;transition:border-color .4s,box-shadow .4s}
.step.on .dot{border-color:var(--violet);box-shadow:0 0 0 5px rgba(160,107,255,.16)}
.step .k{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--violet);margin-bottom:9px}
.step p{color:var(--dim);font-size:14.5px}
@media(max-width:900px){
.steps{grid-template-columns:1fr;gap:28px}
.mechline{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
.mechline i{background:linear-gradient(180deg,var(--pink),var(--violet));
transform:scaleY(0);transform-origin:top}
.step{padding-left:34px;position:relative}
.step .dot{position:absolute;left:-1px;top:2px;margin:0}
}
/* ── before / after ── */
.ba{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:32px;max-width:100%;
aspect-ratio:2.1/1;min-height:420px;user-select:none;cursor:ew-resize;background:var(--panel);
touch-action:pan-y}
.ba .side{position:absolute;inset:0;padding:clamp(20px,2.8vw,36px);display:flex;
flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.ba .before{background:linear-gradient(170deg,#150a1f,#0d0616);z-index:1}
.ba .after{background:linear-gradient(170deg,#1b1030,#0f0722);clip-path:inset(0 0 0 50%);
align-items:flex-end;text-align:right;z-index:2}
.ba .side::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;
pointer-events:none}
.ba .before::after{background:linear-gradient(to top,#0d0616 12%,rgba(13,6,22,.86) 42%,rgba(13,6,22,0))}
.ba .after::after{background:linear-gradient(to top,#0f0722 12%,rgba(15,7,34,.86) 42%,rgba(15,7,34,0))}
.ba .cap{position:relative;z-index:3}
.ba .cap .t{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;
text-transform:uppercase;margin-bottom:9px}
.ba .before .t{color:var(--pink)} .ba .after .t{color:var(--violet)}
.ba .cap p{max-width:32ch;color:var(--dim);font-size:14.5px}
.ba .after .cap p{color:#cfc3e2;margin-left:auto}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--violet);z-index:5}
.ba .handle b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:40px;height:40px;border-radius:50%;background:var(--violet);color:#0b0518;
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
box-shadow:0 6px 22px rgba(160,107,255,.45)}
.ba .hint{position:absolute;top:13px;right:13px;font-family:var(--mono);font-size:9px;
letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);z-index:6;
background:rgba(7,3,15,.75);border:1px solid var(--line);border-radius:3px;padding:5px 10px}
/* the messy "before" pile */
.pile{position:absolute;inset:0;z-index:0;pointer-events:none}
.sheet{position:absolute;border:1px solid rgba(255,122,162,.3);background:rgba(255,122,162,.045);
border-radius:3px;padding:6px;display:flex;flex-direction:column;gap:4px}
.sheet::before{content:'';height:5px;border-radius:2px;background:rgba(255,122,162,.4)}
.sheet i{height:3px;border-radius:2px;background:rgba(255,122,162,.17);display:block}
.sheet i:nth-child(3){width:72%} .sheet i:nth-child(4){width:88%} .sheet i:nth-child(5){width:56%}
/* the clean "after" panel */
/* the "after" is one full dashboard filling the panel, so dragging reveals it */
.clean{position:absolute;inset:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 122px;
border:1px solid rgba(160,107,255,.3);border-radius:8px;
background:linear-gradient(168deg,rgba(27,16,48,.95),rgba(11,4,23,.95));
z-index:0;pointer-events:none;overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.clean .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
border-bottom:1px solid rgba(160,107,255,.14)}
.clean .bar i{width:7px;height:7px;border-radius:50%;background:rgba(160,107,255,.35);display:block}
.clean .bar em{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--violet);font-style:normal}
.clean .in{flex:1;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto 1fr;
gap:10px;padding:13px;min-height:0}
.clean .kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.clean .kpis u{text-decoration:none;border:1px solid rgba(160,107,255,.18);border-radius:5px;
padding:9px 10px;display:block;background:rgba(160,107,255,.05)}
.clean .kpis u b{display:block;font-family:var(--mono);font-size:8px;letter-spacing:1.3px;
color:var(--faint);font-weight:400;margin-bottom:6px;white-space:nowrap}
.clean .kpis u s{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);
text-decoration:none;font-weight:500}
.clean .kpis u em{display:block;font-family:var(--mono);font-size:8.5px;font-style:normal;
color:var(--violet);margin-top:3px}
.clean .kpis u em.dn{color:var(--pink)}
.clean .chart{position:relative;display:flex;align-items:flex-end;gap:5px;min-height:0;
border:1px solid rgba(160,107,255,.14);border-radius:5px;padding:26px 10px 10px}
.clean .chart i{flex:1;background:rgba(160,107,255,.3);border-radius:2px 2px 0 0;display:block}
.clean .chart svg{position:absolute;inset:26px 10px 10px;width:calc(100% - 20px);height:calc(100% - 36px)}
.clean .chart span{position:absolute;left:11px;top:9px;font-family:var(--mono);font-size:8.5px;
letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
.clean .rows{display:flex;flex-direction:column;gap:8px;min-height:0;
border:1px solid rgba(160,107,255,.14);border-radius:5px;padding:12px 11px 10px}
.clean .rows > span{font-family:var(--mono);font-size:8.5px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--faint);margin-bottom:1px}
.clean .rows u{display:flex;align-items:center;gap:8px;text-decoration:none}
.clean .rows u b{font-family:var(--mono);font-size:8.5px;color:var(--dim);font-weight:400;
width:54px;flex:none;white-space:nowrap}
.clean .rows u i{height:7px;border-radius:4px;background:rgba(160,107,255,.34);display:block}
@media(max-width:760px){
.ba{aspect-ratio:0.92/1;min-height:420px}
.ba .cap p{font-size:12.5px;max-width:19ch}
.ba .hint{display:none}
.ba .side::after{height:172px}
.clean{inset:14px 14px 152px}
.clean .in{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:8px;padding:9px}
.clean .rows{display:none}
.clean .kpis{grid-template-columns:repeat(2,1fr);gap:6px}
.clean .kpis u{padding:6px 7px}
.clean .kpis u s{font-size:12px}
}
/* ── cards ── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:8px;padding:24px;
background:linear-gradient(170deg,var(--panel),#0c0518);position:relative;overflow:hidden;
transition:border-color .35s,transform .35s var(--ease)}
.card::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--violet),transparent);transform:scaleX(0);
transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{border-color:var(--line2);transform:translateY(-3px)}
.card:hover::after{transform:scaleX(1)}
.card .k{font-family:var(--mono);font-size:11px;color:var(--violet);margin-bottom:14px;
display:flex;align-items:center;gap:10px}
.cico{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
border:1px solid var(--line2);background:rgba(160,107,255,.09)}
.cico svg{width:18px;height:18px;stroke:var(--violet);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:9px}
.card p{color:var(--dim);font-size:14.5px}
@media(max-width:1000px){.cards,.cards.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards,.cards.three{grid-template-columns:1fr}}
/* ── ecosystem ── */
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.ecocard{border:1px solid var(--line);border-radius:8px;overflow:hidden;
background:linear-gradient(170deg,var(--panel),#0b0417);display:flex;flex-direction:column}
.ecotop{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.ecotop i{width:8px;height:8px;border-radius:50%;background:#2a1a45;display:block}
.ecotop span{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--violet)}
.ecocard canvas{width:100%;height:170px;display:block;flex:none}
.ecobody{padding:18px}
.ecobody h3{margin-bottom:8px}
.ecobody p{color:var(--dim);font-size:14px}
.ecofoot{margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-radius:8px;
background:rgba(61,21,95,.16);color:var(--dim);font-size:14.5px}
.ecofoot b{color:var(--ink);font-weight:600}
@media(max-width:920px){.eco{grid-template-columns:1fr}}
/* ── accordion ── */
.acc{border-top:1px solid var(--line);margin-top:30px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.65vw,19px);color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
color:var(--violet);font-family:var(--mono);font-size:19px;transition:transform .3s var(--ease)}
details[open] summary::after{content:'−';transform:translateY(-50%) rotate(180deg)}
details p{color:var(--dim);padding:0 0 22px;max-width:72ch;font-size:15px}
summary:hover{color:var(--violet)}
/* ── offer ── */
.offer{background:
radial-gradient(120% 130% at 12% 0%,rgba(61,21,95,.5),transparent 62%),
linear-gradient(180deg,#0c0519,#07030f)}
.offerrow{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center}
.offer h2{font-size:clamp(30px,3.9vw,50px)}
.glenrow{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.glenpic{width:66px;height:66px;border-radius:50%;overflow:hidden;flex:none;
border:1px solid var(--line2);box-shadow:0 0 0 5px rgba(160,107,255,.12)}
.glenpic img{width:100%;height:100%;object-fit:cover;display:block}
.glenwho{display:flex;flex-direction:column;gap:2px}
.glenwho b{font-family:var(--disp);font-weight:600;font-size:17px}
.glenwho span{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;
text-transform:uppercase;color:var(--violet)}
.prom{display:flex;flex-direction:column;gap:0}
.prom div{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:15px}
.prom div:first-child{border-top:1px solid var(--line)}
.prom b{font-family:var(--mono);font-size:11px;color:var(--violet);font-weight:400;padding-top:4px;flex:none}
@media(max-width:920px){.offerrow{grid-template-columns:1fr;gap:30px}}
/* ── guarantee ── */
.guar{margin-top:30px;border:1px solid var(--line2);border-radius:8px;padding:24px 26px;
background:linear-gradient(140deg,rgba(160,107,255,.12),rgba(61,21,95,.06))}
.guar .k{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
color:var(--violet);margin-bottom:11px}
.guar p{font-size:15.5px;color:#d8cee8;max-width:68ch}
/* ── footer ── */
footer{border-top:1px solid var(--line);padding:52px 0 34px}
.frow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
color:var(--faint);font-weight:400;margin-bottom:15px}
footer nav a{display:block;color:var(--dim);font-size:14px;padding:10px 0;transition:color .25s}
footer nav a:hover{color:var(--violet)}
.fbrand img{height:24px;width:auto;display:block;margin-bottom:14px}
.fbrand p{color:var(--dim);font-size:14px;max-width:34ch}
.faddr{font-style:normal;color:var(--dim);font-size:14px;line-height:2}
.fbase{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:12.5px;color:var(--faint)}
@media(max-width:820px){.frow{grid-template-columns:1fr 1fr;gap:28px}.fbrand{grid-column:1/-1}}
.protonote{position:fixed;right:12px;bottom:12px;z-index:90;font-family:var(--mono);font-size:9.5px;
letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);background:rgba(7,3,15,.9);
border:1px solid var(--line);border-radius:4px;padding:7px 11px}
@media(max-width:620px){.protonote{left:12px;right:12px;text-align:center}}
/* ══════════════ v11 · design sweep ══════════════
Same sections, same copy. Depth, light, edges and motion only. */
/* ambient ground: two soft fields and a film grain, fixed behind everything */
body{position:relative}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(55% 45% at 88% -8%,rgba(160,107,255,.14),transparent 62%),
radial-gradient(45% 40% at -8% 108%,rgba(255,122,162,.075),transparent 62%),
radial-gradient(70% 60% at 50% 45%,rgba(61,21,95,.16),transparent 72%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px}
/* hero grid: a faint dashboard grid that fades out under the copy */
.hero::before,.phero::before{content:'';position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(160,107,255,.11) 1px,transparent 1px),
linear-gradient(90deg,rgba(160,107,255,.11) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(80% 95% at 64% 30%,#000 8%,transparent 74%);
mask-image:radial-gradient(80% 95% at 64% 30%,#000 8%,transparent 74%)}
.hero .herorow,.phero .wrap{position:relative;z-index:1}
.heroglow{background:radial-gradient(closest-side,rgba(61,21,95,.62),transparent 70%)}
/* display type: a light-from-above gradient on every heading */
h1,h2{background:linear-gradient(180deg,#ffffff 0%,#f4eefc 50%,#d4c8ea 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1 em{background:linear-gradient(180deg,#ffbdd0 0%,var(--pink) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navlinks a.cur,.mobmenu a.cur{color:var(--violet)}
/* section dividers: brighter through the centre */
.band::before,.pcta::before,.phero::after{
background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line2) 50%,var(--line) 86%,transparent)}
/* the button: inner light, rest glow, sheen on hover */
.cta{position:relative;overflow:hidden;border-radius:6px;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.06) inset,
0 10px 26px -14px rgba(160,107,255,.7)}
.cta:hover{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.08) inset,
0 16px 34px -12px rgba(160,107,255,.6)}
.cta::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-45%;width:38%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
transform:skewX(-18deg);opacity:0}
.cta:hover::after{opacity:1;animation:sheen .85s var(--ease) 1 forwards}
@keyframes sheen{to{left:115%}}
/* header: hairline progress under the nav */
header .prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
background:linear-gradient(90deg,var(--violet),var(--pink));transform-origin:left;
transform:scaleX(var(--p,0));opacity:0;transition:opacity .3s}
header.stuck .prog{opacity:.9}
/* reveals: a touch of focus as they arrive */
.rv{filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.rv.in{filter:none}
/* surfaces: a consistent radius scale and a lit top edge */
.usp,.pvis,.demo,.monday{border-radius:14px}
.card,.ecocard,.ecofoot,.guar,.sc,.tc,.lv,.pull{border-radius:12px}
.ctapanel{border-radius:16px}
.ba{border-radius:14px}
.tier,.plc,.csx{border-radius:10px}
.deflist > div{border-radius:8px}
.deflist > div + div{margin-top:4px}
.pvis{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(160,107,255,.16) inset,
0 34px 80px -46px #000,0 0 70px -30px rgba(160,107,255,.38)}
.usp{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 30px 80px -30px rgba(61,21,95,.9)}
.demo{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.15) inset,0 26px 60px -46px #000}
.demo:hover{box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(160,107,255,.36) inset,
0 34px 70px -42px #000,0 0 54px -30px rgba(160,107,255,.45)}
.sc{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.12) inset}
.sc:hover{box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(160,107,255,.32) inset,0 22px 46px -34px #000}
.tc{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.13) inset}
.tc:hover{box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(160,107,255,.34) inset,0 26px 52px -38px #000}
.tc.tmpl{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 0 0 1px rgba(255,122,162,.22) inset}
.tc.tmpl:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(255,122,162,.4) inset,0 26px 52px -38px #000}
.lv{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.13) inset}
.monday{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(160,107,255,.17) inset,0 30px 70px -50px #000}
.pull{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(160,107,255,.18) inset}
.tier{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.15) inset}
.tier:nth-child(3){box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(255,122,162,.2) inset}
.ctapanel{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(160,107,255,.24) inset,0 40px 90px -50px #000}
.card,.ecocard{border-color:rgba(160,107,255,.14);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -44px #000;
transition:border-color .35s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover,.ecocard:hover{border-color:rgba(160,107,255,.32);transform:translateY(-3px);
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -40px #000,0 0 50px -30px rgba(160,107,255,.4)}
.cico{box-shadow:0 0 0 1px rgba(160,107,255,.22) inset,0 0 20px -6px rgba(160,107,255,.55)}
.guar{border-color:rgba(160,107,255,.3);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 60px -30px rgba(160,107,255,.35)}
.deflist > div{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 0 0 1px rgba(160,107,255,.1) inset,
0 8px 22px -18px rgba(0,0,0,.9);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.deflist > div:hover{transform:translateX(3px);
box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(160,107,255,.24) inset,0 8px 22px -18px rgba(0,0,0,.9)}
.ba{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(160,107,255,.16),0 40px 90px -50px #000}
.ba .handle b::after{content:'';position:absolute;inset:-7px;border-radius:50%;
border:1px solid rgba(160,107,255,.6);animation:hpulse 2.4s var(--ease) infinite}
@keyframes hpulse{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.7);opacity:0}}
details summary{transition:color .3s,padding-left .3s var(--ease)}
details summary:hover{padding-left:6px}
/* a cursor spotlight on cards, hover devices only */
@media(hover:hover){
.spot{position:relative;isolation:isolate}
.spot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(160,107,255,.14),transparent 62%);
opacity:0;transition:opacity .45s var(--ease)}
.spot:hover::before{opacity:1}
}
/* people: a lit ring on the photograph */
.glenpic{border-color:transparent;
box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(160,107,255,.6),0 0 28px -6px rgba(160,107,255,.55)}
.ctapic{box-shadow:0 0 0 2px rgba(7,3,15,.8),0 0 0 3px rgba(160,107,255,.6),0 0 24px -6px rgba(160,107,255,.5)}
/* home offer band: the same soft field as the panels */
.offer{position:relative;overflow:hidden}
.offer::before{content:'';position:absolute;right:-12%;top:-50%;width:60%;aspect-ratio:1;pointer-events:none;
background:radial-gradient(closest-side,rgba(160,107,255,.22),transparent 70%)}
.offer > *{position:relative}
/* footer: legal line and a soft ground */
footer{position:relative;
background:radial-gradient(60% 90% at 50% 100%,rgba(61,21,95,.32),transparent 72%)}
.fbase{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center}
.flegal{display:flex;flex-wrap:wrap;gap:2px 22px}
.flegal a{color:var(--dim);font-size:13px;display:inline-flex;align-items:center;min-height:36px;
padding:4px 0;transition:color .25s}
.flegal a:hover{color:var(--violet)}
.fcopy,.fproto{text-align:right;white-space:nowrap}
@media(max-width:620px){
.fbase{grid-template-columns:minmax(0,1fr)}
.fcopy,.fproto{text-align:left;white-space:normal}
}
/* ══════════════ v12 · legal pages ══════════════ */
.legal{max-width:84ch;margin:0 auto;padding:clamp(28px,4.5vh,50px) 0 clamp(50px,8vh,90px)}
.legal h2{font-size:clamp(19px,2.1vw,25px);margin:clamp(34px,4.5vh,52px) 0 15px;scroll-margin-top:110px}
.legal > h2:first-child{margin-top:0}
.legal h3{font-size:16.5px;margin:26px 0 10px;color:var(--ink);font-family:var(--disp);font-weight:600}
.legal p{color:var(--dim);font-size:16px;margin:0 0 14px}
.legal ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px}
.legal li{color:var(--dim);font-size:15.5px;padding-left:20px;position:relative}
.legal li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
background:var(--violet)}
.legal a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:rgba(160,107,255,.42);text-decoration-thickness:1px}
.legal a:hover{text-decoration-color:var(--violet)}
.legal strong{color:var(--ink);font-weight:600}
.lmeta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.lmeta span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--dim);padding:8px 13px;border-radius:100px;background:rgba(160,107,255,.08);
box-shadow:0 0 0 1px rgba(160,107,255,.18) inset}
.ltoc{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 clamp(20px,3vh,32px);
border-bottom:1px solid var(--line);margin-bottom:clamp(24px,4vh,40px)}
.ltoc button{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
color:var(--dim);background:rgba(160,107,255,.05);border:0;cursor:pointer;
padding:9px 12px;border-radius:100px;min-height:36px;
box-shadow:0 0 0 1px rgba(160,107,255,.14) inset;transition:color .25s,box-shadow .25s}
.ltoc button:hover{color:var(--ink);box-shadow:0 0 0 1px rgba(160,107,255,.4) inset}
.ltable{width:100%;overflow-x:auto;margin:0 0 18px;border-radius:10px;
box-shadow:0 0 0 1px rgba(160,107,255,.14) inset}
.ltable table{width:100%;border-collapse:collapse;min-width:500px}
.ltable th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--violet);font-weight:400;padding:13px 16px;
background:rgba(160,107,255,.075)}
.ltable td{padding:13px 16px;color:var(--dim);font-size:14.5px;vertical-align:top;
border-top:1px solid rgba(160,107,255,.1)}
.ltable td:first-child{color:var(--ink)}
.ltable tr:hover td{background:rgba(160,107,255,.03)}
/* v9 - on a phone a three column legal table cannot be read sideways, so each row
becomes a small stacked block and every value carries its own column label. */
@media(max-width:619px){
.ltable{overflow-x:visible;border-radius:12px}
.ltable table{display:block;min-width:0}
.ltable thead{display:none}
.ltable tbody,.ltable tr,.ltable td{display:block;width:auto}
.ltable tr{padding:13px 15px;border-top:1px solid rgba(160,107,255,.1)}
.ltable tbody tr:first-child{border-top:0}
.ltable tr:hover td{background:transparent}
.ltable td{border:0;padding:0 0 9px;font-size:14px;line-height:1.5}
.ltable td:last-child{padding-bottom:0}
.ltable td:first-child{color:var(--ink);font-weight:500;margin-bottom:2px}
.ltable td[data-l]::before{content:attr(data-l);display:block;font:400 8.5px var(--mono);
letter-spacing:1.6px;text-transform:uppercase;color:var(--violet);margin-bottom:3px}
}
.lnote{border-radius:10px;padding:18px 20px;margin:0 0 18px;
background:rgba(160,107,255,.055);box-shadow:0 0 0 1px rgba(160,107,255,.16) inset}
.lnote p:last-child{margin-bottom:0}
.laddr{font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--dim)}
.laddr b{color:var(--ink);font-weight:400}
.lend{margin-top:clamp(34px,5vh,54px);padding-top:24px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.lend a{font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px}
/* cookie settings button + panel */
.ckbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:14.5px;
color:#fff;background:linear-gradient(135deg,rgba(160,107,255,.9),rgba(124,63,224,.9));
border:0;cursor:pointer;padding:12px 18px;border-radius:6px;margin:4px 0 18px;min-height:44px;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 26px -16px rgba(160,107,255,.8);
transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ckbtn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 14px 30px -14px rgba(160,107,255,.7)}
.ckbtn svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.ckwrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
padding:16px;background:rgba(4,1,10,.6);backdrop-filter:blur(4px)}
.ckwrap[hidden]{display:none!important}
.ckbox{width:100%;max-width:560px;border-radius:14px;padding:clamp(20px,3vw,28px);
background:linear-gradient(165deg,#1a1030,#0b0518);
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(160,107,255,.26) inset,0 40px 90px -40px #000;
max-height:calc(100vh - 32px);overflow-y:auto}
.ckbox h3{font-size:19px;margin-bottom:8px}
.ckbox > p{color:var(--dim);font-size:14.5px;margin-bottom:18px}
.ckrow{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:14px;align-items:center;
padding:14px 0;border-top:1px solid rgba(160,107,255,.12)}
.ckrow b{display:block;font-family:var(--disp);font-size:15px;color:var(--ink)}
.ckrow span{display:block;color:var(--dim);font-size:13.5px;margin-top:4px}
.cksw{width:44px;height:25px;border-radius:100px;border:0;cursor:pointer;position:relative;flex:none;
background:rgba(160,107,255,.16);box-shadow:0 0 0 1px rgba(160,107,255,.24) inset;
transition:background .28s var(--ease),box-shadow .28s var(--ease)}
.cksw::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
background:var(--dim);transition:transform .28s var(--ease),background .28s var(--ease)}
.cksw[aria-checked="true"]{background:rgba(160,107,255,.55);box-shadow:0 0 0 1px rgba(160,107,255,.6) inset}
.cksw[aria-checked="true"]::after{transform:translateX(19px);background:#fff}
.cksw[disabled]{cursor:not-allowed;opacity:.75}
.ckacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;padding-top:18px;
border-top:1px solid rgba(160,107,255,.12)}
.ckacts button{flex:1 1 150px;min-height:44px;border-radius:6px;cursor:pointer;font-family:var(--body);
font-size:14.5px;font-weight:600;border:0;padding:12px 16px;
background:rgba(160,107,255,.1);color:var(--ink);
box-shadow:0 0 0 1px rgba(160,107,255,.26) inset;transition:box-shadow .25s,background .25s}
.ckacts button:hover{background:rgba(160,107,255,.18);box-shadow:0 0 0 1px rgba(160,107,255,.5) inset}
.ckacts .prim{background:linear-gradient(135deg,var(--violet),#7c3fe0);
box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -14px rgba(160,107,255,.8)}
.ckacts .prim:hover{background:linear-gradient(135deg,#ad7dff,#8a4bf0)}
.cknote{margin-top:14px;font-size:12.5px;color:var(--faint);line-height:1.6}
@media(min-width:640px){.ckwrap{align-items:center}}
/* scrollbar */
html{scrollbar-color:#2a1a45 var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a1a45;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3b2760}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important}
.rv{opacity:1;transform:none;filter:none}
.mtrack{animation:none}
.jhint em::after{animation:none}
.ba .handle b::after{animation:none;opacity:0}
.cta::after{display:none}
}
/* ══════════════ v4 · the rebuild (2026-09-06) ══════════════
Same copy, same structure, same honesty rules as v17. New type, new
surfaces, a floating pill nav, and the hero and journey fused into one
pinned scene (see the Convergence engine in the script). */
:root{
--disp:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
--body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
--r:24px; --r-sm:16px;
--glass:rgba(12,6,24,.55);
--edge:0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.12) inset;
}
body{font-family:var(--body);font-size:16.5px;line-height:1.55;letter-spacing:-.005em}
h1,h2,h3,h4{font-family:var(--disp);font-weight:500;letter-spacing:-.03em}
h2{font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em}
h3{font-size:clamp(19px,1.55vw,22px);font-weight:500;letter-spacing:-.02em}
.lede,.sub,p{letter-spacing:-.005em}
/* ── floating pill nav ── */
header,header.stuck{position:fixed;left:0;right:0;top:0;z-index:60;background:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;padding:14px 0 0}
.nav{max-width:1180px;width:calc(100% - 2*var(--gut));margin:0 auto;padding:7px 7px 7px 22px;
border-radius:999px;background:var(--glass);
backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
box-shadow:var(--edge),0 24px 60px -34px rgba(0,0,0,.9);transition:box-shadow .4s var(--ease),background .4s}
header.stuck .nav{background:rgba(10,5,20,.72);
box-shadow:var(--edge),0 24px 60px -30px rgba(0,0,0,.95),0 0 60px -30px rgba(160,107,255,.35)}
.navlinks{gap:6px}
.navlinks a{font-size:14.5px;padding:9px 14px;border-radius:999px;color:var(--dim);transition:color .25s,background .25s}
.navlinks a::after{display:none}
.navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.navlinks a.cur,.navlinks a.cur:hover{color:var(--ink);background:rgba(160,107,255,.16);box-shadow:0 0 0 1px rgba(160,107,255,.3) inset}
header .prog{top:0;bottom:auto;height:2px;left:0;right:0}
@media(max-width:960px){.nav{padding:6px 6px 6px 16px}}
@media(max-width:400px){.nav{width:calc(100% - 24px);padding:5px 5px 5px 14px}}
/* ── the button ── */
.cta{border-radius:999px;padding:12px 22px;font-weight:500;letter-spacing:-.01em;font-size:14.5px;
background:linear-gradient(135deg,#b58cff,#8a4dff 55%,#6d31e6)}
.cta.lg{padding:18px 30px;font-size:17px}
.cta:active{transform:scale(.97)}
.textlink{font-size:16px;color:var(--ink);opacity:.8}
.textlink:hover{opacity:1}
/* ── the Convergence: hero and journey ── */
#journey{height:780vh;position:relative}
#journey .sticky{position:sticky;top:0;height:100vh;overflow:hidden;
background:radial-gradient(60% 46% at 50% 22%,rgba(61,21,95,.55),transparent 70%)}
#journey .sticky::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:linear-gradient(rgba(160,107,255,.085) 1px,transparent 1px),
linear-gradient(90deg,rgba(160,107,255,.085) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(70% 70% at 50% 58%,#000 8%,transparent 72%);
mask-image:radial-gradient(70% 70% at 50% 58%,#000 8%,transparent 72%);background:none}
#journey .sticky::after{content:'';position:absolute;left:50%;top:-34vh;width:92vw;height:72vh;z-index:0;
transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(160,107,255,.2),transparent 70%);
filter:blur(30px)}
#journey .sticky::before{background-image:linear-gradient(rgba(160,107,255,.085) 1px,transparent 1px),
linear-gradient(90deg,rgba(160,107,255,.085) 1px,transparent 1px)}
#jc{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;display:block;transform:none;box-shadow:none;z-index:1}
.cvhero{position:absolute;left:0;right:0;top:0;z-index:2;padding:calc(84px + 3vh) var(--gut) 0;
display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform,opacity}
.cvhero .kicker{margin-bottom:22px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(160,107,255,.1);
box-shadow:0 0 0 1px rgba(160,107,255,.32) inset;font-size:10.5px;letter-spacing:2.2px}
.cvhero .kicker::before{width:6px;height:6px;border-radius:50%;background:var(--violet);
box-shadow:0 0 10px var(--violet)}
.cvhero h1{font-size:clamp(34px,4.3vw,62px);line-height:1.02;letter-spacing:-.04em;max-width:22ch;font-weight:500}
.cvhero h1 em{font-style:normal;background:linear-gradient(180deg,#ffbdd0 0%,var(--pink) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cvhero::before{content:'';position:absolute;left:50%;top:0;width:min(1100px,100vw);height:100%;z-index:-1;
transform:translateX(-50%);pointer-events:none;
background:radial-gradient(60% 70% at 50% 42%,rgba(7,3,15,.9),rgba(7,3,15,.55) 55%,transparent 80%)}
.cvhero .lede{max-width:58ch;font-size:clamp(15px,1.15vw,18px);margin-top:18px;color:var(--dim)}
.cvhero .heroacts{justify-content:center;margin-top:26px}
.jlist{display:none}
.guar .hold{display:inline-flex;margin-bottom:12px;padding:6px 12px;border-radius:999px;font-family:var(--mono);
font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--pink);background:rgba(255,122,162,.08);
box-shadow:0 0 0 1px rgba(255,122,162,.3) inset}
.textlink b{font-weight:400;transition:transform .3s var(--ease)}
.textlink:hover b{transform:translateY(3px)}
.jcard{position:absolute;left:50%;top:calc(84px + 2vh);transform:translateX(-50%);z-index:2;width:auto;max-width:calc(100% - 2*var(--gut));
display:flex;align-items:center;gap:16px;padding:9px 18px 9px 10px;border-radius:999px;background:var(--glass);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:var(--edge),0 20px 50px -30px #000;opacity:0;pointer-events:none;white-space:nowrap}
.jstage{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;
text-transform:uppercase;color:var(--violet)}
.jstage b{font-weight:500;padding:5px 9px;border-radius:999px;background:rgba(160,107,255,.14);
box-shadow:0 0 0 1px rgba(160,107,255,.35) inset}
.jtitle{font-family:var(--disp);font-weight:500;font-size:clamp(15px,1.25vw,18px);line-height:1.2;letter-spacing:-.02em;margin:0;min-height:0}
.jbody{display:none}
.jtitle span,.jbody span{display:block;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rail{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:2;
display:flex;flex-direction:column;gap:14px;border:0;padding:0}
.rail i{padding:0;gap:10px;justify-content:flex-end;font-size:10px;letter-spacing:1.8px;color:var(--faint);
transition:color .35s var(--ease)}
.rail i::before{display:none}
.rail i b{order:2;width:8px;height:8px;border-radius:50%;background:var(--line2);font-size:0;opacity:1;
transition:background .35s,box-shadow .35s,transform .35s var(--ease)}
.rail i.on b{background:var(--violet);box-shadow:0 0 0 4px rgba(160,107,255,.18),0 0 14px rgba(160,107,255,.6);transform:scale(1.15)}
.rail i.done b{background:rgba(160,107,255,.55)}
.rail i span{opacity:0;transform:translateX(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rail i.on span{opacity:1;transform:none;color:var(--ink)}
.jhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;white-space:nowrap}
@media(max-width:760px){
#journey{height:700vh}
.cvhero{padding-top:calc(86px + 2vh)}
.cvhero h1{font-size:clamp(28px,8.4vw,38px);letter-spacing:-.035em;max-width:14ch}
.cvhero .lede{font-size:15px;margin-top:16px;max-width:34ch}
.cvhero .heroacts{margin-top:22px;gap:12px}
.cvhero .cta.lg{padding:14px 22px;font-size:15px}
.jcard{top:auto;bottom:18px;left:50%;padding:8px 14px 8px 8px;max-width:calc(100% - 28px);white-space:normal;text-align:left}
.jtitle{font-size:14px}
/* v9 - the sticky stage can overshoot the top of the viewport, which put the step dots
behind the header. They sit at the foot of the stage instead, clear of the card. */
.rail{right:auto;left:50%;top:auto;bottom:26px;transform:translateX(-50%);flex-direction:row;gap:9px;border:0}
.rail i{padding:0;gap:0;justify-content:center}
.rail i span{display:none}
.rail i b{width:7px;height:7px}
.jhint{display:none}
}
@media(max-height:640px) and (min-width:761px){
.cvhero{padding-top:calc(70px + 2vh)}
.cvhero h1{font-size:clamp(34px,5vw,60px)}
.cvhero .lede{display:none}
}
/* ── sections: statements centred, generous air ── */
.band{padding:clamp(96px,14vh,176px) 0}
.band::before{display:none}
.shead{margin-bottom:clamp(36px,5vh,56px);display:flex;flex-direction:column;align-items:center;text-align:center}
.shead .n{padding:7px 14px;border-radius:999px;background:rgba(160,107,255,.1);
box-shadow:0 0 0 1px rgba(160,107,255,.3) inset;margin-bottom:24px;font-size:10.5px;letter-spacing:2.2px;gap:0}
.shead .n::after{display:none}
.shead h2{max-width:19ch}
.shead .sub{margin:20px auto 0;text-align:center;font-size:clamp(16px,1.25vw,19px);max-width:58ch}
.sub{font-size:17px}
.kicker{font-size:10.5px}
/* recognition */
.quotes{max-width:980px;margin:0 auto}
.quotes p{font-size:clamp(20px,2.5vw,36px);font-weight:400;font-family:var(--disp);letter-spacing:-.03em;
padding:24px 0;color:var(--dim);line-height:1.2}
.quotes p:hover{color:var(--ink)}
.quotes p::before{top:auto;bottom:-1px;height:1px}
.quotes + .sub{text-align:center;margin-left:auto;margin-right:auto;max-width:56ch}
/* mechanism */
.mech{margin-top:10px}
.steps{gap:36px}
.step .k{font-size:11px;margin-bottom:12px}
.step p{font-size:15.5px;line-height:1.55}
.step .dot{width:14px;height:14px;background:var(--panel)}
.step.on .dot{background:var(--violet)}
/* before and after */
.ba{border-radius:28px;aspect-ratio:2/1;min-height:460px;margin-top:8px}
.ba .handle b{width:46px;height:46px}
.clean{border-radius:18px}
.ba .cap .t{font-size:11px}
.ba .cap p{font-size:15px}
/* four steps */
.cards{margin-top:8px;gap:16px}
.card{border-radius:var(--r);padding:30px 28px 32px;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border-color:rgba(255,255,255,.07)}
.card .k{font-size:11px;letter-spacing:1.6px;margin-bottom:22px;color:var(--dim)}
.cico{width:42px;height:42px;border-radius:13px;background:linear-gradient(rgba(160,107,255,.13),rgba(160,107,255,.13)),var(--bg)}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px}
.cards + .sub{text-align:center;margin-left:auto;margin-right:auto}
/* ecosystem */
.eco{margin-top:8px;gap:16px}
.ecocard{border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
border-color:rgba(255,255,255,.07)}
.ecotop{padding:13px 18px}
.ecotop i{width:9px;height:9px;background:rgba(255,255,255,.12)}
.ecocard canvas{height:210px}
.ecobody{padding:22px 24px 26px}
.ecobody p{font-size:15px}
.ecofoot{border-radius:18px;margin-top:22px;text-align:center}
/* track record, objections, offer */
.guar{border-radius:22px;padding:28px 30px;margin-top:34px}
.guar p{font-size:17px}
#work .sub{text-align:center;margin-left:auto;margin-right:auto;max-width:66ch;font-size:clamp(17px,1.4vw,21px);color:#d8cee8}
.acc{max-width:880px;margin:24px auto 0}
summary{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;padding:24px 48px 24px 0}
details p{font-size:16px;max-width:66ch}
.offer{padding:clamp(110px,16vh,200px) 0}
.offer h2{font-size:clamp(40px,5.4vw,78px);letter-spacing:-.04em}
.offer .sub{font-size:18px;margin-top:20px}
.glenpic{width:74px;height:74px}
.glenwho b{font-size:18px;font-weight:500}
.prom div{padding:20px 0;font-size:16px}
.prom b{font-size:11px}
/* footer */
footer{padding:72px 0 40px}
.fbrand img{height:26px}
footer h4{font-size:10px}
.protonote{border-radius:999px;padding:8px 14px;background:rgba(10,5,20,.85);backdrop-filter:blur(12px)}
@media(max-width:760px){.protonote{display:none}}
/* ── inner pages ── */
.phero{padding-top:clamp(132px,18vh,196px)}
.phero h1{font-size:clamp(36px,5.2vw,74px);line-height:1;letter-spacing:-.04em;font-weight:500}
.phero .lede{font-size:clamp(16px,1.4vw,20px)}
.pblock .pk h2{font-size:clamp(24px,2.7vw,36px);letter-spacing:-.03em;top:110px}
.pvis,.demo,.monday{border-radius:28px}
.ctapanel{border-radius:32px}
.card,.ecocard,.ecofoot,.guar,.sc,.tc,.lv,.pull{border-radius:var(--r)}
.tier,.plc,.csx{border-radius:var(--r-sm)}
.deflist > div{border-radius:14px;padding:22px 24px}
.deflist b{font-weight:500;font-size:17px}
.pillrow span{border-radius:999px}
.legal{padding-top:0}
@media(max-width:900px){.pblock .pk h2{position:static}}
/* reveals: a touch more travel */
.rv{transform:translateY(28px)}
.rv.in{transform:none}
/* reduced motion: the scene renders complete, nothing waits */
/* reduced motion: no pin, no scrub. Headline, the completed scene, then all six stages in flow. */
@media (prefers-reduced-motion:reduce){
#journey{height:auto}
#journey .sticky{position:relative;height:auto;overflow:visible;padding-bottom:48px;display:flex;flex-direction:column}
.cvhero{position:relative;padding-bottom:12px;opacity:1;transform:none;order:0}
#jc{order:1}
.cvhero::before{display:none}
#jc{position:relative;height:72vh;min-height:520px}
.jcard,.rail,.jhint{display:none}
.jlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.jlist div{padding:22px 24px;border-radius:18px;background:var(--glass);box-shadow:var(--edge)}
.jlist b{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--violet);font-weight:500}
.jlist h3{margin-top:10px;font-size:20px}
.jlist p{color:var(--dim);font-size:15px;margin-top:8px}
.rv{opacity:1;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){ .jlist{grid-template-columns:1fr} }
/* ══════════════ v4b · every section carries one moving element that reports a state ══════════════ */
@property --ang{syntax:'';inherits:false;initial-value:0deg}
@keyframes spinang{to{--ang:360deg}}
/* a travelling light on the edge of the surfaces that matter */
.beam{position:relative}
.beam::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
background:conic-gradient(from var(--ang),transparent 0 62%,rgba(160,107,255,.9) 80%,rgba(255,122,162,.8) 86%,transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
animation:spinang 9s linear infinite}
.guar,.ctapanel{isolation:isolate}
/* glass tilt */
.tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease);transform-style:preserve-3d}
.card:hover,.ecocard:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
/* recognition: the reading light */
.quotes p{--lit:0;color:color-mix(in srgb,var(--ink) calc(var(--lit)*100%),var(--dim));padding-left:26px;
transition:color .2s,padding-left .35s var(--ease)}
.quotes p::before{top:50%;bottom:auto;height:2px;width:14px;border-radius:2px;background:var(--pink);
opacity:calc(var(--lit)*1);transform:scaleX(calc(.4 + var(--lit)*.6));transform-origin:left;transition:none;
box-shadow:0 0 14px rgba(255,122,162,calc(var(--lit)*.9))}
.quotes p:hover{padding-left:26px;color:var(--ink)}
.quotes p.lit{text-shadow:0 0 30px rgba(160,107,255,.25)}
/* mechanism: the beam head */
.mechline{overflow:visible}
@media(min-width:901px){.mechline{height:2px}}
.mechline i{background:linear-gradient(90deg,var(--pink),var(--violet));box-shadow:0 0 18px rgba(160,107,255,.5)}
.mechline i.mechhead{position:absolute;left:0;top:1px;width:14px;height:14px;border-radius:50%;background:#fff;pointer-events:none;inset:auto;
box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 22px 4px rgba(160,107,255,.85);opacity:0;transition:opacity .3s;transform-origin:center}
.step .dot{transition:border-color .4s,box-shadow .4s,background .4s}
.step.on .dot{box-shadow:0 0 0 5px rgba(160,107,255,.16),0 0 18px rgba(160,107,255,.6)}
.step .k{display:flex;align-items:center;gap:10px}
.step .k::before{content:attr(data-n);font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:1px}
@media(max-width:900px){.mechline i.mechhead{left:1px;top:0}}
/* how we work: the track and the watermark numerals */
.trackwrap{position:relative;margin-top:8px;padding-top:38px}
.track{position:absolute;left:12%;right:12%;top:16px;height:2px;background:var(--line);border-radius:2px;pointer-events:none;z-index:0}
.track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--pink));transform:scaleX(0);transform-origin:left;display:block;border-radius:2px;box-shadow:0 0 16px rgba(160,107,255,.5)}
.track b{position:absolute;left:0;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 18px 4px rgba(160,107,255,.8);transform:translate(-50%,-50%)}
.cards{position:relative;z-index:1}
.card{overflow:hidden}
/* v9 - the ghost numeral is a watermark, not a second label. It is pinned to the top
outer corner, dimmed, and faded away along the diagonal that runs towards the icon
and the title, so the foreground never has to fight it. */
.card::before{content:attr(data-n);position:absolute;inset:-14px 12px auto auto;
font-family:var(--disp);font-weight:500;font-size:104px;line-height:1;
letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(160,107,255,.12);
pointer-events:none;
-webkit-mask-image:linear-gradient(205deg,#000 6%,rgba(0,0,0,.3) 50%,transparent 80%);
mask-image:linear-gradient(205deg,#000 6%,rgba(0,0,0,.3) 50%,transparent 80%);
transition:-webkit-text-stroke-color .5s}
.card.on::before{-webkit-text-stroke-color:rgba(160,107,255,.24)}
@media(max-width:620px){.card::before{font-size:86px;inset:-10px 10px auto auto}}
/* the icon tile keeps an opaque ground, so the watermark cannot read through it */
.card.on .cico{background:linear-gradient(rgba(160,107,255,.24),rgba(160,107,255,.24)),var(--bg);
box-shadow:0 0 0 1px rgba(160,107,255,.5) inset,0 0 28px -4px rgba(160,107,255,.8)}
.cico svg path,.cico svg circle{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.1s var(--ease)}
.card.in .cico svg path,.card.in .cico svg circle{stroke-dashoffset:0}
.card .k{position:relative;z-index:1}
@media(max-width:620px){.trackwrap{padding-top:0}.track{left:50%;right:auto;top:0;bottom:0;height:auto;width:2px;transform:translateX(-50%)}
.track i{transform:scaleY(0);transform-origin:top;background:linear-gradient(180deg,var(--violet),var(--pink))}}
@media(max-width:1000px) and (min-width:621px){.track{display:none}}
/* before and after: the pile drifts, the clean side draws itself */
@keyframes drift{0%,100%{transform:translate(0,0) rotate(var(--rot,0deg))}50%{transform:translate(0,-6px) rotate(calc(var(--rot,0deg) + 1.2deg))}}
.sheet{animation:drift var(--ambient-b,11s) var(--ease) infinite;animation-delay:var(--d,0s)}
.clean .chart svg polyline{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.ba.live .clean .chart svg polyline{stroke-dashoffset:0}
.clean .chart i{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease)}
.ba.live .clean .chart i{transform:scaleY(1)}
.clean .rows u i{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .4s}
.ba.live .clean .rows u i{transform:scaleX(1)}
.ba .handle b{transition:transform .25s var(--ease)}
.ba:active .handle b{transform:translate(-50%,-50%) scale(.94)}
/* ecosystem cards: three windows on one warehouse. Hover a card and its riser lights the shared rail. */
.eco{position:relative;padding-bottom:70px}
.ecocard{position:relative;overflow:visible}
.ecocard .ecotop{border-radius:var(--r) var(--r) 0 0}
.ecocard canvas{border-radius:0}
.ecocard::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:70px;background:linear-gradient(180deg,rgba(160,107,255,.25),rgba(160,107,255,.6));
transform:translateX(-50%);opacity:.45;transition:opacity .35s,box-shadow .35s}
.ecocard:hover::after,.ecocard:focus-within::after{opacity:1;box-shadow:0 0 16px rgba(160,107,255,.8)}
.ecorail{position:absolute;left:8%;right:8%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(160,107,255,.55) 18%,rgba(160,107,255,.55) 82%,transparent);border-radius:2px}
.ecorail b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px;background:var(--bg);
font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--violet);font-weight:500;white-space:nowrap;
box-shadow:0 0 0 1px rgba(160,107,255,.45) inset,0 0 26px -6px rgba(160,107,255,.7)}
.eco:hover .ecorail{background:linear-gradient(90deg,transparent,rgba(160,107,255,.9) 18%,rgba(160,107,255,.9) 82%,transparent);box-shadow:0 0 18px rgba(160,107,255,.5)}
@media(max-width:920px){.eco{padding-bottom:0;gap:0}.ecocard{margin-bottom:34px}.ecocard::after{height:34px}
.ecorail{position:static;height:auto;background:none;margin-top:-8px;text-align:center}.ecorail b{position:static;transform:none;display:inline-block}}
/* objections: opening a row opens the seam, and a bracket spans the answer */
details p{opacity:0;transform:translateY(-6px);margin:4px 0 22px;padding:14px 18px;border-left:2px solid var(--violet);
background:rgba(255,255,255,.025);border-radius:0 12px 12px 0}
details[open] p{animation:accin .45s var(--ease) forwards}
details[open] summary{color:var(--ink)}
@keyframes accin{to{opacity:1;transform:none}}
summary::before{content:attr(data-n);font-family:var(--mono);font-size:10.5px;color:var(--violet);letter-spacing:1.5px;margin-right:16px}
summary::after{transition:transform .4s var(--ease),color .3s}
/* the offer: a light passes over the panel */
.offer::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-40%;width:30%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(160,107,255,.1),transparent);transform:skewX(-16deg)}
.offer.live::after{animation:offersweep 2.2s var(--ease) 1 forwards}
@keyframes offersweep{0%{left:-40%}100%{left:130%}}
.glenrow{gap:20px}
.glenpic{width:104px;height:104px;border-radius:50%;overflow:hidden;background:#0b0518}
.glenpic img{border-radius:50%;display:block;width:100%;height:100%;object-fit:cover}
.offer .prom{position:relative;padding-left:26px}
.offer .prom::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
.offer .prom::after{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;border-radius:2px;
background:linear-gradient(180deg,var(--violet),var(--pink));transform:scaleY(0);transform-origin:top;
box-shadow:0 0 14px rgba(160,107,255,.6);transition:transform 1.6s var(--ease) .2s}
.offer .prom.live::after{transform:scaleY(1)}
.offer .prom div{position:relative}
.offer .prom div::before{content:'';position:absolute;left:-23px;top:24px;width:8px;height:8px;border-radius:50%;background:var(--line2);
transition:background .4s,box-shadow .4s}
.offer .prom.live div:nth-child(1)::before{transition-delay:.5s}
.offer .prom.live div:nth-child(2)::before{transition-delay:1s}
.offer .prom.live div:nth-child(3)::before{transition-delay:1.5s}
.offer .prom.live div::before{background:var(--violet);box-shadow:0 0 12px rgba(160,107,255,.8)}
.offer .prom b{font-size:11px}
.offer .cta.lg{position:relative}
/* footer: the warehouse outline, oversized and still, behind the ownership line */
footer{overflow:hidden}
footer::before{content:'';position:absolute;right:-4vw;bottom:-10vw;width:46vw;height:40vw;pointer-events:none;
background:url("data:image/svg+xml;utf8,") no-repeat center/contain}
footer > .wrap{position:relative}
/* nav: reading progress lives inside the active route pill */
.navlinks a.cur{position:relative;overflow:hidden}
.navlinks a.cur::before{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--violet);
transform:scaleX(var(--p,0));transform-origin:left;opacity:.9}
/* page transitions */
::view-transition-old(root){animation:vtout .16s ease-out}
::view-transition-new(root){animation:vtin .34s var(--ease)}
@keyframes vtout{to{opacity:0}}
@keyframes vtin{from{opacity:0;transform:translateY(12px)}}
/* ── inner pages ── */
.pvis{border-radius:28px;padding:clamp(16px,1.6vw,22px)}
.pvis canvas.scene{display:block;width:100%;aspect-ratio:1.15/1;border-radius:18px;background:radial-gradient(70% 60% at 50% 40%,rgba(61,21,95,.35),transparent 70%)}
.pvis canvas.spectrum{aspect-ratio:1.05/1}
.archfig figcaption,.pvcap{font-size:12.5px;color:var(--faint);margin-top:12px;line-height:1.5}
.pherorow{align-items:center}
/* what we do: the three sell cards draw their diagrams when seen */
.sc .gline,.sc .gspark{animation:none;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.vred .spark path{animation-iteration-count:1;animation-fill-mode:forwards}
.vlb .r:nth-of-type(n) u,.vlb .fr,.vlb .fr span,.vlb .fr::before,.vlb .fr::after{animation-iteration-count:1!important;animation-fill-mode:forwards!important;animation-play-state:paused!important}
.demo.in .vlb .r:nth-of-type(n) u,.demo.in .vlb .fr,.demo.in .vlb .fr span,.demo.in .vlb .fr::before,.demo.in .vlb .fr::after{animation-play-state:running!important}
.red{animation:none}
.sc.in .gline,.sc.in .gspark{stroke-dashoffset:0}
.sc .gbox{transition:opacity .6s var(--ease)}
/* about: a beacon drops down the altitude line */
.valt .drop{position:relative}
.valt .drop i{position:relative;overflow:visible}
.valt .drop i::after{content:'';position:absolute;left:50%;top:0;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);
box-shadow:0 0 14px 3px rgba(255,122,162,.9);animation:beacon 3.2s var(--ease) infinite}
@keyframes beacon{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.valt .ar.you{box-shadow:0 0 0 1px rgba(255,122,162,.35) inset,0 0 40px -18px rgba(255,122,162,.6)}
/* founder rail: the marker lights as it passes */
.story .ev .mk{transition:color .4s,text-shadow .4s}
.story .ev.in .mk{color:var(--ink);text-shadow:0 0 18px rgba(160,107,255,.6)}
@media (prefers-reduced-motion:reduce){
.beam::after,.sheet,.offer::after,.valt .drop i::after,.pvis *::before,.pvis *::after{animation:none}
.valt .drop i::after{top:100%;opacity:1}
.mechline i.mechhead,.track b{display:none}
.mechline i#mechfill,.track i{transform:none}
.quotes p{color:var(--ink)}
.cico svg path,.cico svg circle,.sc .gline,.sc .gspark,.clean .chart svg polyline{stroke-dashoffset:0}
.clean .chart i,.clean .rows u i{transform:none}
details p{opacity:1;transform:none}
}
/* ══════════════ third pass · sections that explain themselves ══════════════ */
/* the stage strip on phones: two lines, full width */
@media(max-width:760px){
.jcard{display:block;border-radius:16px;padding:10px 14px;text-align:left;width:calc(100% - 28px);top:104px;bottom:auto}
.jstage{gap:10px}
.jtitle{margin-top:6px;font-size:14px;white-space:normal}
}
/* recognition: the unresolved management report beside the quotations */
.recog{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:start}
.report{position:sticky;top:110px;border-radius:22px;padding:20px 22px 22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
box-shadow:var(--edge),0 30px 70px -40px #000}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;
text-transform:uppercase;color:var(--faint);padding-bottom:12px;border-bottom:1px solid var(--line)}
.rhead b{color:var(--pink);font-weight:500}
.rgrid{display:grid;gap:10px;margin-top:14px}
.rz{position:relative;border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
transition:box-shadow .35s var(--ease),background .35s}
.rz em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin-top:8px}
.rz.lit{background:rgba(255,122,162,.07);box-shadow:0 0 0 1px rgba(255,122,162,.55) inset,0 0 30px -10px rgba(255,122,162,.6)}
.rz.lit em{color:var(--pink)}
.rz.lit::before,.rz.lit::after{content:'';position:absolute;width:12px;height:12px;border:1.5px solid var(--pink);pointer-events:none}
.rz.lit::before{left:-4px;top:-4px;border-right:0;border-bottom:0}
.rz.lit::after{right:-4px;bottom:-4px;border-left:0;border-top:0}
.rtabs{display:flex;gap:6px}
.rtabs i{flex:1;height:22px;border-radius:5px 5px 0 0;background:rgba(255,122,162,.12);box-shadow:0 0 0 1px rgba(255,122,162,.3) inset;display:block}
.rchart{display:block;height:64px;border:1px dashed rgba(255,255,255,.18);border-radius:6px;position:relative}
.rchart::after{content:'';position:absolute;left:12%;right:12%;bottom:30%;height:1px;background:rgba(255,255,255,.12)}
.rview{display:flex;align-items:center;gap:10px}
.rview i{width:38px;height:24px;border-radius:5px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;display:block;position:relative}
.rview i::after{content:'';position:absolute;left:6px;right:6px;top:11px;height:1px;background:rgba(255,255,255,.2)}
.rview i:nth-child(2){opacity:.5}.rview i:nth-child(3){opacity:.25}
.rhand{display:flex;align-items:center;gap:8px}
.rhand i{height:10px;border-radius:3px;background:rgba(255,122,162,.35);display:block;flex:1}
.rhand b{font-family:var(--mono);font-size:11px;color:var(--pink);font-weight:400}
.rfields{display:flex;gap:8px;flex-wrap:wrap}
.rfields i{font-style:normal;font-family:var(--mono);font-size:10px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;color:var(--dim)}
.rfields i.x{color:var(--pink);box-shadow:0 0 0 1px rgba(255,122,162,.4) inset}
.recog .quotes{margin:0;max-width:none}
.recog .quotes p{font-size:clamp(19px,2vw,28px);padding:20px 0 20px 26px}
@media(max-width:900px){.recog{grid-template-columns:1fr}.report{display:none}}
/* the mechanism: lid lift beside the four steps */
.mechwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:10px}
.mechscene{display:block;width:100%;aspect-ratio:1.05/1;border-radius:24px;background:radial-gradient(60% 50% at 50% 45%,rgba(61,21,95,.35),transparent 70%)}
.mechwrap .mech{margin-top:0}
.mechwrap .steps{grid-template-columns:1fr;gap:22px}
.mechwrap .mechline{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
.mechwrap .mechline i{background:linear-gradient(180deg,var(--pink),var(--violet));transform:scaleY(0);transform-origin:top}
.mechwrap .mechline i.mechhead{left:1px;top:0}
.mechwrap .step{padding-left:34px;position:relative}
.mechwrap .step .dot{position:absolute;left:-1px;top:2px;margin:0}
.mechwrap .step p{font-size:15px}
.mechwrap .step.on .k{color:var(--ink)}
@media(max-width:900px){.mechwrap{grid-template-columns:1fr}.mechscene{aspect-ratio:1.2/1}}
/* before: three named spreadsheets and the hand that copies between them */
.xls{position:absolute;width:44%;border-radius:8px;background:rgba(13,6,22,.92);box-shadow:0 0 0 1px rgba(255,122,162,.35) inset,0 20px 40px -24px #000;
overflow:hidden;transform:rotate(var(--rot,0deg));animation:drift var(--ambient-b,11s) var(--ease) infinite;animation-delay:var(--d,0s)}
.xbar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(255,122,162,.12);border-bottom:1px solid rgba(255,122,162,.25);
font-family:var(--mono);font-size:9.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbar i{width:7px;height:7px;border-radius:50%;background:rgba(255,122,162,.8);flex:none}
.xgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:8px 10px 6px;background:transparent}
.xgrid i{height:9px;background:rgba(255,255,255,.05);display:block}
.xgrid i.h{background:rgba(255,122,162,.35)}
.xgrid i.c{background:rgba(255,122,162,.6);box-shadow:0 0 8px rgba(255,122,162,.6)}
.xtot{display:flex;justify-content:space-between;padding:6px 10px 8px;font-family:var(--mono);font-size:9.5px;color:var(--pink);font-weight:400;letter-spacing:1px}
.xarrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.xarrows path{fill:none;stroke:rgba(255,122,162,.7);stroke-width:1.5;stroke-dasharray:5 6}
.ba.sweep .xarrows path{animation:march 3.2s linear 1 forwards}
@keyframes march{to{stroke-dashoffset:-88}}
.xstamp{position:absolute;left:8%;bottom:34%;padding:7px 12px;border-radius:6px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--pink);
border:1.5px solid rgba(255,122,162,.7);transform:rotate(-6deg);background:rgba(13,6,22,.6)}
.xtag{position:absolute;right:14px;top:14px;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);
padding:5px 9px;border-radius:999px;background:rgba(7,3,15,.75);box-shadow:0 0 0 1px var(--line) inset}
.ba .hint{top:auto;bottom:14px;right:auto;left:50%;transform:translateX(-50%)}
/* after: an instrument, not a mock */
.clean .in{grid-template-columns:1.3fr .9fr 1fr;grid-template-rows:auto 1fr auto;gap:10px}
.clean .kpis{grid-column:1/-1}
.clean .gauge{grid-column:2;grid-row:2;display:grid;place-items:center;border:1px solid rgba(160,107,255,.14);border-radius:8px;padding:8px}
@property --p{syntax:'';initial-value:0;inherits:false}
.ring{--p:0;position:relative;width:min(100%,104px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
background:conic-gradient(var(--violet) calc(var(--p)*1%),rgba(160,107,255,.12) 0);transition:--p 1.4s var(--ease) .3s}
.ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:#100722;box-shadow:0 0 0 1px rgba(160,107,255,.2) inset}
.ring b{position:relative;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink)}
.ring em{position:relative;display:block;font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:1.2px;color:var(--faint);text-align:center;margin-top:2px}
.clean .chart{grid-column:1;grid-row:2}
.clean .rows{grid-column:3;grid-row:2}
.clean .upd{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;
text-transform:uppercase;color:var(--faint);padding:2px 2px 0}
.clean .upd b{color:var(--violet);font-weight:400;display:inline-flex;align-items:center;gap:6px}
.clean .upd b::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.clean .rows u{position:relative}
.clean .rows::before{content:'';position:absolute;left:0;right:0;top:34px;height:16px;border-radius:4px;background:rgba(255,255,255,.06);opacity:0;pointer-events:none}
.ba.sweep .clean .rows::before{animation:sweeprows 1.6s var(--ease) .9s 1}
@keyframes sweeprows{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(96px)}}
.clean .rows{position:relative}
@media(max-width:760px){.clean .in{grid-template-columns:1fr;grid-template-rows:auto auto auto}.clean .gauge{display:none}.clean .chart{grid-column:1;grid-row:2}.xls{width:70%}.xstamp{display:none}
.ba .cap p{font-size:12.5px;max-width:17ch}.ba .after .cap p{max-width:16ch}.clean .upd{display:none}}
/* the ecosystem: the warehouse under load */
.eco{padding-bottom:0}
.ecocard::after{display:none}
.ecocore{position:relative;grid-column:1/-1;height:230px;margin-top:-6px}
.wcore{position:absolute;inset:0;width:100%;height:100%;display:block}
.ecocard.lit{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(160,107,255,.5) inset,0 30px 60px -40px #000,0 0 50px -20px rgba(160,107,255,.6)}
.ecocard.lit .ecotop span{color:var(--ink)}
.ecorail{display:none}
@media(max-width:920px){.ecocore{display:none}.ecocard{margin-bottom:16px}}
/* the dossier: experience, what you can open, the commitment */
.dossier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.leaf{position:relative;border-radius:var(--r);padding:26px 26px 28px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
box-shadow:var(--edge);opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dossier.live .leaf{opacity:1;transform:none}
.dossier.live .leaf:nth-child(2){transition-delay:.15s}.dossier.live .leaf:nth-child(3){transition-delay:.3s}
.leaf > b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--violet);font-weight:500;margin-bottom:14px}
.leaf p{color:var(--dim);font-size:15px}
.leaf .tiers{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:6px}
.leaf .tiers li{position:relative;padding:9px 12px 9px 30px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;font-size:14.5px;color:var(--ink)}
.leaf .tiers li::before{content:'';position:absolute;left:12px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--violet);transform:translateY(-50%);box-shadow:0 0 10px var(--violet)}
.leaf .tiers li:last-child::before{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.leaf.open{padding-left:26px}
.leaf .opens{display:grid;gap:4px;position:relative;padding-left:16px}
.leaf .opens::before{content:'';position:absolute;left:3px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.leaf .opens::after{content:'';position:absolute;left:3px;top:10px;bottom:10px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--violet),var(--pink));
transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease) .5s;box-shadow:0 0 12px rgba(160,107,255,.6)}
.dossier.live .leaf .opens::after{transform:scaleY(1)}
.leaf .opens a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;color:var(--ink);font-size:14.5px;
background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.leaf .opens a:hover{background:rgba(160,107,255,.1);box-shadow:0 0 0 1px rgba(160,107,255,.4) inset;transform:translateX(3px)}
.leaf .opens a span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--violet)}
.leaf .hold{display:inline-flex;margin-bottom:12px;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--pink);background:rgba(255,122,162,.08);box-shadow:0 0 0 1px rgba(255,122,162,.3) inset}
.leaf.risk{box-shadow:var(--edge),0 0 60px -30px rgba(160,107,255,.35)}
@media(max-width:900px){.dossier{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.xls,.xarrows path{animation:none}
.leaf{opacity:1;transform:none}
.leaf .opens::after{transform:scaleY(1)}
.ring{transition:none}
}
/* ══════════ v5 · uplift (7 Sep 2026) ══════════ */
/* track record: one expanded column */
.dossier.solo{grid-template-columns:1fr;max-width:980px}
.dossier.solo .leaf p + p{margin-top:12px}
/* scene: stage strip and titles grow, stage change flashes */
.jcard{padding:12px 18px 12px 12px}
.jstage{font-size:12.5px;letter-spacing:2.6px}
.jstage b{font-size:12.5px;padding:6px 11px}
.jtitle{font-size:clamp(19px,1.9vw,28px);font-weight:500;margin-top:4px;max-width:34ch}
.jcard.flash{animation:jflash .7s var(--ease)}
@keyframes jflash{0%{box-shadow:0 0 0 1px rgba(160,107,255,.3) inset}35%{box-shadow:0 0 0 2px rgba(160,107,255,.95) inset,0 0 40px -6px rgba(160,107,255,.8)}100%{box-shadow:0 0 0 1px rgba(160,107,255,.3) inset}}
@media(max-width:640px){.jtitle{font-size:17px;max-width:none}.jstage{font-size:11px}.jstage b{font-size:11px}}
/* before / after on a phone: give the layers room */
@media(max-width:640px){
.ba{aspect-ratio:auto;min-height:560px}
.xls{width:60%}.xls .xtot{display:none}
.xtag{top:auto;bottom:14px;left:14px;right:auto}
.ba .hint{bottom:14px;left:auto;right:14px;transform:none}
.ba .side::after{height:190px}
.clean{inset:14px 14px 168px}
.clean .bar em{display:none}
.ba .cap .t{margin-bottom:6px}
}
/* automation section */
.auto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:8px}
@media(max-width:840px){.auto{grid-template-columns:1fr}}
.autopanel{position:relative;border-radius:var(--r);padding:26px 26px 28px;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:var(--edge)}
.autopanel .k{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:10px}
.autopanel.man .k b{color:var(--pink)}.autopanel.aut .k b{color:var(--violet)}
.autopanel h3{font-family:var(--disp);font-weight:500;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;margin:12px 0 6px}
.autopanel p{color:var(--dim);font-size:15px;max-width:44ch}
.chain{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;position:relative}
.chain li{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);padding:10px 12px;border-radius:10px;background:rgba(7,3,15,.5);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.chain li i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--faint)}
.man .chain li i{background:rgba(255,122,162,.8)}
.man .chain li em{margin-left:auto;font-style:normal;color:var(--pink);opacity:.8;letter-spacing:1px}
.aut .chain li i{background:var(--violet);box-shadow:0 0 12px rgba(160,107,255,.8)}
.aut .chain li em{margin-left:auto;font-style:normal;color:var(--violet);letter-spacing:1px}
.aut .chain::before{content:'';position:absolute;left:16px;top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,transparent,rgba(160,107,255,.55),transparent)}
.aut.in .chain li{animation:chainlight .9s var(--ease) both}
.aut.in .chain li:nth-child(2){animation-delay:.35s}.aut.in .chain li:nth-child(3){animation-delay:.7s}.aut.in .chain li:nth-child(4){animation-delay:1.05s}
@keyframes chainlight{0%{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;color:var(--dim)}50%{box-shadow:0 0 0 1px rgba(160,107,255,.7) inset,0 0 26px -8px rgba(160,107,255,.9);color:var(--ink)}100%{box-shadow:0 0 0 1px rgba(160,107,255,.28) inset;color:var(--ink)}}
.autonote{margin-top:18px;font-size:14px;color:var(--dim)}
.man.in .chain li:nth-child(odd){animation:wobble 6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.aut.in .chain li,.man.in .chain li{animation:none}.jcard.flash{animation:none}}
/* our work: live embed in the hero */
.embedwrap{position:relative;border-radius:7px;overflow:hidden;background:rgba(7,3,15,.55);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;aspect-ratio:4/3;min-height:300px}
.embedwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#07030f}
.embedwrap .rd{position:absolute;inset:0;display:none;overflow:hidden}
.embedwrap.fallback iframe{display:none}.embedwrap.fallback .rd{display:block}
.embedfoot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.embedfoot a{color:var(--violet)}
/* case studies and blog placeholders */
.csgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
@media(max-width:900px){.csgrid{grid-template-columns:1fr}}
.cs{border-radius:var(--r);padding:24px 24px 26px;background:rgba(255,122,162,.04);box-shadow:0 0 0 1px rgba(255,122,162,.22) inset;display:flex;flex-direction:column;gap:12px}
.cs .sector{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--pink)}
.cs h3{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;margin:0}
.cs dl{margin:0;display:grid;gap:10px}
.cs dt{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint)}
.cs dd{margin:2px 0 0;color:var(--dim);font-size:14px}
.cs .tag{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.demo.plchold{justify-content:center;align-items:flex-start;padding:28px;background:rgba(255,122,162,.04);box-shadow:0 0 0 1px rgba(255,122,162,.25) inset;min-height:260px}
.demo.plchold b{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--pink)}
.demo.plchold h3{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.02em;margin:12px 0 8px}
.demo.plchold p{color:var(--dim);font-size:14.5px;max-width:40ch}
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
@media(max-width:900px){.postgrid{grid-template-columns:1fr}}
.post{border-radius:var(--r);padding:0 0 22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:var(--edge)}
.post .cover{height:150px;background:linear-gradient(135deg,rgba(160,107,255,.22),rgba(255,122,162,.12));box-shadow:0 1px 0 rgba(255,255,255,.06)}
.post .meta{padding:16px 22px 0;font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint)}
.post h3{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;margin:8px 22px 8px}
.post p{margin:0 22px;color:var(--dim);font-size:14.5px}
/* consent banner */
.ckbanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-radius:18px;
background:rgba(12,6,24,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 30px 80px -30px #000}
.ckbanner p{margin:0;flex:1 1 320px;color:var(--dim);font-size:14px;line-height:1.5}
.ckbanner p a{color:var(--ink)}
.ckbanner .acts{display:flex;gap:8px;flex-wrap:wrap}
.ckbanner .acts button{font:inherit;font-size:14px;padding:10px 16px;border-radius:999px;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.ckbanner .acts button:hover{background:rgba(255,255,255,.12)}
@media(max-width:640px){.ckbanner{left:10px;right:10px;bottom:10px;padding:14px}.ckbanner .acts{width:100%}.ckbanner .acts button{flex:1 1 auto}}
/* footer: three columns now the address is gone */
.frow{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
#ckbanner:not([hidden]) ~ .protonote{bottom:calc(16px + 92px)}
@media(max-width:640px){#ckbanner:not([hidden]) ~ .protonote{display:none}}
.dossier.solo .tiers{display:flex;flex-wrap:wrap;gap:8px}
.dossier.solo .tiers li{flex:0 0 auto;padding:9px 16px 9px 32px;border-radius:999px}
.dossier.solo .tiers li::before{left:13px}
/* pass 2 · visual items */
.pvis canvas.spectrum{aspect-ratio:1.7/1}
#mechsec .shead h2{font-size:clamp(36px,4.6vw,66px)}
.ontovis{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:0 6px;align-items:stretch;margin-top:16px}
.ontovis .ocol{display:grid;gap:4px;align-content:center}
.ontovis .ocol i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--pink);margin-top:6px}
.ontovis .ocol i:first-child{margin-top:0}
.ontovis .ocol u{text-decoration:none;font-size:12.5px;color:var(--dim);padding:6px 10px;border-radius:8px;background:rgba(255,122,162,.06);box-shadow:0 0 0 1px rgba(255,122,162,.25) inset}
.ontovis .ocol.one i{color:var(--violet)}
.ontovis .ocol.one u{background:rgba(160,107,255,.1);box-shadow:0 0 0 1px rgba(160,107,255,.5) inset;color:var(--ink)}
.ontovis .ocol.one em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin-top:6px}
.ontovis .omerge{width:44px;height:100%;min-height:120px;overflow:visible}
.ontovis .omerge path{fill:none;stroke:rgba(160,107,255,.6);stroke-width:1.2;stroke-dasharray:200;stroke-dashoffset:200}
.hasvis.in .omerge path{animation:odraw 1.2s var(--ease) forwards}
.hasvis.in .omerge path:nth-child(2){animation-delay:.2s}.hasvis.in .omerge path:nth-child(3){animation-delay:.4s}
@keyframes odraw{to{stroke-dashoffset:0}}
@media(max-width:560px){.ontovis{grid-template-columns:1fr}.ontovis .omerge{display:none}.ontovis .ocol.one{margin-top:10px}}
.tierscale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;height:150px;margin:0 0 18px}
.tierscale > div{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.tierscale i{display:block;height:calc(var(--h)*92px);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(160,107,255,.55),rgba(160,107,255,.12));box-shadow:0 0 0 1px rgba(160,107,255,.35) inset;transform-origin:bottom;transform:scaleY(0);transition:transform 1s var(--ease)}
.tierscale.in i{transform:scaleY(1)}
.tierscale > div:nth-child(2) i{transition-delay:.15s}.tierscale > div:nth-child(3) i{transition-delay:.3s}
.tierscale b{margin-top:8px;font-family:var(--disp);font-weight:500;font-size:13px;color:var(--ink)}
.tierscale span{font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin-top:2px}
.mdash{max-width:980px}
.mtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
@media(max-width:760px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mtiles > div{padding:14px 14px 12px;border-radius:12px;background:rgba(7,3,15,.5);box-shadow:0 0 0 1px rgba(160,107,255,.16) inset}
.mtiles s{text-decoration:none;display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.mtiles b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(20px,2vw,26px);color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.mtiles b small{font-size:11px;color:var(--dim);letter-spacing:1px}
.mtiles i{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:4px}
.mgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;margin-top:12px}
@media(max-width:760px){.mgrid{grid-template-columns:1fr}}
.mchart{padding:14px;border-radius:12px;background:rgba(7,3,15,.5);box-shadow:0 0 0 1px rgba(160,107,255,.16) inset;display:flex;flex-direction:column}
.mchart > span{font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.mbars{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;min-height:120px;margin-top:14px}
.mbars i{display:block;height:calc(var(--v)*100%);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,rgba(160,107,255,.5),rgba(160,107,255,.1));box-shadow:0 0 0 1px rgba(160,107,255,.3) inset;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.mdash.in .mbars i{transform:scaleY(1)}
.mbars i:nth-child(2){transition-delay:.08s}.mbars i:nth-child(3){transition-delay:.16s}.mbars i:nth-child(4){transition-delay:.24s}.mbars i:nth-child(5){transition-delay:.32s}.mbars i:nth-child(6){transition-delay:.4s}.mbars i:nth-child(7){transition-delay:.48s}
.mbars i.today{background:linear-gradient(180deg,rgba(160,107,255,.95),rgba(160,107,255,.3));box-shadow:0 0 22px -4px rgba(160,107,255,.9)}
.mdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px;font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);text-align:center}
.mstatus{display:grid;gap:8px}
.mstatus > div{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-radius:12px;background:rgba(7,3,15,.5);box-shadow:0 0 0 1px rgba(160,107,255,.16) inset;align-items:start}
.mstatus i{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--violet);box-shadow:0 0 10px rgba(160,107,255,.9)}
.mstatus i.off{background:transparent;box-shadow:0 0 0 1.5px rgba(255,122,162,.8) inset}
.mstatus b{font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--violet);font-weight:500}
.mstatus span{grid-column:2;color:var(--dim);font-size:14px}
.mfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.monday.mdash .rows{display:none}
/* pass 3 · Robert's review of 7 Sep */
a.cta{text-decoration:none}
.jcard{white-space:normal;max-width:min(calc(100% - 2*var(--gut)), 1100px)}
.jstage{white-space:nowrap;flex:none}
.jtitle{max-width:min(40ch, 62vw);text-wrap:balance}
@media(max-width:640px){.jtitle{max-width:none}}
.clean{text-align:left}
.clean .kpis u s{font-size:17px}
.clean .kpis u{display:flex;flex-direction:column;justify-content:center;min-height:70px}
.clean .gauge{padding:10px 8px 30px;position:relative}
.ring em{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;margin:0}
.ctapanel .ctapoints{padding-left:6px}
/* pass 5 · stage card layout, chat panel, automation diagrams */
.jcard{gap:18px;padding:10px 22px 10px 14px}
.jstage{flex-direction:column;align-items:flex-start;gap:6px;padding-right:18px;border-right:1px solid rgba(160,107,255,.38);align-self:stretch;justify-content:center}
.jstage b{font-size:11px;padding:4px 9px}
.jstage span{font-size:10.5px;letter-spacing:2.4px}
@media(max-width:640px){.jstage{flex-direction:row;align-items:center;gap:10px;padding-right:0;border-right:0;border-bottom:1px solid rgba(160,107,255,.3);padding-bottom:6px;margin-bottom:6px}.jcard{display:block}}
.autoviz{display:block;width:100%;height:auto;margin-top:18px;border-radius:12px;background:rgba(7,3,15,.5);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.autoviz text{font-family:var(--mono);font-size:8px;letter-spacing:1.2px;fill:#a094b8}
.autoviz text.k{fill:#f2ecfa}
.autoviz text.pk{fill:#ff7aa2}
.autoviz text.vi{fill:#a06bff}
.autoviz .tile{fill:rgba(9,4,18,.9);stroke:rgba(255,122,162,.55);stroke-width:1}
.autoviz .tilev{fill:rgba(9,4,18,.9);stroke:rgba(160,107,255,.6);stroke-width:1}
.autoviz .dash{fill:none;stroke:rgba(255,122,162,.55);stroke-width:1.2;stroke-dasharray:3 4}
.autoviz .solid{fill:none;stroke:rgba(160,107,255,.7);stroke-width:1.4}
.autoviz .glyph{fill:none;stroke:#f2ecfa;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.autoviz .glyphd{fill:none;stroke:#a094b8;stroke-width:1;stroke-linecap:round}
.autoviz .wh{fill:rgba(160,107,255,.16);stroke:rgba(160,107,255,.8);stroke-width:1.2}
.autoviz .dotp{fill:#ff7aa2}
.autoviz .dotv{fill:#a06bff;filter:drop-shadow(0 0 4px #a06bff)}
.autoviz .loop{fill:none;stroke:rgba(255,122,162,.35);stroke-width:1;stroke-dasharray:2 4}
.autocap{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.man .autocap b{color:var(--pink);font-weight:500}.aut .autocap b{color:var(--violet);font-weight:500}
/* pass 5 · booking flow */
/* v6 · the picker is a real month, not a scrolling strip: a caller can see the
shape of the week, which days Glen is open, and that weekends are shut. */
.bkcal{border-radius:14px;padding:14px 14px 11px;background:rgba(255,255,255,.022);
box-shadow:0 0 0 1px rgba(160,107,255,.13) inset}
.bkcalhd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.bkmon{font-family:var(--disp);font-weight:500;font-size:15.5px;letter-spacing:-.015em;color:var(--ink)}
.bkmon em{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.5px;margin-left:7px}
.bknav{display:flex;gap:5px}
.bknav button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;
cursor:pointer;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
color:var(--dim);font:500 12px var(--mono);line-height:1;transition:color .2s,background .2s}
.bknav button:hover:not(:disabled){color:var(--ink);background:rgba(160,107,255,.2)}
.bknav button:disabled{opacity:.28;cursor:default}
.bkdow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:6px}
.bkdow span{text-align:center;font:500 8.5px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.bkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.bkdays button{position:relative;aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:9px;
cursor:pointer;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
color:var(--ink);font:500 14px var(--mono);font-variant-numeric:tabular-nums;
transition:background .18s var(--ease),box-shadow .18s var(--ease),color .18s}
.bkdays button::after{content:'';position:absolute;bottom:5px;left:50%;margin-left:-1.5px;
width:3px;height:3px;border-radius:50%;background:var(--violet);opacity:0;transition:opacity .18s}
.bkdays button.has::after{opacity:.9}
.bkdays button.has:hover{background:rgba(160,107,255,.17);box-shadow:0 0 0 1px rgba(160,107,255,.55) inset}
.bkdays button.shut{color:var(--faint);font-weight:400;background:transparent;box-shadow:none;cursor:default}
.bkdays button.pad{visibility:hidden;pointer-events:none}
.bkdays button.has.today{box-shadow:0 0 0 1px rgba(160,107,255,.42) inset}
.bkdays button.on{background:linear-gradient(150deg,var(--violet),#7431d8);color:#fff;
box-shadow:0 8px 20px -10px rgba(160,107,255,.95)}
.bkdays button.on::after{background:#fff;opacity:.7}
.bkcalfoot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
border-top:1px solid rgba(160,107,255,.1);
font:500 9px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
.bkcalfoot i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.bkcalfoot i::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--violet)}
.bknext{margin-left:auto;font:500 9px var(--mono);letter-spacing:1.3px;text-transform:uppercase;
color:var(--violet);background:transparent;border:0;padding:3px 0;cursor:pointer;transition:color .2s}
.bknext:hover{color:var(--ink)}
@media(max-width:400px){.bknext{margin-left:0}}
/* times · split by part of day, so ten identical pills stop reading as one block */
.bkslotsh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.bkslotsh b{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.bkslotsh span{font:500 9px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
.bkpart + .bkpart{margin-top:13px}
.bkpart > b{display:flex;align-items:center;gap:10px;font:500 8.5px var(--mono);letter-spacing:1.6px;
text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:8px}
.bkpart > b::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(160,107,255,.15),transparent)}
.bkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media(max-width:430px){.bkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bkgrid button{font:500 13.5px var(--mono);font-variant-numeric:tabular-nums;padding:12px 6px;
border-radius:9px;border:0;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.04);
box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;
transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.bkgrid button:hover{background:rgba(160,107,255,.18);box-shadow:0 0 0 1px rgba(160,107,255,.6) inset;
transform:translateY(-1px)}
.bkgrid button s{display:block;text-decoration:none;font-size:8px;letter-spacing:1.1px;
text-transform:uppercase;color:var(--faint);margin-top:4px;transition:color .18s}
.bkgrid button:hover s{color:rgba(255,255,255,.72)}
.bknone{padding:16px 2px;font-size:13.5px;color:var(--dim)}
@media(prefers-reduced-motion:reduce){.bkgrid button:hover{transform:none}}
.bkform{display:grid;gap:10px}
.bkchosen{display:grid;gap:3px;padding:12px 14px;border-radius:12px;background:rgba(160,107,255,.12);box-shadow:0 0 0 1px rgba(160,107,255,.45) inset;margin-bottom:4px}
.bkchosen b{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink)}
.bkchosen span{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--violet)}
.bkform label{display:grid;gap:5px}
.bkform label > span{font-family:var(--mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.bkform label > span em{font-style:normal;color:var(--faint);opacity:.7;letter-spacing:1px;text-transform:none}
.bkform input,.bkform textarea{font:400 14.5px var(--body);color:var(--ink);background:rgba(255,255,255,.04);border:0;border-radius:10px;padding:11px 12px;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;outline:0;width:100%}
.bkform input:focus,.bkform textarea:focus{box-shadow:0 0 0 1px rgba(160,107,255,.9) inset}
.bkform textarea{resize:vertical;min-height:54px}
.bkrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.bkrow{grid-template-columns:1fr}}
.bkconsent{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.bkconsent input{width:18px;height:18px;margin-top:1px;accent-color:var(--violet);box-shadow:none;padding:0}
.bkform .bkconsent > span{font-size:12.5px;color:var(--dim);line-height:1.5;font-family:var(--body);letter-spacing:0;text-transform:none}
.bkform .bkconsent > span a{color:var(--ink)}
.bkacts{display:flex;gap:10px;align-items:center;margin-top:4px}
.bkacts .cta.lg{flex:1;justify-content:center}
.bkback{font:500 13px var(--body);color:var(--dim);background:rgba(255,255,255,.05);border:0;border-radius:999px;padding:14px 18px;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.bkerr{font-size:13px;color:var(--pink);padding:10px 12px;border-radius:10px;background:rgba(255,122,162,.08);box-shadow:0 0 0 1px rgba(255,122,162,.35) inset}
.bkdone{display:grid;justify-items:center;text-align:center;gap:8px;padding:30px 10px}
.bkcheck{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--violet),#7a4bd8);box-shadow:0 0 30px -6px rgba(160,107,255,.9)}
.bkdone h4{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.02em;margin:8px 0 0;color:var(--ink)}
.bkdone p{margin:0;color:var(--ink);font-size:15px}
.bkdone .bkdonesub{color:var(--dim);font-size:13.5px;max-width:34ch}
.bkdone .textlink{margin-top:8px}
.bkloading{display:flex;gap:6px;justify-content:center;padding:60px 0}
.bkloading i{width:8px;height:8px;border-radius:50%;background:var(--violet);animation:bkpulse 1s ease-in-out infinite}
.bkloading i:nth-child(2){animation-delay:.15s}.bkloading i:nth-child(3){animation-delay:.3s}
@keyframes bkpulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.bknote{padding:10px 18px 14px;display:flex;gap:9px;align-items:flex-start;
font:400 11.5px/1.55 var(--body);letter-spacing:0;color:var(--faint);max-width:56ch}
.bknote::before{content:'';flex:none;width:4px;height:4px;border-radius:50%;margin-top:6px;
background:var(--violet)}
.bknote:empty{display:none}
.bknote.preview::before{background:var(--pink)}
/* pass 6 · stage card grid, rail hidden on the hero */
.rail{opacity:0;transition:opacity .35s var(--ease)}
.jcard{max-width:min(calc(100% - 2*var(--gut)), 1240px);gap:22px;padding:12px 26px 12px 24px}
/* v9 · fixed-width stage column so the number, the label and the divider land in the
same place on every step, and the rounded left edge no longer crowds them */
.jstage{align-items:center;text-align:center;width:148px;min-width:148px;gap:8px;padding-right:22px}
.jstage b{font-size:12px;padding:5px 0;min-width:46px;display:grid;place-items:center;
letter-spacing:0;font-variant-numeric:tabular-nums}
.jstage span{font-size:10px;letter-spacing:2.2px;white-space:nowrap;margin-right:-2.2px}
.jtitle{font-size:clamp(18px,1.65vw,25px);max-width:none;white-space:nowrap;text-wrap:initial}
@media(max-width:1180px){.jtitle{white-space:normal;max-width:min(40ch,58vw)}}
@media(max-width:640px){
.jcard{padding:12px 16px 14px;text-align:center}
.jstage{width:auto;min-width:0;text-align:center;align-items:center;justify-content:center;gap:12px;padding-right:0;padding-bottom:8px;margin-bottom:8px}
.jtitle{white-space:normal;max-width:none;font-size:18px;line-height:1.3;text-align:center;text-wrap:balance;padding:0 4px}
.jbody{text-align:center}
}
/* pass 4 · hero, mobile track, native arena */
@media(max-width:620px){.track{display:none}}
.arenavis{min-width:0}
.arena{border-radius:10px;padding:12px 12px 10px;background:rgba(7,3,15,.6);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.arenabar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.seg button{font:500 9.5px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);background:transparent;border:0;padding:7px 11px;border-radius:999px;cursor:pointer}
.seg button.on{color:var(--ink);background:rgba(160,107,255,.22);box-shadow:0 0 0 1px rgba(160,107,255,.5) inset}
.arenaleg{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.arenaleg button{display:inline-flex;align-items:center;gap:7px;font:500 9.5px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.04);border:0;padding:6px 10px 6px 8px;border-radius:999px;cursor:pointer;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent) inset;transition:opacity .2s}
.arenaleg button i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.arenaleg button.off{opacity:.4}
.arenaplot{position:relative;margin-top:8px}
.arenaplot canvas{display:block;width:100%;height:230px}
@media(max-width:640px){.arenaplot canvas{height:190px}}
.arenatip{position:absolute;z-index:2;pointer-events:none;min-width:190px;padding:10px 12px;border-radius:10px;background:rgba(9,4,18,.96);box-shadow:0 0 0 1px rgba(160,107,255,.35) inset,0 20px 40px -20px #000;font-family:var(--mono);font-size:10px;color:var(--dim)}
.arenatip b{display:block;color:var(--ink);font-weight:500;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.arenatip div{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:3px 0}
.arenatip i{width:8px;height:8px;border-radius:50%}
.arenatip s{text-decoration:none;color:var(--ink);text-align:right}
.arenatip em{font-style:normal;color:var(--faint);text-align:right}
.arenafoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
/* pass 7 · booking is a page of its own, not a dialog over the site */
.bookpage{padding:clamp(120px,16vh,180px) 0 clamp(70px,9vh,110px);position:relative;overflow:hidden}
.bookpage::before{content:'';position:absolute;inset:0;background:radial-gradient(940px 560px at 16% 0%,rgba(160,107,255,.17),transparent 66%);pointer-events:none}
.bookpage .wrap{position:relative;z-index:1}
.bookback{display:inline-block;font:500 12.5px var(--body);color:var(--dim);text-decoration:none;margin-bottom:clamp(22px,3vh,34px);transition:color .2s}
.bookback:hover{color:var(--ink)}
.bookgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4.4vw,68px);align-items:start}
@media(max-width:980px){.bookgrid{grid-template-columns:1fr;gap:32px}}
.bookaside .glenrow{display:flex;align-items:center;gap:12px}
.bookaside .glenpic,.bookaside .glenpic .ctapic{display:block;width:46px;height:46px}
.bookaside .glenwho b{display:block;font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--ink)}
.bookaside .glenwho span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--violet);margin-top:3px}
.bookaside h1{font-family:var(--disp);font-weight:500;font-size:clamp(30px,3.3vw,46px);letter-spacing:-.03em;line-height:1.05;margin:24px 0 14px;color:var(--ink)}
.bookaside > p{margin:0;color:#cfc3e2;font-size:15.5px;line-height:1.6;max-width:40ch}
@media(max-width:980px){.bookaside h1 br{display:none}}
.bookpts{list-style:none;counter-reset:bp;margin:26px 0 0;padding:0;display:grid;gap:13px;max-width:46ch}
.bookpts li{counter-increment:bp;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:13.8px;line-height:1.55;color:var(--dim)}
.bookpts li::before{content:counter(bp,decimal-leading-zero);font:500 10px var(--mono);letter-spacing:1px;color:var(--violet);padding-top:3px}
.bookaside .ctameta{margin-top:26px}
.bookpanel{border-radius:var(--r);overflow:hidden;position:relative;
background:linear-gradient(168deg,rgba(46,18,77,.5),rgba(13,6,25,.97) 58%);
box-shadow:0 0 0 1px rgba(160,107,255,.22) inset,0 50px 100px -60px #000}
.bkhead{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid rgba(160,107,255,.14)}
.bkhead > b{font:500 9px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--violet)}
.bksteps{display:flex;align-items:center;gap:10px;font:500 9.5px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.bksteps span{display:flex;align-items:center;gap:7px;transition:color .3s var(--ease)}
.bksteps span::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .3s,box-shadow .3s}
.bksteps span+span{padding-left:10px;border-left:1px solid rgba(255,255,255,.09)}
.bksteps span.on{color:var(--ink)}
.bksteps span.on::before{background:var(--violet);box-shadow:0 0 10px -1px var(--violet)}
.bksteps span.done{color:var(--dim)}
.bksteps span.done::before{background:rgba(160,107,255,.55)}
@media(max-width:560px){.bksteps{gap:14px}.bksteps span+span{padding-left:0;border-left:0}.bkhead > b{display:none}}
.bookpanel .bk{display:block;padding:20px 20px 6px;min-height:0}
.bookpanel .bknote{padding:0 20px 18px}
.bookpanel .bkform{gap:12px}
.bkform .bknotes textarea{min-height:86px}
.bkform .bknotes > span{color:var(--violet)}
.bkform .bkhint{display:block;font:400 11.5px/1.5 var(--body);color:var(--faint);letter-spacing:0;text-transform:none;font-style:normal;margin-top:-1px}
.bkform input::placeholder,.bkform textarea::placeholder{color:rgba(196,184,216,.34)}
.bookpanel .bookfb{padding:26px 20px;display:grid;gap:14px;justify-items:start;background:transparent}
.bookpanel .bookfb p{margin:0;color:var(--dim);font-size:14px;max-width:44ch}
/* pass 8 · booking page balance */
.bookpanel{display:flex;flex-direction:column}
.bookpanel .bk{flex:1}
.bookpanel .bknote{padding-top:4px}
.bookpanel .bkslots{margin-top:18px}
body.onbook header .cta,body.onbook .mobmenu .cta{opacity:.35;pointer-events:none}
/* ── v8 · booking picker: one screen. Calendar and times side by side, so
changing the day or the time is a single click and never loses context. ── */
.bkpick{display:grid;grid-template-columns:minmax(0,1fr) minmax(178px,214px);gap:16px;align-items:start}
@media(max-width:760px){.bkpick{grid-template-columns:1fr;gap:14px}}
.bkcol{min-width:0}
.bktimeshd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;
padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid rgba(160,107,255,.16)}
.bktimeshd b{font-family:var(--disp);font-weight:500;font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.bktimeshd span{font:500 8.5px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.bktimes{max-height:352px;overflow-y:auto;padding-right:4px;
scrollbar-width:thin;scrollbar-color:rgba(160,107,255,.4) transparent}
.bktimes::-webkit-scrollbar{width:5px}
.bktimes::-webkit-scrollbar-thumb{background:rgba(160,107,255,.4);border-radius:3px}
@media(max-width:760px){.bktimes{max-height:none;overflow:visible;padding-right:0}}
.bkpick .bkgrid{grid-template-columns:1fr;gap:6px}
@media(max-width:760px){.bkpick .bkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:400px){.bkpick .bkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bkpick .bkgrid button{padding:11px 6px;font-size:14px}
.bkpick .bkpart + .bkpart{margin-top:12px}
/* ── v7 · booking picker: one view at a time. Day → time → details → confirmed. ── */
.bkview{animation:bkin .34s var(--ease) both}
@keyframes bkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bkview{animation:none}}
.bkcal{border-radius:14px;padding:18px 18px 14px;background:rgba(255,255,255,.022);box-shadow:0 0 0 1px rgba(160,107,255,.13) inset}
.bkcalhd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.bkmon{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.bkmon em{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.8px;margin-left:8px}
.bknav{display:flex;gap:6px}
.bknav button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.09) inset;color:var(--dim);font:500 14px var(--mono);line-height:1;transition:color .2s,background .2s}
.bknav button:hover:not(:disabled){color:var(--ink);background:rgba(160,107,255,.22)}
.bknav button:disabled{opacity:.25;cursor:default}
.bkdow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px}
.bkdow span{text-align:center;font:500 8.5px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.bkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bkdays button{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:10px;cursor:default;
background:transparent;color:var(--faint);font:400 14px var(--mono);font-variant-numeric:tabular-nums;
transition:background .18s var(--ease),box-shadow .18s var(--ease),color .18s,transform .18s var(--ease)}
.bkdays button.pad{visibility:hidden;pointer-events:none}
.bkdays button.has{cursor:pointer;color:var(--ink);font-weight:500;background:rgba(160,107,255,.1);box-shadow:0 0 0 1px rgba(160,107,255,.28) inset}
.bkdays button b{font:inherit;font-weight:inherit;line-height:1;font-variant-numeric:tabular-nums}
.bkdays button.has b{font-weight:500}
/* v9 - availability reads as a single dot, never a second number next to the date.
The dot box is always rendered so every day number keeps the same baseline. */
.bkdays button small{display:block;width:4px;height:4px;border-radius:50%;background:transparent;transition:background .18s}
.bkdays button.has small{background:var(--violet);opacity:.85}
.bkdays button.has:hover{background:rgba(160,107,255,.24);box-shadow:0 0 0 1px rgba(160,107,255,.7) inset;transform:translateY(-1px)}
.bkdays button.today::before{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--pink)}
.bkdays button.on{background:linear-gradient(150deg,var(--violet),#7431d8);color:#fff;box-shadow:0 10px 24px -12px rgba(160,107,255,.95)}
.bkdays button.on small{background:#fff;opacity:.85}
.bkdays button.past{color:rgba(160,148,184,.35)}
.bkcalfoot{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(160,107,255,.1)}
.bkleg{display:flex;gap:14px;font:500 8.5px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
.bkleg i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.bkleg i::before{content:'';width:9px;height:9px;border-radius:3px;background:rgba(160,107,255,.28);box-shadow:0 0 0 1px rgba(160,107,255,.5) inset}
.bkleg i.t::before{width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:none}
.bknext{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--body);color:var(--ink);background:rgba(160,107,255,.14);border:0;border-radius:999px;padding:8px 14px 8px 10px;cursor:pointer;
box-shadow:0 0 0 1px rgba(160,107,255,.35) inset;transition:background .2s}
.bknext:hover{background:rgba(160,107,255,.28)}
.bknext em{font-style:normal;font:500 8.5px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--violet)}
.bknext b{font-weight:500}
@media(max-width:420px){.bkcalfoot{flex-direction:column;align-items:flex-start}}
/* the times view: one day, its slots, and a way back */
.bkday{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.bkday h3{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin:0}
.bkday h3 em{display:block;font-style:normal;font:500 9px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-top:5px}
.bkchange{font:500 12px var(--body);color:var(--dim);background:rgba(255,255,255,.05);border:0;border-radius:999px;padding:8px 13px;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.09) inset;display:inline-flex;align-items:center;gap:6px;transition:color .2s,background .2s}
.bkchange:hover{color:var(--ink);background:rgba(160,107,255,.2)}
.bkpart + .bkpart{margin-top:16px}
.bkpart > b{display:flex;align-items:center;gap:10px;font:500 8.5px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.bkpart > b::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(160,107,255,.15),transparent)}
.bkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:430px){.bkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bkgrid button{font:500 15px var(--mono);font-variant-numeric:tabular-nums;padding:13px 6px 11px;border-radius:10px;border:0;cursor:pointer;color:var(--ink);
background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.bkgrid button:hover{background:rgba(160,107,255,.2);box-shadow:0 0 0 1px rgba(160,107,255,.65) inset;transform:translateY(-1px)}
.bkgrid button s{display:block;text-decoration:none;font-size:8px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);margin-top:4px;transition:color .18s}
.bkgrid button:hover s{color:rgba(255,255,255,.75)}
.bkgrid button.on{background:linear-gradient(150deg,var(--violet),#7431d8);color:#fff;box-shadow:none}
.bkgrid button.on s{color:rgba(255,255,255,.8)}
.bktzline{margin-top:16px;font:400 11.5px var(--body);color:var(--faint)}
.bknone{padding:16px 2px;font-size:13.5px;color:var(--dim)}
@media(prefers-reduced-motion:reduce){.bkgrid button:hover,.bkdays button.has:hover{transform:none}}
.bkchosen{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:rgba(160,107,255,.12);box-shadow:0 0 0 1px rgba(160,107,255,.45) inset;margin-bottom:4px}
.bkchosen > div{display:grid;gap:3px}
.bkchosen b{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink)}
.bkchosen span{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--violet)}
.bkchosen button{font:500 12px var(--body);color:var(--ink);background:rgba(255,255,255,.08);border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.bksteps span{display:flex;align-items:center;gap:7px}
.bksteps span::after{content:'';display:none}
/* ── v7 · articles ── */
.post{display:block;color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.post:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(160,107,255,.4) inset,0 30px 60px -40px #000}
.post .cover{display:grid;place-items:center;font:500 44px var(--disp);letter-spacing:-.04em;color:rgba(242,236,250,.22)}
.post .cover.c1{background:linear-gradient(135deg,rgba(160,107,255,.28),rgba(255,122,162,.1))}
.post .cover.c2{background:linear-gradient(135deg,rgba(61,21,95,.9),rgba(160,107,255,.18))}
.post .cover.c3{background:linear-gradient(135deg,rgba(255,122,162,.22),rgba(160,107,255,.14))}
/* ── v8 · real blog covers ── */
.post .cover{position:relative;height:auto;aspect-ratio:40/21;overflow:hidden;padding:0}
.post .cover img{display:block;width:100%;height:100%;object-fit:cover}
a.post:hover .cover img{transform:scale(1.02)}
.post .cover img{transition:transform .5s var(--ease)}
.artcover{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.artcover img{display:block;width:100%;height:auto;aspect-ratio:40/11;object-fit:cover;
border-radius:12px;box-shadow:0 0 0 1px rgba(160,107,255,.16) inset,0 30px 70px -50px #000}
@media(max-width:640px){.artcover img{aspect-ratio:40/17}}
.article .phero{padding-top:clamp(30px,4vh,52px)}
.artcover{padding-top:clamp(96px,13vh,150px)}
/* footer base: two columns now the prototype line is gone */
.fbase{grid-template-columns:minmax(0,1fr) auto}
.post .more{display:inline-flex;align-items:center;gap:8px;margin:16px 22px 0;color:var(--violet);font-size:14px}
.post .more b{font-weight:400;transition:transform .3s var(--ease)}
a.post:hover .more b{transform:translateX(4px)}
.article .phero h1{max-width:20ch;font-size:clamp(28px,3.8vw,46px)}
.article .phero .lede{max-width:62ch}
.article .bookback{margin-bottom:22px}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:500 10px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
.artbody{max-width:68ch}
.artbody h2{font-size:clamp(20px,2.2vw,26px);line-height:1.2;margin-top:40px}
.artbody h2:first-child{margin-top:0}
.artbody p{color:#d5cbe6;font-size:17px;line-height:1.7;margin-top:16px}
.artbody p strong{color:var(--ink);font-weight:600}
.artbody p em{color:var(--ink);font-style:italic}
.artbody a{color:var(--violet);border-bottom:1px solid rgba(160,107,255,.35)}
.artcta{margin-top:36px;padding:18px 22px;border-radius:10px;background:rgba(160,107,255,.08);box-shadow:0 0 0 1px rgba(160,107,255,.22) inset}
.artcta p{margin:0;font-size:16px;color:var(--ink)}
.bkdays button::after{display:none}
.bkdays button:not(.has):not(.on){background:transparent;box-shadow:none}
.bookpanel .bkslots{margin-top:0}
@media(max-width:980px){
.bookgrid{grid-template-columns:1fr}
.bookpanel{order:1}
.bookaside{order:2}
.bookaside h1{font-size:clamp(27px,7.4vw,34px);margin:18px 0 12px}
.bookaside > p{font-size:14.8px}
.bookpts{gap:11px;margin-top:20px}
.bookpts li{font-size:13.2px}
}
@media(prefers-reduced-motion:reduce){.tierscale i,.mbars i{transform:none;transition:none}.hasvis .omerge path{stroke-dashoffset:0;animation:none}}
/* Package 9 · footer office line */
.faddr{display:block;margin-top:6px;opacity:.72;line-height:1.5}