:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:#fff;color:#000;padding:10px 16px;border-radius:8px;font:600 14px Sora}.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;background:#0008;color:#fff;cursor:pointer}
#snd[aria-pressed=false] .w{opacity:.25}#snd[aria-pressed=false]:after{content:"";position:absolute;width:22px;height:2px;background:#fff;transform:rotate(-45deg)}#snd{position:relative}
.hnav{display:flex;gap:26px;font:600 13px Sora;letter-spacing:.08em}.hnav a{color:#d6d9e3}.hnav a:hover,.hnav a[aria-current]{color:#fff}@media(max-width:1100px){.hnav{display:none}}
#menu{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--acc) 22%,#05050a),#05050aF5 55%);padding:96px 6vw 40px;overflow:auto}
#menu .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;max-width:1200px;margin:auto}#menu b{display:block;font:600 12px Sora;letter-spacing:.2em;color:#b9bdca;margin-bottom:12px}
#menu a{display:block;font:20px Michroma;padding:7px 0}#menu .x{position:absolute;right:3.5vw;top:18px}
.menu-open{overflow:hidden}
.crumb{font:600 12px Sora;letter-spacing:.18em;text-transform:uppercase;color:#b9bdca}.crumb a{color:var(--acc)}
.hud .pb i{height:calc(var(--p,0)*100%)!important}@media(max-width:760px){.hud .pb i{width:calc(var(--p,0)*100%)!important;height:100%!important}}
/* wizard (dark) */
.wz{max-width:860px}.wz-n{font:600 13px Sora;letter-spacing:.15em;color:#cfd2dc}.wz-bar{height:4px;background:#fff2;border-radius:9px;margin:10px 0 24px;overflow:hidden}.wz-bar span{display:block;height:100%;background:var(--acc);box-shadow:0 0 10px var(--acc);transition:width .3s}
.wz h2{font-size:clamp(22px,2.6vw,34px)}.wz fieldset{border:0;padding:0}.wz legend{font:600 18px Sora;margin-bottom:16px}
.wz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.wz-card{position:relative;cursor:pointer;border:1px solid #ffffff2e;border-radius:14px;padding:16px;font:600 15px Sora;display:flex;gap:12px;align-items:center;background:#ffffff08}
.wz-card input{position:absolute;opacity:0;pointer-events:none}.wz-card i{width:18px;height:18px;border-radius:5px;border:2px solid #fff6;flex:none}
.wz-card:has(:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}.wz-card:has(:checked) i{background:var(--acc);border-color:var(--acc)}
.wz-card:has(:focus-visible){outline:3px solid #fff;outline-offset:3px}
.wz label.f{display:block;font:600 13px Sora;margin:14px 0 6px}.wz input[type=text],.wz input[type=email],.wz input[type=tel],.wz textarea{width:100%;padding:14px;border:1px solid #ffffff40;border-radius:12px;font:inherit;background:#0b0b12;color:#fff}
.wz-foot{display:flex;justify-content:space-between;margin-top:28px}
.notice{border:1px solid #ffd27a88;background:#ffd27a12;border-radius:14px;padding:18px;margin:18px 0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.ctl{align-items:center}
.orb canvas{-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}
#hero .pan:before{content:"";position:absolute;inset:auto -10vw 0 -6vw;height:70vh;background:radial-gradient(ellipse at 30% 70%,#07070bcc,transparent 65%);z-index:-1;pointer-events:none}
/* generated figures */
.fig{position:relative;margin:0 0 18px;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);background:#0b0b12}
.fig img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.fig:hover img{transform:scale(1.03)}
.fig.hi{border-radius:22px;box-shadow:0 0 70px color-mix(in srgb,var(--acc) 16%,transparent),0 30px 60px #0009}
.fig.wide{margin:34px 0 0;aspect-ratio:21/8}.fig.wide img{height:100%;object-fit:cover}
/* ===== v3 component layer: one set for home / layer / sub templates ===== */
:root{--r-lg:22px;--r-md:16px;--r-sm:10px;--ease:cubic-bezier(.2,.7,.2,1);--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:40px;--sp-5:64px}
body{line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2{text-wrap:balance}p{text-wrap:pretty}h3{line-height:1.3;letter-spacing:.005em}
h1{letter-spacing:.01em;line-height:1.04}h2{line-height:1.12;margin-bottom:var(--sp-2)}
.tag{margin-bottom:var(--sp-2);display:inline-flex;align-items:center;gap:10px}.tag:before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.glass p+p{margin-top:var(--sp-1)}.mut{max-width:68ch}
/* glass panels */
.glass{border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.35)}
a.glass{transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
a.glass:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 40px color-mix(in srgb,var(--acc) 16%,transparent)}
/* chips: home client list + orbit labels share one look */
.cl a,.orb a{border-radius:999px;font:600 13px Sora;background:rgba(11,10,20,.85);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);backdrop-filter:blur(6px);transition:background .2s,color .2s,box-shadow .2s}
.cl a:hover,.orb a:hover{background:color-mix(in srgb,var(--acc) 22%,#0b0a14)}
/* HUD bits share accent glow */
.hud .pb i,.prog{transition:width .15s linear}
/* page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease) both}
::view-transition-new(root){animation:vt-in .38s var(--ease) both}
@keyframes vt-out{to{opacity:0;filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
.hdr{view-transition-name:hdr}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* ===== review fixes (Apollo / Iris / Ares, Oct 22) ===== */
/* header: content never sits unreadably under it; anchors land below it */
html{scroll-padding-top:96px}[id]{scroll-margin-top:96px}
.hdr{transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.hdr.sc,.menu-open .hdr{background:rgba(7,7,11,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
/* nav centred independently of the right-hand controls (pages without a mute button no longer shift it) */
@media(min-width:1101px){.hdr{position:fixed}.hnav{position:absolute;left:50%;transform:translateX(-50%)}}
/* menu rows >= 44px, readable group labels */
#menu a{display:flex;align-items:center;min-height:48px;padding:4px 0}#menu b{font-size:13px;color:#cfd2dc}
/* footer stays crisp over the 3D world */
footer{position:relative;z-index:5;isolation:isolate;background:#0A0712;border-top:1px solid color-mix(in srgb,var(--acc) 28%,transparent);box-shadow:0 -1px 24px -8px color-mix(in srgb,var(--acc) 40%,transparent)}
footer:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:64px;background:linear-gradient(transparent,#0A0712);pointer-events:none}
footer .grid{gap:28px 24px}footer b{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cfd2dc}
footer .fine{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.6}
@media(max-width:760px){footer{padding:44px 0 32px;margin-top:0}footer .grid{grid-template-columns:1fr 1fr;gap:30px 20px}footer .grid>:first-child,footer .grid>:last-child{grid-column:1/-1}
 footer nav a{display:flex;align-items:center;min-height:44px;margin:0}}
#gl{transition:opacity .35s linear}
/* mobile bottom dock CTA */


@media(prefers-reduced-motion:reduce){#gl{transition:none}}
.soon{color:var(--mut);font-style:italic}
/* wizard: radios look like radios, card centred, nav row pinned */
.wz{margin-left:auto;margin-right:auto}.wz .step:not(#done){min-height:360px}
.wz-card input[type=radio]+i{border-radius:50%;position:relative}.wz-card:has(input[type=radio]:checked) i{background:transparent;box-shadow:inset 0 0 0 4px #0b0b12,inset 0 0 0 10px var(--acc)}
.wz-foot{border-top:1px solid var(--line);padding-top:20px}
@media(max-width:760px){.wz .step:not(#done){min-height:0}}
/* packages: equal-height cards, CTAs on one line */
.pk{display:flex;flex-direction:column}.pk>.cta{margin-top:auto;padding-top:22px}.pk .tag{min-height:1.6em}.pk h2{min-height:2.3em}
@media(max-width:1100px) and (min-width:761px){.pkg-grid{grid-template-columns:repeat(2,1fr)!important}.pkg-grid>.pk:last-child{grid-column:1/-1}}
/* ===== Antonio phone pass (Oct 22): opaque scrolled header, compact landscape, bigger radios, 44px work links ===== */
:root{--hh:76px}
.hdr.sc,.menu-open .hdr{background:rgba(8,6,14,.9);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
.hdr{border-bottom:1px solid transparent}
html{scroll-padding-top:calc(var(--hh) + 20px)}[id]{scroll-margin-top:calc(var(--hh) + 20px)}
main>section:first-child:not(#hero),.ch:not(#hero) .pan{scroll-margin-top:calc(var(--hh) + 20px)}
main>.page:first-child,main>section.sub:first-child{padding-top:max(calc(var(--hh) + 24px),var(--pt,0px))}
@media(max-height:500px) and (orientation:landscape){:root{--hh:52px}.hdr{padding-top:6px;padding-bottom:6px;max-height:52px}.hdr #menu-btn{padding:6px 12px!important;min-height:40px}.hdr .logo img{width:28px;height:28px}main h1{margin-top:calc(var(--hh) + 8px)}}

.wz-card i{width:20px;height:20px}
.wz-card input[type=radio]+i{border-radius:50%;border:2px solid #fff8;background:transparent;box-shadow:none;transition:box-shadow .15s,border-color .15s}
.wz-card:has(input[type=radio]:checked) i{border-color:var(--acc);background:#0b0b12;box-shadow:inset 0 0 0 4px #0b0b12,inset 0 0 0 10px var(--acc),0 0 12px color-mix(in srgb,var(--acc) 60%,transparent)}

.at-foot .ind,.at-foot .cnt{opacity:0;pointer-events:none;transition:opacity .3s}

/* ===== buttons: one system (primary gradient keeps white text at 5.5:1 or better). .btn = primary (52px), .sec = glass/outline, .link = ghost/link, .sm = 44px ===== */
:root{--b-h:52px;--b-h-sm:44px;--b-r:14px;--b-pad:0 24px;--b-font:600 15px/1 Sora;--b-ring:0 0 0 2px #07070b,0 0 0 4px var(--acc)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--b-h);padding:var(--b-pad);border-radius:var(--b-r);font:var(--b-font);letter-spacing:.01em;white-space:nowrap;cursor:pointer;text-decoration:none;
 --b-bg:linear-gradient(180deg,color-mix(in srgb,var(--acc) var(--acc-k1),#000),color-mix(in srgb,var(--acc) var(--acc-k2),#000));color:var(--acc-ink);border:1px solid color-mix(in srgb,var(--acc) 60%,#fff 10%);background:var(--b-bg);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 20px -6px color-mix(in srgb,var(--acc) 70%,transparent);text-shadow:var(--acc-ts);
 transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 30px -6px color-mix(in srgb,var(--acc) 85%,transparent)}
.btn:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.btn:focus-visible{outline:0;box-shadow:var(--b-ring),0 6px 20px -6px color-mix(in srgb,var(--acc) 70%,transparent)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.sec{color:var(--tx);text-shadow:none;border-color:rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn.sec:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px -10px color-mix(in srgb,var(--acc) 60%,transparent)}
.btn.sec:focus-visible{box-shadow:var(--b-ring)}
.btn.link{color:var(--tx);text-shadow:none;background:none;border-color:transparent;box-shadow:none;padding:0 6px}
.btn.link:hover{color:#fff;transform:none;box-shadow:none;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--acc)}
.btn.link:focus-visible{box-shadow:var(--b-ring)}
.btn.sm{min-height:var(--b-h-sm);padding:0 18px;font-size:14px}
@media(max-width:600px){.ctl .btn{display:none}}
@media(max-width:760px){main .wrap a:not(.btn):not(.logo){min-height:44px;display:inline-flex;align-items:center}}
@media(prefers-reduced-motion:reduce){.btn,.glass{transition:none!important}.btn:hover,a.glass:hover{transform:none}}
/* sticky mobile CTA bar (< 1024px), like ace.mcv.tech: always docked, safe-area aware, body padded so content isn't covered */
#dock{display:none}
@media(max-width:1023px){#dock{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(9,7,16,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -12px 30px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .3s var(--ease)}
 #dock.on{transform:none}#dock .btn{min-height:var(--b-h)}#dock .btn.sec{flex:0 0 auto;padding:0 18px}#dock .btn:not(.sec){flex:1}
 body.has-dock{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#dock{transition:none}}
.ctl a.btn{width:auto;height:auto;border-radius:var(--b-r);background:var(--b-bg);color:var(--acc-ink)}

/* ===== 100k pass: 8pt rhythm, one type scale, section headers, cards, icons, focus, reveal ===== */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;--sec:clamp(80px,10vw,128px);
 --t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:clamp(20px,1.6vw,24px);--h3:clamp(18px,1.4vw,20px);--h2:clamp(30px,3.6vw,52px);--h1:clamp(40px,6vw,88px);
 --card-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));--card-bd:rgba(255,255,255,.075);--card-in:inset 0 1px 0 rgba(255,255,255,.07)}
body{font-size:var(--t-md);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{font-size:var(--h1);letter-spacing:-.005em;line-height:1.02}
h2{font-size:var(--h2);letter-spacing:0;line-height:1.08;margin-bottom:var(--s3)}
h3{font:600 var(--h3)/1.3 Sora;letter-spacing:-.005em;margin-bottom:var(--s1)}
.tag{font:600 var(--t-xs)/1 Sora;letter-spacing:.2em;margin-bottom:var(--s3)}
.mut{color:#a3a8b8}p.mut,.glass p{line-height:1.65}
/* section rhythm: every content section on the 8pt grid, one vertical step */
main>section:not(.lhero):not(.ch):not(.sp){padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}
main>section h2+p.mut,main>section h2+.mut{font-size:var(--t-lg);margin-top:calc(-1*var(--s1));margin-bottom:var(--s5);max-width:60ch}
.grid.st{gap:var(--s2)}
/* cards: hairline border, inner top light, soft accent wash; hover lifts with depth, no glow blast */
.glass{position:relative;isolation:isolate;background:var(--card-bg);border:1px solid var(--card-bd);border-radius:20px;box-shadow:var(--card-in),0 1px 2px rgba(0,0,0,.4),0 24px 48px -32px rgba(0,0,0,.8);padding:var(--s4)}
.glass:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 60%);opacity:.9}
.pan.glass{background:linear-gradient(180deg,rgba(16,13,26,.82),rgba(9,8,15,.72))}
.glass,a.glass{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
a.glass:hover,.grid.st>.glass:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 38%,rgba(255,255,255,.1));box-shadow:var(--card-in),0 1px 2px rgba(0,0,0,.4),0 32px 64px -28px color-mix(in srgb,var(--acc) 35%,rgba(0,0,0,.9))}
.glass h3{margin-bottom:var(--s1)}.glass .tag{margin-bottom:var(--s2)}
/* icons / dots: one treatment, accent chip with a soft ring */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent),0 0 12px color-mix(in srgb,var(--acc) 60%,transparent)}
/* focus: one ring everywhere */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
a:not(.btn):not(.glass):hover{color:#fff}
footer a{transition:color .2s}
/* reveal: subtle eased fade-up, only when JS opts in and motion is allowed */
.rv-on .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}
/* footer: brand + two link columns */
footer .grid{grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
footer b{margin-bottom:var(--s2);font:600 var(--t-xs)/1 Sora;letter-spacing:.2em;color:#cfd2dc}
footer .fine{margin-top:var(--s6);padding-top:var(--s3)}
@media(max-width:760px){
 :root{--sec:72px}
 .wrap{width:auto;margin:0 20px}
 .glass{padding:var(--s3);border-radius:16px}
 h2{margin-bottom:var(--s2)}
 main>section h2+p.mut{font-size:var(--t-md);margin-bottom:var(--s4)}
 footer .grid{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s2)}footer .grid>:last-child{grid-column:auto}footer .grid>:first-child{grid-column:1/-1}
}
footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:0}footer nav a{display:block;padding:8px 0;min-height:0;line-height:1.5}
footer .grid>:last-child b{flex-basis:auto}footer p.wrap.fine{width:min(1240px,90vw);margin-left:auto;margin-right:auto}
@media(max-width:760px){footer p.wrap.fine{width:auto;margin:var(--s5) 20px 0}}
footer .grid{grid-template-columns:1.3fr 1fr 1fr}@media(max-width:760px){footer .grid{grid-template-columns:1fr 1fr}}
footer p.wrap.fine{max-width:none}
/* layer heroes: the art follows pointer / drag a few px (parallax "orbit", layer.js sets --mx/--my), and dragging never selects the heading */
.lhero{user-select:none;-webkit-user-select:none;background-position:0 0,0 0,calc(70% + var(--mx,0)*28px) calc(50% + var(--my,0)*18px);transition:background-position .6s var(--ease)}
.lhero a,.lhero p{user-select:text}
@media(max-width:760px){.lhero{background-position:0 0,calc(60% + var(--mx,0)*20px) calc(0% + var(--my,0)*12px)}}
/* Iris 5 */
.end .cnt,.end .ind{opacity:0;pointer-events:none;transition:opacity .3s}
.skip,.hdr .logo,.cl a,footer nav a{min-height:44px;display:inline-flex;align-items:center}
footer nav a{display:flex}
#hero .pan .btn+.btn,.lhero .btn+.btn{margin-left:12px}
@media(max-width:760px){#hero .pan .btn+.btn,.lhero .btn+.btn{margin-left:0;margin-top:12px}}
.nogl #hero{min-height:auto;padding:120px 0 64px}
/* the hidden attribute always wins over component display rules (.btn, .notice, flex rows) */
[hidden]{display:none!important}