/* ===== LIT App luxe layer. Loads after site.css; adds the premium utilities, components and motion hooks shared by every page.
   Tokens live on :root in site.css (colours, radii, durations, fonts). This file adds: type scale, spacing, glass/grain/glow utilities,
   button and card variants, section scaffolds, scroll-scene hooks (--p), badges, accordion, forms, marquee variants, kinetic type.
   JS hooks (public/js/motion.js) are data-attributes; everything degrades to static without JS. See docs/MOTION_API.md. ===== */

/* ---------- tokens: type scale + spacing ---------- */
:root{
  --t-display:clamp(3rem,8.2vw,7rem);--t-h1:clamp(2.6rem,6vw,4.8rem);--t-h2:clamp(2rem,4.4vw,3.4rem);--t-h3:clamp(1.4rem,2.6vw,2.1rem);
  --t-h4:clamp(1.1rem,1.6vw,1.3rem);--t-lead:clamp(1.08rem,1.6vw,1.3rem);--t-body:1rem;--t-small:.875rem;--t-xs:.75rem;--t-eyebrow:.7rem;
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;
  --glass-blur:16px;--glass-bd:rgba(255,255,255,.10);--glass-hi-2:rgba(255,255,255,.14);
  --glow-1:0 0 40px -12px var(--gold-glow);--glow-2:0 0 90px -24px var(--gold-glow);--glow-3:0 0 160px -40px var(--gold-glow);
  --ring:0 0 0 1px var(--gold-line);
  --p:0;--scroll:0;--mx:50vw;--my:30vh;
}
:root:not([data-theme=dark]){--glass-bd:rgba(40,30,10,.12);--glass-hi-2:rgba(255,255,255,.95)}

/* ---------- type ---------- */
.t-display{font:700 var(--t-display)/.96 var(--ff-h);letter-spacing:-.05em}
.t-h1{font:700 var(--t-h1)/1 var(--ff-h);letter-spacing:-.045em}
.t-h2{font:600 var(--t-h2)/1.06 var(--ff-h);letter-spacing:-.035em}
.t-h3{font:600 var(--t-h3)/1.15 var(--ff-h);letter-spacing:-.03em}
.t-h4{font:600 var(--t-h4)/1.25 var(--ff-h);letter-spacing:-.015em}
.t-lead{font-size:var(--t-lead);line-height:1.55;color:var(--muted)}
.t-small{font-size:var(--t-small)}.t-xs{font-size:var(--t-xs)}
.t-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.t-up{letter-spacing:.18em;text-transform:uppercase;font:600 var(--t-eyebrow)/1 var(--ff-h)}
.t-balance{text-wrap:balance}.t-c{text-align:center}
.grad-2{background:linear-gradient(180deg,var(--fg) 0%,color-mix(in srgb,var(--fg) 55%,var(--g1)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-anim{background:var(--trif);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite;padding-right:.04em}
.glow-text{text-shadow:0 0 28px var(--gold-glow)}
.outline-text{-webkit-text-stroke:1px var(--gold-line);color:transparent}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0}
.rule-gold{height:1px;background:linear-gradient(90deg,transparent,var(--g2),transparent);border:0;opacity:.6}

/* ---------- surfaces: glass, grain, glow, gradient borders ---------- */
.glass-2{background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:saturate(1.4) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(1.4) blur(var(--glass-blur));border:1px solid var(--glass-bd);box-shadow:var(--sh-1)}
.glass-card{position:relative;border-radius:var(--r-3);background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-bd);box-shadow:var(--sh-2);overflow:hidden}
.glass-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,var(--glass-hi-2) 0%,transparent 38%);opacity:.35}
.glass-card>*{position:relative}
.grad-border{position:relative;isolation:isolate}
.grad-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--trif);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--gb-a,.55);pointer-events:none;z-index:1}
.grad-border.soft{--gb-a:.3}
.glow{box-shadow:var(--glow-1)}.glow-2{box-shadow:var(--glow-2)}.glow-3{box-shadow:var(--glow-3)}
.ring{box-shadow:var(--ring)}
.halo{position:relative}
.halo::after{content:"";position:absolute;left:50%;top:50%;width:min(120%,900px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--gold-glow),transparent 70%);filter:blur(40px);opacity:var(--halo-a,.45);z-index:-1;pointer-events:none}
.noise{position:relative}
.noise::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);transform:translateX(-70%) rotate(8deg);animation:shine 5.5s var(--io) infinite;pointer-events:none}
@keyframes shine{0%,55%{transform:translateX(-70%) rotate(8deg)}80%,100%{transform:translateX(70%) rotate(8deg)}}
.frame{position:relative;border-radius:var(--r-3);padding:6px;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--line-2);box-shadow:var(--sh-2),var(--glow-2)}
.frame>img,.frame>video,.frame>canvas,.frame>.inner{border-radius:calc(var(--r-3) - 6px);overflow:hidden}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 35%)}
.spot-card{position:relative;overflow:hidden}
.spot-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--d3);background:radial-gradient(360px 220px at var(--px,50%) var(--py,0%),rgba(255,215,0,.12),transparent 60%)}
@media(hover:hover){.spot-card:hover::after{opacity:1}}

