/* Self-hosted fonts, latin subset only (npm: @fontsource-variable/archivo,
   @fontsource/ibm-plex-mono). Written out by hand instead of importing the
   packages' CSS so only the latin files ship, and so the family names stay
   'Archivo' and 'IBM Plex Mono', which global.css already uses.
   Weights in use: Archivo 400/600/800 (one variable file), Plex Mono 400/600. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/_astro/archivo-latin-wght-normal.E0tuGl4L.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/_astro/ibm-plex-mono-latin-400-normal.DMJ8VG8y.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/_astro/ibm-plex-mono-latin-600-normal.BgSNZQsw.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  color-scheme:dark;
  --void:#08080A; --p1:#111116; --p2:#0C0C10; --p3:#191920;
  --ln:#26262E; --ln2:#494952;
  --sg:#FAE019; --sg-hi:#FFEC4D;
  --tx:#F4F4F5; --mu:#8F8F98; --dim:#7D7D87; --ghost:#35353D;
  --live:#FF2D2D;
  --max:1240px; --pad:clamp(20px,5vw,48px); --sec:clamp(44px,5.5vw,72px); --sub:clamp(30px,3.6vw,48px);
  --glow:rgba(250,224,25,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--void);color:var(--tx);font-family:Archivo,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}

body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0/100% 66px,
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/66px 100%,
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 9px),
    radial-gradient(120% 66% at 88% -8%, rgba(250,224,25,.085) 0%, transparent 56%),
    radial-gradient(90% 55% at 10% 62%, rgba(250,224,25,.03) 0%, transparent 58%),
    linear-gradient(180deg, rgba(8,8,11,.42) 0%, rgba(8,8,11,.62) 46%, rgba(6,6,9,.86) 100%),
    url("/images/bg-storm-2200.webp") center/cover no-repeat,
    linear-gradient(180deg,#0E0E13 0%,#0A0A0E 40%,#070709 100%)}
@media(max-width:900px){
  body::before{background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0/100% 66px,
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/66px 100%,
    radial-gradient(120% 66% at 88% -8%, rgba(250,224,25,.085) 0%, transparent 56%),
    linear-gradient(180deg, rgba(8,8,11,.45) 0%, rgba(8,8,11,.66) 46%, rgba(6,6,9,.88) 100%),
    url("/images/bg-storm-1400.webp") center/cover no-repeat,
    linear-gradient(180deg,#0E0E13 0%,#0A0A0E 40%,#070709 100%)}
}

body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode:overlay}
#main,.hdr,footer{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);width:100%}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{color:var(--sg)}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(30px,5vw,54px)}
h2{font-size:clamp(24px,3.8vw,42px)}
h3{font-size:clamp(16px,1.9vw,20px)}
.lead{color:var(--mu);font-size:clamp(14px,1.5vw,17px);max-width:58ch}
.skip{position:absolute;left:-9999px;background:var(--sg);color:var(--void);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--sg);outline-offset:3px}

section{padding-block:var(--sec);position:relative;overflow:visible}
.band{background:
  linear-gradient(180deg,transparent 0%,rgba(22,22,29,.5) 16%,rgba(22,22,29,.5) 84%,transparent 100%)}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 2%,rgba(250,224,25,.15) 18%,var(--sg) 50%,rgba(250,224,25,.15) 82%,transparent 98%);
  box-shadow:0 0 16px rgba(250,224,25,.35)}
.band::before{top:0}.band::after{bottom:0}
.split-mark{position:relative;height:0;display:flex;align-items:center;justify-content:center}
.split-mark::before{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,224,25,.42),transparent)}
.split-mark span{position:relative;width:9px;height:9px;background:var(--sg);transform:rotate(45deg);
  box-shadow:0 0 20px rgba(250,224,25,.9),0 0 44px rgba(250,224,25,.45)}
.glowspot{position:absolute;inset:0;pointer-events:none;z-index:-1}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.sec-head.sub{margin-top:var(--sub)}
.sec-head .fill{flex:1;height:1px;background:linear-gradient(90deg,rgba(250,224,25,.4),transparent)}

.hdr{position:sticky;top:0;z-index:100;transition:background .35s,border-color .35s,box-shadow .35s;
  border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(9,9,12,.9);backdrop-filter:blur(18px);border-bottom-color:var(--ln);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 1px 0 rgba(250,224,25,.1)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand img{height:17px;width:auto}
.nav{display:flex;align-items:center;gap:22px}
.nav a.mono{color:var(--dim);position:relative;transition:color .2s}
.nav a.mono::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--sg);
  box-shadow:0 0 12px var(--sg);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.nav a.mono:hover{color:var(--tx)}
.nav a.mono.active{color:var(--sg)}
.nav a.mono:hover::after,.nav a.mono.active::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:1px solid var(--ln);border-radius:6px;padding:9px 11px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--tx);margin:3px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;border-radius:7px;
  border:1px solid transparent;cursor:pointer;will-change:transform;
  transition:background .2s,color .2s,border-color .2s,transform .18s,box-shadow .25s}
.btn-primary{background:var(--sg);color:var(--void);font-weight:600;
  box-shadow:0 6px 20px rgba(250,224,25,.2)}
.btn-primary:hover{background:var(--sg-hi);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(250,224,25,.3)}
.btn-ghost{border-color:var(--ln2);color:var(--tx);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--sg);color:var(--sg);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 30px rgba(250,224,25,.16)}
.btn-sm{padding:9px 16px}

.hero{position:relative;height:clamp(430px,56vh,540px);display:flex;align-items:flex-end;overflow:visible;
  margin-top:-68px;padding-top:68px;background:transparent}
.hero-media{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 4%,rgba(0,0,0,.9) 11%,#000 18%,#000 34%,rgba(0,0,0,.94) 43%,rgba(0,0,0,.84) 51%,rgba(0,0,0,.7) 58%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.4) 70%,rgba(0,0,0,.27) 76%,rgba(0,0,0,.17) 81%,rgba(0,0,0,.09) 86%,rgba(0,0,0,.04) 90%,rgba(0,0,0,.015) 94%,transparent 97%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 4%,rgba(0,0,0,.9) 11%,#000 18%,#000 34%,rgba(0,0,0,.94) 43%,rgba(0,0,0,.84) 51%,rgba(0,0,0,.7) 58%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.4) 70%,rgba(0,0,0,.27) 76%,rgba(0,0,0,.17) 81%,rgba(0,0,0,.09) 86%,rgba(0,0,0,.04) 90%,rgba(0,0,0,.015) 94%,transparent 97%)}
.hero-img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 46%;
  filter:brightness(.56) saturate(1.08) contrast(1.03)}
.hero-video{opacity:0;transition:opacity 1s ease;pointer-events:none}
.hero-video.on{opacity:1}
.hero-grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 88%)}
.hero-scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.026) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 88%)}
.hero-side{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 96% at -6% 28%, rgba(8,8,11,.96) 0%, rgba(8,8,11,.88) 26%,
      rgba(8,8,11,.62) 46%, rgba(8,8,11,.3) 64%, rgba(8,8,11,.1) 78%, transparent 90%),
    linear-gradient(102deg, rgba(8,8,11,.5) 0%, rgba(8,8,11,.26) 34%, transparent 66%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.96) 18%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.35) 61%,rgba(0,0,0,.21) 69%,rgba(0,0,0,.11) 76%,rgba(0,0,0,.05) 83%,rgba(0,0,0,.015) 89%,transparent 94%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.96) 18%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.35) 61%,rgba(0,0,0,.21) 69%,rgba(0,0,0,.11) 76%,rgba(0,0,0,.05) 83%,rgba(0,0,0,.015) 89%,transparent 94%)}
.hero .wrap{position:relative;z-index:5;width:100%;padding-bottom:clamp(30px,5vh,50px)}
.hero-inner{max-width:640px}
.hero-mark{width:min(100%,360px);margin-block:14px 16px}
.hero-mark img{filter:drop-shadow(0 0 40px rgba(250,224,25,.35))}
.kicker{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.kicker .dash{width:clamp(24px,6vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--sg));box-shadow:0 0 10px rgba(250,224,25,.6)}
.kicker .dash.r{background:linear-gradient(90deg,var(--sg),transparent)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.card{background:linear-gradient(180deg,rgba(30,30,38,.62) 0%,rgba(12,12,17,.72) 100%);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.07);border-radius:14px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.55);
  transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s,border-color .38s}
.card:hover{border-color:rgba(250,224,25,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px rgba(0,0,0,.7), 0 0 28px rgba(250,224,25,.16)}

.hoverzone{padding:34px 24px;margin:-34px -24px;overflow:visible}
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.vc{display:block;overflow:visible}
.vc:hover{transform:translateY(-10px) scale(1.045);z-index:12}
.vc .sh{position:relative;aspect-ratio:9/16;background:rgba(25,25,32,.6);display:flex;align-items:center;
  justify-content:center;overflow:hidden;border-radius:11px 11px 0 0}
.vc .sh img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.vc:hover .sh img{transform:scale(1.09)}
.vc .ph{color:var(--ghost);font-size:22px}
.vc .rank{position:absolute;top:8px;left:9px;color:var(--sg);font-weight:600;font-size:10px;
  text-shadow:0 0 12px rgba(250,224,25,.7)}
.vc .vw{position:absolute;bottom:8px;right:8px;background:rgba(8,8,10,.86);color:#9A9AA2;
  padding:2px 6px;border-radius:4px;font-size:9px}
.vc .ttl{padding:11px 10px 0;font-size:12px;font-weight:600;line-height:1.35}
.vc .ago{padding:5px 10px 12px;color:var(--dim);font-size:10px}
.vc .sh{border-radius:11px 11px 0 0}

.feat{display:block}
.feat .under{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:22px}
.feat .under h3{margin:8px 0 0}
.fw{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;display:block;background:var(--p3);
  border:1px solid var(--ln);
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 26px rgba(250,224,25,.1);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.fw img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fw iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fw:hover{transform:translateY(-7px);border-color:rgba(250,224,25,.6);
  box-shadow:0 26px 64px rgba(0,0,0,.75), 0 0 40px rgba(250,224,25,.18)}
.fw:hover img{transform:scale(1.05)}
.feat h3{font-size:clamp(20px,2.8vw,32px)}
.feat .meta{color:var(--dim)}

.rkgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(8px,1.1vw,14px)}
.rkc{padding:20px 8px 15px;text-align:center;cursor:default}
.rkc:hover{transform:scale(1.22) translateY(-10px);z-index:25}
.rkc img{width:clamp(34px,4.4vw,52px);margin:0 auto 12px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));transition:filter .38s,transform .38s cubic-bezier(.22,1,.36,1)}
.rkc:hover img{filter:drop-shadow(0 0 14px rgba(250,224,25,.55));transform:translateY(-2px)}
.rkc .nm{font-size:11.5px;font-weight:700;line-height:1.25}
.rkc .dur{color:var(--dim);font-size:9px;margin-top:5px;display:block}
.rkc:hover .dur{color:var(--sg)}

.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.tier{padding:26px 22px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.tier:hover{transform:translateY(-8px)}
.tier[aria-pressed=true]{border-color:var(--sg);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 26px 66px rgba(0,0,0,.8), 0 0 66px rgba(250,224,25,.26)}
.tier[aria-pressed=true] .tno{color:var(--sg)}
.tier .price{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.04em;margin-top:10px}
.tier .price small{font-size:13px;color:var(--mu);font-weight:400;letter-spacing:0}
.tier h3{margin:10px 0 12px}
.tier ul{list-style:none;color:var(--mu);font-size:13px;line-height:1.95}
.tier li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--sg);
  border-radius:50%;margin-right:9px;vertical-align:middle;opacity:.75}

/* about: portrait floats left, the bio wraps around it */
#about .sec-title{margin-bottom:26px}
.about-body{display:flow-root}
.about-body .portrait{float:left;width:300px;aspect-ratio:1/1;height:auto;object-fit:cover;margin:6px 40px 22px 0;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 56px rgba(0,0,0,.7), 0 0 34px rgba(250,224,25,.12)}
.about-body p:last-child{margin-bottom:0}
@media(max-width:900px){ .about-body .portrait{width:260px;margin-right:28px} }
@media(max-width:700px){ .about-body .portrait{float:none;display:block;width:100%;margin:0 0 24px} }
.prose p{color:var(--mu);margin-bottom:17px}
.prose p strong{color:var(--tx);font-weight:600}
.note{border-left:2px solid var(--sg);padding:12px 0 12px 18px;color:var(--mu);font-size:14px;
  box-shadow:-10px 0 30px -18px var(--sg)}

