/* ============================================================
   SentryLabs — 5th Anniversary Landing Experience
   Design system: lime-on-charcoal CLI / terminal aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* tweakable knobs */
  --gh: 132;            /* green hue */
  --glow: 1;            /* glow intensity multiplier */

  /* palette */
  --green:      oklch(0.86 0.21 var(--gh));
  --green-soft: oklch(0.78 0.18 var(--gh));
  --green-deep: oklch(0.62 0.16 var(--gh));
  --green-dim:  oklch(0.55 0.09 var(--gh));

  --bg:        #08090a;
  --bg-2:      #0c0e0e;
  --panel:     #101312;
  --panel-2:   #141817;
  --line:      #1e2422;
  --line-2:    #2a312e;

  --ink:       #eef2ee;
  --ink-2:     #b6bdb6;
  --mut:       #79817b;
  --mut-2:     #525a55;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 80px);

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{ /* faint scanline atmosphere */
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  opacity:.5; mix-blend-mode:overlay;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green); color:#06120a; }

/* ---- utility ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); }
.grn{ color:var(--green); }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--green); opacity:.7; }
.muted{ color:var(--mut); }

/* corner-bracket frame (the "MAINTENANCE WINDOW" device) */
.bracket{ position:relative; }
.bracket::before, .bracket::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:1.5px solid var(--green); opacity:.85;
}
.bracket::before{ top:-7px; left:-7px; border-right:0; border-bottom:0; }
.bracket::after{ bottom:-7px; right:-7px; border-left:0; border-top:0; }

/* section scaffolding */
section{ position:relative; z-index:2; padding-block:clamp(72px,11vh,150px); }
.sec-tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--mut-2);
  text-transform:uppercase; margin-bottom:30px;
}
h1,h2,h3{ font-weight:800; line-height:1.02; letter-spacing:-0.02em; text-wrap:balance; }
h2{ font-size:clamp(2rem,5.2vw,3.7rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-0.01em; }
p{ text-wrap:pretty; }

/* buttons */
.btn{
  font-family:var(--mono); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.7em; cursor:pointer;
  padding:1.05em 1.6em; border:0; border-radius:2px; line-height:1;
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.btn-primary{
  background:var(--green); color:#06140a;
  box-shadow:0 0 calc(34px*var(--glow)) -6px var(--green);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 calc(52px*var(--glow)) -4px var(--green); }
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line-2);
}
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(4px); }

/* reveal-on-scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ============================== NAV ============================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad);
  background:linear-gradient(to bottom, rgba(8,9,10,.94), rgba(8,9,10,0));
  transition:background .3s ease, border-color .3s, padding .3s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(8,9,10,.92);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  padding:12px var(--pad);
}
.nav-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-brand img.sentry-logo{ height: 34px; width: auto; transition: height .3s ease; }
.brand-divider{ width:1px; height:26px; background:var(--line-2); margin-inline:4px; transition: height .3s ease; }
.nav-brand img.anniversary-logo { height: 60px; width: auto; opacity: 0.95; transition: height 0.3s ease, opacity 0.2s ease, transform 0.2s ease; }
.nav-brand img.anniversary-logo:hover { opacity: 1; transform: scale(1.02); }
.nav-brand .bn{ font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; transition: font-size .3s ease; }
.nav-brand .bn b{ font-weight:700; color:var(--ink); }
.nav-brand .bn span{ display:block; color:var(--mut); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; transition: font-size .3s ease; }

/* Dynamic scroll-shrink classes */
.nav.solid img.sentry-logo { height: 26px; }
.nav.solid .brand-divider { height: 18px; }
.nav.solid img.anniversary-logo { height: 38px; }
.nav.solid .bn { font-size: .76rem; }
.nav.solid .bn span { font-size: .58rem; }

/* Mobile-responsive logo adjustments */
@media (max-width: 600px) {
  .nav { padding: 14px var(--pad); }
  .nav.solid { padding: 8px var(--pad); }
  .nav-brand { gap: 6px; }
  .nav-brand .bn { display: none; }
  .brand-divider { display: none; }
  .nav-brand img.sentry-logo { height: 28px; }
  .nav-brand img.anniversary-logo { height: 44px; }
  .nav.solid img.anniversary-logo { height: 30px; }
  .nav.solid img.sentry-logo { height: 22px; }
  .nav .btn { padding: .55em .9em; font-size: .74rem; }
}
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-status{ font-family:var(--mono); font-size:.72rem; color:var(--mut); display:flex; align-items:center; gap:8px; }
.nav-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.nav .btn{ padding:.7em 1.1em; font-size:.8rem; }
@media (max-width:760px){ .nav-status{ display:none; } }

