/* REPDROP 2000 landing — same Y2K skin as the app: nucleus green, brushed
 * chrome chassis, aqua gel, pixel LCD type, CRT scanlines. Self-contained. */
:root {
  --tech: 'Michroma', 'Arial Black', sans-serif;
  --px: 'Silkscreen', 'Lucida Console', monospace;
  --ui: Tahoma, Verdana, 'Segoe UI', sans-serif;
  --mono: 'Lucida Console', Consolas, monospace;

  --m-hi: #f3f6f7; --m1: #d4dad9; --m2: #a9b2ad; --m3: #c2c9c5;
  --bg: #060903; --panel: #0e1509; --panel2: #141d0d; --well: #070c04;
  --line: #2b3c1d; --line2: #40582a;
  --xg: #8fd41f; --xg-hi: #d9ff6b; --xg-deep: #35770a; --xg-dark: #17330a;
  --ink: #e9f6d8; --ink2: #aec394; --muted: #7a8d64;
  --ok: #9dff2e; --warn: #ffc42e;
  --glow: 0 0 6px rgba(217, 255, 107, .45), 0 0 18px rgba(143, 212, 31, .25);
  --gel: linear-gradient(180deg, #e2ff9a 0%, #a9e63a 46%, #63a80f 54%, #8ccd1c 100%);
  --gel-metal: linear-gradient(180deg, var(--m-hi) 0%, var(--m1) 46%, var(--m2) 54%, var(--m3) 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font: 15px/1.6 var(--ui);
  background:
    radial-gradient(900px 500px at 80% -5%, rgba(143, 212, 31, .14), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(143, 212, 31, .07), transparent 60%),
    var(--bg);
}
/* CRT overlay, fixed above the page but never in the way */
.scan {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .5) 100%);
  opacity: .45;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(8, 12, 5, .94), rgba(8, 12, 5, .78));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(8px);
}
.back { display: inline-flex; align-items: center; gap: 9px; font: 400 12px/1 var(--tech); color: var(--ink2); text-decoration: none; letter-spacing: .02em; }
.back:hover { color: var(--xg-hi); }
.linkmark { display: inline-flex; gap: 2px; }
.linkmark i { width: 7px; height: 14px; border-radius: 3px; background: var(--gel); box-shadow: 0 0 8px rgba(143, 212, 31, .5); }
.linkmark i:last-child { transform: translateY(3px); }
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav a { font: 400 10px/1 var(--px); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); text-decoration: none; }
.topnav a:hover { color: var(--xg-hi); text-shadow: var(--glow); }
.topnav .login { padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .3)); color: var(--ink); }
.topnav .login:hover { border-color: var(--xg-deep); }
@media (max-width: 720px) { .topnav a:not(.login) { display: none; } }

