/* ═══════════════════════════════════════════════════
   TERRATIP — MODERN MINIMALIST SKEUOMORPHISM
   Material language: Brushed aluminum, anodized titanium,
   machined steel, precision optics, CNC surfaces
═══════════════════════════════════════════════════ */

:root {
  --al-00: #FFFFFF;
  --al-01: #F8F8F9;
  --al-02: #F0F0F2;
  --al-03: #E4E5E8;
  --al-04: #D2D4D9;
  --al-05: #B8BABF;
  --al-06: #8E9099;
  --al-07: #5C5E66;
  --al-08: #3A3C42;
  --al-09: #27282D;
  --al-10: #18191D;
  --al-11: #0D0E10;

  --brand:      #1E8FAA;
  --brand-lite: #3AAFE0;
  --brand-dark: #0F5566;
  --brand-glow: rgba(30,143,170,0.18);

  --brushed-light: linear-gradient(170deg,
    #FAFAFA 0%, #F2F2F4 15%, #E8E8EB 30%,
    #EFEFEF 45%, #E4E4E7 60%, #F0F0F2 75%,
    #F8F8FA 88%, #F2F2F4 100%);

  --brushed-mid: linear-gradient(170deg,
    #E8E8EB 0%, #DEDEE2 15%, #D4D4D8 30%,
    #DCDCDF 45%, #D0D0D4 60%, #D8D8DC 75%,
    #E4E4E7 88%, #DCDCDF 100%);

  --anodized-dark: linear-gradient(160deg,
    #22242A 0%, #1C1E23 20%, #1A1C21 40%,
    #202228 60%, #1E2026 80%, #22242A 100%);

  --machined: linear-gradient(135deg,
    #F5F5F7 0%, #EAEAED 25%,
    #F0F0F2 50%, #E8E8EB 75%, #F5F5F7 100%);

  --sh-raised-sm:
    0 1px 0 rgba(255,255,255,0.9),
    0 -1px 0 rgba(0,0,0,0.06),
    1px 0 0 rgba(255,255,255,0.5),
    -1px 0 0 rgba(0,0,0,0.04),
    0 2px 6px rgba(0,0,0,0.08),
    0 4px 12px rgba(0,0,0,0.05);

  --sh-raised-md:
    0 1px 0 rgba(255,255,255,0.95),
    0 -1px 0 rgba(0,0,0,0.08),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.07),
    0 16px 40px rgba(0,0,0,0.05);

  --sh-inset-sm:
    inset 0 1px 3px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.8);

  --sh-inset-md:
    inset 0 2px 6px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.7);

  --sh-dark-raised:
    0 1px 0 rgba(255,255,255,0.07),
    0 -1px 0 rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.3);

  --screw: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.9) 0%, rgba(200,200,205,0.5) 30%,
    rgba(150,152,158,0.8) 60%, rgba(80,82,88,0.9) 100%);

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: #FAFBFD;
  color: var(--al-09);
  overflow-x: hidden;
  position: relative;
}

/* ── RULED PAPER ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      rgba(168,196,224,0.2) 27px,
      rgba(168,196,224,0.2) 28px
    ),
    linear-gradient(
      90deg,
      transparent 74px,
      rgba(220,160,160,0.13) 74px,
      rgba(220,160,160,0.13) 75px,
      transparent 75px
    );
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ═══════════════════════════════
   SHARED LAYOUT
═══════════════════════════════ */
.w { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.sec { padding: 96px 0; }

.panel {
  background: var(--brushed-light);
  border-radius: 16px;
  box-shadow: var(--sh-raised-md);
  border: 1px solid rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.6) 0%, transparent 40%,
    transparent 60%, rgba(0,0,0,0.02) 100%);
  pointer-events: none; border-radius: inherit;
}

.panel-dark {
  background: var(--anodized-dark);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--sh-dark-raised);
}
.panel-dark::before {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.06) 0%, transparent 40%,
    transparent 70%, rgba(0,0,0,0.15) 100%);
}

.engrave {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--al-06);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(0,0,0,0.06);
}

