/* ============================================================
   DESIGN TOKENS
   Правило: всё на сайте берётся отсюда. Новых цветов, размеров
   и радиусов "на глаз" не добавляем.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600&family=Unbounded:wght@600;800;900&display=swap');

:root {
  /* Цвет: 4 основных + 1 акцент. На одном экране — максимум 3. */
  --ink:        #000000;   /* текст, обводки, тёмные секции */
  --paper:      #FFFFFF;   /* основной фон — чистый белый */
  --soft:       #EFF1F5;   /* нейтральный светло-серый для чередования секций */
  --white:      #FFFFFF;   /* карточки на paper */
  --lime:       #D6F55A;   /* главный акцент: кнопки, цифры, выделенная карточка */
  --blue:       #2145F5;   /* вторичный акцент: заголовки, цены, фон секции */
  --orange:     #E8703F;   /* редкий акцент: раскрытый пункт, форма */

  --ink-60:     #000000;   /* вторичный текст */
  --ink-12:     rgba(21,21,21,.12);  /* тонкие разделители */
  --on-blue:    #FFFFFF;

  /* Типографика */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;  /* только заголовки и цифры */
  --font-body:    'Onest', system-ui, sans-serif;

  --fs-hero:  clamp(2.75rem, 7vw, 6rem);     /* один на страницу */
  --fs-h2:    clamp(2rem, 4.5vw, 3.75rem);
  --fs-h3:    clamp(1.375rem, 2.2vw, 2rem);
  --fs-num:   clamp(2.5rem, 5vw, 4.5rem);    /* 01 02 03, цены */
  --fs-body:  1.0625rem;                      /* 17px */
  --fs-small: 0.9375rem;                      /* 15px — минимум на сайте */

  --lh-display: 1.02;
  --lh-body:    1.5;
  --track-display: -0.02em;

  /* Радиусы */
  --r-card: 32px;
  --r-card-sm: 24px;
  --r-pill: 999px;

  /* Обводка */
  --stroke: 2px solid var(--ink);
  --stroke-thin: 1px solid var(--ink);

  /* Отступы: шаг 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 140px;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 10vw, 140px);

  /* Движение */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t: 220ms;
}

/* ---------- База ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--ink  { background: var(--ink);  color: var(--paper); }
.section--blue { background: var(--blue); color: var(--on-blue); }

/* ---------- Типографика ---------- */
.hero, .h2, .h3, .num {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
}
.hero { font-size: var(--fs-hero); font-weight: 900; }
.h2   { font-size: var(--fs-h2); }
.h3   { font-size: var(--fs-h3); }
.num  { font-size: var(--fs-num); }
.accent-blue { color: var(--blue); }
.accent-lime { color: var(--lime); }
.muted { color: var(--ink-60); }

/* Метка раздела: [ Сервіс ] */
.label {
  font: 500 var(--fs-small)/1 var(--font-body);
  letter-spacing: .02em;
  display: inline-flex; gap: .6em;
}
.label::before { content: '['; } .label::after { content: ']'; }

/* ---------- Пилюля (тег) ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 10px 20px; border: var(--stroke-thin); border-radius: var(--r-pill);
  font: 400 var(--fs-small)/1 var(--font-body); background: transparent; color: inherit;
}
.pill--fill { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }

/* ---------- Кнопка с круглой стрелкой ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 60px; padding: 8px 8px 8px 28px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 var(--fs-body)/1 var(--font-body);
  background: var(--lime); color: var(--ink);
  transition: transform var(--t) var(--ease);
}
.btn::after {
  content: ''; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/20px no-repeat;
  transition: transform var(--t) var(--ease);
}
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink.btn--solo, .btn--solo { padding: 0 32px; justify-content: center; }
.btn--solo::after { display: none; }

/* ---------- Карточка ---------- */
.card {
  background: var(--white); border: var(--stroke); border-radius: var(--r-card);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
}
.card--lime   { background: var(--lime); }
.card--ink    { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--orange { background: var(--orange); border-color: var(--orange); }
.card--flat   { border: 0; }

/* ---------- Нумерованный список 01 02 03 ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5) var(--s4); }
.step .num { color: var(--lime); margin-bottom: var(--s2); }
.step h3 { font: 600 1.125rem/1.2 var(--font-body); text-transform: uppercase; margin: 0 0 8px; }
.step p  { margin: 0; color: var(--ink-60); }

/* ---------- Аккордеон ---------- */
.acc { border-top: var(--stroke-thin); }
.acc-item { border-bottom: var(--stroke-thin); }
.acc-item > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr 32px;
  gap: var(--s2); padding: var(--s3) var(--s2); font: 600 1.375rem/1.25 var(--font-body);
}
.acc-item > summary::-webkit-details-marker { display: none; }
/* стрілка: ↗ → при наведенні вирівнюється в →, у відкритому — вниз */
.acc-item > summary::after, details.more > summary::after {
  content: ''; width: 28px; height: 28px; justify-self: end; align-self: start; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: rotate(-45deg);
  transition: transform var(--t) var(--ease);
}
.acc-item > summary:hover::after, details.more > summary:hover::after { transform: rotate(0deg); }
.acc-item[open] > summary::after, details.more[open] > summary::after { transform: rotate(90deg); }
.acc-item[open] { background: var(--orange); border-radius: var(--r-card-sm); border-bottom-color: transparent; }

.acc-item > div { padding: 0 var(--s2) var(--s3) calc(64px + var(--s2) * 2); max-width: 70ch; }

/* ---------- Поля формы ---------- */
.field {
  width: 100%; height: 64px; padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.45); color: var(--ink); font: 400 var(--fs-body) var(--font-body);
}
.field::placeholder { color: #000; }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Адаптив ---------- */
@media (max-width: 640px) {
  :root { --r-card: 24px; }
  .card { padding: var(--s3); }
  .acc-item > summary { grid-template-columns: 44px 1fr 28px; font-size: 1.125rem; }
  .acc-item > div { padding-left: calc(44px + var(--s2) * 2); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }