/* ═══════════════════════════════════════════════════════════
   $Rubert — DEGEN NEON v2
   Dark blue dominance, cyan/yellow glow, glitchy ticker.
   Revert: change /styles.css?v=2 back to ?v=1 in index.html
   ═══════════════════════════════════════════════════════════ */

:root{
  /* dark degen base */
  --bg:        #02061a;   /* near-black, deep navy */
  --bg-2:      #050d2e;   /* panel */
  --bg-3:      #0a1844;   /* card */
  --ink:       #E6F1FF;   /* paper white, slight blue */
  --ink-dim:   #8AA0D0;

  /* neon accents */
  --neon-cyan: #00E5FF;
  --neon-blue: #3E76FF;
  --neon-pink: #FF3EA5;
  --neon-yel:  #FFD60A;
  --neon-orange:#FF7A00;

  /* sampled from duck.png */
  --duck-blue: #0349A3;
  --bill:      #EBA02B;
  --flamingo:  #F0839C;

  /* glow */
  --glow-cyan: 0 0 20px rgba(0,229,255,.55), 0 0 60px rgba(0,229,255,.25);
  --glow-pink: 0 0 20px rgba(255,62,165,.55), 0 0 60px rgba(255,62,165,.25);
  --glow-yel:  0 0 20px rgba(255,214,10,.55), 0 0 60px rgba(255,214,10,.25);

  --f-disp: 'Anton', 'Arial Narrow', sans-serif;
  --f-body: 'Archivo', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --rail-w: 64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(62,118,255,.35), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(255,62,165,.12), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background:var(--neon-cyan); color:var(--bg); }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--neon-cyan); outline-offset:3px; }

/* scanline/grid texture, subtle */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,.6), transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(0,229,255,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen; opacity:.4;
}

/* ═══════════ TICKER (live marquee on top) ═══════════ */
.ticker{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  color:var(--bg);
  font-family:var(--f-mono); font-weight:600; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  padding:6px 0; overflow:hidden;
  border-bottom:2px solid var(--bg);
}
.ticker__track{ display:flex; gap:48px; white-space:nowrap; animation:tickscroll 32s linear infinite; }
.ticker__track span{ display:inline-flex; align-items:center; gap:10px; }
.ticker__track b{ color:var(--bg); font-weight:800; }
.ticker__track em{ font-style:normal; color:var(--neon-yel); text-shadow:0 0 8px rgba(255,214,10,.7); }
@keyframes tickscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════ RAIL ═══════════ */
.rail{
  position:fixed; left:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:60;
}
.rail a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-decoration:none; opacity:.68; display:flex; align-items:center; gap:8px;
  background:rgba(5,13,46,.85); backdrop-filter:blur(6px);
  border:1.5px solid var(--neon-cyan); border-radius:999px;
  padding:6px 12px 6px 6px;
  box-shadow:0 0 12px rgba(0,229,255,.25);
  transition:opacity .2s, transform .15s, background .2s, box-shadow .2s;
  color:var(--ink);
}
.rail a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--neon-cyan); box-shadow:0 0 8px var(--neon-cyan); flex:none; }
.rail a:hover{ opacity:1; transform:translateX(3px); box-shadow:0 0 18px rgba(0,229,255,.6); }
.rail a.on{ opacity:1; background:var(--neon-pink); border-color:var(--neon-pink); box-shadow:var(--glow-pink); color:var(--bg); }
.rail a.on::before{ background:var(--bg); box-shadow:none; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  background:
    radial-gradient(circle at 25% 30%, rgba(62,118,255,.55), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(0,229,255,.28), transparent 55%),
    linear-gradient(180deg, #02103a 0%, #02061a 100%);
  color:var(--ink);
  max-width:1440px; margin-inline:auto;
  padding:clamp(60px,8vh,100px) calc(var(--rail-w) + var(--pad)) clamp(40px,6vh,80px);
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,4vw,64px);
  overflow:hidden;
}