.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5ADFFF, var(--brand));
  box-shadow: 0 0 6px var(--brand), 0 0 12px rgba(30,143,170,0.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════
   NAVBAR
═══════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 64px;
  background: linear-gradient(180deg,
    rgba(242,242,244,0.97) 0%,
    rgba(234,234,237,0.98) 50%,
    rgba(226,226,230,0.99) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 8px rgba(0,0,0,0.06),
    0 4px 20px rgba(0,0,0,0.04);
  display: flex; align-items: center; padding: 0 2.5rem;
}

.nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.95) 20%,
    rgba(255,255,255,0.95) 80%, transparent 100%);
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.logo-chip {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(145deg, #2AA8C8 0%, #1B6CA8 40%, #0F3D5E 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3),
    0 3px 8px rgba(15,61,94,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
}

.logo-text {
  font-size: 17px; font-weight: 500;
  color: var(--al-09); letter-spacing: -0.02em;
}
.logo-text span {
  color: var(--brand);
  font-weight: 600;
}

.nav-links {
  display: flex; align-items: center; gap: 0.25rem; margin-left: auto;
  list-style: none;
}
.nav-links a {
  font-size: 13px; font-weight: 400; color: var(--al-07);
  text-decoration: none; padding: 6px 13px; border-radius: 7px;
  transition: all 0.15s;
  letter-spacing: -0.01em;
}
.nav-links a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--al-09);
  box-shadow: var(--sh-inset-sm);
}

.nav-btn {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #FF3B3B 0%, #CC1A1A 60%, #AA0000 100%);
  color: white !important; padding: 8px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 500; text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2),
    0 -1px 0 rgba(0,0,0,0.2),
    0 2px 0 rgba(100,0,0,0.8),
    0 3px 8px rgba(150,0,0,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.nav-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 -1px 0 rgba(0,0,0,0.2), 0 3px 0 rgba(100,0,0,0.8), 0 5px 12px rgba(150,0,0,0.3); }
.nav-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 0 0 rgba(100,0,0,0.8), 0 1px 4px rgba(150,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.2); }

.nav-console-btn {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #2AA8C8 0%, #1B6CA8 60%, #0F3D5E 100%);
  color: white !important; padding: 8px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 500; text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 -1px 0 rgba(0,0,0,0.15),
    0 2px 0 rgba(10,50,80,0.7),
    0 3px 8px rgba(15,85,102,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.nav-console-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.15), 0 3px 0 rgba(10,50,80,0.7), 0 6px 14px rgba(15,85,102,0.35); }
.nav-console-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 0 0 rgba(10,50,80,0.7), 0 1px 4px rgba(15,85,102,0.25), inset 0 1px 3px rgba(0,0,0,0.2); }

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--al-08); border-radius: 2px;
  transition: all 0.2s;
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 100px 0 80px;
  background: transparent;
  display: flex; align-items: center;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 60%; height: 160%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.35) 40%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%);
  pointer-events: none;
}

.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  position: relative; z-index: 1;
}

.hero-left::before {
  content: '';
  position: absolute; left: -1.5rem; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--brand) 20%,
    var(--brand-lite) 50%,
    var(--brand) 80%,
    transparent 100%);
  box-shadow: 0 0 8px var(--brand-glow);
}

.hero-label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 1.5rem;
}

