/* Landing-page sections, layout variants and scroll animations (layouts.py)
   Generated by build.py – edit the source module, then rebuild. */

.mosaic{grid-template-areas:"a b c d" "e e e e";grid-template-rows:190px auto}
.mosaic .te{min-height:0;gap:14px}
.num{display:inline-block;font-size:12px;font-weight:600;background:#6a31c8;color:#000;border-radius:999px;padding:3px 11px;margin-bottom:14px}
.card.dark .num{background:#fff}
.card p+p{margin-top:10px}
.blk .card p{color:#c9c9d2}.blk .card.dark p{color:#fff}
.card h3.q{font-size:16px;font-weight:500;line-height:1.45}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;justify-content:center}
.roles span{font-size:14px;font-weight:500;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:9px 16px;box-shadow:0 10px 24px -18px rgba(106,49,200,.8)}
.fgrid a:hover{color:#fff}.fgrid h4{color:#fff}.fgrid .logo{margin-bottom:12px;color:#fff}
@media(max-width:900px){.mosaic{grid-template-areas:none}.mosaic .te{grid-column:span 2}}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic .tile b,.mosaic .tb b,.mosaic .tc b,.mosaic .td b{font-size:clamp(26px,8vw,40px)}}

/* ---- reveal on scroll ---- */
.js :where([data-rv]){opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease,clip-path 1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js.rv-up :where([data-rv]){transform:translateY(42px)}
.js.rv-left :where([data-rv]){transform:translateX(-56px)}
.js.rv-zoom :where([data-rv]){transform:scale(.9)}
.js.rv-blur :where([data-rv]){filter:blur(14px);transform:translateY(18px)}
.js.rv-flip :where([data-rv]){transform:perspective(900px) rotateX(-28deg) translateY(30px);transform-origin:50% 0}
.js.rv-clip :where([data-rv]){transform:translateX(-12px)}
.js[class] :where([data-rv].in){opacity:1;transform:none;filter:none}
.js.rv-clip :where([data-rv].in){animation:wipe 1.1s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-80px -80px -80px -80px)}}
.blk:before{background:radial-gradient(circle,color-mix(in srgb,var(--acc) 55%,transparent),transparent 68%)}
.btn.acc{background:var(--acc);color:var(--accInk)}.btn.acc:hover{filter:brightness(1.08);background:var(--acc)}
/* counters */
.tile b{font-variant-numeric:tabular-nums}
/* cursor spotlight */
.spot{position:relative;overflow:hidden}
.spot:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--acc) 24%,transparent),transparent 70%)}
.num{background:var(--acc);color:var(--accInk)}
.v-big{font-size:clamp(44px,6vw,76px);font-weight:600;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--acc)}
.center-btn{display:flex;justify-content:center;margin-top:36px}

