/* ==========================================================
   AISLOP — stylesheet
   Re-skin the whole site from the :root block below.
   ========================================================== */
:root{
  --bg:        #04070a;
  --bg-2:      #070b0e;
  --panel:     rgba(255,255,255,.028);
  --panel-2:   rgba(255,255,255,.045);
  --line:      rgba(255,255,255,.075);
  --line-soft: rgba(255,255,255,.14);

  --lime:      #b6ff2e;      /* the accent — slop green                */
  --lime-dim:  #86c41a;
  --nv:        #76b900;      /* nvidia green                            */
  --glowRGB:   150,255,60;

  --text:      #eef4ea;
  --muted:     #8e9a92;
  --dim:       #5b6660;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r:  999px;
  --rc: 18px;                /* card radius */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.svgdefs{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

::selection{ background:var(--lime); color:#04070a; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#04070a; }
::-webkit-scrollbar-thumb{ background:#18211a; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#2a3a2b; }

/* ==========================================================
   LOADER
   ========================================================== */
.loader{
  position:fixed; inset:0; z-index:9000;
  background:radial-gradient(90% 70% at 50% 40%, #07100a, #04070a 70%);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease-out), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(380px,82vw); text-align:center; }
.loader__blob{ height:74px; margin:0 auto 26px; position:relative; filter:url(#melt); }
.loader__blob i{
  position:absolute; top:50%; left:50%; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg,var(--lime),var(--nv));
  margin:-11px 0 0 -11px;
  animation:orbit 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
.loader__blob i:nth-child(2){ animation-delay:-.87s; }
.loader__blob i:nth-child(3){ animation-delay:-1.74s; }
@keyframes orbit{
  0%   { transform:translate(-30px,0) scale(.7); }
  35%  { transform:translate(0,-16px) scale(1.15); }
  70%  { transform:translate(30px,0) scale(.7); }
  100% { transform:translate(-30px,0) scale(.7); }
}
.loader__label{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--muted); margin-bottom:16px; }
.loader__bar{ height:2px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--nv),var(--lime));
  box-shadow:0 0 20px rgba(var(--glowRGB),.55); transition:width .28s var(--ease-out); }
.loader__pct{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--dim); margin-top:14px; }

/* ==========================================================
   BACKGROUND LAYERS
   ========================================================== */
.bg-flat{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 70% at 50% 0%, #0a130c 0%, transparent 60%),
    var(--bg);
}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05);
}
.bg-video--color{ filter:none; }
.bg-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,7,10,.62), rgba(4,7,10,.28) 45%, rgba(4,7,10,.94) 92%, var(--bg) 100%);
}
.bg-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -6%, rgba(var(--glowRGB),.08), transparent 62%),
    radial-gradient(90% 60% at 50% 104%, rgba(var(--glowRGB),.05), transparent 60%),
    radial-gradient(88% 84% at 50% 46%, transparent 48%, rgba(0,0,0,.72) 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:560px; height:560px; z-index:2; pointer-events:none;
  margin:-280px 0 0 -280px; opacity:0; transition:opacity .4s;
  background:radial-gradient(circle, rgba(var(--glowRGB),.075), transparent 62%);
  will-change:transform;
}
@media (hover:hover){ .cursor-glow{ opacity:1; } }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1200;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:linear-gradient(90deg,var(--nv),var(--lime));
  box-shadow:0 0 16px rgba(var(--glowRGB),.5);
}

.nav,.hero,.section,.footer,.drawer,.meter{ position:relative; z-index:5; }
.section,.hero{ scroll-margin-top:96px; }

/* ==========================================================
   BRAINROT METER (fixed left rail)
   ========================================================== */
.meter{
  position:fixed; left:22px; top:50%; transform:translateY(-50%);
  z-index:900; display:flex; flex-direction:column; align-items:center; gap:12px;
  pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
}
.meter.on{ opacity:1; }
.meter__label,.meter__val{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--dim);
  writing-mode:vertical-rl;
}
.meter__val{ color:var(--lime); writing-mode:horizontal-tb; letter-spacing:.14em; }
.meter__track{
  width:2px; height:150px; background:rgba(255,255,255,.09); border-radius:2px;
  position:relative; overflow:hidden;
}
.meter__track i{
  position:absolute; left:0; bottom:0; width:100%; height:100%;
  transform:scaleY(0); transform-origin:50% 100%;
  background:linear-gradient(0deg,var(--nv),var(--lime));
  box-shadow:0 0 12px rgba(var(--glowRGB),.6);
}
@media (max-width:1200px){ .meter{ display:none; } }

