/* ═══════════════════════════════════════════════════════
   KUPOLLA — Design System, Base, Buttons, Forms
   kupolla-1.css
════════════════════════════════════════════════════════ */

/* 1. DESIGN TOKENS — COLOR PALETTE (KUPOLLA Brand Book, Фаза 4)
   Білий фон усюди · чорний/графітовий (#202020) — для темних секцій
   Фірмовий градієнт — лише для акцентів: #00311e → #051f43            */
:root {
  --c-dark:      #000000;       /* Black */
  --c-graphite:  #202020;       /* Dark Clay / Graphite — темні секції */
  --c-forest:    #00311e;       /* брендовий темно-зелений (1-й колір градієнта) */
  --c-navy:      #051f43;       /* брендовий темно-синій (2-й колір градієнта) */
  --c-green:     #0a3a30;       /* похідний тон між forest↔navy (світліший) */
  --c-green-l:   #123f52;       /* похідний тон між forest↔navy (найсвітліший) */
  --c-beige:     var(--c-navy); /* застаріла назва → акцент тепер navy, не бежевий */
  --c-gold:      var(--c-navy); /* застаріла назва → аліас на navy */
  --c-beige-l:   #1b3a63;       /* світліший navy для hover-станів */
  --c-stone:     #d9d9d9;       /* нейтральний сірий (без бежевого відтінку) */
  --c-clay:      #202020;       /* Dark Clay — основний текст */
  --c-warm:      #ffffff;       /* білий фон замість теплого off-white */
  --c-stone-bg:  #f4f4f4;       /* нейтральний світло-серий фон */
  --c-white:     #ffffff;
  --c-text:      #202020;       /* Dark Clay */
  --c-muted:     #62666a;
  --c-border:    rgba(32,32,32,.14);
  --c-err:       #c0392b;
  --c-hit:       #8b1e1e;       /* бордо «хіт продажів» */

  --gradient-brand: linear-gradient(135deg, #00311e 0%, #051f43 100%);

  --f-serif:     'Merriweather', Georgia, serif;
  --f-sans:      'Proxima Nova', 'Inter', Arial, sans-serif;

  /* Квадратні форми з мінімальним радіусом (ТЗ п.1) */
  --r-sm:        2px;
  --r-md:        3px;
  --r-lg:        4px;
  --r-xl:        4px;
  --r-full:      4px;
  /* Справжні круглі елементи (аватари, крапки, чекбокси, іконки-кнопки) —
     «квадратна» мова дизайну (Фаза 4) стосується карток/кнопок/бейджів,
     а не круглих UI-елементів, тож для них окремий токен. */
  --r-circle:    50%;

  --sh-sm:  0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --sh-md:  0 4px 16px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05);
  --sh-lg:  0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.06);
  --sh-xl:  0 24px 64px rgba(0,0,0,.2);

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --tr-f:   200ms var(--ease);
  --tr:     360ms var(--ease);
  --tr-s:   520ms var(--ease);

  --hh:     72px;
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
  --safe-r: env(safe-area-inset-right,  0px);
}

/* 2. BASE RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}

main {
  overflow-x: clip;
  max-width: 100%;
  min-width: 0;
  flex: 1 0 auto;
}
/* Блокування скролу під відкритим меню/модалкою — клас замість inline style */
body.is-locked { overflow: hidden; }
/* Атрибут hidden має перемагати author display: flex/grid на картках (фільтри блогу/галереї) */
[hidden]:not([hidden="until-found"]) { display: none; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::selection { background: rgba(5,31,67,.18); color: var(--c-dark); }

/* 3. LAYOUT */
.kp-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  min-width: 0;
  padding-left:  calc(clamp(1rem, 4vw, 2.5rem) + var(--safe-l));
  padding-right: calc(clamp(1rem, 4vw, 2.5rem) + var(--safe-r));
}

/* 4. TYPOGRAPHY SHARED */
.kp-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: .75rem;
}
.kp-label--gold { color: var(--c-gold); }

.kp-section__title {
  font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-dark);
  margin-bottom: .875rem;
}
.kp-section__title--light { color: var(--c-white); }

.kp-section__sub {
  font-size: 1rem;
  color: var(--c-muted);
  max-width: 560px;
  margin: 0 auto;
}

