/* =========================================================================
   idea.1krok.link — локальний CSS
   Крок 2.1: база, HERO, «Кому це підходить».
   Крок 2.2: «Що робимо ми», «Що потрібно від Вас», «Як це працює», «Умови».
   Крок 2.3: «Кейси», FAQ, форма, футер-CTA.

   ПРАВИЛО: жодного hex поза блоками :root нижче.
   Навігація і футер стилізуються nav.css зі studio_works/works/ —
   сюди їх правила НЕ копіювати (див. спец., п. 3.1).
   ========================================================================= */

/* -------------------------------------------------------------------------
   ТОКЕНИ ЯДРА — ДОСЛІВНА КОПІЯ, НЕ РЕДАГУВАТИ ЗНАЧЕННЯ.
   Джерело:            /home/ubuntu/1krok_new/styles.css → :root (14 змінних)
   Дата звірки:        09.08.2026
   sha256(12) джерела: 0352e49d1afa
   Спільного brand-tokens.css в екосистемі не існує — рішення свідоме.
   При розбіжності правий styles.css: спершу звірити джерело, потім міняти тут.
   ------------------------------------------------------------------------- */
:root {
    --primary: #0055FF;
    --primary-dark: #0044CC;
    --primary-light: #0077FF;
    --text-dark: #1a1a2e;
    --text-gray: #6b7280;
    --text-light: #4a5568;
    --bg-light: #f7faff;
    --bg-white: #ffffff;
    --border-light: rgba(0,85,255,0.1);
    --border-medium: rgba(0,85,255,0.15);
    --shadow-sm: 0 8px 30px rgba(0,85,255,0.3);
    --shadow-md: 0 15px 50px rgba(0,85,255,0.15);
    --shadow-lg: 0 20px 60px rgba(0,85,255,0.15);
    --shadow-xl: 0 25px 80px rgba(0,85,255,0.3);
}

/* -------------------------------------------------------------------------
   ЛОКАЛЬНІ ТОКЕНИ — того, чого в :root екосистеми немає ВЗАГАЛІ:
   радіуси, transition, шрифти. Значення — з docs/idea/idea-design-canon-spec.md,
   не вигадані.

   Два кольори тут НЕ нові — у ядрі вони хардкодяться, а в :root не винесені.
   Оголошені токенами лише щоб у цьому файлі не було hex поза :root:
     --bg-dark     styles.css:27 (html), styles.css:1332, nav.css:95 (.footer)
     --primary-deep  studio_works/works/index.php:49 (той самий CTA-градієнт),
                     плюс ключ `800` у трьох tailwind.config.ts,
                     host.1krok.link/index.html і маркетинг 1krok_app.
   ------------------------------------------------------------------------- */
:root {
    --r-field: 12px;                              /* кнопки і поля форми */
    --r-card: 16px;                               /* картки */
    --transition: all 0.3s ease;                  /* домінує в styles.css */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-heading: 'Unbounded', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --bg-dark: #0a0a1a;
    --primary-deep: #0033AA;
}

/* ===================== БАЗА ===================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--bg-dark);   /* видно лише при overscroll під футером */
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--bg-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ===================== РОЗКЛАДКА ===================== */
/* max-width — ТІЛЬКИ тут, на внутрішньому контейнері.
   Ніколи на .section і ніколи на .cta-full: інакше по краях full-bleed
   вилізе --bg-dark з html. */
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.section { padding: 80px 0; }
.section--soft { background: var(--bg-light); }

/* Відступ під фіксованим хедером при переході по якорю (nav ~64px) */
.section, .hero { scroll-margin-top: 80px; }

/* ===================== ТИПОГРАФІКА ===================== */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 { font-weight: 700; font-size: clamp(30px, 5vw, 56px); max-width: 18ch; }
h2 { font-weight: 700; font-size: clamp(26px, 4vw, 42px); }
h3 { font-weight: 600; font-size: clamp(19px, 2.2vw, 24px); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
}

.lead {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-light);
    max-width: 62ch;
}

.muted { color: var(--text-gray); }

/* ===================== КНОПКИ ===================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--r-field);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
}

.btn--primary {
    background: var(--primary);
    color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-dark); }

.btn--secondary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn--secondary:hover { background: var(--bg-light); }

/* Кнопка всередині full-bleed CTA: білий фон, синій текст */
.btn--white {
    background: var(--bg-white);
    color: var(--primary);
}
.btn--white:hover {
    background: var(--bg-light);
    color: var(--primary-dark);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* ===================== КАРТКА (канон) ===================== */
/* Hover застосовується і до неклікабельних карток — це поведінка канону. */

.card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 28px;
    text-align: left;
    transition: var(--transition);
}
.card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-light); font-size: 15.5px; }