/* ==========================================================
   REVEAL
   ========================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001s !important; }
}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:24px clamp(14px,3vw,40px);
  transition:padding .35s var(--ease), background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  padding-top:13px; padding-bottom:13px;
  background:rgba(4,7,10,.72); backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__left,.nav__right{ display:flex; align-items:center; gap:7px; min-width:0; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  padding:11px 17px; border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--panel); color:var(--text);
  cursor:pointer; user-select:none; white-space:nowrap;
  backdrop-filter:blur(10px);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.pill:hover{ transform:translateY(-2px); border-color:rgba(var(--glowRGB),.45); background:var(--panel-2); }
.pill:active{ transform:translateY(0); }
.pill--solid{ background:#eef4ea; border-color:#eef4ea; color:#04070a; font-weight:800; }
.pill--solid:hover{ background:#fff; border-color:#fff; box-shadow:0 8px 30px rgba(255,255,255,.14); }
.pill__logo{ width:19px; height:19px; object-fit:contain; }
.pill__logo[hidden]{ display:none; }
.pill--ca{
  color:var(--muted); font-weight:500;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  max-width:min(44vw,400px);
}
.pill--ca span{ overflow:hidden; text-overflow:ellipsis; }
.pill--ca:hover{ color:var(--text); }
.pill--ca.copied{ color:var(--lime); border-color:rgba(var(--glowRGB),.6); }
.pill__ico{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pill--buy{
  background:linear-gradient(180deg, rgba(var(--glowRGB),.22), rgba(var(--glowRGB),.08));
  border-color:rgba(var(--glowRGB),.55); color:var(--lime); font-weight:800;
}
.pill--buy:hover{ box-shadow:0 10px 34px rgba(var(--glowRGB),.22); }

.burger{ display:none; width:44px; height:40px; border:1px solid var(--line-soft); background:var(--panel);
  border-radius:12px; cursor:pointer; padding:11px 12px; }
.burger i{ display:block; height:1.6px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.burger i+i{ margin-top:4.6px; }
.burger.open i:nth-child(1){ transform:translateY(6.2px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-6.2px) rotate(-45deg); }

.drawer{
  position:fixed; inset:64px 0 auto; z-index:999;
  background:rgba(4,7,10,.94); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out);
}
.drawer.open{ max-height:78vh; }
.drawer__inner{ display:flex; flex-direction:column; gap:9px; padding:22px clamp(14px,4vw,30px) 30px; }
.drawer__inner .pill{ justify-content:center; padding:14px 18px; font-size:14px; }

@media (max-width:900px){
  .nav__right{ display:none; }
  .burger{ display:block; }
  .pill--ca{ max-width:38vw; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:120px clamp(16px,4vw,40px) 130px; overflow:hidden;
}
.hero__inner{ width:100%; max-width:var(--maxw); text-align:center; position:relative; z-index:3; }
/* the goo runs bright right where the copy sits — this keeps the type
   readable without flattening the background back to black */
.hero__inner::before{
  content:""; position:absolute; inset:-14% -14% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 54% at 50% 52%, rgba(3,6,9,.82), rgba(3,6,9,.5) 56%, transparent 78%);
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.28em; color:var(--muted);
  max-width:calc(100vw - 40px);
  border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(10px);
  padding:8px 16px; border-radius:var(--r); margin-bottom:34px;
}
.hero__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 10px var(--lime); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.75) } }

.hero__art{ width:min(560px,80vw); margin:0 auto 18px; object-fit:contain; }
.hero__art--wordmark{ margin-bottom:26px; }