/* S1-B sticky split */
.v-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,6vw,96px)}
.v-split .stick{position:sticky;top:48px;align-self:start}
.v-split .stick p.sub{margin-top:16px}.v-split .stick .btn{margin-top:26px}
.v-item{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line)}
.v-item p{color:var(--mute);font-size:16px;line-height:1.7}
.v-item h3{margin-bottom:6px}
/* S1-C column timeline */
.v-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.v-col{position:relative;padding-top:30px;border-top:2px solid var(--line)}
.v-col:before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--acc);transition:width 1.3s ease calc(var(--i,0)*160ms + .2s)}
.v-col.in:before,html:not(.js) .v-col:before{width:100%}
.v-col:after{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent)}
.v-col b{display:block;font-size:12px;color:var(--mute);margin-bottom:10px;letter-spacing:.12em}
.v-col p{font-size:15px;line-height:1.7}
/* S1-D scroll-lit quote */
.v-quote{font-size:clamp(24px,3.4vw,44px);line-height:1.25;letter-spacing:-.025em;font-weight:500;max-width:30ch}
.v-quote span{opacity:.16;transition:opacity .35s}.v-quote span.on,html:not(.js) .v-quote span{opacity:1}
.v-text{columns:2 320px;column-gap:56px;margin-top:56px;color:var(--mute);font-size:16px;line-height:1.75}
.v-text p{break-inside:avoid;margin-bottom:20px}
.v-text p:first-child:first-letter{float:left;font-size:68px;line-height:.85;margin:6px 12px 0 0;color:var(--acc);font-weight:600}
/* tabs (horizontal) */
.v-tabbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.v-tabbar button{font:inherit;font-size:14px;font-weight:500;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--page);color:var(--ink);cursor:pointer;position:relative;overflow:hidden;text-align:left;flex:1 1 200px;transition:background .3s,color .3s}
.v-tabbar button small{display:block;font-size:11px;letter-spacing:.12em;opacity:.6;margin-bottom:4px}
.v-tabbar button[aria-selected=true]{background:var(--ink);color:var(--page)}
.v-tabbar button i,.v-vtabs .tl button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc)}
[data-tabs] [aria-selected=true] i{animation:bar 7s linear forwards}
[data-tabs].stopped [aria-selected=true] i{animation:none;width:100%}
.v-pane{background:var(--page);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,4vw,52px);font-size:clamp(17px,1.9vw,23px);line-height:1.55;letter-spacing:-.01em}
.v-pane+.v-pane{margin-top:12px}
[data-pane].show{animation:paneIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes bar{to{width:100%}}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}}
/* S1-F / S6-D rows */
.v-rows{border-top:1px solid var(--line)}
.v-row{display:grid;grid-template-columns:90px 1fr 40px;gap:24px;align-items:center;padding:30px 14px;border-bottom:1px solid var(--line);transition:background .35s,padding .35s;border-radius:4px}
.v-row:hover{background:color-mix(in srgb,var(--acc) 9%,transparent);padding-left:28px}
.v-row>b{font-size:30px;font-weight:500;color:var(--acc);letter-spacing:-.03em}
.v-row p{font-size:16px;line-height:1.7}.v-row h3+p{color:var(--mute);margin-top:4px}
.v-row .ar{font-size:24px;transition:transform .35s}.v-row:hover .ar{transform:translateX(6px) rotate(-45deg)}

/* S2-B marquee */
.v-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:10px 0}
.v-mq .trk{display:flex;width:max-content;animation:mq 40s linear infinite}
.v-mq.rev .trk{animation-direction:reverse;animation-duration:48s}
.v-mq:hover .trk{animation-play-state:paused}
.v-mq .grp{display:flex;gap:14px;padding-right:14px}
.mqc{display:flex;align-items:center;gap:14px;padding:14px 24px 14px 14px;border-radius:999px;background:var(--page);border:1px solid var(--line);white-space:nowrap}
.mqc i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--accInk);font-style:normal;font-weight:700}
.mqc b{font-size:16px}.mqc small{display:block;font-size:12px;color:var(--mute);font-weight:400}
.mqr{white-space:nowrap;padding:14px 24px;border-radius:999px;font-size:16px;font-weight:500;background:var(--page);border:1px solid var(--line)}
.v-mq.rev .mqr{background:var(--ink);color:var(--page);border-color:transparent}
@keyframes mq{to{transform:translateX(-50%)}}
/* S2-C leaderboard */
.v-lb{max-width:880px;margin:0 auto;padding:0;display:grid;gap:10px}
.v-lb li{list-style:none}
.v-lb .r{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;padding:16px 22px 16px 16px;background:var(--page);border:1px solid var(--line);border-radius:18px;transition:transform .35s,box-shadow .35s}
.v-lb .r:hover{transform:translateX(10px);box-shadow:-8px 0 0 var(--acc)}
.v-lb .ix{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--acc);color:var(--accInk);font-weight:700}
.v-lb b{font-size:18px;font-weight:600}
.v-lb em{font-style:normal;font-size:12.5px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
/* S2-D flip wall */
.v-flip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v-fc{perspective:1000px;height:190px;outline:none}
.v-fc .c3{position:relative;height:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.v-fc:hover .c3,.v-fc:focus .c3{transform:rotateY(180deg)}
.v-fc:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:24px}
.v-fc .f,.v-fc .b{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.v-fc .f{background:var(--page);border:1px solid var(--line)}
.v-fc .f span{font-size:46px;font-weight:600;line-height:1;color:var(--acc)}
.v-fc .f b{font-size:19px}
.v-fc .b{background:var(--acc);color:var(--accInk);transform:rotateY(180deg)}
.v-fc .b small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.v-fc .b b{font-size:24px;line-height:1.2}
.hint{font-size:12.5px;color:var(--mute);text-align:center;margin-top:16px}
/* routes ladder */
.v-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.v-step{background:var(--page);border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;position:relative;overflow:hidden}
.v-step:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--acc)}
.v-step:nth-child(1){min-height:230px}.v-step:nth-child(2){min-height:280px}.v-step:nth-child(3){min-height:330px}.v-step:nth-child(4){min-height:380px;background:var(--ink);color:var(--page)}
.v-step p{color:var(--mute);font-size:14.5px}.v-step:nth-child(4) p{color:inherit;opacity:.75}

