:root {
  --bg: #07090c;
  --panel: #0d1117;
  --panel-2: #121821;
  --text: #f5f7fa;
  --muted: #aab3bf;
  --line: rgba(255,255,255,.11);
  --blue: #0066b1;
  --mblue: #00a0dc;
  --mviolet: #6f2c91;
  --mred: #e31b23;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.topbar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 74px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(5,7,10,.92), rgba(5,7,10,.65), transparent);
  backdrop-filter: blur(8px);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.02em; }
.brand-mark { display:flex; width:38px; height:8px; transform:skew(-18deg); overflow:hidden; }
.brand-mark i { flex:1; }
.brand-mark i:nth-child(1){ background:var(--mblue); }
.brand-mark i:nth-child(2){ background:var(--mviolet); }
.brand-mark i:nth-child(3){ background:var(--mred); }
.brand small { color:var(--muted); font-size:.72rem; display:block; font-weight:600; }
.navlinks { display:flex; align-items:center; gap:10px; }
.navlinks a { padding:10px 14px; border-radius:999px; color:#dfe5ec; font-size:.92rem; }
.navlinks a:hover, .navlinks a.active { background:rgba(255,255,255,.08); }

.hero {
  min-height: 92vh;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  background: #0b0f14 url('assets/hero-track.jpg') center/cover no-repeat;
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(2,4,7,.94) 0%, rgba(2,4,7,.62) 37%, rgba(2,4,7,.18) 68%),
    linear-gradient(0deg, rgba(2,4,7,.96) 0%, transparent 58%);
}
.hero-content { position:relative; z-index:2; padding:150px 0 78px; max-width:690px; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:800; color:#b9c6d5; }
h1 { font-size:clamp(3.7rem, 9vw, 8.5rem); line-height:.86; letter-spacing:-.065em; margin:18px 0 20px; }
.hero h1 span { display:block; font-size:.22em; letter-spacing:.16em; color:#c6ced8; margin-bottom:18px; }
.lead { max-width:610px; color:#d2d9e2; font-size:clamp(1.04rem, 2vw, 1.25rem); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:3px; font-weight:800; border:1px solid rgba(255,255,255,.2); }
.btn.primary { background:#fff; color:#05070a; border-color:#fff; }
.btn.ghost:hover { background:rgba(255,255,255,.08); }

.stats { margin-top:-1px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#090d12; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:34px 20px; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat b { display:block; font-size:clamp(1.7rem, 3vw, 2.55rem); letter-spacing:-.04em; }
.stat span { color:var(--muted); font-size:.86rem; text-transform:uppercase; letter-spacing:.09em; }

.section { padding:92px 0; }
.section.alt { background:var(--panel); }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:38px; }
.section-head h2 { font-size:clamp(2.2rem,5vw,4.3rem); line-height:.96; letter-spacing:-.05em; margin:0; max-width:740px; }
.section-head p { margin:0; max-width:440px; color:var(--muted); }

.feature-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.feature-card { position:relative; min-height:540px; overflow:hidden; background:#10151d; border:1px solid var(--line); }
.feature-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.feature-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.82), transparent 58%); }
.feature-card .copy { position:absolute; z-index:2; inset:auto 28px 26px; }
.feature-card h3 { font-size:2rem; margin:0 0 7px; letter-spacing:-.03em; }
.feature-card p { margin:0; color:#d1d7df; }
.side-stack { display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.side-stack .feature-card { min-height:262px; }
.side-stack .feature-card h3 { font-size:1.4rem; }

.ad-band { position:relative; overflow:hidden; padding:90px 0; background:#f2f4f7; color:#090b0f; }
.ad-band::after { content:"CS"; position:absolute; right:-2vw; top:-80px; font-size:320px; font-weight:950; letter-spacing:-.08em; color:rgba(0,0,0,.05); }
.ad-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr .8fr; gap:56px; align-items:center; }
.ad-copy h2 { font-size:clamp(2.6rem,6vw,5.6rem); line-height:.9; letter-spacing:-.06em; margin:12px 0 22px; }
.ad-copy p { color:#424953; max-width:620px; font-size:1.08rem; }
.m-stripes { display:flex; height:7px; width:150px; transform:skew(-18deg); margin-top:26px; }
.m-stripes i { flex:1; }
.m-stripes i:nth-child(1){background:var(--mblue)} .m-stripes i:nth-child(2){background:var(--mviolet)} .m-stripes i:nth-child(3){background:var(--mred)}
.ad-visual { border-radius:2px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.22); }
.ad-visual img { aspect-ratio:1.5/1; width:100%; object-fit:cover; }

.gallery-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gallery-strip a { overflow:hidden; min-height:300px; border:1px solid var(--line); }
.gallery-strip img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.gallery-strip a:hover img { transform:scale(1.035); }

.footer { padding:36px 0 54px; border-top:1px solid var(--line); color:#8f99a6; font-size:.86rem; }
.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* Review page */
.review-hero { padding:150px 0 72px; background:linear-gradient(180deg,#0d1219,#07090c); border-bottom:1px solid var(--line); }
.review-hero h1 { font-size:clamp(3.3rem,8vw,7rem); margin:18px 0 26px; }
.review-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:56px; }
.prose { font-size:1.07rem; color:#d3dae3; }
.prose h2 { color:white; font-size:2.15rem; margin:54px 0 14px; letter-spacing:-.035em; }
.prose p { margin:0 0 20px; }
.prose .quote { margin:34px 0; padding:28px; background:var(--panel); border-left:3px solid var(--mblue); font-size:1.25rem; color:white; }
.spec-card { position:sticky; top:96px; align-self:start; background:var(--panel); border:1px solid var(--line); padding:26px; }
.spec-card h3 { margin:0 0 20px; font-size:1.4rem; }
.spec-list { display:grid; gap:0; }
.spec-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--line); }
.spec-row span { color:var(--muted); }
.spec-row b { text-align:right; }

.review-gallery { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; margin:44px 0; }
.review-gallery img { width:100%; height:330px; object-fit:cover; border:1px solid var(--line); }
.review-gallery img:first-child { grid-row:span 2; height:672px; }

.verdict { margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.verdict .item { padding:20px; background:var(--panel); border:1px solid var(--line); }
.verdict b { display:block; font-size:1.1rem; margin-bottom:8px; }
.verdict span { color:var(--muted); font-size:.92rem; }

@media (max-width: 900px) {
  .navlinks a:not(.active) { display:none; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .feature-grid, .ad-grid, .review-grid { grid-template-columns:1fr; }
  .side-stack { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .feature-card, .side-stack .feature-card { min-height:390px; }
  .spec-card { position:static; }
  .section-head { align-items:start; flex-direction:column; }
  .review-gallery { grid-template-columns:1fr 1fr; }
  .review-gallery img:first-child { grid-column:1/-1; grid-row:auto; height:430px; }
}

@media (max-width: 620px) {
  .container { width:min(var(--max), calc(100% - 26px)); }
  .topbar { height:64px; }
  .brand small { display:none; }
  .hero { min-height:82vh; background-position:58% center; }
  .hero-content { padding:120px 0 48px; }
  h1 { font-size:3.7rem; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat { padding:24px 14px; }
  .section { padding:66px 0; }
  .feature-grid, .side-stack, .gallery-strip, .review-gallery, .verdict { grid-template-columns:1fr; }
  .feature-card, .side-stack .feature-card { min-height:370px; }
  .gallery-strip a { min-height:270px; }
  .review-gallery img, .review-gallery img:first-child { height:280px; }
  .ad-band { padding:66px 0; }
  .ad-band::after { font-size:210px; top:-30px; }
}