.hero__title{
  margin:0 0 22px; line-height:.84; letter-spacing:-.045em;
  font-size:clamp(64px, 17.5vw, 250px); font-weight:900;
}
.goo{
  display:inline-block;
  background:linear-gradient(178deg,#ffffff 4%, #e6ffbe 26%, var(--lime) 54%, var(--nv) 78%, #2f5a00 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 14px 44px rgba(var(--glowRGB),.28));
  position:relative;
}
.goo::after{
  content:attr(data-word); position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 36%, rgba(255,255,255,.85) 50%, transparent 64%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:280% 100%; background-position:180% 0;
  animation:sheen 6.5s var(--ease) infinite;
}
@keyframes sheen{ 0%,62%{ background-position:180% 0 } 100%{ background-position:-90% 0 } }

/* the drip strip that hangs off the wordmark */
.driprow{
  position:relative; height:52px; margin:-30px auto 18px; width:min(820px,90vw);
  filter:url(#melt); pointer-events:none; z-index:-1;
}
.driprow i{
  position:absolute; top:-26px; width:12px; height:34px;
  border-radius:0 0 60% 60% / 0 0 40% 40%;
  background:linear-gradient(180deg,#8fd318 0%, var(--nv) 55%, rgba(79,143,0,.15) 100%);
  transform-origin:50% 0;
  animation:drip 5.5s var(--ease) infinite;
}
.driprow i::after{
  content:""; position:absolute; left:50%; bottom:-9px; width:11px; height:11px;
  margin-left:-5.5px; border-radius:50%;
  background:var(--nv); opacity:.9;
  animation:droplet 5.5s var(--ease) infinite;
  animation-delay:inherit; animation-duration:inherit;
}
@keyframes drip{ 0%,100%{ transform:scaleY(.5) } 55%{ transform:scaleY(1.3) } }
@keyframes droplet{ 0%,100%{ transform:translateY(0) scale(.7); opacity:.35 } 55%{ transform:translateY(10px) scale(1); opacity:.95 } }

.hero__tagline{
  max-width:640px; margin:0 auto 40px; font-size:clamp(15px,2.1vw,19px);
  color:var(--muted); line-height:1.6; min-height:2.6em;
}
.caret{ color:var(--lime); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--r); cursor:pointer;
  font-size:13.5px; font-weight:800; letter-spacing:.09em;
  border:1px solid var(--line-soft); background:var(--panel); color:var(--text);
  backdrop-filter:blur(10px);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn__ico{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary{
  background:linear-gradient(180deg,var(--lime),var(--nv)); color:#050a02; border-color:transparent;
  box-shadow:0 12px 40px rgba(var(--glowRGB),.24);
}
.btn--primary:hover{ box-shadow:0 18px 56px rgba(var(--glowRGB),.4); }
.btn--ghost:hover{ border-color:rgba(var(--glowRGB),.45); background:var(--panel-2); }
.btn--wide{ width:100%; }
.btn.copied{ background:linear-gradient(180deg,#fff,#dfe9d8); }

.hero__pair{
  margin-top:34px; font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; color:var(--dim);
  display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.hero__pair b{ color:var(--lime); font-weight:500; }
.hero__pair .sepdot{ width:3px; height:3px; border-radius:50%; background:var(--dim); }

.scrollcue{ position:absolute; bottom:74px; left:50%; translate:-50% 0; width:24px; height:38px;
  border:1px solid var(--line-soft); border-radius:14px; display:grid; place-items:start center; padding-top:7px; z-index:6; }
.scrollcue i{ width:3px; height:7px; border-radius:3px; background:var(--lime); animation:cue 1.9s var(--ease) infinite; }
@keyframes cue{ 0%{ opacity:0; transform:translateY(0) } 35%{ opacity:1 } 100%{ opacity:0; transform:translateY(15px) } }

/* ==========================================================
   MARQUEE
   ========================================================== */
.marquee{ position:absolute; left:0; right:0; overflow:hidden; display:flex;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(4,7,10,.5); backdrop-filter:blur(6px); padding:13px 0; }
.marquee--hero{ bottom:0; }
.marquee--footer{ position:relative; }
.marquee__track{ display:flex; flex:none; animation:slide 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-100%) } }
.marquee__item{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; color:var(--muted);
  padding:0 26px; white-space:nowrap; display:inline-flex; align-items:center;
}
.marquee__item::after{ content:"◍"; margin-left:26px; color:rgba(var(--glowRGB),.55); font-size:9px; }

/* ==========================================================
   SECTIONS
   ========================================================== */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,11vw,140px) clamp(16px,4vw,40px); }
.h2{
  margin:0 0 12px; text-align:center; font-weight:900; letter-spacing:-.03em;
  font-size:clamp(30px,5.6vw,60px); line-height:1;
}
.h2.glow{ text-shadow:0 0 60px rgba(var(--glowRGB),.2); }
.sub{ margin:0 auto clamp(44px,6vw,66px); text-align:center; color:var(--muted);
  max-width:620px; font-size:15px; line-height:1.65; }
.sep{ height:1px; max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(90deg, transparent, var(--line-soft), transparent); }

/* ==========================================================
   THE SLOP LOOP
   ========================================================== */
.loopwrap{ position:relative; }
.loopwrap__arcs{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.loopwrap__arcs path{ fill:none; stroke:rgba(var(--glowRGB),.32); stroke-width:1.2; stroke-dasharray:5 7; }
.loopwrap__arcs .flow{ stroke:var(--lime); stroke-width:1.8; stroke-dasharray:16 190; filter:drop-shadow(0 0 6px rgba(var(--glowRGB),.8));
  animation:flow 3.6s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-206 } }

.loopnodes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:2; }
.node{
  border:1px solid var(--line); border-radius:var(--rc); padding:26px 24px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  backdrop-filter:blur(14px); transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
  will-change:transform;
}
.node{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.node:hover{ border-color:rgba(var(--glowRGB),.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.5); }
.node__k{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:var(--lime); }
.node__t{ margin:14px 0 10px; font-size:clamp(20px,2.7vw,28px); font-weight:900; letter-spacing:-.02em; }
.node__d{ margin:0; font-size:13.5px; line-height:1.65; color:var(--muted); }

.pairboard{
  margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border:1px solid var(--line); border-radius:var(--rc); overflow:hidden; background:var(--line);
}
.pairboard__cell{ background:rgba(7,11,14,.86); padding:22px 20px; text-align:center; backdrop-filter:blur(10px); }
.pairboard__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--dim); }
.pairboard__v{ margin-top:10px; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--lime); letter-spacing:.02em; }