/* S3-C numbered columns */
.v-ol{columns:3 240px;column-gap:44px;padding:0;margin:8px 0 0}
.v-ol li{list-style:none;break-inside:avoid;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:18px;font-weight:500;display:flex;gap:16px;align-items:baseline;counter-increment:r}
.v-ol li:before{content:counter(r,decimal-leading-zero);color:var(--acc);font-size:13px;font-weight:700}
/* S3-D floating cloud */
.v-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1000px;margin:0 auto}
.v-cloud span{border-radius:999px;padding:11px 20px;background:var(--page);border:1px solid var(--line);font-weight:500;font-size:15px;animation:bob 5.5s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.v-cloud span.s1{font-size:21px;padding:15px 28px;background:var(--acc);color:var(--accInk);border-color:transparent}
.v-cloud span.s2{font-size:17px;background:var(--ink);color:var(--page);border-color:transparent}
@keyframes bob{50%{transform:translateY(-10px)}}

/* S4-B bento field tiles */
.v-bento{display:grid;gap:16px}
.v-brow{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,2.25fr);gap:16px}
.v-grp{border-radius:28px;padding:30px;background:var(--ink);color:var(--page);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:220px;position:relative;overflow:hidden;isolation:isolate}
.v-grp:after{content:"";position:absolute;z-index:-1;width:220px;height:220px;border-radius:50%;right:-70px;bottom:-90px;background:radial-gradient(circle,var(--acc),transparent 70%);opacity:.55;animation:float 9s ease-in-out infinite}
.v-brow:nth-child(2) .v-grp{background:var(--acc);color:var(--accInk)}
.v-brow:nth-child(2) .v-grp:after{background:radial-gradient(circle,#fff,transparent 70%);opacity:.35}
.v-grp b{font-size:clamp(60px,6.5vw,92px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.v-grp small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.v-grp span{font-size:17px;font-weight:600;line-height:1.3}
.v-ft{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;align-content:start}
.v-ft>div{background:var(--page);border:1px solid var(--line);border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;font-size:14.5px;font-weight:500;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.v-ft>div:hover{transform:translateY(-5px);border-color:var(--acc);box-shadow:0 18px 30px -22px var(--acc)}
.v-ft svg{width:36px;height:36px;padding:8px;border-radius:11px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.js .v-ft>div{opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s ease calc(var(--i)*55ms),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i)*55ms),border-color .35s,box-shadow .35s}
.js .v-ft.in>div{opacity:1;transform:none}
.js .v-ft.in>div:hover{transform:translateY(-5px);transition-delay:0s}
/* S4-C animated checklist */
.v-ck{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v-ck .col{background:var(--page);border:1px solid var(--line);border-radius:26px;padding:30px}
.v-ck ul{list-style:none;padding:0;display:grid;gap:14px;margin-top:18px}
.v-ck li{display:flex;gap:12px;align-items:center;font-size:15.5px}
.chk{width:24px;height:24px;flex:none}
.chk circle{fill:color-mix(in srgb,var(--acc) 22%,transparent)}
.chk path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s ease calc(var(--i,0)*90ms + .35s)}
.in .chk path,html:not(.js) .chk path{stroke-dashoffset:0}
/* S4-D code window */
.v-codewrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.v-code{background:#0b0d12;color:#d7dbe6;border-radius:22px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--acc) 60%,transparent)}
.v-code .wbar{border-color:#1d2130;color:#8a90a2}
.v-code pre{margin:0;padding:24px 28px;overflow-x:auto;line-height:1.8;font-family:inherit}
.v-code .ln{display:block;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i)*55ms + .2s)}
.in .v-code .ln,.v-code.in .ln,html:not(.js) .v-code .ln{opacity:1;transform:none}
.v-code .k{color:color-mix(in srgb,var(--acc) 70%,#fff)}.v-code .s{color:#8bd49c}.v-code .c{color:#6b7289}
.v-code .cur{display:inline-block;width:8px;height:16px;background:var(--acc);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* S5 / S6-C vertical tabs */
.v-vtabs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:22px;align-items:start}
.v-vtabs .tl{display:grid;gap:10px}
.v-vtabs .tl button{text-align:left;font:inherit;font-size:16px;font-weight:600;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--page);color:var(--ink);cursor:pointer;position:relative;overflow:hidden;transition:background .3s,color .3s}
.v-vtabs .tl button[aria-selected=true]{background:var(--acc);color:var(--accInk);border-color:transparent}
.v-vtabs .pn{background:var(--page);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,4vw,44px);font-size:18px;line-height:1.65}
.v-vtabs .pn h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;margin-bottom:14px}
.v-vtabs .pn+.pn{margin-top:12px}
.v-vtabs .pn .note{font-size:14px}
.blk .v-vtabs .tl button{background:transparent;color:#fff;border-color:rgba(255,255,255,.16)}
.blk .v-vtabs .tl button[aria-selected=true]{background:var(--acc);color:var(--accInk)}
.blk .v-vtabs .pn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e9e9f0}
/* S5-C horizontal scroller */
.v-hs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;scrollbar-width:thin;scrollbar-color:var(--acc) transparent}
.v-hs>div{scroll-snap-align:start;border-radius:28px;padding:32px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--page);border:1px solid var(--line)}
.v-hs>div:nth-child(odd){background:var(--ink);color:var(--page);border-color:transparent}
.v-hs h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.v-hs p{font-size:15px;line-height:1.65;opacity:.78}
/* S5-D stacking cards (sticky deck) */
.v-stack{display:grid;gap:26px;padding-bottom:20px}
.v-sc{position:sticky;top:calc(150px + var(--i)*26px);display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:32px;background:var(--page);border:1px solid var(--line);box-shadow:0 -24px 60px -36px rgba(0,0,0,.35);min-height:270px}
.v-sc:nth-child(even){background:var(--ink);color:var(--page);border-color:transparent}
.v-sc .n{font-size:clamp(64px,8vw,112px);font-weight:600;letter-spacing:-.06em;line-height:.85;color:var(--acc)}
.v-sc .n small{display:block;font-size:12px;letter-spacing:.16em;font-weight:600;margin-top:14px;color:var(--ink);opacity:.55}
.v-sc:nth-child(even) .n small{color:var(--page)}
.v-sc h3{font-size:clamp(24px,2.7vw,36px);font-weight:500;letter-spacing:-.025em;margin-bottom:14px}
.v-sc p{font-size:16.5px;line-height:1.75;opacity:.78}
.v-sc .bar{height:4px;border-radius:4px;background:var(--line);margin-top:22px;overflow:hidden;max-width:260px}
.v-sc:nth-child(even) .bar{background:rgba(255,255,255,.18)}
.v-sc .bar i{display:block;height:100%;width:calc(var(--k)*25%);background:var(--acc)}
/* S5-E icon cards */
.v-ic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.v-ic>div{border-radius:26px;padding:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.v-ic>div:hover{transform:translateY(-10px);border-color:var(--acc)}
.v-ic svg{width:48px;height:48px;padding:12px;border-radius:15px;background:var(--acc);color:var(--accInk);margin-bottom:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-ic h3{color:#fff;margin-bottom:10px}.v-ic p{color:#c4c4cf;font-size:14.5px;line-height:1.65}

/* S6-B drawing timeline */
.v-vt{position:relative;max-width:860px;margin:0 auto;padding-left:64px}
.v-vt:before,.v-vt:after{content:"";position:absolute;left:21px;top:10px;width:2px}
.v-vt:before{bottom:10px;background:var(--line)}
.v-vt:after{height:calc((100% - 20px)*var(--p,0));background:var(--acc);box-shadow:0 0 12px var(--acc)}
html:not(.js) .v-vt:after{height:calc(100% - 20px)}
.v-vt .st{position:relative;padding:0 0 44px}
.v-vt .st:before{content:attr(data-n);position:absolute;left:-64px;top:-4px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--page);border:2px solid var(--acc);font-size:13px;font-weight:700}
.v-vt h3{font-size:22px}.v-vt .st p{color:var(--mute);margin-top:6px;font-size:15.5px}
.v-vt .card.dark p{color:#ddd}

/* S7-B checklist + progress */
.v-cl{max-width:840px;margin:0 auto;display:grid;gap:12px}
.v-cl>div{display:flex;gap:18px;align-items:center;padding:20px 24px;background:var(--page);border:1px solid var(--line);border-radius:18px;font-size:16.5px}
.v-cl .chk{width:32px;height:32px}
.v-prog{max-width:840px;margin:26px auto 0}
.v-prog .t{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-bottom:8px}
.v-prog .bar{height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.v-prog .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width 2.2s cubic-bezier(.2,.7,.2,1) .5s}
.v-prog.in .bar i,html:not(.js) .v-prog .bar i{width:100%}
/* S7-D horizontal steps */
.v-hst{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.v-hst:before,.v-hst:after{content:"";position:absolute;top:28px;left:10%;height:2px}
.v-hst:before{right:10%;background:var(--line)}
.v-hst:after{width:0;background:var(--acc);transition:width 1.8s ease .3s}
.v-hst.in:after,html:not(.js) .v-hst:after{width:80%}
.v-hst>div{text-align:center;position:relative;z-index:1}
.v-hst .c{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:var(--page);border:2px solid var(--acc);font-weight:700;transition:background .4s,color .4s;transition-delay:calc(var(--i)*300ms + .3s)}
.v-hst.in .c{background:var(--acc);color:var(--accInk)}
.v-hst p{font-size:14.5px;line-height:1.6}

/* S8-B versus */
.v-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.v-vs .side{border-radius:28px;padding:32px;border:1px solid var(--line);background:var(--page);height:100%}
.v-vs .side.us{background:var(--ink);color:var(--page);border:0;box-shadow:0 0 0 2px var(--acc),0 40px 70px -40px color-mix(in srgb,var(--acc) 70%,transparent)}
.v-vs .vs{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--accInk);font-weight:700;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--acc) 0%,transparent),0 0 0 0 transparent}0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}}
.v-vs ul{list-style:none;padding:0;display:grid;gap:16px;margin-top:22px}
.v-vs li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15px}
.v-vs li:before{content:"✕";font-weight:700;color:var(--mute)}
.v-vs .us li:before{content:"✓";color:var(--acc)}
.v-vs li small{display:block;font-size:11.5px;opacity:.6;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
/* S8-C toggle */
.v-tg{max-width:960px;margin:0 auto}
.v-tg .sw{display:flex;width:max-content;margin:0 auto 28px;padding:5px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.v-tg .sw button{font:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:999px;border:0;background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.v-tg .sw button[aria-pressed=true]{background:var(--acc);color:var(--accInk)}
.v-tg .rw{display:grid;grid-template-columns:230px 1fr;gap:22px;padding:22px 8px;border-bottom:1px solid var(--line);align-items:center}
.v-tg .rw>b{font-size:15px}
.v-tg .rw span{display:flex;gap:10px;font-size:15.5px;line-height:1.5}
.v-tg .rw .b:before{content:"✕";color:var(--mute)}.v-tg .rw .b{color:var(--mute)}
.v-tg .rw .t:before{content:"✓";color:var(--acc);font-weight:700}
.v-tg[data-view=tul] .b,.v-tg[data-view=basic] .t{display:none}
.v-tg[data-view] .rw span{animation:paneIn .45s ease}

/* S9-B dark split CTA */
.v-cta2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:#000;color:#fff;border-radius:34px;padding:clamp(32px,6vw,76px);position:relative;overflow:hidden;isolation:isolate}
.v-cta2:before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--acc),transparent 65%);opacity:.6;right:-160px;top:-200px;animation:float 10s ease-in-out infinite}
.v-cta2 h2{color:#fff}.v-cta2 p{color:#c9c9d2;margin-top:14px}
.exq{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:26px;font-size:15px;line-height:1.65;color:#e5e5ec;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.exq b{color:var(--acc);display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.exq .btn{margin-top:20px}
@keyframes float{50%{transform:translate(-50px,40px) scale(1.1)}}
/* S9-C spinning border CTA */
.v-cta3{position:relative;border-radius:34px;padding:3px;overflow:hidden;isolation:isolate}
.v-cta3:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,var(--acc),#6a31c8,#c90269,var(--acc));animation:spin 7s linear infinite;z-index:-1}
.v-cta3 .inn{background:var(--page);border-radius:31px;padding:clamp(44px,7vw,92px) 28px;text-align:center}
.v-cta3 h2{max-width:20ch;margin:0 auto}.v-cta3 p{color:var(--mute);max-width:56ch;margin:14px auto 0}
.v-cta3 .req{color:var(--ink);border:0;margin:22px auto 28px;padding:0;max-width:64ch;font-size:14px}
/* S10 FAQ variants */
.v-faq2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.v-faq2 details{margin:0}
.v-faqs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px)}
.v-faqs .stick{position:sticky;top:48px;align-self:start}.v-faqs .stick p{margin:14px 0 24px}