.hero-h1 {
  font-family: 'Caveat', cursive;
  font-size: clamp(44px, 5.5vw, 68px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1A1A2E;
  margin-bottom: 1.25rem;
  text-shadow:
    0.5px 0.5px 0 rgba(0,0,0,0.06),
    -0.3px 0 0 rgba(0,0,0,0.03);
}
.hero-h1 strong {
  font-weight: 700;
  color: #1B6CA8;
  text-shadow:
    0.8px 0.8px 0 rgba(27,108,168,0.12),
    -0.4px -0.2px 0 rgba(30,143,170,0.08),
    0 1px 6px rgba(27,108,168,0.1);
  background: none;
  -webkit-text-fill-color: #1B6CA8;
}

.hero-sub {
  font-size: 15px; font-weight: 300;
  color: var(--al-07); line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 440px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 3rem; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px;
  background: linear-gradient(180deg, #2AA8C8 0%, #1B6CA8 50%, #0F5566 100%);
  color: white; font-size: 13.5px; font-weight: 500;
  text-decoration: none; letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 2px 0 rgba(10,60,80,0.6),
    0 4px 16px rgba(15,85,102,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 3px 0 rgba(10,60,80,0.6), 0 8px 24px rgba(15,85,102,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(255,255,255,0), 0 1px 0 rgba(10,60,80,0.6), 0 2px 8px rgba(15,85,102,0.2), inset 0 2px 4px rgba(0,0,0,0.2); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  background: var(--brushed-light);
  color: var(--al-08); font-size: 13.5px; font-weight: 400;
  text-decoration: none; letter-spacing: -0.01em;
  box-shadow: var(--sh-raised-sm);
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.15s;
}
.btn-ghost:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(0,0,0,0.12), 0 8px 28px rgba(0,0,0,0.08); }

.hero-stats {
  display: flex; gap: 0;
  background: var(--brushed-mid);
  border-radius: 12px;
  box-shadow: var(--sh-raised-sm);
  border: 1px solid rgba(255,255,255,0.8);
  overflow: hidden;
}
.h-stat {
  flex: 1; padding: 16px 20px; position: relative;
  border-right: 1px solid rgba(0,0,0,0.06);
}
.h-stat:last-child { border-right: none; }
.h-stat::after {
  content: '';
  position: absolute; right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent);
}
.h-stat:last-child::after { display: none; }
.h-stat-n {
  font-size: 22px; font-weight: 600;
  color: var(--al-10); letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(160deg, var(--al-10) 0%, var(--al-08) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.h-stat-l { font-size: 10.5px; font-weight: 400; color: var(--al-06); letter-spacing: 0.04em; }

/* Hero card */
.hero-card {
  position: relative;
  border-radius: 20px;
  background: var(--anodized-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.25),
    0 8px 24px rgba(0,0,0,0.2);
  overflow: hidden;
  aspect-ratio: 9/11;
}
.hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.07) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none; z-index: 2;
}
.hero-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px
  );
  pointer-events: none; z-index: 2;
}

.card-screen {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, #0a1929 0%, #0d2235 50%, #081520 100%);
  display: flex; flex-direction: column;
}
.card-topbar {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: space-between;
}
.card-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(30,143,170,0.15);
  border: 1px solid rgba(30,143,170,0.25);
  border-radius: 20px; padding: 4px 10px;
}
.card-pill span {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--brand-lite); letter-spacing: 0.1em;
}
.card-dots { display: flex; gap: 5px; }
.card-dots span { width: 8px; height: 8px; border-radius: 50%; }
.dot-r { background: radial-gradient(circle at 35% 35%, #FF8080, #CC2020); box-shadow: 0 0 4px rgba(200,30,30,0.4); }
.dot-y { background: radial-gradient(circle at 35% 35%, #FFD080, #CC9020); box-shadow: 0 0 4px rgba(200,140,30,0.4); }
.dot-g { background: radial-gradient(circle at 35% 35%, #80FF9C, #20CC50); box-shadow: 0 0 4px rgba(30,180,70,0.4); }

.card-video-area {
  flex: 1; position: relative; overflow: hidden;
  margin: 14px; border-radius: 12px;
  background: #050d18;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}
.card-video-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.card-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, rgba(30,143,170,0.9), rgba(15,85,102,0.95));
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 1px rgba(58,175,224,0.3),
    0 0 0 8px rgba(30,143,170,0.08),
    0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: all 0.2s;
}
.card-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 1px rgba(58,175,224,0.5), 0 0 0 12px rgba(30,143,170,0.1), 0 8px 24px rgba(0,0,0,0.4);
}

.card-meta {
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.card-meta-row { display: flex; justify-content: space-between; align-items: center; }
.card-title {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88);
  letter-spacing: -0.015em; margin-bottom: 5px;
}
.card-loc {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.3); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card-price {
  font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, var(--brand-lite), var(--brand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

/* Screws */
.screw {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--screw);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}
.screw::after {
  content: '';
  position: absolute; top: 50%; left: 15%; right: 15%;
  height: 1.5px; background: rgba(0,0,0,0.4);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 1px;
}
.screw::before {
  content: '';
  position: absolute; left: 50%; top: 15%; bottom: 15%;
  width: 1.5px; background: rgba(0,0,0,0.4);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

/* ═══════════════════════════════
   TICKER
═══════════════════════════════ */
.ticker-wrap {
  background: var(--anodized-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden; padding: 0;
  position: relative;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.ticker-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--al-10) 0%, transparent 100%);
}
.ticker-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--al-10) 0%, transparent 100%);
}
.ticker-label {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; padding: 0 20px;
  background: var(--anodized-dark);
  border-right: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand); letter-spacing: 0.16em;
  gap: 8px;
}
.ticker-inner {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
  padding-left: 200px;
}
.tick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 32px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.4); letter-spacing: 0.08em;
  white-space: nowrap;
}
.tick-item span {
  color: rgba(255,255,255,0.15); font-size: 8px; letter-spacing: 0.2em;
}
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ═══════════════════════════════
   FILTER BAR