@media (max-width:820px){
  .loopnodes{ grid-template-columns:1fr; }
  .loopwrap__arcs{ display:none; }
  .pairboard{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   THE FEED / WALL
   ========================================================== */
.wall{ position:relative; }
.wall__strip{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; padding:6px 2px 22px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.wall__strip::-webkit-scrollbar{ display:none; }
.wall__strip.dragging{ scroll-snap-type:none; cursor:grabbing; }
.card{
  flex:0 0 auto; width:clamp(230px,26vw,320px); aspect-ratio:9/16; margin:0;
  scroll-snap-align:center; max-height:70vh;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer;
  background:#050807; position:relative;
  transition:transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
  will-change:transform;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(var(--glowRGB),.45); box-shadow:0 26px 60px rgba(0,0,0,.55); }
.card video{ width:100%; height:100%; display:block; object-fit:cover; }
.card__play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; z-index:2;
  border-radius:50%; background:rgba(4,7,10,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  opacity:0; transition:opacity .25s var(--ease);
  pointer-events:none;
}
.card__play::before{
  content:""; position:absolute; top:50%; left:54%; translate:-50% -50%;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.card:hover .card__play{ opacity:1; }
.wall__strip.dragging .card{ pointer-events:none; }

.wall__nav{
  position:absolute; top:calc(50% - 30px); translate:0 -50%; z-index:6;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(4,7,10,.75); color:var(--text);
  backdrop-filter:blur(10px); font-size:17px; line-height:1;
  transition:background .25s, border-color .25s, transform .25s var(--ease-out);
}
.wall__nav:hover{ background:rgba(var(--glowRGB),.16); border-color:rgba(var(--glowRGB),.5); transform:translateY(-50%) scale(1.08); }
.wall__nav--l{ left:-8px; }
.wall__nav--r{ right:-8px; }
@media (max-width:700px){ .wall__nav{ display:none; } }

/* ==========================================================
   STEPS
   ========================================================== */
.steps{ position:relative; max-width:760px; margin:0 auto; padding-left:60px; }
.steps__rail{ position:absolute; left:22px; top:8px; bottom:40px; width:1px; background:rgba(255,255,255,.16); }
.steps__rail i{ position:absolute; inset:0; background:linear-gradient(180deg,var(--lime),var(--nv));
  transform:scaleY(0); transform-origin:50% 0; box-shadow:0 0 14px rgba(var(--glowRGB),.6); }
.step{ position:relative; padding:0 0 34px 0; }
.step__num{
  position:absolute; left:-60px; top:-4px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  border:1px solid var(--line-soft); background:rgba(4,7,10,.92); color:var(--lime); backdrop-filter:blur(8px);
}
.step__txt{ font-size:clamp(15px,2vw,17.5px); line-height:1.65; color:var(--text); padding-top:9px; }
.step__txt a{ color:var(--lime); border-bottom:1px solid rgba(var(--glowRGB),.4); }
.step__txt a:hover{ border-bottom-color:var(--lime); }
.step__txt b{ color:#fff; }

.lockbadge{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:34px; }
.lockbadge__ring{
  width:82px; height:82px; border-radius:50%; display:grid; place-items:center; font-size:26px;
  color:var(--lime); border:1px solid rgba(var(--glowRGB),.4);
  background:radial-gradient(circle at 50% 35%, rgba(var(--glowRGB),.18), transparent 70%);
  box-shadow:0 0 60px rgba(var(--glowRGB),.2); animation:float 4s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.lockbadge p{ margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.28em; color:var(--muted); }

/* ==========================================================
   TOKENOMICS
   ========================================================== */
.tokens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.token{
  border:1px solid var(--line); border-radius:var(--rc); padding:32px 24px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter:blur(14px);
  transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.token{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.token:hover{ transform:translateY(-5px); border-color:rgba(var(--glowRGB),.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.5); }
.token__ring{ width:52px; height:52px; margin:0 auto 18px; border-radius:16px; display:grid; place-items:center;
  font-size:20px; color:var(--lime); border:1px solid rgba(var(--glowRGB),.28); }
.token__v{ font-family:var(--mono); font-size:clamp(16px,2.3vw,21px); font-weight:700; letter-spacing:-.01em; }
.token__k{ margin-top:9px; font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--dim); }

/* ==========================================================
   FAQ
   ========================================================== */
.faq{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.qa{ border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--panel); backdrop-filter:blur(10px); transition:border-color .3s, background .3s; }
.qa.open{ border-color:rgba(var(--glowRGB),.35); background:var(--panel-2); }
.qa__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; background:none; border:0; cursor:pointer; text-align:left;
  font-size:15.5px; font-weight:700; color:var(--text); letter-spacing:-.01em;
}
.qa__q i{ font-style:normal; font-size:20px; color:var(--lime); flex:none; transition:transform .35s var(--ease-out); }
.qa.open .qa__q i{ transform:rotate(45deg); }
.qa__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.qa__a p{ margin:0; padding:0 22px 22px; color:var(--muted); font-size:14.5px; line-height:1.7; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{ margin-top:40px; border-top:1px solid var(--line); background:rgba(3,6,8,.7); backdrop-filter:blur(10px); }
.footer__inner{ max-width:var(--maxw); margin:0 auto; padding:60px clamp(16px,4vw,40px) 54px; text-align:center; }
.footer__brand{ font-size:clamp(22px,3.6vw,34px); font-weight:900; letter-spacing:-.03em; }
.footer__ca{
  display:inline-block; margin:20px 0 24px; max-width:100%; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em;
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r); padding:11px 18px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .25s, border-color .25s;
}
.footer__ca:hover{ color:var(--text); border-color:var(--line-soft); }
.footer__ca.copied{ color:var(--lime); border-color:rgba(var(--glowRGB),.5); }
.footer__links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.footer__links a{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase;
  transition:color .25s; }
.footer__links a:hover{ color:var(--lime); }
.footer__disc{ max-width:640px; margin:0 auto 14px; font-size:11.5px; line-height:1.75; color:var(--dim); }
.footer__year{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--dim); }

/* ==========================================================
   TOAST + LIGHTBOX
   ========================================================== */
.toast{
  position:fixed; left:50%; bottom:34px; translate:-50% 0; z-index:9500;
  padding:13px 22px; border-radius:var(--r); background:rgba(4,7,10,.94);
  border:1px solid rgba(var(--glowRGB),.45); color:var(--lime);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.show{ opacity:1; transform:translateY(0); }

.lightbox{
  position:fixed; inset:0; z-index:9400; display:grid; place-items:center;
  background:rgba(2,4,6,.9); backdrop-filter:blur(20px); padding:5vh 5vw;
  animation:fade .3s var(--ease-out);
}
@keyframes fade{ from{ opacity:0 } }
#lightboxVid{
  display:block; max-width:min(560px,90vw); max-height:88vh; width:auto; height:auto;
  border-radius:var(--rc); border:1px solid var(--line-soft);
  background:#000; box-shadow:0 50px 120px rgba(0,0,0,.7);
}
.lightbox__close{
  position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(4,7,10,.8); color:var(--text); font-size:16px;
  transition:background .25s, transform .25s var(--ease-out);
}
.lightbox__close:hover{ background:rgba(var(--glowRGB),.16); transform:rotate(90deg); }

/* ==========================================================
   SMALL SCREENS
   ========================================================== */
@media (max-width:560px){
  .hero{ padding-top:104px; padding-bottom:112px; }
  .hero__eyebrow{ font-size:9px; letter-spacing:.18em; padding:7px 13px; }
  .hero__pair{ letter-spacing:.18em; gap:9px; }
  .hero__title{ letter-spacing:-.03em; }
  .btn{ padding:15px 22px; font-size:12.5px; }
  .steps{ padding-left:48px; }
  .step__num{ left:-48px; width:36px; height:36px; font-size:11px; }
  .steps__rail{ left:18px; }
  .card{ width:min(220px,72vw); }
  .pairboard{ grid-template-columns:1fr; }
}

/* --- the return rail under the loop row --- */
.loopwrap{ padding-bottom:86px; }
.loopwrap__cap{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--dim);
  background:var(--bg); padding:0 14px; white-space:nowrap;
}
@media (max-width:820px){ .loopwrap{ padding-bottom:0; } .loopwrap__cap{ display:none; } }