/* Тема ocean — океанський синьо-бірюзовий, картки з акцентною лінією зліва */
:root {
  --bg: #04121c;
  --surface: #082133;
  --surface-2: #0d3149;
  --nav-bg: rgba(4,18,28,.8);
  --footer-bg: #020c14;
  --grad-hero: radial-gradient(115% 140% at 15% -15%, #22d3ee 0%, #0891b2 30%, #0c4a6e 60%, #04121c 100%);
  --hero-fade: linear-gradient(180deg, transparent, #04121c);
  --hero-sub: rgba(224,247,255,.86);
  --grad-text: linear-gradient(92deg,#67e8f9,#22d3ee 60%,#0ea5e9);
  --grad-headline: linear-gradient(92deg,#fff,#a5f3fc);
  --accent: #22d3ee;
  --glow: rgba(34,211,238,.75);
  --text-1: #eef9ff;
  --text-2: #8fb3c7;
  --border: rgba(140,200,230,.15);
  --card-bg: #082133;
  --card-border: rgba(140,200,230,.16);
  --card-border-hover: rgba(34,211,238,.5);
  --card-shadow: 0 16px 44px rgba(0,0,0,.5);
  --price-color: #67e8f9;
  --pill-glass-bg: rgba(255,255,255,.12);
  --pill-glass-hover: rgba(255,255,255,.24);
  --pill-glass-border: rgba(165,243,252,.3);
  --pill-glass-text: #fff;
  --btn-bg: linear-gradient(92deg,#22d3ee,#0284c7);
  --btn-text: #02121c;
  --btn-shadow: 0 8px 26px rgba(34,211,238,.4);
  --btn-shadow-hover: 0 12px 34px rgba(34,211,238,.55);
  --radius-pill: 980px;
  --radius-card: 14px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Inter', system-ui, sans-serif;
}

.card { border-left: 3px solid var(--accent); }
.hero > .container { text-align: center; }
.hero .pill-row, .hero-cta { justify-content: center; }
.hero-sm > .container { text-align: left; }
.hero-sm .pill-row, .hero-sm .hero-cta { justify-content: flex-start; }