/* Veto — landing. Shares the RJ·AJ token system. Swiss/minimal grid, dark first, light supported. */
:root{
  --bg:#070708; --panel:#0e0f12; --panel2:#131418; --line:#1c1d22; --line2:#282a31;
  --tx:#f2f1ee; --tx2:#a3a6ad; --tx3:#7d8089; --accent:#c3b4f7; --accent-ink:#0b0716; --glow:rgba(195,180,247,.14);
  --ok:#5fcf8f; --bad:#ff7a7a;
  --atlas:#5fcf8f; --bosla:#c9ab63; --sanad:#6cb6d6; --o24u:#c96b8e;
  --serif:'Instrument Serif',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --r:14px; --gap:2rem; --max:1180px; --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#f6f6f4; --panel:#ffffff; --panel2:#f1f1ee; --line:#e4e4df; --line2:#cfcfc8;
  --tx:#121213; --tx2:#4b4c50; --tx3:#6f7076; --accent:#5b3fd0; --accent-ink:#ffffff; --glow:rgba(91,63,208,.12);
  --ok:#1f8f4e; --bad:#c0392b; --atlas:#1f8f4e; --bosla:#8f7534; --sanad:#22738f; --o24u:#a0325e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;overflow-x:clip}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-inline:clamp(16px,4vw,40px)}
a{color:inherit}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.serif em{font-style:italic;color:var(--accent)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
h1,h2,h3{line-height:1.08;text-wrap:balance}
h2{font-size:clamp(30px,4vw,44px)}
h3{font-size:20px;font-weight:600;margin-bottom:10px;line-height:1.25}
p{max-width:64ch;text-wrap:pretty}
dd{text-wrap:pretty}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:16px}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 0;z-index:60}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){.progress{animation:progress linear both;animation-timeline:scroll(root)}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;margin-inline:calc(-1*clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.02em;font-size:18px;min-height:44px}
.mark svg{width:28px;height:28px}
.mark svg rect{fill:var(--tx)}
.mark svg path{fill:none;stroke:var(--bg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.top nav{display:flex;gap:26px}
.top nav a{text-decoration:none;color:var(--tx2);font-size:15px;font-weight:500;transition:color .2s}
.top nav a:hover{color:var(--tx)}
.top nav a.lab{color:var(--tx3)}
.top-right{display:flex;align-items:center;gap:12px}
.menu{display:none;width:44px;height:44px;place-content:center;gap:5px;background:transparent;border:1px solid var(--line2);border-radius:12px;cursor:pointer;padding:0}
.menu i{display:block;width:18px;height:2px;background:var(--tx);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.menu[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn .short{display:none}
@media (max-width:420px){.btn .long{display:none}.btn .short{display:inline}}
.theme{width:40px;height:24px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);position:relative;cursor:pointer;padding:0}
.theme::after{content:"";position:absolute;inset:-10px}
.theme i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--accent);transition:transform .3s var(--ease)}
:root[data-theme="light"] .theme i{transform:translateX(16px)}
@media (max-width:900px){
  .top nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);padding:6px 0 10px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .top nav.open{display:flex}
  .top nav a{padding:14px clamp(16px,4vw,40px);min-height:48px;display:flex;align-items:center;font-size:17px;border-top:1px solid var(--line)}
  .menu{display:inline-grid}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:14px 22px;font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;min-height:44px;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px var(--glow)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.btn.sm{padding:10px 16px;font-size:14px;min-height:44px;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:start;max-width:var(--max);margin:0 auto;padding-block:clamp(40px,8vh,96px) clamp(32px,6vh,64px);min-height:calc(100vh - 72px);min-height:calc(100dvh - 72px)}
.hero h1{font-size:clamp(38px,4.3vw,56px);line-height:1.1;margin:14px 0 18px;padding-bottom:.06em}
.hero h1 em{display:block}
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--tx2);max-width:58ch}
.lede.narrow{margin-bottom:28px}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr);min-height:0}.hero-copy,.gate{min-width:0}.gate{margin-top:8px}}

