:root { --bg:#07080b; --ink:#eef1f4; --mute:#8b929c; --line:#242a32; --beam:#9fd4ff; --card:#101318; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body {
  background:
    radial-gradient(1100px 420px at 8% -8%, rgba(159,212,255,.16), transparent 58%),
    var(--bg);
  color: var(--ink); font-family: Inter, system-ui, sans-serif; min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

.top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 4vw;
  border-bottom: 1px solid #8ec8ff33;
  position: sticky; top: 0; z-index: 40;
  background:
    linear-gradient(90deg, rgba(7,8,11,.94), rgba(7,8,11,.82)),
    repeating-linear-gradient(105deg, transparent 0 18px, rgba(159,212,255,.04) 18px 19px),
    repeating-linear-gradient(15deg, #0b1016 0 46px, #10161d 46px 92px);
}
.logo { display: flex; align-items: center; gap: 14px; }
.mark { width: 64px; height: 64px; filter: drop-shadow(0 8px 16px #9fd4ff66); transform: perspective(200px) rotateY(-12deg); }
.word { display: flex; flex-direction: column; line-height: .86; }
.word b { font-family: Orbitron, sans-serif; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: 3px; color: #fff; font-style: normal; text-shadow: 0 0 18px #9fd4ff55; }
.word i { font-family: Orbitron, sans-serif; font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 8px; color: #9fd4ff; font-style: normal; margin-top: 4px; }
.top nav {
  display: flex; justify-content: flex-end; gap: clamp(10px, 1.4vw, 22px); flex-wrap: wrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.top nav a { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.top nav a.on, .top nav a:hover { color: #fff; border-bottom-color: var(--beam); }

.page { max-width: min(1200px, 94vw); margin: 0 auto; padding: 18px 3vw 64px; }
.page h1, .hero-title {
  font-family: Orbitron, sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: 1px;
  line-height: 1;
  color: #d7eeff;
  text-shadow: 0 0 22px #9fd4ff55;
  margin: 0 0 10px;
}
.hero-title span { display: inline; }
.tag {
  display: block;
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8b97a3;
}
.lede { color: var(--mute); max-width: 640px; line-height: 1.55; margin: 0 0 18px; }

.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 0 16px;
}
.search-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #2a323c;
  background: #0c0f14;
  color: inherit;
  padding: 0 14px;
  font: inherit;
}
.search-row .go { flex: 0 0 128px; height: 48px; width: 128px; }
input, select { height: 48px; border-radius: 12px; border: 1px solid #2a323c; background: #0c0f14; color: inherit; padding: 0 14px; font: inherit; }
input:focus, select:focus { outline: 0; border-color: #9fd4ff88; }
button { font: inherit; cursor: pointer; }
.go {
  height: 48px; padding: 0 18px; border: 0; border-radius: 12px; font-weight: 800; color: #10202c;
  background: linear-gradient(115deg, #8ec8ff, #fff 48%, #c9b7ff);
}
.ghost { height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: inherit; }

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 22px;
}
.chip {
  height: 48px;
  border-radius: 11px;
  border: 1px solid #2a323c;
  background: #0c1016;
  color: inherit;
  font: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 650;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.chip img { width: 22px; height: 22px; }
.chip:hover { border-color: #9fd4ff66; }

h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #c5d0dc; margin: 22px 0 12px; }
.wall, .wall-dense {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tile {
  background: var(--card); border: 1px solid #1c2430; border-radius: 14px; overflow: hidden; cursor: pointer;
}
.tile:hover { border-color: #9fd4ff55; transform: translateY(-3px); }
.tile img, .tile .ph { width: 100%; height: min(42vw, 340px); object-fit: cover; display: block; background: #0a0c10; }
.tile .ph { display: grid; place-items: center; font-size: 12px; color: var(--mute); text-align: center; padding: 8px; }
.tile p { padding: 10px; font-size: 12px; line-height: 1.35; }
.tile small { color: var(--mute); }
.tile small.guide { color: var(--beam); font-weight: 650; }

.shops { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.shops a {
  min-width: 120px; height: 42px; padding: 0 14px; display: grid; place-items: center;
  border: 1px solid #2a323c; border-radius: 999px; font-size: 13px; font-weight: 650; background: #0c0f14;
}
.shops.stack { display: grid; grid-template-columns: 1fr; }
.shops.stack a { border-radius: 12px; justify-items: start; padding: 0 16px; }
.pulls { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.pull { border: 1px solid #1c2430; border-radius: 14px; overflow: hidden; background: var(--card); }
.pull img { width: 100%; height: 148px; object-fit: cover; display: block; }
.pull div { padding: 12px; font-size: 13px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px,100vw); background: #0c0e12; border-left: 1px solid var(--line); padding: 20px; overflow: auto; display: none; z-index: 60; }
.drawer.on { display: block; }
.note { color: var(--mute); font-size: 13px; line-height: 1.45; margin-top: 8px; }
footer { border-top: 1px solid var(--line); padding: 20px 32px; color: var(--mute); font-size: 12px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.room { background: var(--card); border: 1px solid #1c2430; border-radius: 16px; overflow: hidden; }
.room .faces { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; height: 160px; background: #0c0e12; }
.room .faces img, .room .faces i { width: 100%; height: 160px; object-fit: cover; display: block; background: #14181f; }
.room .faces i { display: grid; place-items: center; color: var(--mute); font-style: normal; font-size: 11px; }
.room .meta { padding: 12px 14px; }
.gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; margin: 16px 0; }
.gate { border: 1px solid #1c2430; border-radius: 14px; padding: 14px; background: #0c1016; text-align: center; }
.inspect { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(300px,1.15fr); gap: 28px; align-items: start; }
.hero-card { background: #0a0c10; border: 1px solid #1c2430; border-radius: 20px; min-height: 460px; display: grid; place-items: center; overflow: hidden; }
.hero-card img { width: 100%; max-height: 70vh; object-fit: contain; display: none; }
.hero-card .ph { color: var(--mute); padding: 40px; text-align: center; }
.pricebox { font-size: 28px; font-weight: 800; margin: 8px 0 6px; color: var(--beam); }
.kicker { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.gapbox { font-size: 20px; font-weight: 800; color: #c9b7ff; }
.boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.boxcard { background: var(--card); border: 1px solid #1c2430; border-radius: 14px; overflow: hidden; color: inherit; display: block; }
.boxcard img, .boxcard .ph { width: 100%; height: 190px; object-fit: contain; background: #0a0c10; display: block; padding: 14px; }
.boxcard .ph { display: grid; place-items: center; color: var(--mute); }
.boxcard p { padding: 12px; font-size: 13px; }
.boxcard small { color: var(--mute); display: block; margin-top: 4px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.compare-grid .tile { min-height: 340px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 22px; }
.podium .tile { text-align: center; min-height: 130px; }
#boardList { color: var(--mute); font-size: 13px; line-height: 1.7; border: 1px solid #1c2430; border-radius: 14px; padding: 16px; background: #0c1016; }

@media (max-width: 1100px) {
  .wall, .wall-dense { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .top { grid-template-columns: 1fr; }
  .top nav { justify-content: flex-end; }
}
@media (max-width: 800px) {
  .wall, .wall-dense { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .inspect, .compare-grid, .podium { grid-template-columns: 1fr; }
  .search-row { max-width: 100%; }
  .page { padding: 16px 4vw 56px; }
  .tile img, .tile .ph { height: 46vw; }
}

.pulls { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pull img { height: 220px; }
@media (max-width: 700px) { .pulls { grid-template-columns: 1fr; } }

.ticker{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700}
.ticker.up{color:#3dd68c}
.ticker.down{color:#ff6b6b}
.ticker.flat{color:#8b929c}
.tick-note{font-size:12px;font-weight:500;color:#8b929c;margin-top:4px}
.sources{display:grid;gap:6px;margin:10px 0 14px}
.sources span{display:flex;justify-content:space-between;border:1px solid #1c2430;border-radius:10px;padding:8px 12px;font-size:13px}
.vault-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
.vault-sum div{background:#101318;border:1px solid #1c2430;border-radius:14px;padding:16px}
.vault-sum b{display:block;font-size:22px;margin-top:6px}
.compare-table{width:100%;border-collapse:collapse;margin:16px 0 24px}
.compare-table th,.compare-table td{border-bottom:1px solid #1c2430;padding:12px;text-align:left;vertical-align:top}
.compare-table th{color:#8b929c;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.compare-faces{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.compare-faces img{width:100%;max-height:360px;object-fit:contain;background:#0a0c10;border-radius:14px}
@media (max-width:800px){.vault-sum,.compare-faces{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.news a{display:block;border:1px solid #1c2430;border-radius:12px;padding:10px 12px;margin:0 0 8px;background:#101318;font-size:13px}
.news a small{display:block;color:#8b929c;margin-top:4px}
.hero-pair{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin:0 0 22px}
.hero-pair a{display:block;border:1px solid #1c2430;border-radius:16px;overflow:hidden;background:#101318}
.hero-pair img{width:100%;height:240px;object-fit:cover;display:block}
.hero-pair div{padding:12px}
.spread{margin-top:22px;border:1px solid #1c2430;border-radius:16px;padding:16px;background:#0c1016}
.spread table{width:100%;border-collapse:collapse;font-size:13px}
.spread td,.spread th{padding:8px;border-bottom:1px solid #1c2430;text-align:left}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.badge.hot{background:#12351f;color:#3dd68c}
.badge.ok{background:#2a323c;color:#c5d0dc}
@media(max-width:900px){.split,.hero-pair{grid-template-columns:1fr}}

.yt-dock{position:fixed;right:18px;bottom:18px;z-index:80;width:min(360px,92vw);background:#0b0e12;border:1px solid #2a323c;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px #000a;display:none}
.yt-dock.on{display:block}
.yt-dock .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#07080b;font-size:12px;color:#c5d0dc}
.yt-dock .bar button{background:none;border:0;color:#fff;cursor:pointer;font-size:16px}
.yt-dock .frame{position:relative;width:100%;padding-top:56.25%;background:#000}
.yt-dock iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tile{position:relative;transform-style:preserve-3d;perspective:800px}
.tile .foil{pointer-events:none;position:absolute;inset:0;border-radius:14px;opacity:0;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 20%,rgba(159,212,255,.35) 45%,rgba(213,198,255,.25) 55%,transparent 80%)}
.tile:hover .foil{opacity:1}
.flip{position:relative}
.flip .back{display:none;place-items:center;height:100%;min-height:180px;background:#0a1016}
.flip.on .front{display:none}
.flip.on .back{display:grid}

.hero-title span{display:inline-block;animation:heroIn .7s ease both}
.hero-title span:nth-child(2){animation-delay:.12s}
.hero-title span:nth-child(3){animation-delay:.24s}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tag{animation:heroIn .8s .3s ease both}
.tile{transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
.tile:hover{z-index:2;box-shadow:0 18px 36px #000a,0 0 0 1px #9fd4ff66}
@media (max-width:1366px){
  .top{grid-template-columns:auto 1fr;padding:10px 2vw}
  .top nav{gap:10px;font-size:10px}
  .word b{font-size:20px}
  .wall,.wall-dense{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}