/* ---------- buttons ---------- */
.btn-shine{overflow:hidden}
.btn-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%);animation:btnshine 4.5s var(--io) infinite}
@keyframes btnshine{0%,60%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.btn-grad{color:var(--fg);background:var(--glass);border:1px solid transparent;background-clip:padding-box}
.btn-grad::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--trif);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;z-index:-1}
.btn-dark{background:var(--fg);color:var(--bg)}
.btn-icon{width:46px;min-width:46px;padding:0;border-radius:50%}
.btn-xl{min-height:60px;font-size:1.08rem;padding:1rem 2rem}
.btn-block{width:100%}
@media(hover:hover){.btn-grad:hover{background:var(--gold-dim)}.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(0,0,0,.6)}}
.btn[aria-busy=true]{pointer-events:none;color:transparent}
.btn[aria-busy=true]::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;color:var(--on-gold);animation:spin 1s linear infinite}
.btn-ghost[aria-busy=true]::before{color:var(--fg)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta-row .fine{flex-basis:100%;color:var(--dim);font-size:.82rem}

/* ---------- cards: tilt + hover ---------- */
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform var(--d2) var(--ease),box-shadow var(--d3),border-color var(--d3);transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{border-color:var(--gold-line);box-shadow:var(--sh-2),var(--glow-2)}
[data-tilt] .lift{transform:translateZ(var(--lift,30px))}
.card.sm{padding:1.1rem 1.2rem;border-radius:var(--r-2)}
.card.flat{box-shadow:none}
.card.dark{background:#0B0A09;color:#F6F2E9;border-color:rgba(255,255,255,.1)}
.card.gold{background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--card) 80%,var(--g2) 10%));border-color:var(--gold-line)}
.card .kicker{font:600 .72rem/1 var(--ff-h);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin-bottom:.7rem}
.card .foot{margin-top:auto;padding-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---------- section scaffolds ---------- */
.split{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.l{grid-template-columns:.9fr 1.1fr}.split.r{grid-template-columns:1.1fr .9fr}.split.flip>:first-child{order:2}}
.grid-2,.grid-3,.grid-4{display:grid;gap:1rem}
@media(min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.stack{display:grid;gap:var(--gap,1rem)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap,1rem);align-items:center}
.sec.first{padding-top:clamp(2rem,5vw,3.5rem)}
.sec.dark{background:#070605;color:#F6F2E9;--muted:#A79F91;--card:#12110E;--line:rgba(255,255,255,.08)}
.sec.band{background:var(--trif);color:var(--on-gold)}
.sec.band .muted,.sec.band h2,.sec.band p{color:var(--on-gold)}
.sec-h .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:1.2rem;color:var(--muted);font-size:.9rem}
.stat{display:grid;gap:.3rem}
.stat b{font:700 clamp(2rem,4.5vw,3.2rem)/1 var(--ff-h);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:var(--trif);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.92rem}
.stats{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.avs{display:flex}
.avs i{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);margin-left:-10px;background:linear-gradient(135deg,var(--g1),var(--g2))}
.avs i:first-child{margin-left:0}
.avs i:nth-child(2n){background:linear-gradient(135deg,#E9D5B4,#8E6A4B)}.avs i:nth-child(3n){background:linear-gradient(135deg,#A9C4D6,#3F5F7C)}

/* ---------- scroll scenes: a pinned stage whose progress is --p (0..1), set by motion.js ---------- */
[data-scene]{position:relative;height:var(--scene-h,300vh)}
[data-scene] .pin{position:sticky;top:var(--hdr);height:calc(100dvh - var(--hdr));display:grid;place-items:center;overflow:clip}
.p-fade{opacity:var(--p)}
.p-fade-out{opacity:calc(1 - var(--p))}
.p-rise{transform:translateY(calc((1 - var(--p))*60px));opacity:var(--p)}
.p-scale{transform:scale(calc(.85 + var(--p)*.15))}
.p-x{transform:translateX(calc((var(--p) - .5)*var(--px-d,200px)))}
.p-rot{transform:rotate(calc((var(--p) - .5)*var(--rot-d,20deg)))}
.p-blur{filter:blur(calc((1 - var(--p))*12px))}
.p-bar{transform:scaleX(var(--p));transform-origin:left}
.p-step{opacity:.35;transition:opacity var(--d3)}
.p-step.on{opacity:1}
.scene-dots{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:grid;gap:.5rem}
.scene-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background var(--d2),transform var(--d2)}
.scene-dots i.on{background:var(--g2);transform:scale(1.4);box-shadow:0 0 10px var(--g2)}
.hprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--trif);transform:scaleX(var(--scroll));transform-origin:left;opacity:0;transition:opacity var(--d3)}
.site-h.cond .hprog{opacity:1}
.parallax{transform:translateY(calc(var(--scroll)*var(--par,-60px)));will-change:transform}