═══════════════════════════════ */
.filter-bar {
  z-index: 100 !important;
  position: sticky; top: 64px; z-index: 100;
  background: linear-gradient(180deg,
    rgba(238,238,241,0.97) 0%,
    rgba(232,232,235,0.98) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8);
  padding: 0;
}
.filter-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 2rem;
  display: flex; align-items: center; gap: 6px;
}
.filter-lbl {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--al-06); letter-spacing: 0.14em;
  margin-right: 8px; white-space: nowrap;
}

.chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 400; color: var(--al-07);
  background: var(--brushed-mid);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--sh-raised-sm);
  cursor: pointer; transition: all 0.12s;
  white-space: nowrap; user-select: none;
  letter-spacing: -0.01em;
}
.chip:hover { color: var(--al-09); box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 10px rgba(0,0,0,0.1); }
.chip.active {
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  color: white; border-color: rgba(255,255,255,0.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2),
    0 2px 0 rgba(10,60,80,0.5),
    0 3px 10px rgba(15,85,102,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
.chip.active .chip-dot { opacity: 1; box-shadow: 0 0 4px currentColor; }

/* ═══════════════════════════════
   VIDEO GRID
═══════════════════════════════ */
.videos-sec {
  position: relative; z-index: 1;
  padding: 72px 0;
  background: transparent;
}
.sec-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
}
.sec-heading {
  font-size: 28px; font-weight: 300;
  color: var(--al-10); letter-spacing: -0.03em;
  line-height: 1.15;
}
.sec-heading strong { font-weight: 600; }
.sec-link {
  font-size: 12px; font-weight: 400; color: var(--brand);
  text-decoration: none; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 4px;
}

/* Featured card */
.feat-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--anodized-dark);
  box-shadow: var(--sh-dark-raised);
  margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 380px;
  min-height: 280px;
  position: relative;
}
.feat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.05) 0%, transparent 40%);
  z-index: 1; pointer-events: none;
}
.feat-thumb {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #071526, #0a2035, #062040);
}
.feat-thumb svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.feat-badge {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 6px 12px;
}
.feat-badge-txt {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.12em;
}
.feat-info {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; z-index: 2;
  border-left: 1px solid rgba(255,255,255,0.05);
}
.feat-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand); letter-spacing: 0.16em;
  margin-bottom: 10px;
}
.feat-title {
  font-size: 20px; font-weight: 500; color: rgba(255,255,255,0.9);
  letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 12px;
}
.feat-desc {
  font-size: 13px; color: rgba(255,255,255,0.35);
  line-height: 1.65; margin-bottom: 24px; font-weight: 300;
}
.feat-data {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 24px;
}
.feat-dt {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 10px 12px;
}
.feat-dt-n {
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85);
  letter-spacing: -0.02em; margin-bottom: 2px;
}
.feat-dt-l {
  font-family: var(--font-mono); font-size: 8.5px;
  color: rgba(255,255,255,0.25); letter-spacing: 0.1em;
}
.feat-btn {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(145deg, rgba(30,143,170,0.9), rgba(10,70,90,0.95));
  color: white; padding: 11px 18px; border-radius: 9px;
  font-size: 12px; font-weight: 500; text-decoration: none;
  box-shadow: 0 2px 8px rgba(15,85,102,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  width: fit-content;
}

/* Video grid */
.vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vcard {
  border-radius: 14px; overflow: hidden;
  background: white;
  box-shadow: var(--sh-raised-sm);
  border: 1px solid rgba(255,255,255,0.9);
  transition: all 0.2s;
  cursor: pointer;
}
.vcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.07);
}
.vcard-thumb {
  aspect-ratio: 16/9; position: relative;
  overflow: hidden;
}
.vcard-thumb svg { width: 100%; height: 100%; }
.vcard-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.vcard:hover .vcard-play { opacity: 1; }
.vtype-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 8.5px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.08em;
}
.vcard-body { padding: 16px 16px 14px; }
.vcard-city {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand); letter-spacing: 0.1em; margin-bottom: 5px;
}
.vcard-title {
  font-size: 13.5px; font-weight: 500; color: var(--al-09);
  letter-spacing: -0.015em; line-height: 1.4; margin-bottom: 10px;
}
.vcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--al-03);
}
.vcard-price {
  font-size: 14px; font-weight: 600; color: var(--al-10);
  letter-spacing: -0.02em;
}
.vcard-views {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--al-06); letter-spacing: 0.05em;
}