/* ===================== HERO ===================== */

.hero {
    padding: 128px 0 72px;
    background: linear-gradient(180deg, var(--bg-light), var(--bg-white));
}

.hero .lead { margin-top: 20px; }

.hero-trust {
    margin-top: 28px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--text-gray);
}

/* ===================== КОМУ ЦЕ ПІДХОДИТЬ ===================== */

.fit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.fit-card h3 { margin-bottom: 18px; }

/* Друга колонка відрізняється нейтральним фоном і приглушеним текстом.
   Нового акценту (зокрема червоного) не вводимо — заборонено специфікацією. */
.fit-card--no {
    background: var(--bg-light);
    color: var(--text-gray);
}
.fit-card--no h3 { color: var(--text-light); }

.fit-list { list-style: none; display: grid; gap: 14px; }

.fit-list li {
    position: relative;
    padding-left: 22px;
    font-size: 15.5px;
}
.fit-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--primary);
}
.fit-card--no .fit-list li::before { color: var(--text-light); }

.fit-list a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===================== ЩО РОБИМО МИ — сітка карток ===================== */

.section-head { max-width: 62ch; margin-bottom: 40px; }

/* .services-grid — сітка секції «Що робимо ми» (8 карток).
   Назва навмисно НЕ за кількістю колонок: раніше клас звався .grid-3, і при
   зміні брейкпоінтів ім'я почало брехати. Брейкпоінти тримаємо тут, поруч
   із правилом, а не в загальних медіа-блоках унизу — 8 карток мають лягати
   рівними рядами: 4+4, потім 2×4, потім 1×8.
     >=1200  → 4 колонки
     768-1199 → 2 колонки
     <768    → 1 колонка */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* ===================== ЩО ПОТРІБНО ВІД ВАС ===================== */
/* Свідомо БЕЗ карток: секція візуально легша за попередню — це підкреслює
   диспропорцію внесків на користь партнера (мапінг секцій у специфікації). */

.plain { max-width: 78ch; }

.plain-list {
    list-style: none;
    display: grid;
    gap: 14px;
}

.plain-list li {
    position: relative;
    padding-left: 24px;
    font-size: 16.5px;
    color: var(--text-light);
}
.plain-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--primary);
}

/* ===================== ЯК ЦЕ ПРАЦЮЄ — кроки ===================== */
/* П'ять кроків (§5 копірайту). Одна колонка: послідовність читається як
   послідовність, і жодна картка не лишається сиротою в кінці ряду. */

.steps { display: grid; gap: 16px; }

.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
}

.step-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--primary);
    white-space: nowrap;
    padding-top: 4px;
}

/* ===================== УМОВИ ===================== */

.terms { max-width: 78ch; display: grid; gap: 16px; }
.terms p { color: var(--text-light); font-size: 16.5px; }

/* Виноска про два слоти — візуально відділена від основного тексту:
   м'який фон на білій секції + акцентна ліва межа. */
.note {
    margin-top: 36px;
    max-width: 78ch;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-card);
    padding: 22px 26px;
    color: var(--text-light);
    font-size: 16px;
}

/* Проміжна точка входу в CTA між довгою стрічкою секцій і формою
   (пастка 5 специфікації). Текст кнопки — той самий, що в hero. */
.cta-inline { margin-top: 40px; }

/* Той самий блок, але по центру — для CTA між «Що потрібно від Вас»
   і «Як це працює». Модифікатор потрібен тому, що жоден наявний клас
   не центрує; кольори, радіуси і шрифти лишаються ті самі.
   Рядок тексту використовує наявний .muted (--text-gray). */
.cta-inline--center { text-align: center; }
.cta-inline--center .muted { margin-bottom: 18px; }

/* ===================== КЕЙСИ ===================== */
/* Порядок груп фіксований копірайтом §7: партнерські вище за клієнтські.
   Група «Партнерські проєкти» рендериться завжди, навіть порожня. */

.case-group + .case-group { margin-top: 48px; }
.case-group > h3 { margin-bottom: 20px; }

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.case-card p + p { margin-top: 12px; }

.case-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Партнерська група: флагманський кейс ліворуч, слот праворуч.
   align-items: start — слот лишається компактним блоком, а не колонкою
   на всю висоту картки CRM.
     >=1200   → 2fr 1fr
     768-1199 → 3fr 2fr (інакше права колонка завузька для тексту)
     <768     → одна колонка, CRM зверху */