@media(max-width:900px){
.hero .mosaic{grid-auto-rows:minmax(150px,auto)}.hero .mosaic .te{height:auto}.mosaic .tile b{overflow-wrap:anywhere}
.v-split,.v-codewrap,.v-vtabs,.v-faqs,.v-cta2,.v-brow,.v-sc{grid-template-columns:1fr}
.v-sc{top:calc(84px + var(--i)*14px);min-height:0;gap:14px}.v-ft{grid-template-columns:1fr 1fr}.v-grp{min-height:0}
.v-split .stick,.v-faqs .stick{position:static}
.v-item{grid-template-columns:1fr;gap:10px}
.v-row{grid-template-columns:52px 1fr;padding:22px 6px}.v-row .ar{display:none}.v-row:hover{padding-left:10px}
.v-flip{grid-template-columns:1fr 1fr}.v-fc{height:170px}
.v-ladder,.v-ic,.v-ck,.v-faq2,.v-hst{grid-template-columns:1fr}
.v-step{min-height:0!important}
.v-vs{grid-template-columns:1fr}.v-vs .vs{margin:0 auto}
.v-tg .rw{grid-template-columns:1fr;gap:8px}
.v-hst:before,.v-hst:after{display:none}.v-hst>div{display:grid;grid-template-columns:56px 1fr;gap:16px;text-align:left;align-items:center}.v-hst .c{margin:0}
.v-lb .r{grid-template-columns:44px 1fr}.v-lb em{grid-column:2;justify-self:start}
}
@media(min-width:600px) and (max-width:900px){.v-ic{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){
.js :where([data-rv]){opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
*,*:before,*:after{animation:none!important}
.v-col:before{width:100%}.chk path{stroke-dashoffset:0}.v-code .ln{opacity:1;transform:none}.v-prog .bar i{width:100%}.v-hst:after{width:80%}.v-quote span{opacity:1}
}

:root{--acc:#6a31c8;--accInk:#fff}