/* join form */
.join{margin-top:32px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.join-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:18px}
.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.join-grid>*{min-width:0}
.join-hd{flex-wrap:wrap;gap:6px 12px}
.fld>span{font-size:13px;font-weight:600;color:var(--tx2)}
.fld>span b{color:var(--accent);font-weight:600}
.fld input,.fld select{width:100%;max-width:100%;min-height:46px;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--tx);font:500 16px/1.3 var(--sans);transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld input::placeholder{color:var(--tx3)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.fld.bad input{border-color:var(--bad)}
.fld .err{display:none;color:var(--bad);font-size:13px}
.fld.bad .err{display:block}
.join-ft{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.help{text-transform:none;letter-spacing:0;font-size:12.5px;line-height:1.5;color:var(--tx3);max-width:36ch}
.join-log{padding:0 18px;line-height:1.9;text-transform:none;letter-spacing:.02em;white-space:pre-wrap;color:var(--tx3)}
.join-log:not(:empty){padding-bottom:14px}
.join-log em{color:var(--ok);font-style:normal}
.join-log .err{color:var(--bad)}
.join-done[hidden]{display:none}
.join-done{padding:22px 18px 24px;border-top:1px solid var(--line);display:grid;gap:12px}
.join-done .serif{font-size:30px;color:var(--accent)}
.join.sent .join-grid,.join.sent .join-log{display:none}
.cf-turnstile{min-height:0}
@media (max-width:560px){.join-grid{grid-template-columns:1fr}}

/* gate figure */
.gate{margin:0;min-width:0}
.gate svg{width:100%;height:auto;display:block}
.gate figcaption{margin-top:10px;text-align:center}
.lane path{stroke:var(--line2);stroke-width:2;fill:none;stroke-dasharray:4 6}
.node circle,.node rect{fill:var(--panel);stroke:var(--line2);stroke-width:1.5;transition:stroke .3s,fill .3s}
.node text{font:500 11px var(--mono);letter-spacing:.14em;fill:var(--tx3);text-anchor:middle}
.node text.sub{font-size:9.5px;letter-spacing:.02em;text-transform:none}
.node .glyph{fill:none;stroke:var(--tx2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.node.person .head,.node.person .body{fill:none;stroke:var(--accent);stroke-width:2}
.node.person .head{fill:var(--accent)}
.node.lit circle,.node.lit rect{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.node.lit text{fill:var(--tx)}
.pulse{opacity:0}
.stamp{opacity:0;transform-box:fill-box;transform-origin:center}
.stamp circle{fill:color-mix(in srgb,var(--panel) 88%,transparent);stroke:var(--accent);stroke-width:3}
.stamp text{font:600 16px var(--mono);letter-spacing:.3em;fill:var(--accent);text-anchor:middle}
.stamp.on{animation:stamp .6s var(--ease) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-12deg)}60%{opacity:1;transform:scale(.95) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.mono-svg{font:400 11px var(--mono);letter-spacing:.06em;fill:var(--tx2)}
.mono-svg.dim{fill:var(--tx3)}

/* strip */
.strip{max-width:var(--max);margin:0 auto;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px}
.strip ul{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;font-size:14px;color:var(--tx2)}
.strip li{display:flex;align-items:baseline;gap:8px}
.strip li b{color:var(--tx);font-weight:700;letter-spacing:.03em}

/* sections */
.sec{max-width:var(--max);margin:0 auto;padding-block:clamp(56px,9vh,110px)}
.sec-t{margin-bottom:clamp(28px,4vw,44px)}

/* problem: sticky heading beside the points */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);align-items:start}
.split>h2{position:sticky;top:112px}
.points article{padding:26px 0 30px;border-top:1px solid var(--line)}
.points article:first-child{border-top:0;padding-top:2px}
.points h3{font-size:22px}
.points p{color:var(--tx2)}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:18px}.split>h2{position:static}}

/* offers: one panel, a row per offer */
.offers{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.offer{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3.4fr);gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,36px);align-items:start}
.offer+.offer{border-top:1px solid var(--line)}
.offer-name{display:block;font-size:clamp(40px,4vw,52px);line-height:1;margin-bottom:12px}
.offer h3{font-size:19px;margin:0}
.offer p{color:var(--tx2);font-size:15.5px}
.offer dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.offer dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);padding-top:3px}
.offer dd{color:var(--tx2)}
@media (max-width:900px){.offer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.offer-hd{grid-column:1/-1}}
@media (max-width:560px){.offer{grid-template-columns:minmax(0,1fr)}}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{position:relative;padding:22px 0 0;border-top:1px solid var(--line2)}
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--accent)}
.steps li .mono{display:block;margin-bottom:12px;color:var(--accent)}
.steps p{color:var(--tx2);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* principles: large statements, no row rules */
.rules{list-style:none;display:grid;gap:clamp(22px,3vw,34px);max-width:880px}
.rules li{color:var(--tx2);font-size:17px;max-width:62ch}
.rules b{display:block;font-weight:400;font-size:clamp(26px,2.8vw,34px);line-height:1.1;color:var(--tx);margin-bottom:6px}

.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.proof-grid{grid-template-columns:1fr}}
.proof{display:grid;gap:8px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .25s,transform .25s var(--ease)}
.proof:hover{border-color:var(--accent);transform:translateY(-2px)}
.proof b{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em}
.proof span:last-child{color:var(--tx2);font-size:14.5px}

