/* kurmanov.kz - слой дизайн-системы 1.0: Manrope + Golos Text, радиусы 4 / 8 / 16, плоские карточки.
   Подключается ПОСЛЕ style.css. Цвета обеих тем у сайта уже совпадают с системой, меняются шрифты, радиусы и типографика. */

@font-face {
  font-family: 'Manrope'; src: url('../fonts/manrope.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Golos Text'; src: url('../fonts/golostext.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body:    'Golos Text', 'Segoe UI', sans-serif;
  --font-mono:    'Golos Text', 'Segoe UI', sans-serif; /* третьей моноширинной гарнитуры в системе нет */
  --radius:    4px;   /* кнопки и метки */
  --radius-md: 8px;   /* поля и уведомления */
  --radius-lg: 16px;  /* карточки */
  --motion: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
@media (min-width: 900px) { body { font-size: 17px; } }

/* Заголовки: Manrope, плотный трекинг у крупных */
h1, h2, h3, h4, .hero-title, .article-title, .section-title, .brand-text, .nav-dropdown-title, .service-card h3, .card h3 {
  font-family: var(--font-display);
}
.hero-title, .article-title, .section-title { letter-spacing: -0.035em; font-weight: 700; }
.hero-title { line-height: 1.04; }
.article-title { line-height: 1.1; }
.section-title { line-height: 1.12; }
h3, .card h3, .service-card h3, .case-body h3, .post h3 { letter-spacing: -0.02em; font-weight: 700; }

/* Подписи, метки, меню: тот же Golos Text, без моноширинного «кода» */
.eyebrow, .section-num, .card-num, .service-card-num, .step-k, .note-meta, .case-kicker, .post-meta, .price-badge {
  font-family: var(--font-body); letter-spacing: .06em; font-weight: 600;
}
.eyebrow, .section-num, .card-num, .note-meta, .case-kicker { text-transform: uppercase; font-size: .74rem; }
.nav a, .btn, .case-link, .post-link, .footer-nav a, .nav-dropdown a { font-family: var(--font-body); letter-spacing: 0; }
.nav a { font-size: .95rem; font-weight: 500; }
.btn { font-weight: 600; font-size: .95rem; min-height: 44px; border-radius: var(--radius); transition-duration: var(--motion); transition-timing-function: var(--ease); }

/* Текст статей и лидов - читательская колонка */
.article-lead, .hero-lead, .section-intro, .service-lead { font-family: var(--font-body); line-height: 1.6; }
.article-col p, .service-block > p, .note p { line-height: 1.7; }
.case-does li, .card p, .post-desc, .service-card p { font-family: var(--font-body); }

/* Радиусы: карточки 16, поля 8, кнопки 4 */
.cards, .service-cards, .posts, .case-media, .contact-form, .article-cta, .nav-dropdown, .portrait-frame, .about-portrait::before, .about-portrait::after,
.faq, .faq-item, .tools-card, .lightbox-img, .article-figure img, .case-soon {
  border-radius: var(--radius-lg);
}
.contact-form input, .contact-form textarea, .contact-form select,
.form-row input, input[type="text"], input[type="tel"], input[type="email"], textarea, select {
  border-radius: var(--radius-md); min-height: 48px; font-family: var(--font-body);
}
textarea { min-height: 96px; }
.card-tags li, .case-tag { border-radius: var(--radius); }

/* Плоские карточки: никакого лишнего объёма */
.card, .service-card, .post, .case { box-shadow: none; }
.nav-dropdown { box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .45); } /* тень - только у всплывающего слоя */

/* Фокус: 3 px с отступом 4 px */
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Блог: отдельные плоские карточки со своей рамкой и скруглением 16 px. Раньше сетка рисовала разделители
   общим фоном и зазором в 1 px - с общим скруглением это давало квадратные углы и серые пустые ячейки в последнем ряду. */
.posts { background: none; border: 0; gap: clamp(1rem, 2vw, 1.5rem); border-radius: 0; overflow: visible; }
.post { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--motion) var(--ease), background-color var(--motion) var(--ease); }
.post:hover { border-color: var(--line-2); }

/* FAQ - список с линиями-разделителями, а не карточки: скругление давало загнутые концы линий */
.faq, .faq-item { border-radius: 0; }