/* aurora lights behind hero */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 80% 20%, var(--neon-pink) 0%, transparent 8%),
    radial-gradient(circle at 15% 80%, var(--neon-cyan) 0%, transparent 10%);
  filter:blur(40px); opacity:.5;
}

/* animated scanline inside hero */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,229,255,.04) 2px 3px);
}

.stage{ position:relative; z-index:2; width:100%; max-width:min(620px, 70svh); margin-inline:auto; perspective:1400px; }
.shot{ position:relative; margin:0; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.shot::before{
  content:""; position:absolute; inset:-12%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, var(--neon-cyan) 0%, transparent 60%);
  filter:blur(40px); opacity:.5; animation:duck-pulse 3s ease-in-out infinite;
}
.shot img{
  display:block; width:100%; height:auto;
  filter:
    drop-shadow(0 0 40px rgba(0,229,255,.45))
    drop-shadow(0 22px 34px rgba(0,0,0,.6));
  animation:duck-float 4s ease-in-out infinite;
}
@keyframes duck-pulse{ 0%,100%{opacity:.4} 50%{opacity:.7} }
@keyframes duck-float{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(-1deg)} }

.shot figcaption{
  margin-top:20px; text-align:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--neon-cyan);
  text-shadow:0 0 8px rgba(0,229,255,.7);
}
.shot figcaption::before{ content:"// "; color:var(--neon-pink); }
.shot figcaption::after{ content:" //"; color:var(--neon-pink); }

.quack-trigger{ all:unset; display:block; cursor:pointer; width:100%; }
.quack-trigger img{ transition:transform .15s; }
.quack-trigger:hover img{ transform:scale(1.02) rotate(-1deg); }
.quack-trigger:active img{ transform:scale(.98); }

/* ── hero copy ── */
.hero__copy{ position:relative; z-index:2; max-width:620px; }

.wordmark{
  font-family:var(--f-disp);
  font-size:clamp(96px,17vw,220px);
  line-height:.82; padding-bottom:.16em; margin:0; letter-spacing:-.02em;
  color:var(--ink);
  text-transform:uppercase;
  background:linear-gradient(180deg, #FFFFFF 0%, var(--neon-cyan) 60%, var(--neon-blue) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(0,229,255,.45));
  position:relative;
}
.wordmark::before{
  content:attr(data-text); position:absolute; inset:0;
  font-family:var(--f-disp); font-size:inherit;
  -webkit-text-stroke:2px var(--neon-pink);
  -webkit-text-fill-color:transparent;
  transform:translate(4px,4px); z-index:-1;
  filter:blur(.4px);
}

.lede{
  font-family:var(--f-disp); color:var(--ink);
  font-size:clamp(24px,3.5vw,46px);
  line-height:1.04; margin:22px 0 30px; letter-spacing:.005em;
  text-transform:uppercase;
}
.lede b{ color:var(--neon-yel); text-shadow:var(--glow-yel); }
.lede b::before, .lede b::after{ content:" "; }

.tag{
  display:inline-block; margin-bottom:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon-pink); border:1.5px solid var(--neon-pink);
  padding:4px 10px; border-radius:4px; background:rgba(255,62,165,.08);
  box-shadow:var(--glow-pink);
}
.tag::before{ content:"● "; color:var(--neon-pink); animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

.actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }

.ca{
  display:flex; align-items:center; gap:12px;
  background:rgba(5,13,46,.85); backdrop-filter:blur(8px);
  border:2px solid var(--neon-cyan); border-radius:8px;
  padding:11px 14px; cursor:pointer; font:inherit; color:var(--ink);
  box-shadow:var(--glow-cyan); transition:transform .12s, box-shadow .12s;
}
.ca:hover{ box-shadow:0 0 28px rgba(0,229,255,.8); }
.ca:active{ transform:translate(2px,2px); }
.ca__label{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.2em; background:var(--neon-cyan); color:var(--bg); padding:3px 7px; border-radius:4px; }
.ca__val{ font-family:var(--f-mono); font-size:13px; max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.ca__copy{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--neon-cyan); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-orange) 100%);
  color:#fff; border:2px solid var(--neon-pink); border-radius:8px; text-decoration:none;
  font-family:var(--f-disp); font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 26px; box-shadow:var(--glow-pink);
  transition:transform .12s, box-shadow .12s, filter .2s;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.btn:hover{ filter:brightness(1.15); box-shadow:0 0 36px rgba(255,62,165,.9); }