/* ═══════════════════════════════
   MAP
═══════════════════════════════ */
.map-sec {
  position: relative; z-index: 1;
  padding: 80px 0;
  background: rgba(232,238,244,0.4);
}
.map-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; margin-top: 40px; }
.map-panel {
  border-radius: 16px; overflow: hidden;
  position: relative;
  background: #0C1820;
  box-shadow: var(--sh-dark-raised);
  border: 1px solid rgba(255,255,255,0.06);
}
.map-panel::before {
  content: '';
  position: absolute; inset: 3px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 13px;
}
.map-panel svg { display: block; width: 100%; }
.map-ctrls {
  position: absolute; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 4px; z-index: 10;
}
.map-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brushed-light);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--sh-raised-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.1s;
  font-size: 14px; color: var(--al-07);
}
.map-btn:active {
  transform: translateY(1px);
  box-shadow: var(--sh-inset-sm);
}
.map-readout {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 8px 14px;
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.4); letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 10px;
}

.map-sidebar { display: flex; flex-direction: column; gap: 8px; }
.mlc {
  border-radius: 12px; padding: 14px 16px;
  background: white;
  box-shadow: var(--sh-raised-sm);
  border: 1px solid rgba(255,255,255,0.9);
  cursor: pointer; transition: all 0.15s;
}
.mlc:hover { transform: translateX(2px); box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 14px rgba(0,0,0,0.1); }
.mlc.sel {
  background: linear-gradient(145deg, rgba(30,143,170,0.08), rgba(15,85,102,0.05));
  border-color: rgba(30,143,170,0.25);
  box-shadow: 0 0 0 1px rgba(30,143,170,0.15), 0 4px 12px rgba(15,85,102,0.1);
}
.mlc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mlc-name { font-size: 13px; font-weight: 500; color: var(--al-09); letter-spacing: -0.01em; }
.mlc-count {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand); letter-spacing: 0.08em;
  background: var(--brand-glow);
  border-radius: 4px; padding: 2px 6px;
}
.mlc-sub { font-size: 11px; color: var(--al-06); font-weight: 300; }

/* ═══════════════════════════════
   HOW IT WORKS
═══════════════════════════════ */
.how-sec {
  position: relative; z-index: 1;
  padding: 80px 0;
  background: transparent;
}
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.how-card {
  border-radius: 16px; padding: 28px 26px;
  background: var(--brushed-light);
  box-shadow: var(--sh-raised-md);
  border: 1px solid rgba(255,255,255,0.9);
  position: relative; overflow: hidden;
}
.how-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 40%);
  pointer-events: none;
}
.how-card::after {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  border-radius: 0 0 2px 2px;
}
.how-num {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(145deg, #2AA8C8, #0F5566);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: white;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 2px 0 rgba(10,60,80,0.5),
    0 4px 10px rgba(15,85,102,0.25);
  margin-bottom: 20px;
}
.how-icon {
  margin-bottom: 14px;
  display: flex; align-items: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.how-title {
  font-size: 15px; font-weight: 500; color: var(--al-09);
  letter-spacing: -0.015em; margin-bottom: 8px;
}
.how-desc {
  font-size: 13px; color: var(--al-07); line-height: 1.65; font-weight: 300;
}

/* ═══════════════════════════════
   WHY TERRATIP
═══════════════════════════════ */
.why-sec {
  position: relative; z-index: 1;
  padding: 80px 0;
  background: transparent;
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.why-card {
  border-radius: 16px; padding: 28px 26px;
  background: var(--brushed-light);
  box-shadow: var(--sh-raised-md);
  border: 1px solid rgba(255,255,255,0.95);
  position: relative; overflow: hidden;
  transition: all 0.2s;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95), 0 12px 32px rgba(0,0,0,0.1), 0 24px 56px rgba(0,0,0,0.07);
}
.why-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
  pointer-events: none;
}
.why-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--anodized-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: var(--sh-dark-raised);
  font-size: 20px;
}
.why-title {
  font-size: 15px; font-weight: 500; color: var(--al-09);
  letter-spacing: -0.015em; margin-bottom: 8px;
}
.why-desc {
  font-size: 13px; color: var(--al-07); line-height: 1.65; font-weight: 300;
}

