/* ============================================================
   42px — clean rebuild (prototype). One responsive layout.
   Design tokens extracted from the Figma export's computed styles.
   ============================================================ */

:root {
  /* palette */
  --ink:   #323c49;          /* headings, dark text, button */
  --slate: #71849d;          /* muted body text, button hover */
  --band:  rgba(242, 245, 250, 0.5);
  --page-bottom: #b9ccd9;

  /* type — the export ships one font file per *named weight*
     ("Montserrat:Medium" etc.), not true variable families.
     TODO(prod): replace with proper variable @font-face + font-weight. */
  --ff-hero:  "Montserrat:Medium", sans-serif;
  --ff-intro: "Montserrat:Light", sans-serif;
  --ff-copy:  "Montserrat:Regular", sans-serif;
  --ff-head:  "Inter:Semi Bold", sans-serif;
  --ff-body:  "DM Sans:Medium", "Noto Sans:Regular", sans-serif;
  --ff-btn:   "DM Sans:Bold", sans-serif;

  /* layout */
  --maxw: 1440px;
  --gutter: 120px;
  --col-gap: 32px;
  --radius: 16px;
}

/* reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 6%, #e6edf2 46%, var(--page-bottom) 100%);
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.skip-link { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 8px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 10; }

/* shared content width + gutter */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 3-up grid used by features, cards and steps */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 300px; padding: 14px 22px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--ff-btn); font-size: 16px; line-height: 1.4;
  transition: background-color 180ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--slate); }

/* ---------- header ---------- */
.site-header { background: #fff; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; }
.logo img { width: 60px; height: 34px; }
.lang { display: inline-flex; align-items: center; gap: 4px; background: #eef1f5; border-radius: 999px; padding: 6px; }
.lang__opt { font-weight: 600; font-family: var(--ff-head); font-size: 14px; color: var(--slate); padding: 6px 12px; border-radius: 999px; }
.lang__opt.is-active { background: var(--slate); color: #fff; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(115deg, #eef4fa 0%, #e4eef6 46%, #cfe0ef 100%); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding-block: 120px 72px; }
.hero__title { margin: 0; max-width: 880px; font-weight: 500; font-family: var(--ff-hero); font-size: 60px; line-height: 51px; color: var(--ink); }
.hero__lead { font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--slate); }

/* ---------- intro ---------- */
.intro { padding-block: 48px 72px; }
.intro__text { max-width: 60ch; font-weight: 300; font-family: var(--ff-intro); font-size: 23px; line-height: 27.6px; color: var(--ink); }

/* ---------- feature row ---------- */
.features { padding-block: 104px; }
.feature__title { margin: 0 0 16px; font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--ink); }
.feature__text { font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--slate); }

/* ---------- generic section ---------- */
.section { padding-block: 64px; }
.section__head { margin-bottom: 48px; }
.section__title { margin: 0; font-weight: 600; font-family: var(--ff-head); font-size: 40px; line-height: 36px; color: var(--ink); }
.section__sub { margin: 14px 0 0; font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--ink); }

/* ---------- cards (three ways + steps) ---------- */
.card { display: flex; flex-direction: column; gap: 24px; min-height: 437px; padding: 32px; border-radius: var(--radius); background: var(--band); }
.card__title { margin: 0; font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 30px; color: var(--ink); }
.card__body { display: flex; flex-direction: column; gap: 16px; font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--slate); }
.card__sub { margin: 0; font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--slate); }
.card .bullets li { color: var(--slate); }
.steps .card { gap: 12px; min-height: 0; }
.step__num { font-weight: 600; font-family: var(--ff-head); font-size: 20px; color: var(--ink); }
.steps .card__body { margin-top: 12px; }

/* ---------- example block ---------- */
.example { padding-block: 40px 72px; }
.example .container { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* ---------- CTA band ---------- */
.cta { background: var(--band); }
.cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 64px; }
.cta__sub { font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--slate); }

/* ---------- footer ---------- */
.footer { background: var(--band); }
.footer__inner { display: flex; align-items: center; gap: 40px; padding-block: 56px 48px; }
.footer__logo { width: 60px; height: 34px; }
.footer__copy { font-weight: 400; font-family: var(--ff-copy); font-size: 12px; line-height: 16.8px; letter-spacing: -0.0144px; color: var(--ink); }