/* ---------- reveal variants (motion.js adds .in) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease),filter var(--d4) var(--ease);transition-delay:calc(var(--i,0)*var(--stagger,80ms) + var(--delay,0ms))}
.js [data-reveal=left]{transform:translateX(-32px)}
.js [data-reveal=right]{transform:translateX(32px)}
.js [data-reveal=scale]{transform:scale(.92)}
.js [data-reveal=blur]{filter:blur(10px);transform:none}
.js [data-reveal=clip]{clip-path:inset(0 0 100% 0);transform:none;transition-property:clip-path,opacity}
.js [data-reveal].in{opacity:1;transform:none;filter:none;clip-path:inset(0)}
.js [data-reveal-group]>*{opacity:0;transform:translateY(18px);transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease);transition-delay:calc(var(--i,0)*var(--stagger,70ms))}
.js [data-reveal-group].in>*{opacity:1;transform:none}

/* ---------- kinetic type (motion.js splits [data-kinetic] into .w>span; .kin rules live in site.css) ---------- */
.kin.wait .w>span{animation-play-state:paused}
.kin.in .w>span{animation-play-state:running}
.kin.chars .w>span{animation-duration:.7s;animation-delay:calc(var(--i,0)*28ms + 60ms)}
.kin.lines .w>span{animation-delay:calc(var(--i,0)*140ms + 80ms)}
.kin.fade .w>span{transform:none;opacity:0;animation-name:wfade}
@keyframes wfade{to{opacity:1}}
.kin.blur .w>span{transform:none;opacity:0;filter:blur(12px);animation-name:wblur}
@keyframes wblur{to{opacity:1;filter:none}}
.ticker{display:inline-grid;overflow:hidden;height:1.1em;line-height:1.1;vertical-align:bottom}
.ticker>span{grid-area:1/1;transition:transform var(--d4) var(--ease),opacity var(--d4)}
.ticker>span:not(.on){transform:translateY(100%);opacity:0}
.ticker>span.out{transform:translateY(-100%);opacity:0}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--pill);font:600 .74rem/1 var(--ff-h);letter-spacing:.04em;border:1px solid var(--line-2);background:var(--glass);color:var(--muted);white-space:nowrap}
.badge-gold{border-color:var(--gold-line);background:var(--gold-dim);color:var(--gold-text)}
.badge-solid{border-color:transparent;background:var(--cta);color:var(--on-gold)}
.badge-ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.badge-bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.badge-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.badge-live::before{animation:pulse 2.4s infinite}
.badge-new{text-transform:uppercase;letter-spacing:.12em}