/* ═══════════════════════════════
   CONSOLE BANNER
═══════════════════════════════ */
.console-sec {
  position: relative; z-index: 1;
  padding: 64px 0;
  background: transparent;
}
.console-panel {
  border-radius: 20px; padding: 44px 48px;
  background: linear-gradient(135deg,
    #071830 0%, #0d2a40 40%, #071526 100%);
  box-shadow: var(--sh-dark-raised);
  border: 1px solid rgba(30,143,170,0.2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; position: relative; overflow: hidden;
}
.console-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(30,143,170,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.console-panel::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(30,143,170,0.5) 30%,
    rgba(58,175,224,0.6) 50%, rgba(30,143,170,0.5) 70%, transparent 100%);
}
.console-left { flex: 1; position: relative; z-index: 1; }
.console-tag {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand-lite); letter-spacing: 0.14em;
}
.console-title {
  font-size: 30px; font-weight: 300; color: rgba(255,255,255,0.9);
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px;
}
.console-title strong { font-weight: 600; color: var(--brand-lite); }
.console-desc {
  font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.65;
  font-weight: 300; max-width: 420px; margin-bottom: 24px;
}
.console-features {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
}
.console-feat {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255,255,255,0.55);
  font-weight: 300;
}
.console-right {
  flex-shrink: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: relative; z-index: 1;
}
.console-url {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.2); letter-spacing: 0.08em;
}

/* ═══════════════════════════════
   YOUTUBE STRIP
═══════════════════════════════ */
.yt-sec {
  padding: 72px 0;
  background: var(--anodized-dark);
  position: relative; overflow: hidden;
}
.yt-sec::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px
  );
}
.yt-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 60px; position: relative; z-index: 1;
}
.yt-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--brand); letter-spacing: 0.16em; margin-bottom: 12px;
}
.yt-title {
  font-size: 32px; font-weight: 300; color: rgba(255,255,255,0.88);
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 14px;
}
.yt-title strong { font-weight: 600; }
.yt-desc {
  font-size: 14px; color: rgba(255,255,255,0.35); line-height: 1.65;
  font-weight: 300; max-width: 380px;
}
.yt-right { flex-shrink: 0; text-align: right; }
.yt-stats {
  display: flex; gap: 32px; justify-content: flex-end; margin-bottom: 28px;
}
.yt-stat-n {
  font-size: 26px; font-weight: 600; color: rgba(255,255,255,0.88);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), var(--brand-lite));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.yt-stat-l {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.2); letter-spacing: 0.1em;
}
.yt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #FF4444 0%, #CC1A1A 60%, #AA0000 100%);
  color: white; padding: 13px 24px; border-radius: 10px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2),
    0 2px 0 rgba(80,0,0,0.8),
    0 4px 16px rgba(180,0,0,0.35);
  transition: all 0.15s;
}
.yt-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 3px 0 rgba(80,0,0,0.8), 0 8px 24px rgba(180,0,0,0.4); }