/* ============================================================
   Case study page
   ============================================================ */
/* hero sits on the page gradient (no tinted band of its own) */
.case-hero__inner { padding-block: 104px 0; }
.case-hero__title { margin: 0; font-weight: 500; font-family: var(--ff-hero); font-size: 60px; line-height: 51px; color: var(--ink); }
.case-hero__sub { margin: 24px 0 0; font-weight: 300; font-family: var(--ff-intro); font-size: 23px; line-height: 27.6px; color: var(--ink); }

/* case sections run a tighter vertical rhythm than the home grid */
.case .section { padding-block: 48px; }

/* product screenshots — cover-cropped into a rounded frame */
.figure { overflow: hidden; border-radius: var(--radius); background: var(--band); }
.figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* wide UI shots are framed from the top (keeps the app header visible);
   portrait dialog shots stay centered (default above) */
.figure--p1 img, .figure--p2 img, .figure--en1 img, .figure--en2 img { object-position: center top; }
.figure--p1 { aspect-ratio: 1040 / 472; }   /* wide overview shot */
.figure--p2 { aspect-ratio: 1040 / 540; }   /* solution shot */
.figure--p3 { aspect-ratio: 395 / 475; }    /* portrait result shot */
.case-figure { padding-block: 32px 0; }

/* emphasized lead / callout line (intro, "что это дает", risk line) */
.lead { max-width: 70ch; font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--slate); }

/* bulleted lists in the prose sections */
.bullets { display: flex; flex-direction: column; gap: 10px; max-width: 80ch; }
.bullets li { position: relative; padding-left: 22px; font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--ink); }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.prose > * + * { margin-top: 24px; }

/* "Результат": text left, portrait shot right, vertically centered */
.split { display: grid; grid-template-columns: 1fr 395px; gap: 48px; align-items: center; }
.split__body > * + * { margin-top: 24px; }

/* centered "Важное" band */
.callout { background: var(--band); }
.callout__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 56px; text-align: center; }
.callout__label { font-weight: 600; font-family: var(--ff-head); font-size: 24px; line-height: 33.6px; color: var(--ink); }
.callout__text { max-width: 60ch; font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--ink); }

/* body paragraph (Client / How-we-did-it prose) */
.para { max-width: 80ch; font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--ink); }

/* extra figure shapes used by the EN case */
.figure--en1 { aspect-ratio: 1040 / 378; border-radius: 8px; }  /* overview shot */
.figure--en2 { aspect-ratio: 1040 / 432; }                       /* solution shot */
.figure--en3 { aspect-ratio: 504 / 591; }                        /* result portrait */
.split--lg { grid-template-columns: 1fr 504px; align-items: start; }

/* "Result" — bold label + description pairs */
.deflist { display: flex; flex-direction: column; gap: 20px; max-width: 80ch; }
.deflist li > * { font-weight: 500; font-family: var(--ff-body); font-size: 18px; line-height: 28.8px; color: var(--ink); }
.deflist__title { font-weight: 700; }

/* centered "Key Takeaway" moment (sits on the page gradient) */
.takeaway__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 48px; text-align: center; }
.takeaway .section__title { text-align: center; }
.takeaway p { max-width: 64ch; font-weight: 600; font-family: var(--ff-head); font-size: 20px; line-height: 24px; color: var(--ink); }

/* ============================================================
   Survey — a self-contained modal form with its OWN palette
   (slate-900 / blue-600), distinct from the marketing pages.
   ============================================================ */