/* ---------- accordion (shares the .faq look; .acc is the generic alias) ---------- */
.acc{display:grid;gap:.7rem}
.acc details{border:1px solid var(--line);border-radius:var(--r-2);background:var(--card);padding:0 1.25rem;transition:border-color var(--d2),background-color var(--d2)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;cursor:pointer;font:600 1.02rem var(--ff-h);padding-block:.6rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--gold-line);background:var(--gold-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23F5B331' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/50% no-repeat;transition:transform var(--d3) var(--ease)}
:root:not([data-theme=dark]) .acc summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%238A5300' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc details[open]{border-color:var(--gold-line)}
.acc details>:not(summary){padding-bottom:1.2rem;color:var(--muted);animation:rise .4s var(--ease)}
.acc.ghost details{background:transparent;border-color:transparent;border-bottom-color:var(--line);border-radius:0;padding:0}
.acc.ghost details[open]{border-color:transparent;border-bottom-color:var(--gold-line)}

/* ---------- forms ---------- */
.field{display:grid;gap:.45rem}
.field>label,.label{font:600 .85rem var(--ff-h);color:var(--fg)}
.field .help{color:var(--dim);font-size:.82rem}
.field .err{color:var(--bad);font-size:.82rem;display:none}
.field.invalid .err{display:block}
.field.invalid :is(.input,.select,.textarea){border-color:var(--bad)}
.input,.select,.textarea{width:100%;min-height:48px;padding:.7rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--glass);color:var(--fg);font:inherit;transition:border-color var(--d2),box-shadow var(--d2),background-color var(--d2);-webkit-appearance:none;appearance:none}
.textarea{min-height:120px;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A79F91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:18px;padding-right:2.6rem}
:is(.input,.select,.textarea)::placeholder{color:var(--dim)}
:is(.input,.select,.textarea):focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 4px var(--gold-dim),var(--glow-1)}
:is(.input,.select,.textarea):disabled{opacity:.5;cursor:not-allowed}
.input-wrap{position:relative;display:grid}
.input-wrap svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;pointer-events:none}
.input-wrap .input{padding-left:2.7rem}
.input-wrap .suffix{position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}
.check,.radio{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.95rem;color:var(--fg)}
.check input,.radio input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:.1rem;border:1px solid var(--line-2);border-radius:6px;background:var(--glass);display:grid;place-items:center;transition:background-color var(--d2),border-color var(--d2)}
.radio input{border-radius:50%}
.check input::after{content:"";width:11px;height:6px;border-left:2px solid var(--on-gold);border-bottom:2px solid var(--on-gold);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform var(--d2) var(--ease)}
.radio input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-gold);transform:scale(0);transition:transform var(--d2) var(--ease)}
:is(.check,.radio) input:checked{background:var(--cta);border-color:transparent}
:is(.check,.radio) input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.radio input:checked::after{transform:scale(1)}
:is(.check,.radio) input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.switch{position:relative;display:inline-flex;align-items:center;gap:.7rem;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:99px;background:var(--track);border:1px solid var(--line-2);position:relative;transition:background-color var(--d2);flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--fg);transition:transform var(--d2) var(--ease),background-color var(--d2)}
.switch input:checked{background:var(--g2);border-color:transparent}
.switch input:checked::after{transform:translateX(18px);background:var(--on-gold)}
.switch input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form{display:grid;gap:1.1rem}
.form-row{display:grid;gap:1.1rem}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form .actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.form .ok-msg{display:none;padding:.9rem 1rem;border-radius:var(--r-2);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.form.sent .ok-msg{display:block;animation:rise .4s var(--ease)}
.pill-group{display:inline-flex;flex-wrap:wrap;gap:.4rem}
.pill-group input{position:absolute;opacity:0;pointer-events:none}
.pill-group label{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--glass);font:500 .88rem var(--ff-h);color:var(--muted);cursor:pointer;transition:all var(--d2)}
.pill-group input:checked+label{color:var(--gold-text);background:var(--gold-dim);border-color:var(--gold-line)}
.pill-group input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- marquee variants (base .marq in site.css) ---------- */
.marq.rev ul{animation-direction:reverse}
.marq.slow ul{animation-duration:70s}.marq.fast ul{animation-duration:24s}
.marq.logos li{color:var(--muted);font-size:1rem;gap:2.2rem;opacity:.8}
.marq.logos li::after{background:var(--line-2);box-shadow:none}
.marq.cards{padding-block:.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq.cards ul{gap:1rem;animation-duration:60s}
.marq.cards li{font:inherit;letter-spacing:0;color:inherit;gap:0}
.marq.cards li::after{display:none}
.marq.v{height:var(--marq-h,320px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.marq.v ul{flex-direction:column;width:auto;height:max-content;animation-name:mqv}
@keyframes mqv{to{transform:translate3d(0,-50%,0)}}

/* ---------- nav extras ---------- */
.site-h .hbar{position:relative}
.brand .lockup{display:inline-flex;align-items:center;gap:.5rem;line-height:1}
.brand .lockup b,.brand .lockup i{line-height:1;display:block}
@media(max-width:480px){.brand .lockup i{display:block;font-size:10px;padding:.26rem .5rem}.brand .lockup b{font-size:1.05rem}}
.brand .lockup b{background:linear-gradient(180deg,var(--fg),color-mix(in srgb,var(--fg) 70%,var(--g1)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hact .start.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,var(--glow-1)}
.main a{overflow:hidden}
.main a::before{content:"";position:absolute;inset:auto .9rem 8px;height:1px;background:var(--trif);transform:scaleX(0);transform-origin:right;transition:transform var(--d3) var(--ease)}
@media(hover:hover){.main a:hover::before{transform:scaleX(1);transform-origin:left}}
@media(max-width:880px){.main a::before{display:none}.js .main.open a{animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}}

/* page-transition fallback (motion.js adds html.leaving when View Transitions are unsupported) */
html.leaving body{opacity:0;transition:opacity .16s ease}

/* ---------- media / canvas ---------- */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-gl canvas{width:100%;height:100%;display:block;mix-blend-mode:screen}
:root[data-theme="light"] .hero-gl canvas{mix-blend-mode:normal}
.hero-gl.behind{z-index:-1}
.media-pause{transition:opacity var(--d3)}
video[data-pause]{object-fit:cover}

/* ---------- utilities ---------- */
.hit{position:relative}
.hit::after{content:"";position:absolute;inset:-8px}
.ar-16{aspect-ratio:16/9}.ar-4{aspect-ratio:4/3}.ar-1{aspect-ratio:1}
.ov-clip{overflow:clip}
.z1{position:relative;z-index:1}
.mt0{margin-top:0}.mt1{margin-top:var(--s-4)}.mt2{margin-top:var(--s-6)}.mt3{margin-top:var(--s-7)}.mb1{margin-bottom:var(--s-4)}.mb2{margin-bottom:var(--s-6)}
.mx{margin-inline:auto}.maxw{max-width:var(--maxw,60ch)}
.hide-m{display:none}@media(min-width:640px){.hide-m{display:revert}}
@media(max-width:639px){.hide-d{display:none}}

/* ---------- reduced motion: luxe layer goes still ---------- */
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-group]>*{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .kin.wait .w>span,.kin .w>span{animation:none;transform:none;opacity:1;filter:none}
  .shine::after,.btn-shine::after,.grad-anim,.marq ul{animation:none}
  .parallax{transform:none}
  .p-rise,.p-fade,.p-fade-out,.p-scale,.p-x,.p-rot,.p-blur{opacity:1;transform:none;filter:none}
  [data-tilt]{transform:none!important}
  .hero-gl{display:none}
  .ticker>span{transition:none}
}
@media(forced-colors:active){.grad-2,.grad-anim,.stat b,.brand .lockup b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:CanvasText}.badge,.input,.select,.textarea{border-color:CanvasText}}

/* header/subnav stack fix */
.site-h.cond{background:rgb(250,250,247);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
:root[data-theme=dark] .site-h.cond{background:rgb(10,10,10)}
.site-h.cond+main .subnav,.cond~main .subnav{top:59px}
.subnav{background:rgb(250,250,247)}
:root[data-theme=dark] .subnav{background:rgb(10,10,10)}
main section[id],main [id].pscene,main [id].sec{scroll-margin-top:140px}
main:has(.subnav) section.sec[id]{padding-top:calc(clamp(4rem,9vw,8rem) + 24px)}
.subnav{position:sticky}
.subnav::after{content:"";position:absolute;inset:0 0 0 auto;width:36px;pointer-events:none;background:linear-gradient(90deg,transparent,rgb(250,250,247));display:none}
:root[data-theme=dark] .subnav::after{background:linear-gradient(90deg,transparent,rgb(10,10,10))}
@media(max-width:700px){.subnav::after{display:block}}
@media(max-width:700px){.subnav .wrap{padding-block:.2rem}.subnav a{min-height:44px}}