/* waitlist: one lead tile beside two smaller ones */
.bento{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.tile p{color:var(--tx2);font-size:15.5px}
.tile.lead{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:clamp(26px,3vw,40px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),color-mix(in srgb,var(--accent) 7%,var(--panel))}
.tile.lead h3{font-weight:400;font-size:clamp(34px,3.6vw,46px);line-height:1.05;margin-bottom:14px}
.tile.lead p{font-size:17px;max-width:44ch}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.tile.lead{grid-row:auto;min-height:0}}

.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--tx2);padding-bottom:22px}

.cta{max-width:var(--max);margin:0 auto;padding:clamp(56px,10vh,120px) 0 clamp(64px,10vh,120px);text-align:center;display:grid;justify-items:center;gap:18px}
.cta h2{font-size:clamp(34px,5vw,60px)}
.cta p{color:var(--tx2)}

.sticky{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,0);z-index:55;display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:opacity .3s,transform .3s var(--ease),visibility 0s;max-width:calc(100vw - 32px)}
.sticky[hidden]{display:flex;opacity:0;visibility:hidden;transform:translate(-50%,20px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s}
.sticky .mono,.sticky .btn{white-space:nowrap}
@media (max-width:560px){.sticky .mono{display:none}.sticky{padding:6px;gap:0}}

footer{max-width:var(--max);margin:0 auto;padding:22px 0 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--tx3);font-size:13.5px}
footer a{color:var(--tx2);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 0}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.proof,.theme i,.sticky{transition:none}
  .stamp.on{animation:none;opacity:1;transform:rotate(-12deg)}
  .pulse{display:none}
}

/* Hero glow: one static accent wash, shown only when the video is not allowed (reduced motion, data saver) */
.hero{position:relative}
.spots{position:absolute;top:-10%;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;z-index:-1;background:radial-gradient(50vw 40vw at 24% 16%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)}
:root[data-theme="light"] .spots{opacity:.6}

/* Spotlight cards — adapted from 21st.dev "Spotlight Card" (preetsuthar17): a radial glow that follows the cursor */
.glow{position:relative;overflow:hidden;--mx:50%;--my:50%;--glow-a:0}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--glow-a);transition:opacity .5s ease;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)}
.glow:hover::after,.glow:focus-within::after{--glow-a:1}
.glow>*{position:relative;z-index:1}
@media (hover:none){.glow::after{display:none}}