/* ═══════════════════════════════
   CTA SECTION
═══════════════════════════════ */
.cta-sec {
  position: relative; z-index: 1;
  padding: 80px 0;
  background: transparent;
}
.cta-panel {
  max-width: 580px; margin: 0 auto;
  border-radius: 20px; padding: 44px 48px;
  background: var(--brushed-light);
  box-shadow: var(--sh-raised-md);
  border: 1px solid rgba(255,255,255,0.95);
  text-align: center; position: relative; overflow: hidden;
}
.cta-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel .screw:nth-child(1) { top: 14px; left: 14px; }
.cta-panel .screw:nth-child(2) { top: 14px; right: 14px; }
.cta-panel .screw:nth-child(3) { bottom: 14px; left: 14px; }
.cta-panel .screw:nth-child(4) { bottom: 14px; right: 14px; }
.cta-label { margin-bottom: 12px; }
.cta-title {
  font-size: 26px; font-weight: 300; color: var(--al-10);
  letter-spacing: -0.03em; margin-bottom: 10px;
}
.cta-title strong { font-weight: 600; }
.cta-desc { font-size: 14px; color: var(--al-07); line-height: 1.65; font-weight: 300; margin-bottom: 28px; }
.cta-form { display: flex; gap: 8px; }
.cta-input {
  flex: 1; padding: 12px 16px; border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--sh-inset-md);
  font-family: var(--font-sans); font-size: 13.5px; color: var(--al-09);
  outline: none; transition: all 0.15s;
  letter-spacing: -0.01em;
}
.cta-input:focus {
  border-color: rgba(30,143,170,0.4);
  box-shadow: var(--sh-inset-md), 0 0 0 3px rgba(30,143,170,0.1);
}
.cta-note { font-size: 11px; color: var(--al-06); margin-top: 14px; }

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
footer {
  background: var(--anodized-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }
.footer-logo-text {
  font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,0.7); letter-spacing: -0.02em;
}
.footer-logo-text span { color: var(--brand-lite); font-weight: 600; }
.footer-desc {
  font-size: 12.5px; color: rgba(255,255,255,0.25);
  line-height: 1.7; font-weight: 300; max-width: 260px;
}
.footer-col-h {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.2); letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: 12.5px; color: rgba(255,255,255,0.28);
  text-decoration: none; font-weight: 300; transition: color 0.15s;
}
.footer-links a:hover { color: rgba(255,255,255,0.6); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.footer-copy {
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(255,255,255,0.15); letter-spacing: 0.04em;
}
.footer-socials { display: flex; gap: 8px; }
.slink {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25); text-decoration: none;
  transition: all 0.15s;
}
.slink:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  box-shadow: 0 0 8px rgba(30,143,170,0.15);
}

/* ═══════════════════════════════
   ANIMATIONS
═══════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner, .feat-card, .vgrid, .how-grid, .why-grid {
  animation: fadeUp 0.6s ease both;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 968px) {
  .console-panel { flex-direction: column; gap: 32px; text-align: center; }
  .console-desc { max-width: 100%; }
  .console-features { justify-content: center; }
  .console-right { width: 100%; }

  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-card { max-width: 400px; margin: 0 auto; }
  .feat-card { grid-template-columns: 1fr; }
  .feat-thumb { min-height: 220px; }
  .vgrid { grid-template-columns: repeat(2, 1fr); }
  .map-layout { grid-template-columns: 1fr; }
  .map-sidebar { flex-direction: row; flex-wrap: wrap; }
  .mlc { flex: 1 1 calc(50% - 4px); min-width: 160px; }
  .how-grid, .why-grid { grid-template-columns: 1fr; }
  .yt-inner { flex-direction: column; text-align: center; }
  .yt-right { text-align: center; }
  .yt-stats { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .nav { padding: 0 1rem; }
  .nav-links {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0;
    background: rgba(242,242,244,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column; padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; font-size: 15px; }
  .nav-hamburger { display: flex; }

  .w { padding: 0 1.25rem; }
  .hero { padding: 80px 0 40px; min-height: auto; }
  .hero-h1 { font-size: 36px; }
  .hero-card { display: none; }
  .hero-stats { flex-direction: column; }
  .h-stat { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .h-stat:last-child { border-bottom: none; }

  .filter-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .vgrid { grid-template-columns: 1fr; }

  .feat-info { padding: 20px; }
  .feat-data { grid-template-columns: 1fr 1fr; gap: 8px; }

  .console-panel { padding: 28px 20px; }

  .cta-panel { padding: 28px 20px; }
  .cta-form { flex-direction: column; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bar { flex-direction: column; gap: 16px; text-align: center; }
}