.btn:active{ transform:translate(2px,2px); }
.btn--big{ padding:20px 44px; font-size:clamp(19px,2.4vw,30px); }
.btn--quack{ background:transparent; color:var(--neon-cyan); border-color:var(--neon-cyan); box-shadow:var(--glow-cyan); text-shadow:0 0 8px rgba(0,229,255,.7); }
.btn--quack:hover{ background:rgba(0,229,255,.12); }
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; filter:grayscale(.4); }

/* meme facts ribbon under hero */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:0; margin:36px 0 0; padding:0;
  position:relative; z-index:2;
}
.stats div{
  padding:14px 14px;
  border:1px solid rgba(0,229,255,.35);
  border-right-width:0; background:rgba(5,13,46,.6); backdrop-filter:blur(4px);
}
.stats div:first-child{ border-radius:8px 0 0 8px; }
.stats div:last-child{ border-right-width:1px; border-radius:0 8px 8px 0; }
.stats dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--neon-cyan); margin:0; }
.stats dd{ margin:4px 0 0; font-family:var(--f-disp); font-size:clamp(18px,2vw,26px); color:var(--ink); }
.stats .hot{ color:var(--neon-yel); text-shadow:var(--glow-yel); }

/* corner stamps */
.stampmark{
  position:absolute; z-index:3; margin:0;
  width:clamp(120px,12vw,160px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:50%; background:rgba(255,214,10,.12);
  border:3px solid var(--neon-yel); color:var(--neon-yel);
  box-shadow:var(--glow-yel), inset 0 0 0 4px rgba(2,6,26,.6);
  font-family:var(--f-disp); font-size:clamp(13px,1.1vw,16px); line-height:1.14;
  letter-spacing:.04em; text-transform:uppercase;
  padding:10%; pointer-events:none; user-select:none;
  transform:rotate(-11deg);
}
.stampmark--hero{ right:clamp(20px,5vw,90px); bottom:8%; background:rgba(255,62,165,.15); border-color:var(--neon-pink); color:var(--neon-pink); box-shadow:var(--glow-pink), inset 0 0 0 4px rgba(2,6,26,.6); }
.stampmark--memo{ right:clamp(6px,1.4vw,26px); top:24%; transform:rotate(8deg); }
.stampmark--buy { right:clamp(6px,1.4vw,26px); bottom:clamp(70px,13vh,120px); transform:rotate(-7deg); background:rgba(0,229,255,.12); border-color:var(--neon-cyan); color:var(--neon-cyan); box-shadow:var(--glow-cyan), inset 0 0 0 4px rgba(2,6,26,.6); }
@media (max-width:1240px){ .stampmark{ display:none; } }

/* ═══════════ SECTIONS ═══════════ */
.sect{
  position:relative; z-index:2;
  border-top:1px solid rgba(0,229,255,.25);
  padding:clamp(72px,11vh,140px) var(--pad);
  max-width:1180px; margin-inline:auto;
}
.sect__h{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-family:var(--f-disp); font-size:clamp(32px,5vw,64px);
  margin:0 0 clamp(28px,4vh,52px); letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink);
}
.sect__h em{
  font-family:var(--f-mono); font-style:normal; font-weight:600;
  font-size:12px; letter-spacing:.2em; color:var(--neon-cyan);
  padding:4px 10px; border:1.5px solid var(--neon-cyan); border-radius:4px;
  background:rgba(0,229,255,.08); box-shadow:0 0 10px rgba(0,229,255,.35);
}