.rows{border-top:1px solid var(--ln)}
.row{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;gap:clamp(12px,2vw,28px);
  align-items:baseline;padding:6px 0;border-bottom:1px solid var(--ln);transition:border-color .25s,background .25s}
.row:hover{border-bottom-color:rgba(250,224,25,.4);background:rgba(250,224,25,.02)}
.row .k{color:var(--sg)}
.row .v2{font-weight:600;line-height:1.4}
.row .n2{color:var(--dim);font-size:12.5px;margin-top:2px;line-height:1.45}
.row .tag{color:var(--dim);white-space:nowrap}

.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.offer{padding:26px 22px}
.offer:hover{transform:translateY(-8px)}
.offer h3{margin:10px 0 9px}
.offer p{color:var(--mu);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.stat{padding:22px 18px}
.stat .n{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--sg);letter-spacing:-.03em;
  text-shadow:0 0 26px rgba(250,224,25,.35)}
.stat .l{color:var(--mu);margin-top:4px}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:none}
.form .wide{grid-column:1/-1}
.form button{grid-column:1/-1;justify-self:start;min-width:220px}
@media(max-width:620px){ .form{grid-template-columns:1fr} }
.field label{display:block;margin-bottom:7px;color:var(--mu)}
.field input,.field textarea,.field select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--ln);
  border-radius:9px;color:var(--tx);padding:13px 14px;font-family:inherit;font-size:15px;
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--sg);outline:none;
  box-shadow:0 0 0 3px rgba(250,224,25,.1),0 0 30px rgba(250,224,25,.12)}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--sg) 50%),linear-gradient(135deg,var(--sg) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:#14141A;color:var(--tx)}
.field input::placeholder,.field textarea::placeholder{color:#55555E}
.hp{position:absolute;left:-9999px}

.social-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.sc{width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg,rgba(30,30,38,.6),rgba(12,12,17,.7));
  backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#75757F;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  transition:color .28s,border-color .28s,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.sc:hover{color:var(--sg);border-color:var(--sg);transform:translateY(-7px) scale(1.08);
  box-shadow:0 14px 32px rgba(0,0,0,.6),0 0 24px rgba(250,224,25,.24)}
.sc svg{width:19px;height:19px;fill:currentColor}

footer{padding-block:34px;border-top:1px solid rgba(250,224,25,.08)}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
footer .wrap > :last-child{justify-self:end}
footer .mono{color:var(--dim)}
footer a.mono{text-decoration:none;transition:color .2s}
footer a.mono:hover,footer a.mono:focus-visible{color:var(--sg)}
@media(max-width:700px){
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  footer .wrap > :last-child{justify-self:center}
}

/* the wipe runs as an animation, so once it ends the clip-path is gone entirely
   and nothing hovering outward can ever be cut by it */
.reveal.pre{clip-path:inset(0 100% 0 0);opacity:0;transform:translateY(18px)}
.reveal.in{animation:wipe .85s cubic-bezier(.22,1,.36,1) backwards}
@keyframes wipe{
  from{clip-path:inset(0 100% 0 0);opacity:0;transform:translateY(18px)}
  to{clip-path:inset(0 0 0 0);opacity:1;transform:none}}

@media(max-width:900px){
  .feat .under{flex-direction:column;align-items:flex-start;gap:14px}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiers,.offers{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{grid-template-columns:1fr}
  .rkgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rkc:hover{transform:scale(1.1) translateY(-6px)}
  .vc:hover{transform:translateY(-6px) scale(1.02)}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(9,9,12,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--ln);
    padding:8px var(--pad) 20px;box-shadow:0 20px 50px rgba(0,0,0,.7)}
  .nav[hidden]{display:none}
  .nav a.mono{padding:14px 0;width:100%;border-bottom:1px solid var(--ln)}
  .nav .btn{margin-top:16px}
  .menu-btn{display:block}
  .hdr{background:rgba(9,9,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--ln)}
  .row{grid-template-columns:1fr;gap:4px}
  .row .tag{margin-top:6px}
  .band::before,.band::after{left:6%;right:6%}
}
@media(max-width:560px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail .vc:nth-child(n+5){display:none}
  .rkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btn{width:100%}
  .hero .cta{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.reveal.pre,.reveal.in{clip-path:none!important;opacity:1!important;transform:none!important;animation:none!important}
  .hero-video,.hero-scan{display:none}
}

.offers,.stats,.tiers,.rkgrid,.rail{overflow:visible}
section{overflow:visible}
.stat:hover,.offer:hover{transform:translateY(-8px) scale(1.03);z-index:12}
.stat{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}

/* ---------- HUD rail ---------- */
.hud{display:none;position:fixed;left:26px;top:50%;transform:translateY(-50%);width:186px;z-index:130;
  height:min(80vh,820px);padding:34px 0 34px 14px;flex-direction:column;justify-content:space-between;pointer-events:auto}
.hud::before{content:"";position:absolute;left:-70px;right:-40px;top:-70px;bottom:-70px;pointer-events:none;
  background:radial-gradient(52% 46% at 26% 50%,rgba(8,8,11,.7) 0%,rgba(8,8,11,.38) 46%,transparent 78%)}
.hud .frame{position:absolute;left:14px;top:14px;bottom:14px;width:166px;pointer-events:none}
.hud .frame i{position:absolute;width:11px;height:11px;border:1px solid rgba(250,224,25,.5);
  box-shadow:0 0 10px rgba(250,224,25,.3)}
.hud .frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud .frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud .frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud .frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.hud .tape{position:absolute;left:26px;top:44px;bottom:44px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(250,224,25,.28) 7%,rgba(250,224,25,.28) 93%,transparent)}
.hud .ticks{position:absolute;left:19px;top:44px;bottom:44px;width:13px;
  background:repeating-linear-gradient(180deg,rgba(250,224,25,.3) 0 1px,transparent 1px 12px)}
.hud .fill{position:absolute;left:26px;top:44px;width:1px;height:0;background:var(--sg);
  box-shadow:0 0 12px var(--sg),0 0 28px rgba(250,224,25,.55)}
.hud .rdout{position:absolute;left:14px;width:166px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.hud .rdout.t{top:10px}
.hud .rdout.b{bottom:10px}
.hud .rdout b{color:var(--sg);font-weight:400}
.wp{display:flex;align-items:center;flex:1;min-height:0;background:none;border:0;cursor:pointer;padding:0;
  width:100%;text-align:left;position:relative;font:inherit}
.wp .idx{position:absolute;left:0;font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.1em;color:#3E3E46;transition:color .3s}
.wp .arm{width:26px;height:1px;margin-left:14px;background:rgba(250,224,25,.38);
  transition:width .32s cubic-bezier(.22,1,.36,1),background .32s,box-shadow .32s}
.wp .lb{margin-left:10px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#6E6E78;white-space:nowrap;transition:color .3s,text-shadow .3s}
.wp:hover .lb{color:#C9C9D2}
.wp:hover .arm{width:34px;background:rgba(250,224,25,.7)}
.wp[aria-current=true] .arm{width:40px;background:var(--sg);box-shadow:0 0 12px var(--sg)}
.wp[aria-current=true] .lb{color:var(--sg);text-shadow:0 0 16px rgba(250,224,25,.65)}
.wp[aria-current=true] .idx{color:rgba(250,224,25,.6)}
.wp[aria-current=true]::before{content:"";position:absolute;left:28px;width:0;height:0;
  border-left:6px solid var(--sg);border-top:4px solid transparent;border-bottom:4px solid transparent;
  filter:drop-shadow(0 0 6px var(--sg))}
@media(min-width:1500px){ .hud{display:flex} }
@media(prefers-reduced-motion:reduce){ .hud .fill{transition:none} }

/* ---------- no element may clip a neighbour's glow ---------- */
html,body,main,section,.wrap,.band,.hoverzone,.rail,.rkgrid,.tiers,.offers,.stats,
.about-body,.feat,.social-row,.rows,.sec-head,footer{overflow:visible!important}
.hoverzone{padding:44px 34px;margin:-44px -34px}
.rail,.rkgrid,.tiers,.offers,.stats{isolation:isolate}
.card,.vc,.rkc,.tier,.offer,.stat,.sc,.fw{position:relative}
.vc:hover,.rkc:hover,.tier:hover,.offer:hover,.stat:hover,.sc:hover,.fw:hover{z-index:60}

/* featured video: live pip + room to lift */
.fwrap{padding:34px 24px;margin:-34px -24px;overflow:visible}
/* narrow screens: the side bleed may not exceed the page gutter, or the page scrolls sideways */
@media(max-width:700px){
  .hoverzone{padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad))}
  .fwrap{padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad))}
}
/* live indicator and unmute share one shape: a split block, icon half + label half */
.livepip,.unmute{display:inline-flex;align-items:stretch;border-radius:7px;overflow:hidden;line-height:1}
.livepip *,.unmute *{line-height:1}
.lp-side{display:flex;align-items:center;justify-content:center;flex:none;padding:0 11px}
.lp-text{display:flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.livepip{border:1px solid #26262E}
.livepip .lp-side{background:#17171D}
.livepip .lp-dot{width:7px;height:7px;border-radius:50%;background:#5A5A64}
.livepip .lp-text{color:var(--mu);background:#17171D;padding:9px 14px}
.livepip[data-live="true"]{border-color:rgba(255,45,45,.55)}
.livepip[data-live="true"] .lp-side{background:#FF2D2D}
.livepip[data-live="true"] .lp-dot{background:#fff;animation:lpblink 1.4s ease-in-out infinite}
.livepip[data-live="true"] .lp-text{color:#FF7070;background:rgba(255,45,45,.1)}
@keyframes lpblink{0%,100%{opacity:1}50%{opacity:.4}}
/* the section title styles .tag for plain text; undo that for the block */
.sec-title .livepip.tag{padding-bottom:0;align-self:flex-end;margin-bottom:6px}
@media(max-width:700px){ .sec-title .livepip.tag{width:auto;margin-top:0} }
@media(prefers-reduced-motion:reduce){ .livepip .lp-dot{animation:none!important} }

/* 5. rig blocks */
.rig{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.rig.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.rig.flip .rigshot{order:2}
.rigshot{aspect-ratio:4/3;border-radius:14px;border:1px solid rgba(255,255,255,.09);overflow:hidden;
  background:rgba(12,12,17,.62);
  box-shadow:0 14px 40px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.rigshot:hover{transform:translateY(-6px);border-color:rgba(250,224,25,.5);
  box-shadow:0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(250,224,25,.16)}
@media(max-width:900px){ .rig,.rig.flip{grid-template-columns:1fr} .rig.flip .rigshot{order:0} .rigshot{width:100%;max-width:520px;margin-inline:auto} }

/* ---------- v2 ---------- */

#ruffnex{position:relative;isolation:isolate}
#ruffnex::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/images/bg-ruffnex.webp") center 22%/cover no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 62%,rgba(0,0,0,.4) 82%,transparent 97%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 62%,rgba(0,0,0,.4) 82%,transparent 97%)}
#ruffnex::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 70% at 22% 34%, rgba(8,8,11,.9) 0%, rgba(8,8,11,.62) 42%, rgba(8,8,11,.3) 70%, transparent 92%),
    linear-gradient(180deg, rgba(8,8,11,.5) 0%, rgba(8,8,11,.2) 34%, rgba(8,8,11,.72) 100%)}

.rigshot img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- v2.1 ---------- */
.fw.is-live{border-color:rgba(255,45,45,.8);
  box-shadow:0 26px 74px rgba(0,0,0,.8), 0 0 0 1px rgba(255,45,45,.4), 0 0 60px rgba(255,45,45,.34);
  animation:liveglow 2.4s ease-in-out infinite}
@keyframes liveglow{
  0%,100%{box-shadow:0 26px 74px rgba(0,0,0,.8),0 0 0 1px rgba(255,45,45,.35),0 0 46px rgba(255,45,45,.26)}
  50%{box-shadow:0 26px 74px rgba(0,0,0,.8),0 0 0 1px rgba(255,45,45,.7),0 0 92px rgba(255,45,45,.5)}}

/* the Ruffnex support panel, image scoped to this block only */
.ruffbg{position:relative;isolation:isolate;padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,40px);
  border-radius:18px;margin-block:var(--sub)}
.ruffbg::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:18px;
  background:url("/images/bg-ruffnex.webp") center 34%/cover no-repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(130% 120% at 50% 46%,#000 32%,rgba(0,0,0,.6) 62%,transparent 88%);
  mask-image:radial-gradient(130% 120% at 50% 46%,#000 32%,rgba(0,0,0,.6) 62%,transparent 88%)}
.ruffbg::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;pointer-events:none;
  background:
    radial-gradient(88% 78% at 20% 34%, rgba(8,8,11,.9) 0%, rgba(8,8,11,.6) 44%, rgba(8,8,11,.26) 72%, transparent 94%),
    linear-gradient(180deg, rgba(8,8,11,.42) 0%, rgba(8,8,11,.14) 40%, rgba(8,8,11,.55) 100%)}
#ruffnex::before,#ruffnex::after{content:none}

.fw > iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px}
.fw > iframe[hidden]{display:none}

/* sits above YouTube's control bar; the player itself cannot be scripted */
.unmute{position:absolute;left:14px;bottom:58px;z-index:2;padding:0;
  border:1px solid rgba(250,224,25,.5);background:none;cursor:pointer}
.unmute .lp-side{background:#FAE019;color:#0A0A0B}
/* dark backing so the label holds up over a bright video frame; the yellow tint is an inset shadow on top of it */
.unmute .lp-text{color:#FAE019;background:rgba(8,8,10,.82);box-shadow:inset 0 0 0 999px rgba(250,224,25,.1);
  padding:10px 15px;transition:box-shadow .2s}
.unmute:hover .lp-text,.unmute:focus-visible .lp-text{box-shadow:inset 0 0 0 999px rgba(250,224,25,.18)}
.unmute:focus-visible{outline:2px solid var(--sg);outline-offset:3px}
.unmute .ic-sound,.unmute[data-on] .ic-muted{display:none}
.unmute[data-on] .ic-sound{display:block}
.unmute:disabled{cursor:default}
.unmute[hidden]{display:none}

/* ---------- section titles ---------- */
.sec-title{display:flex;align-items:flex-end;gap:clamp(14px,2vw,26px);margin-bottom:clamp(22px,3vw,34px)}
.sec-title .num{font-family:'IBM Plex Mono',monospace;font-size:clamp(44px,6.5vw,84px);line-height:.8;
  font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(250,224,25,.45);letter-spacing:-.04em;
  text-shadow:0 0 30px rgba(250,224,25,.12);flex:none;transform:translateY(4px)}
.sec-title .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sg);display:block;margin-bottom:8px}
.sec-title h2{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.035em;line-height:.98;margin:0}
.sec-title h2::after{content:"";display:block;width:clamp(44px,5vw,72px);height:3px;margin-top:14px;
  background:var(--sg);box-shadow:0 0 16px rgba(250,224,25,.6);border-radius:2px}
.sec-title .tag{margin-left:auto;align-self:flex-end;padding-bottom:6px;color:var(--dim);white-space:nowrap}
.sec-title + .lead{margin-top:-6px}
@media(max-width:700px){
  .sec-title{flex-wrap:wrap;align-items:flex-start}
  .sec-title .num{font-size:40px}
  .sec-title .tag{margin-left:0;width:100%;padding-bottom:0;margin-top:-6px}
}

/* ---------- page-wide lightning ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  opacity:0;transition:opacity 1.6s ease;filter:brightness(.72) saturate(1.05)}
.sky video.on{opacity:.46}
.sky::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,11,.12) 0%,rgba(8,8,11,.34) 38%,rgba(8,8,11,.58) 100%)}
/* the hero no longer needs its own copy; the page one shows through it brighter */
.hero-img{display:none}
.hero-video{display:none}
.hero .sky-boost{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%)}
@media(max-width:900px){
  .sky{background:url("/images/hero-riccua-1440.webp") center 42%/cover no-repeat}
  .sky video{object-position:64% 42%}
  .sky video.on{opacity:.4}
  .sky::after{background:linear-gradient(180deg,rgba(8,8,11,.2) 0%,rgba(8,8,11,.46) 34%,rgba(8,8,11,.72) 100%)}
  /* The fixed photo's lightning bolts are the brightest thing on the page and can sit
     behind small grey text. Rather than darken the bolts away, the footer (the worst
     case) gets a solid strip and the small secondary labels get a dark halo, so the
     letters keep their own dark surround while a bolt passes behind them. */
  footer{background:var(--void)}
  .feat .meta,.sec-head .mono,.sec-title .tag,.row .tag,.row .n2,.rkc .dur,.vc .ago{
    text-shadow:0 0 2px var(--void),0 0 4px var(--void),0 0 7px var(--void),0 0 11px var(--void)}
}
@media(prefers-reduced-motion:reduce){ .sky video{display:none} }

@media(max-width:900px){
  /* no hero plate on phones: the page-wide lightning is already behind everything */
  .hero{position:relative;height:auto;min-height:0;display:block;
    margin-top:0;padding-top:0;overflow:visible}
  .hero-media,.hero-side{display:none}
  .hero .wrap{position:relative;z-index:5;margin-top:0;
    padding-block:clamp(26px,7vw,44px) clamp(30px,8vw,48px)}
  .hero-inner{max-width:none}
  .hero-mark{width:min(86%,320px);margin-block:12px 14px}
}

/* ---------- 404 ---------- */
.notfound{min-height:calc(100svh - 68px - 104px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(56px,10vw,120px)}
.notfound h1{margin:14px 0 12px}
.notfound .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media(max-width:560px){ .notfound .cta{flex-direction:column;align-items:stretch} }