/* ============================== HERO ============================== */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:90px; overflow:hidden; position:relative; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#070908; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; }
.hero-scrim{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.82) 32%, rgba(8,9,10,.34) 60%, rgba(8,9,10,.12) 100%),
    linear-gradient(to top, rgba(8,9,10,.9) 0%, transparent 26%),
    linear-gradient(to bottom, rgba(8,9,10,.55) 0%, transparent 22%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,640px) 1fr; gap:40px; align-items:center; width:100%;
}
.hero h1{ font-size:clamp(2.6rem,6.3vw,5.6rem); margin:22px 0 0; }
.hero h1 .q{ color:var(--green); text-shadow:0 0 calc(40px*var(--glow)) oklch(0.78 0.18 var(--gh)/.5); }
.cursor{ display:inline-block; width:.5ch; height:1em; background:var(--green); margin-left:.08em; transform:translateY(.1em);
  box-shadow:0 0 12px var(--green); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero-sub{ color:var(--ink-2); font-size:clamp(1rem,1.5vw,1.18rem); max-width:33ch; margin:26px 0 34px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-trust{ font-family:var(--mono); font-size:.74rem; color:var(--mut); margin-top:20px; display:flex; align-items:center; gap:8px; }
.hero-trust b{ color:var(--green-soft); font-weight:500; }
@media (max-width:900px){
  .hero{ min-height:100svh; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; align-items:end; padding-bottom:8vh; }
  .hero-scrim{ background:
    linear-gradient(to bottom, rgba(8,9,10,.5) 0%, rgba(8,9,10,.2) 30%, rgba(8,9,10,.75) 68%, rgba(8,9,10,.96) 100%); }
  .hero-sub{ margin-inline:auto; } .hero-cta-row{ justify-content:center; } .hero-trust{ justify-content:center; }
  .eyebrow{ justify-content:center; }
}

/* ground neural-map atmosphere behind sections */
.atmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.atmos img{ position:absolute; mix-blend-mode:screen; opacity:.05; }

/* ============================== PUZZLE ============================== */
.puzzle-shell{ display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.term{
  background:linear-gradient(180deg,#0c0f0e,#0a0c0b);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 30px 80px -40px #000;
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:#0e1110; font-family:var(--mono); font-size:.72rem; color:var(--mut);
}
.term-bar .tdot{ width:9px; height:9px; border-radius:50%; background:#262b29; }
.term-bar .tdot.g{ background:var(--green); box-shadow:0 0 8px var(--green); }
.term-bar .tt{ margin-left:8px; letter-spacing:.12em; }
.term-bar .tt b{ color:var(--ink-2); font-weight:500; }
.term-body{ padding:clamp(18px,3vw,30px); }

/* puzzle grid */
#board{ touch-action:none; display:grid; gap:6px; width:100%; max-width:440px; margin:0 auto;
  user-select:none; -webkit-user-select:none; }
.cell{
  position:relative; aspect-ratio:1; border-radius:7px;
  background:#111514; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:clamp(.9rem,2vw,1.25rem); color:var(--ink);
  transition:background .12s, border-color .12s, color .12s;
}
.cell.num{ border-color:var(--line-2); }
.cell.num .badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:7px; z-index:3;
}
.cell.endpoint .badge{ background:#0f1311; border:1.5px solid var(--green-deep); color:var(--green); }
.cell.fill{ background:oklch(0.86 0.21 var(--gh) / .14); border-color:var(--green-deep); }
.cell.head{ box-shadow:inset 0 0 0 2px var(--green), 0 0 calc(18px*var(--glow)) -2px var(--green); }
.cell.done-cell{ background:oklch(0.86 0.21 var(--gh)/.2); }
/* path drawing canvas overlay */
.board-wrap{ position:relative; }
#paint{ position:absolute; inset:0; pointer-events:none; z-index:2; }

/* puzzle side panel */
.pz-side{ display:flex; flex-direction:column; gap:14px; }
.stat-card{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px 18px; }
.stat-card .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.stat-card .v{ font-family:var(--mono); font-size:1.9rem; font-weight:700; color:var(--ink); margin-top:4px; }
.stat-card .v.grn{ color:var(--green); }
.pz-rules{ font-family:var(--mono); font-size:.78rem; line-height:1.9; color:var(--ink-2); }
.pz-rules li{ list-style:none; padding-left:18px; position:relative; }
.pz-rules li::before{ content:"›"; position:absolute; left:0; color:var(--green); }
.pz-actions{ display:flex; gap:10px; }
.pz-actions .btn{ flex:1; justify-content:center; padding:.85em 1em; font-size:.82rem; }

/* solve overlay */
.solve-flash{
  position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; flex-direction:column;
  background:rgba(8,10,9,.93); backdrop-filter:blur(4px); text-align:center; border-radius:8px; padding:24px;
}
.solve-flash.show{ display:flex; animation:fadein .4s ease; }
@keyframes fadein{ from{ opacity:0; } }
.solve-flash .big{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; color:var(--green); text-shadow:0 0 30px var(--green); }
.solve-flash .pct{ font-family:var(--mono); color:var(--ink-2); margin-top:10px; font-size:.95rem; }
.solve-flash .scoreline{ font-family:var(--mono); margin-top:18px; color:var(--mut); font-size:.8rem; letter-spacing:.1em; }

@media (max-width:880px){ .puzzle-shell{ grid-template-columns:1fr; } }

/* ============================== SCORE / ENLIST ============================== */
.enlist-card{
  background:linear-gradient(160deg,#0e1211,#0a0c0b); border:1px solid var(--line);
  border-radius:10px; padding:clamp(26px,4vw,48px); position:relative; overflow:hidden;
}
.enlist-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), transparent); opacity:.7; }
.enlist-grid{ display:grid; grid-template-columns:1fr 1px 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
.enlist-grid .vline{ background:var(--line); align-self:stretch; }
.score-readout .big-score{ font-family:var(--mono); font-size:clamp(3rem,8vw,5rem); font-weight:700; color:var(--green); line-height:1;
  text-shadow:0 0 calc(30px*var(--glow)) oklch(0.78 0.18 var(--gh)/.4); }
.score-readout .sub{ font-family:var(--mono); color:var(--mut); font-size:.8rem; letter-spacing:.1em; margin-top:8px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.field input{
  background:#0a0c0b; border:1px solid var(--line-2); border-radius:4px; padding:.85em 1em;
  color:var(--ink); font-family:var(--mono); font-size:.92rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus{ outline:0; border-color:var(--green); box-shadow:0 0 0 3px oklch(0.86 0.21 var(--gh)/.12); }
.field .opt{ color:var(--mut-2); text-transform:none; letter-spacing:0; }
.enlist-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.priv{ font-family:var(--mono); font-size:.7rem; color:var(--mut-2); margin-top:14px; text-align:center; }
@media (max-width:760px){ .enlist-grid{ grid-template-columns:1fr; } .enlist-grid .vline{ display:none; } }

/* ============================== THE 500 / LEADERBOARD ============================== */
.five-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; margin-bottom:48px; }
.scarcity{ text-align:right; }
.scarcity .num{ font-family:var(--mono); font-size:clamp(3rem,7vw,4.6rem); font-weight:700; color:var(--green); line-height:1;
  text-shadow:0 0 calc(26px*var(--glow)) oklch(0.78 0.18 var(--gh)/.4); }
.scarcity .lab{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.scar-bar{ height:8px; background:#10130f; border:1px solid var(--line); border-radius:99px; overflow:hidden; margin-top:14px; }
.scar-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--green-deep),var(--green));
  box-shadow:0 0 14px var(--green); border-radius:99px; transition:width 1.4s cubic-bezier(.2,.7,.2,1); }

.board-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start; }
.lb{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.lb-head{ display:grid; grid-template-columns:54px 1fr auto auto; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.lb-row{ display:grid; grid-template-columns:54px 1fr auto auto; gap:14px; padding:13px 20px; align-items:center;
  border-bottom:1px solid var(--line); transition:background .3s; }
.lb-row:last-child{ border-bottom:0; }
.lb-row .rank{ font-family:var(--mono); font-weight:700; color:var(--mut); }
.lb-row.top .rank{ color:var(--green); }
.lb-row .who{ display:flex; flex-direction:column; }
.lb-row .who b{ font-weight:600; font-size:.95rem; }
.lb-row .who span{ font-family:var(--mono); font-size:.68rem; color:var(--mut); }
.lb-row .sc{ font-family:var(--mono); font-weight:600; color:var(--ink-2); }
.lb-row .tm{ font-family:var(--mono); font-size:.78rem; color:var(--mut); }
.lb-row.you{ background:oklch(0.86 0.21 var(--gh)/.09); position:sticky; }
.lb-row.you .rank, .lb-row.you .who b{ color:var(--green); }
.lb-row.bump{ animation:bump .6s ease; }
@keyframes bump{ 0%{ background:oklch(0.86 0.21 var(--gh)/.22); } 100%{ background:transparent; } }
.lb-foot{ padding:12px 20px; font-family:var(--mono); font-size:.7rem; color:var(--mut); display:flex; justify-content:space-between; border-top:1px solid var(--line); }

/* the shirt reveal */
.shirt-card{ background:linear-gradient(180deg,#0d100f,#0a0c0b); border:1px solid var(--line); border-radius:8px; padding:22px; }
.shirt-card .shirt-img{ position:relative; border-radius:6px; overflow:hidden; background:#101312; }
.shirt-card .shirt-img img{ width:100%; }
.shirt-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-top:16px; }
.shirt-card h3{ margin-top:6px; }
.shirt-card p{ color:var(--ink-2); font-size:.92rem; margin-top:10px; }
@media (max-width:900px){ .board-layout{ grid-template-columns:1fr; } .five-head{ grid-template-columns:1fr; } .scarcity{ text-align:left; } }

/* ============================== CLIMB / UNLOCK MENU ============================== */
.unlock-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.unlock{ background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:22px; position:relative;
  transition:border-color .2s, transform .2s, background .2s; cursor:default; }
.unlock:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.unlock .ico{ width:38px; height:38px; border:1px solid var(--line-2); border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--green); margin-bottom:16px; font-size:1rem; }
.unlock h4{ font-size:1.02rem; font-weight:700; }
.unlock p{ color:var(--mut); font-size:.85rem; margin-top:6px; }
.unlock .reward{ font-family:var(--mono); font-size:.82rem; color:var(--green); margin-top:14px; display:flex; justify-content:space-between; align-items:center; }
.unlock .cap{ font-family:var(--mono); font-size:.66rem; color:var(--mut-2); letter-spacing:.08em; }
.loadwall{ margin-top:28px; border:1px dashed var(--line-2); border-radius:7px; padding:18px 22px;
  font-family:var(--mono); font-size:.84rem; color:var(--ink-2); display:flex; gap:14px; align-items:flex-start; }
.loadwall b{ color:var(--green); }

/* ============================== DEFENSE STREAK ============================== */
.streak-shell{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.streak-card{ background:linear-gradient(160deg,#0e1211,#0a0c0b); border:1px solid var(--line); border-radius:10px; padding:clamp(22px,3vw,34px); }
.streak-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.streak-count{ font-family:var(--mono); font-size:2.6rem; font-weight:700; color:var(--green); line-height:1; }
.streak-count small{ font-size:.8rem; color:var(--mut); letter-spacing:.1em; display:block; }
.streak-flames{ display:flex; gap:5px; }
.streak-flames .f{ width:11px; height:24px; border-radius:3px; background:#161a18; border:1px solid var(--line-2); transition:.3s; }
.streak-flames .f.on{ background:var(--green); box-shadow:0 0 10px var(--green); border-color:var(--green); }
.streak-opts{ display:flex; flex-direction:column; gap:10px; }
.streak-opt{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line-2); border-radius:6px;
  cursor:pointer; transition:.18s; background:#0b0e0d; }
.streak-opt:hover{ border-color:var(--green-deep); }
.streak-opt.logged{ border-color:var(--green-deep); background:oklch(0.86 0.21 var(--gh)/.08); }
.streak-opt .box{ width:20px; height:20px; border:1.5px solid var(--line-2); border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:#06140a; transition:.18s; }
.streak-opt.logged .box{ background:var(--green); border-color:var(--green); }
.streak-opt .lab{ font-weight:600; font-size:.95rem; }
.streak-opt .lab span{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--mut); font-weight:400; }
.streak-opt .plus{ margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--green); }
.streak-bridge{ }
.streak-bridge .kbd{ font-family:var(--mono); color:var(--green); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.streak-bridge p{ font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.4; margin-top:16px; color:var(--ink); font-weight:500; text-wrap:balance; }
.streak-bridge p b{ color:var(--green); font-weight:600; }
@media (max-width:880px){ .streak-shell{ grid-template-columns:1fr; } }

/* ============================== MANIFESTO ============================== */
.manifesto{ background:#070808; }
.manifesto .atmos img{ opacity:.07; }
.mani-wrap{ max-width:820px; position:relative; }
.mani-wrap p{ font-size:clamp(1.4rem,3.2vw,2.3rem); font-weight:600; line-height:1.32; letter-spacing:-0.01em; color:var(--ink-2); }
.mani-wrap p + p{ margin-top:1.1em; }
.mani-wrap .hl{ color:var(--ink); }
.mani-wrap .grn{ color:var(--green); }
.mani-sign{ font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--mut); margin-top:48px; }

/* ============================== DAILY DEFENSES ============================== */
.def-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.def{ background:var(--bg-2); padding:26px 24px; transition:background .2s; }
.def:hover{ background:var(--panel); }
.def .n{ font-family:var(--mono); font-size:.72rem; color:var(--green); letter-spacing:.1em; }
.def h4{ font-size:1.08rem; font-weight:700; margin-top:14px; }
.def p{ color:var(--mut); font-size:.86rem; margin-top:8px; }
.screenshot-hint{ font-family:var(--mono); font-size:.72rem; color:var(--mut-2); margin-top:24px; display:flex; align-items:center; gap:8px; }

/* ============================== JOIN THE WATCH ============================== */
.watch-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:38px; }
.social{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:28px 26px; transition:.2s; display:block; }
.social:hover{ border-color:var(--green-deep); transform:translateY(-4px); background:var(--panel-2); }
.social .net{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.social h4{ font-size:1.25rem; font-weight:800; margin-top:10px; }
.social .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.social .reward{ font-family:var(--mono); font-size:.78rem; color:var(--green); }
.social .go{ font-family:var(--mono); font-size:.8rem; color:var(--ink-2); }
.social:hover .go{ color:var(--green); }
@media (max-width:760px){ .watch-grid{ grid-template-columns:1fr; } }

/* ============================== FOOTER ============================== */
footer{ border-top:1px solid var(--line); background:#070808; padding-block:clamp(56px,8vh,90px); position:relative; z-index:2; }
.foot-lockup h3{ font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-0.02em; }
.foot-lockup h3 .grn{ color:var(--green); }
.foot-lockup .tag{ font-family:var(--mono); color:var(--mut); letter-spacing:.12em; margin-top:12px; }
.foot-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-top:56px; }
.foot-cols .ftitle{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:14px; }
.foot-cols p, .foot-cols li{ color:var(--ink-2); font-size:.88rem; line-height:1.9; list-style:none; }
.foot-cols a:hover{ color:var(--green); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--mut-2); }
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand img{ height:32px; width: auto; opacity: 0.8; transition: opacity 0.2s ease, transform 0.2s ease; }
.foot-brand img:hover{ opacity: 1; transform: scale(1.02); }
@media (max-width:760px){ .foot-cols{ grid-template-columns:1fr 1fr; } }

/* timeline window strip */
.timeline{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:30px; }
.tl{ flex:1 1 120px; padding:16px 18px; border-right:1px solid var(--line); }
.tl:last-child{ border-right:0; }
.tl .w{ font-family:var(--mono); font-size:.66rem; color:var(--mut); letter-spacing:.1em; }
.tl .t{ font-weight:700; font-size:.92rem; margin-top:6px; }
.tl.active{ background:oklch(0.86 0.21 var(--gh)/.07); }
.tl.active .t{ color:var(--green); }

/* ============================== FULL LEADERBOARD MODAL ============================== */
.btn-full-lb {
  background: transparent;
  border: none;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
}
.btn-full-lb:hover {
  color: var(--ink);
  transform: translateX(2px);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 5, 5, 0.88);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.open {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: #08090a;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.9), 0 0 40px -12px var(--green-deep);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.modal.open .modal-content {
  transform: translateY(0);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-family: var(--sans);
}
.close-btn {
  background: transparent;
  border: none;
  color: var(--mut);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.close-btn:hover {
  color: var(--green);
  transform: scale(1.1);
}
.modal-search {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #0b0c0d;
}
.modal-search input {
  width: 100%;
  background: #08090a;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-search input:focus {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.15);
}
.modal-body-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #08090a;
}
.modal-body-wrapper .lb {
  border-bottom: 0;
}
.modal-body-wrapper::-webkit-scrollbar {
  width: 6px;
}
.modal-body-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body-wrapper::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
}
.modal-body-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--green-deep);
}
.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: #0b0c0d;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mut-2);
}
@media (max-width: 600px) {
  .modal-content {
    max-height: 90vh;
    border-radius: 8px;
  }
  .modal-body-wrapper {
    padding: 12px;
  }
  .modal-header {
    padding: 14px 18px;
  }
  .modal-search {
    padding: 12px 18px;
  }
  .modal-footer {
    padding: 12px 18px;
  }
}