/* moment section */
.beats{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media(min-width:780px){ .beats{ grid-template-columns:repeat(3,1fr); } }
.beats li{
  background:linear-gradient(160deg, rgba(10,24,68,.92), rgba(5,13,46,.92));
  border:1.5px solid rgba(0,229,255,.25); border-radius:12px;
  padding:22px 22px 24px; position:relative;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.beats li:hover{ transform:translateY(-4px); border-color:var(--neon-cyan); box-shadow:var(--glow-cyan); }
.beats__n{
  display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--neon-pink); margin-bottom:10px;
  padding:2px 8px; border:1px solid var(--neon-pink); border-radius:4px;
  background:rgba(255,62,165,.08);
}
.beats p{ margin:8px 0 0; font-size:clamp(16px,1.4vw,19px); color:var(--ink); }
.beats p b{ color:var(--neon-yel); text-shadow:var(--glow-yel); }
.beats .blue{ color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,229,255,.6); }

.punch{
  margin-top:36px; font-family:var(--f-disp); font-size:clamp(22px,3vw,36px);
  text-transform:uppercase; color:var(--ink); text-align:center;
  letter-spacing:.02em;
}
.punch::before, .punch::after{ content:"—"; color:var(--neon-pink); margin:0 14px; }

/* clip cards */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:18px;
}
@media(min-width:780px){ .steps{ grid-template-columns:repeat(2,1fr); } }
.steps li{
  background:linear-gradient(160deg, rgba(10,24,68,.92), rgba(5,13,46,.92));
  border:1.5px solid rgba(0,229,255,.25); border-radius:12px;
  padding:24px; position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.steps li:hover{ transform:translateY(-4px); border-color:var(--neon-pink); box-shadow:var(--glow-pink); }
.steps h3{
  margin:0 0 8px; font-family:var(--f-disp); font-size:clamp(20px,2vw,26px);
  text-transform:uppercase; color:var(--ink); letter-spacing:.02em;
}
.steps p{ margin:0; color:var(--ink-dim); font-size:16px; }
.steps li::after{
  content:""; position:absolute; top:0; right:0; width:60px; height:60px;
  background:radial-gradient(circle at top right, var(--neon-cyan), transparent 60%);
  opacity:.4; pointer-events:none;
}

/* chart frame */
.frame{
  background:linear-gradient(160deg, rgba(10,24,68,.92), rgba(5,13,46,.92));
  border:2px solid var(--neon-cyan); border-radius:14px;
  padding:0; overflow:hidden;
  box-shadow:var(--glow-cyan), 0 30px 60px -20px rgba(0,0,0,.6);
}
.frame iframe{ display:block; width:100%; height:480px; border:0; }
.frame__empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px; min-height:280px;
  font-family:var(--f-mono); color:var(--ink-dim); letter-spacing:.1em;
}
.frame__empty p{ margin:0 0 10px; font-size:16px; color:var(--ink); }
.frame__empty span{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--neon-cyan); }

/* buy steps reuse .steps */

/* footer */
.foot{
  position:relative; z-index:2;
  border-top:1px solid rgba(0,229,255,.25);
  background:linear-gradient(180deg, transparent, rgba(2,6,26,.8));
  padding:50px var(--pad) 36px; max-width:1180px; margin-inline:auto;
  text-align:center;
}
.foot__marks{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.foot__marks a{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:8px 18px;
  border:1.5px solid var(--neon-cyan); border-radius:999px;
  background:rgba(0,229,255,.06); box-shadow:0 0 10px rgba(0,229,255,.3);
  transition:background .2s, box-shadow .2s;
}
.foot__marks a:hover{ background:rgba(0,229,255,.18); box-shadow:0 0 20px rgba(0,229,255,.6); }
.foot__marks a[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.foot__disc{ max-width:680px; margin:0 auto 18px; color:var(--ink-dim); font-size:14px; line-height:1.55; }
.foot__stamp{ margin:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,229,255,.5); }

/* reveal + tilt keep */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .25s cubic-bezier(.2,.7,.3,1); }

/* mobile safety */
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; padding-top:90px; }
  .stage{ max-width:min(360px, 60svh); }
  .ticker__track{ gap:32px; font-size:11px; }
}