.partner-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1199px) {
    .partner-grid { grid-template-columns: 3fr 2fr; }
}
@media (max-width: 767px) {
    .partner-grid { grid-template-columns: 1fr; }
}

/* «Один слот відкритий» — окремим елементом, НЕ карткою:
   без класу .card, тож канонний hover сюди не поширюється. */
.slot {
    max-width: 78ch;
    background: var(--bg-white);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-card);
    padding: 20px 24px;
}
.slot strong {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
}
.slot p {
    margin-top: 4px;
    color: var(--text-light);
    font-size: 16px;
}

/* Рядок-відсилання на портфоліо студії замість окремої групи кейсів.
   Клієнтські роботи на сторінці про партнерство розмивають позиціонування,
   тому виносимо їх посиланням, а не картками. Без картки, дрібним. */
.cases-more {
    margin-top: 18px;
    font-size: 14px;
    color: var(--text-gray);
}
.cases-more a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===================== FAQ ===================== */
/* <details> — нативний акордеон, без JS. Питання — Unbounded 600. */

.faq { display: grid; gap: 12px; max-width: 90ch; }

.faq-item { padding: 0; }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(16px, 1.8vw, 19px);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 1;
    color: var(--primary);
}
.faq-item[open] summary::after { content: '–'; }
.faq-item[open] { border-color: var(--primary); }

.faq-body {
    padding: 0 24px 22px;
    color: var(--text-light);
    font-size: 16px;
}
.faq-body p + p { margin-top: 12px; }
.faq-body a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===================== ФОРМА ===================== */

.form { max-width: 78ch; display: grid; gap: 18px; }

/* Від 768px короткі поля лягають парами. Розкладка робиться СІТКОЮ, а не
   перестановкою полів: порядок у DOM = порядок у копірайті = порядок табуляції.
   Поля 1-7 заповнюють дві колонки по рядах (Ім'я+Telegram, Email+Стадія,
   ФОП+Бюджет, Години+порожньо), а довгі позначені .field--wide і завжди
   на всю ширину. */
@media (min-width: 768px) {
    .form { grid-template-columns: 1fr 1fr; }
    .form > .field--wide,
    .form > .form-actions { grid-column: 1 / -1; }
}

.field { display: grid; gap: 8px; }

.field label { font-weight: 600; font-size: 15px; }
.field .req { color: var(--primary); }
.field .hint { font-weight: 400; font-size: 13px; color: var(--text-gray); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-dark);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-field);
    transition: var(--transition);
}

.field textarea { min-height: 150px; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-medium); }

/* focus — межа primary (вимога специфікації) */
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-gray); }

.form-actions { margin-top: 6px; }

/* Honeypot. Ховаємо ЗМІЩЕННЯМ, а не display:none і не type=hidden —
   обидва останні бот читає й пропускає. Для людини поле недосяжне:
   поза екраном, без табуляції (tabindex=-1) і приховане від скрінрідерів
   (aria-hidden) — атрибути стоять у розмітці. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-legal {
    margin-top: 22px;
    max-width: 78ch;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-gray);
}

/* ===================== ФУТЕР-CTA (full-bleed) ===================== */
/* КРИТИЧНО: на .cta-full max-width НЕ ставити ніколи. Ширину обмежує
   лише .wrap усередині. Інакше по краях градієнта проступить --bg-dark. */

.cta-full {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    padding: 100px 0;
    text-align: center;
    color: var(--bg-white);
}
.cta-full h2 { color: var(--bg-white); }
.cta-full p {
    margin: 16px auto 28px;
    max-width: 52ch;
    font-size: 18px;
    color: var(--bg-white);
    opacity: 0.88;
}

/* ===================== АДАПТИВ ===================== */

@media (max-width: 1000px) {
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .fit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .wrap { padding: 0 20px; }
    .section { padding: 56px 0; }
    .hero { padding: 96px 0 56px; }
    .card { padding: 22px; }
    .btn { width: 100%; }
    .btn-row { gap: 12px; }
    .cases-grid { grid-template-columns: 1fr; }
    .section-head { margin-bottom: 28px; }
    .step { grid-template-columns: 1fr; gap: 8px; }
    .step-num { padding-top: 0; }
    .note { padding: 20px; }
    .faq-item summary { padding: 18px 20px; }
    .faq-body { padding: 0 20px 20px; }
    .cta-full { padding: 64px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .btn, .field input, .field select, .field textarea { transition: none; }
    .card:hover { transform: none; }
}