/* hero headline words (motion stagger) */
/* hero headline: words rise in once, on load. CSS only, so nothing flashes before a script runs; static under reduced motion */
.h1w{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .h1w{animation:word .7s var(--ease) both;animation-delay:calc(100ms + var(--i,0) * 60ms)}
  @keyframes word{from{opacity:0;transform:translateY(.35em)}}
}

/* try the gate */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.try{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;display:grid;gap:12px;min-width:0}
.try>*{min-width:0}
.chip{white-space:normal;max-width:100%}
.try-hd{display:flex;justify-content:space-between;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1.2 var(--sans);color:var(--tx2);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:11px 14px;cursor:pointer;min-height:44px;text-align:left;transition:color .2s,border-color .2s,background .2s}
.chip:hover,.chip.on{color:var(--tx);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}
.try-form{display:flex;gap:8px}
.try-form input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--tx);font:500 16px/1.3 var(--sans)}
.try-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.try-out{font-size:14px;color:var(--tx2);margin:0;max-width:none;min-height:1.5em}
.try-out b{color:var(--tx)}
.try-out .ok{color:var(--ok)}.try-out .hold{color:var(--bosla)}.try-out .no{color:var(--bad)}
.stamp text{font-size:14px}

/* older Safari without color-mix: flat fallbacks so nothing renders invisible */
@supports not (color: color-mix(in srgb, red, blue)){
  .top{background:rgba(7,7,8,.88)}
  :root[data-theme="light"] .top{background:rgba(246,246,244,.9)}
  .glow::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(195,180,247,.22),transparent 62%)}
  .node.lit circle,.node.lit rect{fill:#1b1830}
  .chip.on{background:#1b1830}
  .stamp circle{fill:rgba(14,15,18,.9)}
  .spots{background:radial-gradient(50vw 40vw at 24% 16%,rgba(195,180,247,.24),transparent 70%)}
  .tile.lead{background:#15131f;border-color:#3a3450}
  :root[data-theme="light"] .tile.lead{background:#f0edfb;border-color:#d6cff2}
}

/* hero video: ambient, behind the copy. Loaded only when allowed (see veto.js); the poster shows otherwise. */
.hero-video{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-2;overflow:hidden;pointer-events:none}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:0;transition:opacity 1.2s ease}
.hero-video.on video{opacity:.95}
.hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 42%,color-mix(in srgb,var(--bg) 50%,transparent) 70%,color-mix(in srgb,var(--bg) 40%,transparent) 100%),linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 78%,var(--bg) 100%)}
:root[data-theme="light"] .hero-video video{opacity:.35;filter:invert(1) hue-rotate(180deg) saturate(.8)}
.hero.has-video .spots{display:none}
@media (max-width:980px){
  .hero-video{width:100%;left:0;transform:none}
  .hero-video video{object-position:center 35%}
  .hero-video.on video{opacity:1}
  .hero-video::after{background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 18%,transparent) 26%,color-mix(in srgb,var(--bg) 42%,transparent) 60%,var(--bg) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero-video video{display:none}}
@supports not (color: color-mix(in srgb, red, blue)){@media (max-width:980px){.hero-video::after{background:linear-gradient(180deg,rgba(7,7,8,1) 0%,rgba(7,7,8,.18) 26%,rgba(7,7,8,.42) 60%,rgba(7,7,8,1) 100%)}}.hero-video::after{background:linear-gradient(90deg,rgba(7,7,8,1) 0%,rgba(7,7,8,.88) 42%,rgba(7,7,8,.55) 70%,rgba(7,7,8,.4) 100%),linear-gradient(180deg,rgba(7,7,8,1) 0%,transparent 18%,transparent 78%,rgba(7,7,8,1) 100%)}}