/* ── chassis panels ──────────────────────────────────────────────────── */
main { display: grid; gap: 22px; padding: 22px clamp(12px, 4vw, 48px) 40px; max-width: 1220px; margin: 0 auto; }
.chassis {
  position: relative; padding: clamp(22px, 4vw, 40px); border-radius: 10px;
  background: linear-gradient(180deg, var(--panel2) 0%, var(--panel) 100%);
  border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 40px rgba(0, 0, 0, .5), 0 3px 14px rgba(0, 0, 0, .5);
}
.screw { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e7ecea, #7d8a78 60%, #2a3324); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .5); }
.screw.tl { left: 10px; top: 10px; } .screw.tr { right: 10px; top: 10px; }
.screw.bl { left: 10px; bottom: 10px; } .screw.br { right: 10px; bottom: 10px; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 400 9.5px/1 var(--px); letter-spacing: .16em; text-transform: uppercase; color: var(--xg); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 9px var(--ok); animation: blink 2.6s ease-in-out infinite; }
.h2 {
  font: 400 clamp(21px, 3vw, 31px)/1.2 var(--tech); letter-spacing: -.01em; margin-bottom: 12px;
  background: linear-gradient(180deg, #fbffe9 0%, #c3f259 48%, #4f8f08 52%, #a7dd2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(143, 212, 31, .25));
}
.sub { color: var(--ink2); margin: 0 0 14px; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } }
.wordmark { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.wordmark b {
  font: 400 clamp(34px, 6vw, 62px)/1 var(--tech); letter-spacing: -.02em; font-weight: 400;
  background: linear-gradient(180deg, #fbffe9 0%, #c3f259 46%, #3f7a06 54%, #a7dd2c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(143, 212, 31, .35));
}
.wordmark em { font: 400 clamp(13px, 2vw, 20px)/1 var(--px); font-style: normal; color: var(--xg); text-shadow: var(--glow); }
.lead { font-size: 17px; margin: 0 0 12px; }
.say { color: var(--xg-hi); font-family: var(--mono); font-size: 15px; text-shadow: var(--glow); white-space: nowrap; }
@media (max-width: 560px) { .say { white-space: normal; } }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 12px; }
.gel {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 22px; border-radius: 6px; text-decoration: none;
  border: 1px solid #10160c; background: var(--gel-metal); color: #1b2416;
  font: 400 11px/1.5 var(--tech); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .5);
}
.gel:hover { filter: brightness(1.07); }
.gel.lime { background: var(--gel); border-color: var(--xg-dark); color: #16290a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 22px rgba(143, 212, 31, .4); }
.dl-sub { font: 400 8px/1.4 var(--px); opacity: .75; letter-spacing: .04em; }
.note { margin: 0; color: var(--muted); font: 9px/1.6 var(--px); text-transform: uppercase; letter-spacing: .05em; }

/* ── the pop-up replica ──────────────────────────────────────────────── */
.podwrap { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pod {
  width: 344px; max-width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #050803;
  background: radial-gradient(420px 200px at 84% -30%, rgba(143, 212, 31, .22), transparent 60%), linear-gradient(180deg, var(--panel2) 0%, #070c04 100%);
  box-shadow: inset 0 0 0 1px rgba(143, 212, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 34px rgba(143, 212, 31, .2), 0 12px 30px rgba(0, 0, 0, .6);
  animation: float 7s ease-in-out infinite;
}
.pod-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; background: linear-gradient(180deg, #4a5741 0%, #2c3626 44%, #1a2315 56%, #303a29 100%); border-bottom: 1px solid #050803; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.pod-logo { width: 17px; height: 17px; }
.pod-ttl { font: 400 9.5px/1 var(--tech); letter-spacing: .1em; color: #dcf0b6; }
.pod-meta { color: var(--muted); font: 8px/1 var(--px); text-transform: uppercase; }
.pod-ic { margin-left: auto; width: 26px; height: 20px; border: 1px solid #10160c; border-radius: 3px; background: var(--gel-metal); color: #1d2618; display: grid; place-items: center; font: 700 12px/1 var(--ui); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.pod-items { list-style: none; margin: 0; padding: 8px 9px 4px; display: grid; gap: 3px; }
.pod-items li { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; padding: 6px 5px; }
.pod-n { font: 400 13px/1.2 var(--px); color: var(--xg-hi); text-shadow: var(--glow); white-space: nowrap; }
.pod-n small { font-size: 9px; color: var(--ink2); }
.pod-nm { font-weight: 700; font-size: 13px; }
.pod-nm em { font-style: normal; margin-left: 6px; padding: 2px 7px; border-radius: 3px; background: rgba(143, 212, 31, .14); border: 1px solid var(--xg-deep); color: var(--xg-hi); font: 8px/1.3 var(--px); }
.pod-ctl { display: inline-flex; gap: 4px; }
.pod-ctl i {
  width: 21px; height: 23px; border-radius: 3px; border: 1px solid #10160c; background: var(--gel-metal);
  color: #2a3423; display: grid; place-items: center; font: 9px/1 var(--ui); font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.pod-ctl .q { width: 23px; border-radius: 50%; font: 700 12px/1 var(--ui); }
.pod-ctl .dn { background: linear-gradient(180deg, #ffe6a3 0%, #ffc42e 46%, #b98305 54%, #f0b528 100%); color: #3a2a00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px rgba(255, 196, 46, .45); }
.pod-foot { display: flex; align-items: center; gap: 6px; padding: 7px 11px 11px; }
.pod-done { flex: 1; text-align: center; padding: 9px 12px; border: 1px solid var(--xg-dark); border-radius: 5px; background: var(--gel); color: #16290a; font: 400 11px/1.4 var(--tech); letter-spacing: .06em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 16px rgba(143, 212, 31, .4); }
.pod-lnk { padding: 8px 10px; border: 1px solid #10160c; border-radius: 5px; background: var(--gel-metal); color: #1d2618; font: 8.5px/1.5 var(--px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.pod-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 15px 0 12px; border-radius: 999px;
  border: 1px solid #050803; background: linear-gradient(180deg, #24331a 0%, #101a09 46%, #0a1105 54%, #16220d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(143, 212, 31, .18), 0 0 20px rgba(143, 212, 31, .22);
  font: 400 9.5px/1 var(--px); text-transform: uppercase;
}
.pod-pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: live 1.9s ease-out infinite; }
.podwrap figcaption { color: var(--muted); font: 8.5px/1.5 var(--px); text-transform: uppercase; letter-spacing: .05em; text-align: center; }

/* ── steps / grid ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
.step, .cell {
  padding: 18px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #0d1507, #080d04);
}
.step .num { display: block; font: 400 11px/1 var(--px); color: var(--xg); text-shadow: var(--glow); margin-bottom: 10px; }
.step h3, .cell h3 { font: 400 13px/1.35 var(--tech); color: var(--xg-hi); margin-bottom: 8px; }
.step p, .cell p { margin: 0; color: var(--ink2); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

/* ── kit ─────────────────────────────────────────────────────────────── */
.kit-in, .tune-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
@media (max-width: 900px) { .kit-in, .tune-in { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { padding-left: 24px; position: relative; color: var(--ink2); font-size: 14px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); text-shadow: var(--glow); font-weight: 700; }
.rack { display: grid; gap: 8px; padding: 18px; border-radius: 6px; background: linear-gradient(180deg, #0a1006, #050803); border: 1px solid var(--line); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .8); }
.rackrow { display: grid; grid-template-columns: 108px 1fr 26px; align-items: center; gap: 10px; }
.rackrow .lbl { font: 8.5px/1.4 var(--px); color: var(--ink2); text-transform: uppercase; }
.rackrow .bar { height: 10px; border-radius: 2px; background: #10190a; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9); position: relative; overflow: hidden; }
.rackrow .bar::after { content: ""; position: absolute; inset: 1px auto 1px 1px; width: calc(var(--w) - 2px); border-radius: 2px; background: var(--gel); box-shadow: 0 0 10px rgba(143, 212, 31, .5); }
.rackrow .cnt { font: 400 11px/1 var(--px); color: var(--xg-hi); text-align: right; text-shadow: var(--glow); }

/* ── tuning ladder ───────────────────────────────────────────────────── */
.tuning .up { color: var(--ok); }
.tuning .dn { color: var(--warn); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ladder li { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 5px; border: 1px solid var(--line); background: linear-gradient(180deg, #0d1507, #080d04); }
.ladder .stepn { font: 8.5px/1.4 var(--px); color: var(--muted); text-transform: uppercase; }
.ladder .pres { font: 400 13px/1 var(--px); color: var(--ink2); }
.ladder li.now { border-color: var(--xg-deep); box-shadow: 0 0 18px rgba(143, 212, 31, .16); }
.ladder li.now .stepn { color: var(--xg); }
.ladder li.now .pres { color: var(--xg-hi); text-shadow: var(--glow); }

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(180deg, #0d1507, #080d04); }
.faq summary { cursor: pointer; padding: 13px 16px; font: 400 11.5px/1.5 var(--tech); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--xg); font: 400 15px/1 var(--ui); }
.faq details[open] summary { color: var(--xg-hi); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0; padding: 0 16px 15px; color: var(--ink2); font-size: 14px; }

/* ── keep posted ─────────────────────────────────────────────────────── */
.beta-in { display: grid; grid-template-columns: 210px 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
@media (max-width: 820px) { .beta-in { grid-template-columns: 1fr; } .beta-orb { display: none; } }
.beta-orb { position: relative; display: grid; place-items: center; height: 190px; }
.orbit { position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed rgba(143, 212, 31, .35); animation: spin 22s linear infinite; }
.plate {
  width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; color: #16290a;
  background: radial-gradient(circle at 34% 26%, #eaffb8, #a9e63a 42%, #4e9107 72%, #23480a);
  box-shadow: 0 0 40px rgba(143, 212, 31, .35), inset 0 3px 10px rgba(255, 255, 255, .5);
}
.plate svg { width: 58px; height: 58px; }
.beta-form { display: grid; gap: 10px; max-width: 460px; margin-top: 16px; }
.fld { display: grid; gap: 5px; }
.fld span { font: 8.5px/1.4 var(--px); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fld small { color: var(--line2); }
.fld input {
  padding: 11px 13px; border-radius: 4px; border: 1px solid var(--line2); outline: none;
  background: #060a04; color: var(--xg-hi); font: 14px/1.4 var(--mono);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
}
.fld input:focus { border-color: var(--xg); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8), 0 0 14px rgba(143, 212, 31, .3); }
.beta-form .gel { border: 0; cursor: pointer; justify-self: start; }
.beta-form .gel:disabled { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formnote { margin: 0; color: var(--muted); font: 8.5px/1.6 var(--px); text-transform: uppercase; letter-spacing: .04em; }
.formnote.ok { color: var(--ok); text-shadow: var(--glow); }
.formnote.err { color: #ff7a5f; }
.beta-form.done .fld input { opacity: .6; }

/* ── footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 22px clamp(16px, 4vw, 48px) 40px; }
.foot-in { max-width: 1220px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font: 9px/1.6 var(--px); text-transform: uppercase; letter-spacing: .05em; }
.foot a { color: var(--ink2); text-decoration: none; }
.foot a:hover { color: var(--xg-hi); }
.foot-links { display: flex; gap: 18px; }

@keyframes blink { 50% { opacity: .4; } }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(157, 255, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(157, 255, 46, 0); } }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } html { scroll-behavior: auto; } }