/* Тема midnight — глибокий індиго з неоном, скляні картки, ігровий настрій */
:root {
  --bg: #070a18;
  --surface: #0e1330;
  --surface-2: #171e46;
  --nav-bg: rgba(7, 10, 24, .78);
  --footer-bg: #050710;
  --grad-hero: radial-gradient(110% 130% at 20% -10%, #6d3bff 0%, #3f2bd6 32%, #1a1b6b 58%, #070a18 100%);
  --hero-fade: linear-gradient(180deg, transparent, #070a18);
  --hero-sub: rgba(226, 232, 255, .84);
  --grad-text: linear-gradient(92deg, #22d3ee, #7c5cff 65%, #d946ef);
  --grad-headline: linear-gradient(92deg, #7df9ff, #c4b5fd);
  --accent: #22d3ee;
  --glow: rgba(124, 92, 255, .85);
  --text-1: #f2f5ff;
  --text-2: #9aa5d4;
  --border: rgba(147, 165, 255, .14);
  --card-bg: rgba(20, 26, 62, .55);
  --card-border: rgba(147, 165, 255, .16);
  --card-border-hover: rgba(34, 211, 238, .55);
  --card-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 211, 238, .12);
  --price-color: #7df9ff;
  --pill-glass-bg: rgba(147, 165, 255, .14);
  --pill-glass-hover: rgba(147, 165, 255, .28);
  --pill-glass-border: rgba(147, 165, 255, .32);
  --pill-glass-text: #f2f5ff;
  --btn-bg: linear-gradient(92deg, #22d3ee, #7c5cff);
  --btn-text: #06091a;
  --btn-shadow: 0 8px 28px rgba(124, 92, 255, .45);
  --btn-shadow-hover: 0 12px 38px rgba(34, 211, 238, .5);
  --radius-pill: 980px;
  --radius-card: 16px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
}

/* Скляні картки + сітка на hero — фірмові риси шаблону */
.card { backdrop-filter: blur(10px); }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero > .container { text-align: center; }
.hero .pill-row, .hero-cta { justify-content: center; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-sm > .container { text-align: left; }
.hero-sm .pill-row, .hero-sm .hero-cta { justify-content: flex-start; }
.hero-sm .hero-sub { margin-left: 0; }
.btn-primary { font-weight: 800; letter-spacing: .01em; }
.cat-card:hover .cat-icon { transform: scale(1.12); transition: transform .18s; }