/* Angelia · лендінги 2026 — змінні з макета Figma (колекція «Angelia · лендінги»), 07.11.2026 */
:root {
  /* кольори */
  --bg-page: #F2F6FB;
  --bg-card: #FCFDFF;
  --bg-tint: #E2E9F2;
  --bg-dark: #204289;
  --line: #DCE5F2;
  --accent: #00529C;
  --text-on-accent: #FCFDFF;
  --text-heading: #204289;
  --text-body: #44506A;
  --text-muted: #5F6B85;
  --text-on-dark: #F4F7FC;
  --rating: #F2A900;
  --focus: #2B6CF5;

  /* шрифт */
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* радіуси */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-xxl: 32px;

  /* відступи */
  --page-side: 16px;
  --section-gap: 64px;
  --grid-gap: 24px;
  --container: 1200px;
}

@media (min-width: 1200px) {
  :root {
    --page-side: 120px;
    --section-gap: 120px;
  }
}

/* шкала заголовків: телефон → компʼютер */
.h1 { font: 700 clamp(44px, 5.8vw, 84px)/0.98 var(--font); letter-spacing: -0.025em; color: var(--text-heading); }
.h2 { font: 700 clamp(30px, 3.1vw, 44px)/1.1 var(--font); letter-spacing: -0.015em; color: var(--text-heading); }
.lead { font: 400 clamp(16px, 1.45vw, 21px)/1.5 var(--font); color: var(--text-body); }
.price-hero { font: 700 clamp(32px, 3.6vw, 52px)/1 var(--font); letter-spacing: -0.02em; color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 24px;
  border-radius: var(--r-md); background: var(--accent); color: var(--text-on-accent);
  font: 600 17px/1 var(--font); border: 0; cursor: pointer; transition: transform .12s ease, background-color .15s ease; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #00478A; } }
.btn--light { background: var(--bg-card); color: var(--accent); }
.btn--outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }

.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 1200px) { .card { border-radius: var(--r-xl); } }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation: none !important; } }