.survey {
  --s-ink:#0f172a; --s-muted:#64748b; --s-blue:#2563eb; --s-blue-d:#1d4fd0;
  --s-chip:#e6ecf4; --s-field:#fdfdfc; --s-line:#e2e8f0; --s-opt:#37404c;
  min-height: 100vh; padding: 60px 20px;
  background: linear-gradient(155deg, #828fa6 0%, #9aa0aa 60%, #a39f9c 100%);
}
.survey__card { position: relative; max-width: 1200px; margin-inline: auto; background: #fff; border-radius: 16px; padding: 40px; color: var(--s-ink); }
.survey__close { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f1f5f9; color: var(--s-muted); font-size: 18px; line-height: 1; }
.survey__close:hover { background: #e2e8f0; }
.survey__title { margin: 0; max-width: 90%; font-weight: 600; font-family: var(--ff-head); font-size: 18px; line-height: 1.3; color: var(--s-ink); }
.survey__sub { margin: 8px 0 0; font-weight: 400; font-family: var(--ff-body); font-size: 16px; line-height: 1.45; color: var(--s-muted); }
.survey__form { display: flex; flex-direction: column; gap: 36px; margin-top: 32px; }

.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.q__num { flex: none; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--s-blue); color: #fff; font-weight: 600; font-family: var(--ff-head); font-size: 15px; }
.q__title { padding: 0; font-weight: 600; font-family: var(--ff-head); font-size: 15px; line-height: 1.3; color: var(--s-ink); }
.q__sub { margin: 0 0 14px; font-weight: 400; font-family: var(--ff-body); font-size: 15px; line-height: 1.45; color: var(--s-muted); }
.q__body { padding-left: 40px; }

/* chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; padding: 9px 22px; border-radius: 6px; background: var(--s-chip); color: var(--s-ink); font-family: var(--ff-body); font-size: 16px; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(:checked) { background: var(--s-blue); color: #fff; }
.chip:focus-within { outline: 2px solid var(--s-blue); outline-offset: 2px; }

/* radios (single-select) */
.radios { display: flex; flex-direction: column; gap: 14px; }
.radio { display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--ff-body); font-size: 16px; color: var(--s-opt); }
.radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #cbd5e1; border-radius: 50%; flex: none; display: grid; place-content: center; cursor: pointer; }
.radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); background: var(--s-blue); transition: transform .12s; }
.radio input:checked { border-color: var(--s-blue); }
.radio input:checked::before { transform: scale(1); }

/* text fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.field__label { font-family: var(--ff-body); font-size: 14px; color: var(--s-muted); }
.input, .textarea { width: 100%; background: var(--s-field); border: 1px solid var(--s-line); border-radius: 6px; padding: 10px 14px; font-family: var(--ff-body); font-size: 16px; color: var(--s-ink); }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.input:focus, .textarea:focus { outline: none; border-color: var(--s-blue); }

/* submit + status */
.survey__submit { width: 100%; margin-top: 8px; height: 54px; border: 0; border-radius: 8px; background: var(--s-blue); color: #fff; font-weight: 600; font-family: var(--ff-head); font-size: 16px; cursor: pointer; transition: background-color .15s; }
.survey__submit:hover { background: var(--s-blue-d); }
.survey__submit:disabled { opacity: .6; cursor: default; }
.survey__status { margin-top: 14px; font-family: var(--ff-body); font-size: 14px; min-height: 1em; }
.survey__status.is-error { color: #dc2626; }
.survey__status.is-ok { color: #16a34a; }

/* ============================================================
   Responsive — ONE set of breakpoints replaces the 3 baked
   variants (1280 / 800 / 375) from the export.
   ============================================================ */
@media (max-width: 900px) {
  :root { --gutter: 48px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero__title { font-size: 44px; line-height: 1.02; max-width: 520px; }
  .section__title { font-size: 32px; line-height: 1.1; }
  .hero__inner { padding-block: 72px 56px; }
  .features { padding-block: 64px; }
  .case-hero__title { font-size: 44px; line-height: 1.02; max-width: none; }
  .case-hero__inner { padding-block: 72px 32px; }
  .split, .split--lg { grid-template-columns: 1fr; gap: 28px; }
  .split__media { max-width: 504px; }
}
@media (max-width: 560px) {
  :root { --gutter: 24px; }
  .grid-3 { grid-template-columns: 1fr; }
  .hero__title { font-size: 36px; }
  .section__title { font-size: 28px; }
  .card { min-height: 0; }
  .btn { min-width: 0; width: 100%; }
  .case-hero__title { font-size: 36px; }
  .case-hero__sub { font-size: 19px; }
  .survey { padding: 0; }
  .survey__card { border-radius: 0; padding: 24px 20px 32px; min-height: 100vh; }
  .q__body { padding-left: 0; }
}