/* ============================================================
   BATTLEDESK — official site styles
   Palette measured from the game (UiPalette.gd) + card identity
   ============================================================ */
:root {
  --bg:        #07101d;
  --bg-deep:   #040a14;
  --panel:     #101b2c;
  --panel-alt: #15243a;
  --panel-line:#22334d;
  --text:      #e8f1ff;
  --muted:     #91a4be;
  --teal:      #55ded4;
  --blue:      #718cff;
  --brass:     #cbb9a0;
  --purple:    #b98cff;
  --green:     #7be38a;
  --red:       #ff7a7a;

  --rarity-office:      #91a4be;
  --rarity-low_spec:    #55ded4;
  --rarity-mid_range:   #718cff;
  --rarity-high_end:    #b98cff;
  --rarity-professional:#cbb9a0;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Cascadia Code', monospace;

  --radius: 14px;
  --maxw: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { color: var(--teal); text-decoration:none; }
.mono { font-family: var(--font-mono); letter-spacing:.06em; }
.accent { color: var(--teal); }
::selection { background: rgba(85,222,212,.25); }

.container { width:min(var(--maxw), 92vw); margin-inline:auto; }
.container-narrow { width:min(820px, 92vw); }
.section { padding: 110px 0; position:relative; }
.section-alt {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(113,140,255,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 30%);
  border-block:1px solid rgba(34,51,77,.55);
}
.section-head { max-width: 780px; margin-bottom: 64px; }
.section-kicker { color: var(--teal); font-size: 13px; margin-bottom: 18px; }
.section-kicker::before { content:"▚ "; }
.section-title {
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin-bottom: 22px;
}
.section-sub { color: var(--muted); font-size: 17.5px; max-width: 660px; }
.section-sub strong { color: var(--text); font-weight:600; }
.section-sub em { color: var(--teal); font-style: normal; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-mono); font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  padding: 14px 28px; border-radius: 8px; border:1px solid transparent;
  cursor:pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal), #3ec9c0 60%, var(--blue));
  color:#04101a; font-weight:700;
  box-shadow: 0 4px 24px rgba(85,222,212,.28);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 34px rgba(85,222,212,.42); }
.btn-ghost { border-color: var(--panel-line); color: var(--text); background:rgba(16,27,44,.4); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform:translateY(-2px); }
.btn-lg { padding: 17px 38px; font-size:15px; }
.btn-sm { padding: 9px 18px; font-size:12.5px; }

/* ---------- nav ---------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:100;
  height: var(--nav-h);
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled { background: rgba(7,16,29,.82); backdrop-filter: blur(14px); border-bottom-color: rgba(34,51,77,.6); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { border-radius:8px; box-shadow: 0 0 18px rgba(85,222,212,.25); }
.brand-name { font-family:var(--font-display); font-weight:700; letter-spacing:.18em; font-size:20px; color:var(--text); }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a:not(.btn) { color:var(--muted); font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.nav-links a:not(.btn):hover { color:var(--teal); }
.nav-links a:not(.btn).active { color:var(--teal); }
.nav-cta { margin-left: 6px; }
.nav-burger { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition:transform .3s, opacity .3s; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; padding: calc(var(--nav-h) + 40px) 0 80px; overflow:hidden; }
.hero-bg, .hero-bg > div { position:absolute; inset:0; }
.hero-grid {
  background-image:
    linear-gradient(rgba(113,140,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113,140,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 75%);
}
.hero-glow { border-radius:50%; filter: blur(90px); }
.glow-1 { width:640px; height:640px; left:-160px; top:-80px; background:rgba(85,222,212,.10); }
.glow-2 { width:760px; height:760px; right:-220px; bottom:-220px; background:rgba(113,140,255,.10); }
.hero-scanlines {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; pointer-events:none;
}
.hero-inner { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow { color:var(--teal); font-size:12.5px; margin-bottom:18px; opacity:.9; }
.hero-logo { width:min(560px, 84vw); height:auto; filter: drop-shadow(0 6px 30px rgba(85,222,212,.18)); margin-bottom:26px; }
.hero-title {
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: clamp(44px, 7vw, 84px); line-height:.98; letter-spacing:.015em;
}
.hero-sub { max-width:640px; color:var(--muted); font-size:18px; margin:22px 0 34px; }
.hero-sub strong { color:var(--text); }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero-status { margin-top:44px; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:10px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.float-card {
  position:absolute; z-index:1; width:min(210px, 24vw); border-radius:12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(85,222,212,.14);
  animation: floaty 9s ease-in-out infinite;
  will-change: transform;
}
.fc-1 { top:16%; left:6%; rotate:-8deg; animation-delay:-2s; }
.fc-2 { top:44%; left:12%; rotate:6deg; animation-delay:-5s; width:min(180px, 20vw); }
.fc-3 { top:12%; right:7%; rotate:9deg; animation-delay:-3.5s; }
.fc-4 { top:52%; right:11%; rotate:-7deg; animation-delay:-1s; width:min(180px, 20vw); }
@keyframes floaty { 0%,100%{ translate:0 0 } 50%{ translate:0 -16px } }
@media (max-width: 980px) { .float-card { display:none; } }

/* ---------- stats ---------- */
.stats { border-block:1px solid rgba(34,51,77,.55); background:rgba(4,10,20,.6); }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:34px 0; }
.stat { text-align:center; padding:10px 6px; }
.stat-num { font-family:var(--font-display); font-weight:700; font-size:clamp(30px, 3.4vw, 46px); color:var(--teal); line-height:1; text-shadow:0 0 24px rgba(85,222,212,.35); }
.stat-label { color:var(--muted); font-size:10.5px; margin-top:10px; }
@media (max-width: 860px) { .stats-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }

/* ---------- rig ---------- */
.rig-layout { display:grid; grid-template-columns: minmax(0, 640px) minmax(280px, 1fr); gap:56px; align-items:start; }
.rig-board {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:22px; border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(16,27,44,.85), rgba(7,16,29,.9)),
    repeating-linear-gradient(0deg, rgba(113,140,255,.04) 0 1px, transparent 1px 3px);
  border:1px solid var(--panel-line);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.35);
  position:relative;
}
.rig-board::before {
  content:"9-SLOT RIG // BATTLEDESK";
  position:absolute; top:-11px; left:18px; background:var(--bg); color:var(--muted);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; padding:2px 10px;
  border:1px solid var(--panel-line); border-radius:5px;
}
.rig-slot {
  position:relative; aspect-ratio: 3/4.2; border-radius:10px; overflow:hidden;
  border:1px solid var(--panel-line); background:#0a1424;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.rig-slot:hover { transform:translateY(-5px); border-color:var(--teal); box-shadow:0 12px 30px rgba(85,222,212,.15); z-index:2; }
.rig-slot img { width:100%; height:100%; object-fit:cover; opacity:.94; transition:opacity .3s; }
.rig-slot:hover img { opacity:1; }
.rig-slot.req { border-color: rgba(85,222,212,.4); }
.rig-slot.opt { border-color: rgba(145,164,190,.3); }
.slot-tag {
  position:absolute; bottom:6px; left:6px; background:rgba(4,10,20,.82); color:var(--text);
  font-size:9.5px; letter-spacing:.08em; padding:3px 7px; border-radius:4px;
  border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(4px);
}
.slot-badge {
  position:absolute; top:6px; right:6px; font-family:var(--font-mono); font-size:8.5px;
  padding:2px 6px; border-radius:4px; letter-spacing:.1em;
}
.slot-badge.req { background:rgba(85,222,212,.16); color:var(--teal); border:1px solid rgba(85,222,212,.4); }
.slot-badge.opt { background:rgba(145,164,190,.12); color:var(--muted); border:1px solid rgba(145,164,190,.35); }
.slot-empty { color:#33507a; font-size:30px; }

.rig-rules { display:flex; flex-direction:column; gap:18px; }
.rule-card {
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
  padding:24px 26px;
}
.rule-title { color:var(--teal); font-size:12.5px; margin-bottom:14px; }
.rule-list { list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:15px; }
.rule-key { color:var(--text); font-weight:700; margin-right:4px; }
.rule-quote { background:linear-gradient(135deg, rgba(113,140,255,.10), rgba(85,222,212,.06)), var(--panel); }
.rule-quote p.mono { color:var(--text); font-size:14.5px; line-height:1.6; }
.rule-quote-src { color:var(--muted); font-size:12px; margin-top:12px; font-family:var(--font-mono); }
@media (max-width: 960px) { .rig-layout { grid-template-columns:1fr; } }

/* ---------- benchmarks / terminal ---------- */
.bench-grid { display:grid; grid-template-columns:repeat(3, minmax(0,260px)); gap:34px; justify-content:center; margin-bottom:60px; }
.bench-card { text-align:center; transition:transform .35s var(--ease); }
.bench-card:hover { transform:translateY(-8px); }
.bench-card img {
  width:100%; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(203,185,160,.16);
  margin-bottom:16px;
}
.bench-name { display:block; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.bench-tier { color:var(--brass); font-size:11px; }
@media (max-width: 760px) { .bench-grid { grid-template-columns:1fr; max-width:300px; margin-inline:auto; } }

.terminal {
  max-width:760px; margin-inline:auto; border-radius:12px; overflow:hidden;
  border:1px solid var(--panel-line); background:#050c18;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.terminal-bar {
  display:flex; align-items:center; gap:8px; padding:12px 18px;
  background:var(--panel); border-bottom:1px solid var(--panel-line);
  color:var(--muted); font-size:11.5px;
}
.terminal-dot { width:10px; height:10px; border-radius:50%; background:#2a3d5c; }
.terminal-dot:nth-child(1){ background:var(--red); opacity:.7; }
.terminal-dot:nth-child(2){ background:var(--brass); opacity:.7; }
.terminal-dot:nth-child(3){ background:var(--green); opacity:.7; }
.terminal-body { padding:26px 30px; font-size:14.5px; line-height:2; color:#a9c4dd; }
.terminal-body .ok { color:var(--green); }
.terminal-body .win { color:var(--teal); text-shadow:0 0 14px rgba(85,222,212,.5); }
.terminal-body p { white-space:nowrap; overflow:hidden; }
@media (max-width: 640px) { .terminal-body { font-size:12px; padding:18px; overflow-x:auto; } .terminal-body p{ white-space:pre; } }

/* ---------- gallery ---------- */
.gallery-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.chip {
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  background:var(--panel); color:var(--muted); border:1px solid var(--panel-line);
  transition: all .25s var(--ease);
}
.chip:hover { color:var(--text); border-color:var(--muted); }
.chip.active { background:var(--teal); border-color:var(--teal); color:#04101a; font-weight:700; box-shadow:0 0 24px rgba(85,222,212,.3); }
.chip-new { border-style:dashed; }
.chip-new.active { background:var(--brass); border-color:var(--brass); color:#1a1208; box-shadow:0 0 24px rgba(203,185,160,.35); }

.gallery {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:26px;
}
.card-tile { cursor:pointer; animation: fadeUp .5s var(--ease) both; }
.card-tile img {
  width:100%; border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 0 1px var(--tile-line, rgba(34,51,77,.8));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-tile:hover img { transform:translateY(-8px) scale(1.02); box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 1px var(--tile-glow, rgba(85,222,212,.45)), 0 0 34px var(--tile-glow-soft, rgba(85,222,212,.18)); }
.card-cap { margin-top:12px; }
.card-cap .c-name { font-family:var(--font-display); font-weight:600; font-size:16.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text); line-height:1.2; }
.card-cap .c-meta { font-size:11.5px; color:var(--muted); margin-top:3px; font-family:var(--font-mono); }
.card-cap .c-flavor { font-size:13.5px; color:var(--muted); font-style:italic; margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rarity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
@keyframes fadeUp { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.gallery-hint { text-align:center; color:#33507a; font-size:11px; margin-top:34px; letter-spacing:.18em; }

/* ---------- lightbox ---------- */
.lightbox {
  position:fixed; inset:0; z-index:200; display:flex; gap:44px; align-items:center; justify-content:center;
  padding: 6vh 8vw; background:rgba(3,7,14,.88); backdrop-filter: blur(10px);
  animation: fadeIn .25s var(--ease);
}
.lightbox[hidden] { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.lightbox-card { width:min(320px, 34vw); animation: fadeUp .35s var(--ease); }
.lightbox-card img { width:100%; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px var(--lb-line, rgba(85,222,212,.4)), 0 0 50px var(--lb-glow, rgba(85,222,212,.15)); }
.lightbox-info { max-width:420px; animation: fadeUp .35s var(--ease) .06s both; }
.lb-id { color:var(--muted); font-size:12px; }
.lb-name { font-family:var(--font-display); font-weight:700; font-size:clamp(30px, 3.6vw, 44px); text-transform:uppercase; line-height:1.02; margin:8px 0 6px; }
.lb-mfr { color:var(--teal); font-size:12.5px; margin-bottom:14px; }
.lb-rarity { display:inline-block; font-size:11.5px; padding:4px 12px; border-radius:999px; border:1px solid currentColor; margin-bottom:18px; }
.lb-flavor { font-style:italic; color:var(--muted); font-size:16px; border-left:2px solid var(--panel-line); padding-left:16px; margin-bottom:20px; }
.lb-specs { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:12.5px; color:var(--muted); border-top:1px dashed var(--panel-line); padding-top:16px; }
.lb-specs span:nth-child(odd) { color:var(--text); }
.lb-ability { margin-top:16px; font-size:12.5px; color:var(--brass); }
.lightbox-close {
  position:absolute; top:26px; right:30px; background:none; border:1px solid var(--panel-line);
  color:var(--muted); font-size:12px; padding:9px 16px; border-radius:8px; cursor:pointer;
  font-family:var(--font-mono); transition:all .2s;
}
.lightbox-close:hover { color:var(--teal); border-color:var(--teal); }
@media (max-width: 860px) {
  .lightbox { flex-direction:column; gap:24px; padding:10vh 6vw; overflow-y:auto; }
  .lightbox-card { width:min(260px, 60vw); }
}

/* ---------- timeline ---------- */
.timeline { position:relative; margin: 10px 0 70px; padding-left: 34px; }
.timeline::before {
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(180deg, var(--teal), var(--blue), transparent);
  opacity:.5;
}
.timeline-item { position:relative; padding: 0 0 44px 18px; max-width:640px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before {
  content:""; position:absolute; left:-32px; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--teal); box-shadow:0 0 14px rgba(85,222,212,.5);
}
.timeline-year { color:var(--teal); font-size:15px; margin-bottom:6px; text-shadow:0 0 18px rgba(85,222,212,.4); }
.timeline-body h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:21px; letter-spacing:.05em; margin-bottom:6px; }
.timeline-body p { color:var(--muted); font-size:15.5px; }

.mfr-strip {
  display:flex; flex-wrap:wrap; gap:14px 10px; align-items:center; justify-content:center;
  padding:26px 30px; border:1px dashed var(--panel-line); border-radius:var(--radius);
  color:var(--muted); font-size:12px; text-transform:uppercase;
}
.mfr-strip span:hover { color:var(--teal); cursor:default; }
.mfr-sep { color:var(--teal); font-size:9px; opacity:.6; }

/* ---------- boosters ---------- */
.booster-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-bottom:44px; }
.booster { text-align:center; transition:transform .3s var(--ease); }
.booster:hover { transform:translateY(-6px); }
.booster img {
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(34,51,77,.8);
}
.booster figcaption { margin-top:10px; font-size:11.5px; color:var(--muted); letter-spacing:.14em; }
.econ-strip { display:flex; flex-wrap:wrap; gap:14px 10px; justify-content:center; color:var(--muted); font-size:12.5px; }
.econ-strip span:not(.mfr-sep) { color:var(--text); }
@media (max-width: 980px) { .booster-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px) { .booster-grid { grid-template-columns:repeat(2,1fr); } }

/* ---------- play / modes ---------- */
.mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-bottom:50px; }
.mode {
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
  padding:30px 28px; position:relative; overflow:hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.mode::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--teal), transparent); opacity:.7; }
.mode:nth-child(2)::before { background:linear-gradient(90deg, var(--blue), transparent); }
.mode:nth-child(3)::before { background:linear-gradient(90deg, var(--brass), transparent); }
.mode:nth-child(4)::before { background:linear-gradient(90deg, var(--teal), var(--blue)); }
.mode:hover { transform:translateY(-6px); border-color:var(--panel-line); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.mode-title { font-size:14px; letter-spacing:.18em; color:var(--teal); margin-bottom:14px; }
.mode:nth-child(2) .mode-title { color:var(--blue); }
.mode:nth-child(3) .mode-title { color:var(--brass); }
.mode:nth-child(4) .mode-title { color:var(--text); }
.mode-link { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.mode-link:hover { color:var(--text); }
.mode p { color:var(--muted); font-size:15px; margin-bottom:16px; }
.mode-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.mode-list li { color:var(--text); font-size:14px; padding-left:20px; position:relative; }
.mode-list li::before { content:"▸"; position:absolute; left:0; color:var(--teal); }
@media (max-width: 1120px) { .mode-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 920px) { .mode-grid { grid-template-columns:1fr; } }

.platform-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:56px; }
.platform {
  padding:10px 22px; border:1px solid var(--panel-line); border-radius:999px;
  color:var(--muted); font-size:12.5px; letter-spacing:.12em; background:rgba(16,27,44,.5);
}
.platform:hover { border-color:var(--teal); color:var(--teal); }

.download-band { text-align:center; }
.download-note { color:#33507a; font-size:11px; letter-spacing:.14em; margin-bottom:18px; }

/* ---------- FAQ ---------- */
.faq { display:flex; flex-direction:column; gap:14px; }
.faq-item {
  background:var(--panel); border:1px solid var(--panel-line); border-radius:12px;
  transition: border-color .25s;
}
.faq-item[open] { border-color: rgba(85,222,212,.5); }
.faq-q {
  cursor:pointer; list-style:none; padding:20px 24px; color:var(--text);
  font-size:14.5px; letter-spacing:.06em; display:flex; justify-content:space-between; align-items:center; gap:16px;
  user-select:none;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { content:"+"; color:var(--teal); font-size:20px; transition:transform .25s var(--ease); }
.faq-item[open] .faq-q::after { transform:rotate(45deg); }
.faq-a { padding: 0 24px 22px; color:var(--muted); font-size:15.5px; max-width:680px; }

/* ---------- card database page ---------- */
.db-hero { padding: calc(var(--nav-h) + 70px) 0 10px; }
.db-section { padding: 46px 0 110px; }
.db-controls { display:flex; flex-direction:column; gap:16px; margin-bottom:36px; }
.db-control-group { display:flex; gap:8px; flex-wrap:wrap; }
.db-search { display:flex; align-items:center; gap:14px; margin-top:4px; }
.db-search-input {
  flex:1; max-width:520px; background:var(--panel); border:1px solid var(--panel-line);
  color:var(--text); font-size:13px; letter-spacing:.08em; padding:12px 18px; border-radius:8px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.db-search-input::placeholder { color:#33507a; }
.db-search-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(85,222,212,.12); }
.db-count { color:var(--muted); font-size:12px; white-space:nowrap; }

/* ---------- downloads ---------- */
.dl-wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; margin-bottom:52px; }
.dl-card {
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius);
  padding:24px 24px 20px; display:flex; flex-direction:column; gap:6px;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.dl-card:hover { transform:translateY(-4px); border-color:rgba(85,222,212,.45); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.dl-name { color:var(--teal); font-size:14px; letter-spacing:.14em; }
.dl-note { color:var(--muted); font-size:13.5px; min-height:1.4em; }
.dl-actions { display:flex; flex-direction:column; gap:8px; margin:10px 0 8px; }
.dl-actions .btn { justify-content:center; }
.dl-update { color:var(--muted); font-size:11px; letter-spacing:.06em; text-align:center; transition:color .2s; }
.dl-update:hover { color:var(--teal); }
.dl-meta { color:#33507a; font-size:10.5px; letter-spacing:.08em; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--panel-line); background:var(--bg-deep); padding: 60px 0 40px; }
.footer-inner { display:flex; flex-direction:column; gap:28px; align-items:center; text-align:center; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { border-radius:10px; }
.footer-name { font-family:var(--font-display); font-weight:700; letter-spacing:.2em; font-size:20px; }
.footer-by { color:var(--muted); font-size:13px; font-family:var(--font-mono); letter-spacing:.1em; }
.footer-links { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.footer-links a { color:var(--muted); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.footer-links a:hover { color:var(--teal); }
.footer-legal { color:#33507a; font-size:12.5px; max-width:640px; line-height:1.7; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- responsive nav ---------- */
@media (max-width: 980px) {
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:6px; align-items:stretch;
    background:rgba(7,16,29,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--panel-line);
    padding:18px 24px 26px; display:none;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 8px; }
  .nav-cta { margin:10px 0 0; justify-content:center; }
  .nav-burger { display:block; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal { opacity:1; transform:none; }
  .float-card { animation:none; }
}