.kp-section__hd { text-align: center; margin-bottom: 3.5rem; }
.kp-section__ft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* 5. BUTTONS */
.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  font-family: var(--f-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  transition: all var(--tr);
  white-space: nowrap;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.kp-btn--primary {
  background: var(--gradient-brand);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: var(--c-white);
  border-color: transparent;
  transition: background-position var(--tr-s), transform var(--tr), box-shadow var(--tr);
}
.kp-btn--primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Контрастна кнопка для темних/фотографічних фонів (hero тощо) */
.kp-btn--gold {
  background: var(--c-white);
  color: var(--c-graphite);
  border-color: var(--c-white);
}
.kp-btn--gold:hover {
  background: var(--c-stone-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}

/* Кнопки консультації — м'яка пульсація, щоб привертати увагу (Правки п.2) */
@media (prefers-reduced-motion: no-preference) {
  [data-modal-trigger="consult"].kp-btn--primary,
  [data-modal-trigger="consult"].kp-btn--gold {
    animation: kpBtnPulse 2.8s ease-in-out infinite;
  }
  [data-modal-trigger="consult"].kp-btn--primary:hover,
  [data-modal-trigger="consult"].kp-btn--gold:hover {
    animation-play-state: paused;
  }
}
@keyframes kpBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,31,67,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(5,31,67,0); }
}

.kp-btn--ghost {
  background: transparent;
  color: var(--c-forest);
  border-color: var(--c-forest);
}
.kp-btn--ghost:hover {
  background: var(--c-forest);
  color: var(--c-white);
}

.kp-btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
.kp-btn--ghost-light:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: var(--c-white);
}

.kp-btn--outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.kp-btn--outline:hover {
  border-color: var(--c-forest);
  color: var(--c-forest);
}

.kp-btn--lg  { padding: 1rem 2rem; font-size: 1rem; min-height: 52px; }
.kp-btn--sm  { padding: .45rem 1rem; font-size: .8125rem; min-height: 38px; }
.kp-btn--full { width: 100%; }
.kp-btn__ic  { width: 17px; height: 17px; flex-shrink: 0; }

/* 6. FORMS */
.kp-form { display: flex; flex-direction: column; gap: 1rem; position: relative; }

.kp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.kp-form__fld { display: flex; flex-direction: column; gap: .35rem; }

.kp-form__lbl {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--c-text);
}

.kp-form__inp,
.kp-form__ta {
  width: 100%;
  padding: .875rem 1rem;
  font-family: var(--f-sans);
  font-size: 1rem; /* ≥16px — iOS Safari не зумить поле при фокусі */
  color: var(--c-text);
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.kp-form__inp:focus,
.kp-form__ta:focus {
  border-color: var(--c-forest);
  box-shadow: 0 0 0 3px rgba(29,61,43,.08);
}
.kp-form__inp.err,
.kp-form__ta.err {
  border-color: var(--c-err);
  box-shadow: 0 0 0 3px rgba(217,48,37,.08);
}

.kp-form__error {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--c-err);
}
.kp-form__error--gdpr { margin-top: -.35rem; }
.kp-form__ta { resize: vertical; min-height: 116px; }

/* Custom checkbox */
.kp-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
}
.kp-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.kp-checkbox__mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-white);
  transition: all var(--tr);
  position: relative;
  margin-top: 1px;
}
.kp-checkbox input:checked + .kp-checkbox__mark {
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.kp-checkbox input:checked + .kp-checkbox__mark::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.kp-checkbox.err .kp-checkbox__mark { border-color: var(--c-err); }

.kp-checkbox__txt {
  font-size: .8125rem;
  color: var(--c-muted);
  line-height: 1.55;
}

.kp-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  color: var(--c-text);
}
.kp-form__success svg { color: var(--c-forest); flex-shrink: 0; }
.kp-form__success h3 {
  font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}
.kp-form__success p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 28rem;
}
.kp-form--success { gap: 0; }
.kp-form__a {
  color: var(--c-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kp-form__note {
  text-align: center;
  font-size: .75rem;
  color: var(--c-muted);
}

.kp-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 7. SECTIONS — shared spacing */
.kp-section { padding: clamp(4rem, 8vw, 6rem) 0; max-width: 100%; overflow-x: clip; }
.kp-section--white { background: var(--c-white); }
.kp-container--md { max-width: 860px; }
.kp-stack-md { margin-top: 1.5rem; }
.kp-stack-lg { margin-top: 2rem; }
.kp-center-lg { text-align: center; margin-top: 3rem; }
.kp-sub--on-dark { color: rgba(255, 255, 255, .55); }
.kp-cursor-default { cursor: default; }
.kp-gi-ratio-portrait { width: 100%; aspect-ratio: 3 / 4; }
.kp-gi-ratio-wide { width: 100%; aspect-ratio: 4 / 3; }
.kp-copy {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.kp-copy--spaced { margin: 1rem 0 1.5rem; }
.kp-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}
.kp-points li {
  display: flex;
  gap: .75rem;
  font-size: .9375rem;
  color: var(--c-muted);
}
.kp-points__mark {
  color: var(--c-forest);
  flex-shrink: 0;
}
.kp-points__mark--beige { color: var(--c-beige); }
.kp-tech__inner--mid { align-items: center; }