/* =========================================================
   Токены
   ========================================================= */
:root {
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);

  --text: #f3f1ec;
  --muted: #9b9b9b;
  --dim: #6b6b6b;

  --orange: #ff5a1f;
  --orange-2: #ff8a3d;
  --orange-3: #ff4d00;
  --grad: linear-gradient(135deg, #ffa25c 0%, #ff5a1f 50%, #ff3d00 100%);
  --grad-text: linear-gradient(120deg, #ffb56b 0%, #ff6a2a 45%, #ff3d00 100%);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* =========================================================
   База
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::after { /* зерно */
  content: '';
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
/* заголовок для поисковиков и экранных дикторов, в макете не показывается */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

/* =========================================================
   Типографика
   ========================================================= */
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.06em; /* хвосты курсива */
}
.lead { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03);
  margin-bottom: 24px;
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 9px var(--orange); }
.note { color: var(--dim); font-size: 15px; margin-top: 40px; max-width: 70ch; }
.link { color: var(--orange-2); border-bottom: 1px solid rgba(255, 138, 61, 0.35); transition: border-color 0.3s var(--ease); }
.link:hover { border-color: var(--orange-2); }

/* =========================================================
   Кнопки
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px; border-radius: 999px; min-height: 56px;
  font-weight: 500; font-size: 16px; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.btn__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); }

.btn--primary { background: var(--orange); color: #14100d; box-shadow: 0 8px 30px -10px rgba(255, 90, 31, 0.55); }
.btn--primary .btn__icon { background: rgba(0, 0, 0, 0.14); }
.btn--primary:hover { background: #ff6b33; }

.btn--outline { background: transparent; border-color: var(--hair-2); color: var(--text); }
.btn--outline .btn__icon { background: rgba(255, 255, 255, 0.07); }
.btn--outline:hover { border-color: var(--orange); background: rgba(255, 90, 31, 0.07); }
.btn--outline:hover .btn__icon { background: rgba(255, 90, 31, 0.18); color: var(--orange-2); }

.btn--ghost { padding: 12px 24px; border-radius: 999px; border-color: transparent; color: var(--muted); gap: 12px; }
.btn--ghost:hover { color: var(--text); border-color: var(--orange); background: rgba(255, 90, 31, 0.07); }
.btn__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease); }
.btn--ghost:hover .btn__arrow { transform: translateY(3px); }

.btn--lg { padding: 8px 8px 8px 28px; font-size: 17px; min-height: 64px; }
.btn--lg .btn__icon { width: 40px; height: 40px; }
.btn--lg.btn--ghost { padding: 12px 32px; }
.btn--sm { padding: 4px 4px 4px 20px; font-size: 14px; min-height: 44px; }
.btn--sm .btn__icon { width: 28px; height: 28px; }

/* =========================================================
   Навигация
   ========================================================= */
.nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; }
.nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(14, 14, 16, 0.72);
  border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.6s var(--ease);
}
.nav__logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.nav__mark { width: 12px; height: 12px; border-radius: 3px; background: var(--grad); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255, 90, 31, 0.6); }
.nav__links { display: flex; gap: 4px; }
.nav__links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color 0.4s var(--ease), background 0.4s var(--ease); }
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
/* круглая кнопка Telegram рядом с основной */
.nav__tg {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav__tg:hover { background: var(--orange-2); transform: translateY(-2px); }
.nav__tg svg { width: 21px; height: 21px; }
.nav__cta + .nav__tg { margin-left: -20px; }  /* держим пару кнопок вместе, а не на общем шаге сетки */

.nav__burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06); position: relative; cursor: pointer; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); top: 50%; transition: transform 0.5s var(--ease); }
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(3px); }
.menu-open .nav__burger span:first-child { transform: rotate(45deg); }
.menu-open .nav__burger span:last-child { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 8, 9, 0.9);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.menu-open .menu { opacity: 1; visibility: visible; }
.menu__links { display: grid; gap: 12px; text-align: center; }
.menu__links a {
  font-family: var(--font-display); font-size: clamp(26px, 7vw, 36px); font-weight: 500; padding: 12px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i) * 70ms + 120ms);
}
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu__cta { color: var(--orange-2); }

/* =========================================================
   Секции и сетки
   ========================================================= */
.section { padding-block: clamp(96px, 11vw, 160px); position: relative; scroll-margin-top: 24px; }
.section--tight { padding-block: clamp(72px, 8vw, 120px); }
.section__head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 880px; }
.section__head--split { max-width: none; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.section__head--split .lead { justify-self: end; }
.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Карточка с двойной рамкой */
.card {
  border-radius: var(--r-xl); padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hair);
  transition: transform 0.7s var(--ease), border-color 0.7s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.card__in {
  height: 100%; border-radius: calc(var(--r-xl) - 8px);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 15.5px; }
.card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px !important; color: var(--dim) !important; }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); margin-bottom: 12px; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon--orange { background: rgba(255, 90, 31, 0.12); border-color: rgba(255, 90, 31, 0.3); }
.icon--orange svg { stroke: var(--orange-2); }

.card--big .card__in { padding: 36px; }
.card--big h3 { font-size: clamp(22px, 2vw, 28px); }
.card--big p { font-size: 17px; max-width: 46ch; }
.card--orange { border-color: rgba(255, 90, 31, 0.35); background: rgba(255, 90, 31, 0.06); }
.card--orange .card__in { background: linear-gradient(160deg, #2a1610 0%, #1a110d 100%); }
.card--orange h3 { color: var(--orange-2); }

/* =========================================================
   Первый экран
   ========================================================= */
.hero { position: relative; padding-top: clamp(112px, 13vw, 152px); min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 34% at 78% 42%, rgba(255, 90, 31, 0.22), transparent 70%),
    radial-gradient(30% 30% at 15% 90%, rgba(255, 138, 61, 0.08), transparent 70%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(24px, 2.5vw, 36px);
  align-items: start;
}
.hero__head { grid-column: 1 / -1; grid-row: 1; }
.hero__content { grid-column: 1; grid-row: 2; align-self: start; }
.hero__visual { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: -8px; }
.orbs { grid-column: 1; grid-row: 3; align-self: end; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__title .accent { font-weight: 400; }
.br-d { display: block; }
@media (max-width: 1100px) { .br-d { display: none; } }
.hero__lead { color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; max-width: 50ch; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero__alt { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }

/* инлайн-чипы в заголовке */
.chip { display: inline-flex; vertical-align: middle; margin: 0 0.08em; position: relative; top: -0.06em; }
.chip--mock {
  width: 1.7em; height: 0.78em; border-radius: 0.22em;
  background: linear-gradient(160deg, #26262a, #141416);
  border: 1px solid var(--hair-2);
  padding: 0.12em 0.16em; flex-direction: column; gap: 0.08em; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
}
.chip--mock i { display: block; height: 0.08em; border-radius: 999px; background: rgba(255, 255, 255, 0.4); }
.chip--mock i:nth-child(1) { width: 70%; }
.chip--mock i:nth-child(2) { width: 45%; }
.chip--mock i:nth-child(3) { width: 30%; background: var(--orange); }
.chip--pill {
  font-family: var(--font-body); font-weight: 500; font-size: 0.26em; letter-spacing: 0.02em;
  padding: 0.55em 1.2em; border-radius: 999px;
  background: var(--orange); color: #14100d; align-items: center;
  box-shadow: 0 8px 22px -8px rgba(255, 90, 31, 0.7);
  top: -0.14em;
}

/* Z-каскад мокапов */
.cascade { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; margin-left: auto; }
.mock {
  position: absolute; border-radius: 18px; padding: 4px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: transform 1.2s var(--ease);
}
.mock__bar { display: flex; gap: 4px; padding: 8px 12px; }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.mock__body { background: linear-gradient(180deg, #17171a, #0e0e10); border-radius: 12px; padding: 16px; display: grid; gap: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mock__h { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.85); width: 80%; }
.mock__h--short { width: 52%; }
.mock__p { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); width: 90%; }
.mock__p--short { width: 60%; }
.mock__btn { width: 34%; height: 18px; border-radius: 999px; background: var(--orange); margin-top: 4px; box-shadow: 0 5px 15px -4px rgba(255, 90, 31, 0.7); }
.mock__img { height: 70px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 90, 31, 0.5), rgba(255, 90, 31, 0.05)); margin-top: 8px; }
.mock__img--wide { height: 90px; }
.mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock__grid span { height: 46px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hair); }
.mock__grid span:first-child { background: linear-gradient(135deg, rgba(255, 90, 31, 0.6), rgba(255, 90, 31, 0.1)); }
.mock--a { width: 62%; left: 0; top: 8%; transform: rotate(-4deg); z-index: 1; }
.mock--b { width: 56%; right: 0; top: 0; transform: rotate(3deg); z-index: 2; }
.mock--c { width: 66%; left: 17%; bottom: 4%; transform: rotate(-1.5deg); z-index: 3; }
.cascade::before { /* свечение под стопкой */
  content: ''; position: absolute; inset: 20% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 90, 31, 0.35), transparent);
  filter: blur(30px); z-index: 0;
}
.hero__visual:hover .mock--a { transform: rotate(-6deg) translate(-8px, -6px); }
.hero__visual:hover .mock--b { transform: rotate(5deg) translate(8px, -4px); }
.hero__visual:hover .mock--c { transform: rotate(-0.5deg) translateY(6px); }

/* круглые стат-плашки */
.orbs { display: flex; flex-wrap: wrap; gap: 20px; }
.orb {
  width: 156px; height: 156px; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 16px; gap: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.orb strong { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.orb strong small { font-size: 0.5em; font-weight: 500; margin-left: 4px; }
.orb span { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.orb--fill { background: var(--orange); border-color: transparent; box-shadow: 0 15px 38px -20px rgba(255, 90, 31, 0.7); }
.orb--fill strong, .orb--fill span { color: #14100d; }

/* бегущая строка */
.marquee { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-block: 16px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.marquee__track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   Решение — bento
   ========================================================= */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "num num num num big big big big big big big big"
    "num num num num c1 c1 c1 c1 c2 c2 c2 c2"
    "c3 c3 c3 c3 c4 c4 c4 c4 c5 c5 c5 c5";
}
.bento__num { grid-area: num; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 8px 24px; }
.bento > .card--big { grid-area: big; }
.bento > .card:nth-of-type(2) { grid-area: c1; }
.bento > .card:nth-of-type(3) { grid-area: c2; }
.bento > .card:nth-of-type(4) { grid-area: c3; }
.bento > .card:nth-of-type(5) { grid-area: c4; }
.bento > .card:nth-of-type(6) { grid-area: c5; }
.giant {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(160px, 24vw, 340px); line-height: 0.82; letter-spacing: normal;
  background: linear-gradient(180deg, #ff8a3d 0%, #ff4d00 60%, rgba(255, 77, 0, 0.15) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* запас справа: фон под background-clip обрезается по боксу, иначе край цифры гаснет */
  display: inline-block; margin-left: -0.04em; padding-right: 0.1em;
}
.bento__num p { color: var(--muted); font-size: 16px; max-width: 26ch; margin-top: 16px; }

/* =========================================================
   Шаги
   ========================================================= */
.steps { border-top: 1px solid var(--hair); }
.step {
  display: grid; grid-template-columns: 140px 1fr 120px; gap: 32px; align-items: start;
  padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--hair);
  transition: background 0.6s var(--ease);
}
.step__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 5.5vw, 72px); line-height: 0.9; letter-spacing: -0.04em; color: var(--dim); transition: color 0.6s var(--ease); }
.step:hover .step__num { color: var(--orange); }
.step__body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); margin-bottom: 12px; letter-spacing: -0.01em; }
.step__body p { color: var(--muted); max-width: 60ch; }
.step__time { justify-self: end; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hair); white-space: nowrap; }

/* =========================================================
   Разворот текст + визуал
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split__text .h2 { margin-bottom: 24px; }
.split__text .lead { margin-bottom: 32px; }

/* =========================================================
   Тарифы
   ========================================================= */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
/* подсказка про прокрутку появляется только там, где тарифы становятся каруселью */
.plans__hint { display: none; }
.plan { border-radius: var(--r-xl); padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); transition: transform 0.7s var(--ease), border-color 0.7s var(--ease); }
.plan:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.plan__in { position: relative; height: 100%; border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); padding: 32px 28px 28px; display: flex; flex-direction: column; }
.plan--hot { border-color: rgba(255, 90, 31, 0.5); background: rgba(255, 90, 31, 0.08); box-shadow: 0 22px 60px -30px rgba(255, 90, 31, 0.5); }
.plan--hot .plan__in { background: linear-gradient(170deg, #241410 0%, #16110e 100%); }
.plan__tag { position: absolute; top: -12px; left: 24px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #14100d; background: var(--orange); padding: 4px 12px; border-radius: 999px; }
.plan__name { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.plan__for { color: var(--dim); font-size: 14px; margin-top: 8px; }
.plan__price { font-family: var(--font-display); font-weight: 600; font-size: 46px; letter-spacing: -0.03em; line-height: 1; margin: 24px 0; }
.plan__price span { font-weight: 400; font-size: 0.6em; color: var(--muted); }
.plan__price small { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--muted); margin-right: 4px; }
.plan__list { display: grid; gap: 12px; margin-bottom: 28px; }
.plan__list li { position: relative; padding-left: 24px; font-size: 15px; color: var(--muted); }
.plan__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.plan__cta { margin-top: auto; justify-content: space-between; }

.included { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; padding: 20px 24px; border-radius: var(--r-lg); border: 1px dashed var(--hair-2); }
.included__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.included ul { display: flex; flex-wrap: wrap; gap: 8px; }
.included li { font-size: 14px; color: var(--muted); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair); }

.addon { margin-top: 16px; border-radius: var(--r-xl); padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); }
.addon__in { border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(90deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.addon__tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-2); margin-bottom: 12px; }
.addon h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.addon__price { font-family: var(--font-accent); font-style: italic; font-weight: 400; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.addon p { color: var(--muted); margin-top: 12px; max-width: 62ch; }

/* =========================================================
   Правки, подойдёт/не подойдёт
   ========================================================= */
.list-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.list-title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.list-title--yes::before { background: var(--orange); box-shadow: 0 0 9px var(--orange); }
.list-title--no::before { background: transparent; border: 1.5px solid var(--dim); }
.checklist { display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 28px; color: var(--muted); font-size: 15.5px; }
.checklist li::before { position: absolute; left: 0; top: 0; font-size: 15px; }
.checklist--yes li::before { content: ''; left: 2px; top: 9px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.checklist--no li::before { content: ''; left: 3px; top: 10px; width: 10px; height: 1.5px; background: var(--dim); }

/* обе колонки живут в одной сетке: пункт слева и пункт справа всегда в одной строке,
   даже если один занимает две строки текста, — разделители совпадают по высоте */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 80px); row-gap: 0; }
.fit__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 24px); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--orange); color: var(--orange-2); grid-row: 1; grid-column: 1; }
.fit__title--no { color: var(--muted); border-color: var(--hair-2); grid-column: 2; }
.fit__list { display: contents; }
.fit__list--yes > li { grid-column: 1; }
.fit__list--no > li { grid-column: 2; }
.fit__list > li:nth-child(1) { grid-row: 2; }
.fit__list > li:nth-child(2) { grid-row: 3; }
.fit__list > li:nth-child(3) { grid-row: 4; }
.fit__list > li:nth-child(4) { grid-row: 5; }
.fit__list > li:nth-child(5) { grid-row: 6; }
.fit__list > li:nth-child(6) { grid-row: 7; }
.fit__list > li:nth-child(7) { grid-row: 8; }
.fit__list > li:nth-child(8) { grid-row: 9; }
.fit__list li { padding: 16px 0 16px 32px; position: relative; border-bottom: 1px solid var(--hair); color: var(--text); font-size: 16px; }
.fit__list--no li { color: var(--muted); }
.fit__list--yes li::before { content: ''; position: absolute; left: 2px; top: 22px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.fit__list--no li::before { content: ''; position: absolute; left: 3px; top: 24px; width: 10px; height: 1.5px; background: var(--dim); }

/* =========================================================
   Автор
   ========================================================= */
.author { border-radius: var(--r-xl); padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); }
.author__in { border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(120deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.author__photo { aspect-ratio: 1; border-radius: calc(var(--r-xl) - 10px); border: 1px solid var(--hair-2); overflow: hidden; }
.author__photo picture, .author__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.author__role { color: var(--muted); margin-top: 8px; }
.author__quote { font-family: var(--font-accent); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; margin: 24px 0; max-width: 46ch; color: var(--text); }
.author__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* =========================================================
   FAQ
   ========================================================= */
.split--faq { align-items: start; grid-template-columns: 0.8fr 1.2fr; }
.split--faq .split__text { position: sticky; top: 120px; }
.faq { border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3;
  transition: color 0.4s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  --x: var(--text);
  content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-2);
  background:
    linear-gradient(var(--x), var(--x)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--x), var(--x)) center / 1.5px 12px no-repeat;
  transition: transform 0.6s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.faq__item summary:hover { color: var(--orange-2); }
.faq__item[open] summary::after { --x: #14100d; transform: rotate(45deg); background-color: var(--orange); border-color: var(--orange); }
.faq__body { overflow: hidden; }
.faq__body p { color: var(--muted); padding-bottom: 24px; max-width: 64ch; }
.faq__body p:not(:last-child) { padding-bottom: 12px; }

/* =========================================================
   Форма
   ========================================================= */
.section--cta { background: radial-gradient(54% 45% at 50% 100%, rgba(255, 90, 31, 0.14), transparent 70%); }
.split--form { align-items: start; }
.perks { display: grid; gap: 12px; }
.perks li { position: relative; padding-left: 28px; color: var(--muted); font-size: 15.5px; }
.perks li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }

/* карточка «Заполнить бриф» */
.brief { border-radius: var(--r-xl); padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); }
.brief__in { border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); padding: clamp(28px, 3.2vw, 40px); }
.brief__head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--hair); }
.brief__time {
  flex: none; width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.03em;
  color: #14100d; background: var(--orange);
  box-shadow: 0 12px 30px -16px rgba(255, 90, 31, 0.7);
}
.brief__time small { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; margin-top: 4px; }
.brief__head h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -0.01em; }
.brief__sub { color: var(--dim); font-size: 14.5px; margin-top: 8px; }
.brief__list { display: grid; gap: 12px; margin-bottom: 28px; }
.brief__list li { position: relative; padding-left: 28px; color: var(--muted); font-size: 15.5px; }
.brief__list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.brief__cta { width: 100%; justify-content: space-between; }
.brief__alt { font-size: 14.5px; color: var(--muted); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair); }

.form { position: relative; border-radius: var(--r-xl); padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); }
.form__in { border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.field label em { font-style: normal; color: var(--dim); margin-left: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair-2); color: var(--text);
  outline: none; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.15); background: rgba(255, 255, 255, 0.06); }
.field input.is-invalid { border-color: #ff4d4d; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239b9b9b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field select option { background: var(--surface-2); }
.field textarea { resize: vertical; min-height: 96px; }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; align-self: end; padding: 12px 0; font-size: 15px; color: var(--muted); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, 0.04); position: relative; flex: none; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.check__box::after { content: ''; position: absolute; left: 6px; top: 5px; width: 8px; height: 4px; border-left: 1.5px solid #14100d; border-bottom: 1.5px solid #14100d; transform: rotate(-45deg) scale(0); transition: transform 0.4s var(--ease); }
.check input:checked + .check__box { background: var(--orange); border-color: var(--orange); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.2); }
.form__submit { grid-column: 1 / -1; justify-content: space-between; width: 100%; margin-top: 8px; }
.form__micro { grid-column: 1 / -1; font-size: 13px; color: var(--dim); }
.form__micro a { color: var(--muted); border-bottom: 1px solid var(--hair-2); }

.form__done { position: absolute; inset: 8px; border-radius: calc(var(--r-xl) - 8px); background: linear-gradient(180deg, var(--surface-2), var(--surface)); display: grid; place-content: center; text-align: center; gap: 12px; padding: 32px; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0.6s; }
.form__done-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; margin: 0 auto 8px; box-shadow: 0 15px 38px -15px rgba(255, 90, 31, 0.8); }
.form__done-icon svg { width: 28px; height: 28px; fill: none; stroke: #14100d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__done h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.form__done p { color: var(--muted); }
.form.is-sent .form__in { opacity: 0; transform: scale(0.98); pointer-events: none; }
.form.is-sent .form__done { opacity: 1; visibility: visible; transform: none; }

/* =========================================================
   Футер
   ========================================================= */
.footer { border-top: 1px solid var(--hair); padding-block: 48px; }
.footer__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; align-items: start; }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.footer__brand p { flex-basis: 100%; font-family: var(--font-body); font-weight: 400; color: var(--dim); font-size: 14px; margin-top: 8px; }
.footer__col { display: grid; gap: 12px; font-size: 15px; color: var(--muted); }
.footer__col a:hover { color: var(--text); }
.footer__copy { grid-column: 1 / -1; color: var(--dim); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--hair); }

/* =========================================================
   Появление при скролле
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }
[data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; } [data-delay="4"] { --d: 4; }

@keyframes hint-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes hint-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee__track, .plans__hint svg { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__head, .hero__content, .hero__visual, .orbs { grid-column: 1; }
  .hero__head { grid-row: 1; }
  .hero__content { grid-row: 2; }
  .hero__visual { grid-row: 3; margin-top: 0; }
  .orbs { grid-row: 4; }
  .cascade { margin-inline: auto; max-width: 520px; }
  .hero__glow { background: radial-gradient(46% 30% at 50% 55%, rgba(255, 90, 31, 0.2), transparent 70%); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bento {
    grid-template-areas:
      "num num num num num num big big big big big big"
      "c1 c1 c1 c1 c2 c2 c2 c2 c3 c3 c3 c3"
      "c4 c4 c4 c4 c4 c4 c5 c5 c5 c5 c5 c5";
  }
  .author__in { grid-template-columns: 200px 1fr; }
  .split--faq { grid-template-columns: 1fr; }
  .split--faq .split__text { position: static; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__pill { gap: 12px; padding: 4px 4px 4px 16px; }
  /* основная кнопка здесь скрыта, поэтому сдвиг пары не нужен — кнопка уходит вправо */
  .nav__cta + .nav__tg { margin-left: auto; }
  .section__head--split { grid-template-columns: 1fr; align-items: start; }
  .section__head--split .lead { justify-self: start; }
  .split { grid-template-columns: 1fr; }
  /* Тарифы превращаются в карусель: три карточки в ряд, по центру — «чаще всего
     выбирают», соседние выглядывают по краям, чтобы было видно, что их можно листать.
     Порядок остаётся по цене: лендинг → многостраничный → магазин. */
  .plans {
    --card: min(70vw, 320px);
    display: flex; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: calc((100vw - var(--card)) / 2);
    /* запас сверху и снизу: иначе прокрутка обрежет плашку «чаще всего выбирают» и свечение */
    padding-block: 20px; margin-block: -20px;
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  /* min-width: 0 обязателен: иначе флекс-элемент не даёт себя сузить ниже ширины
     самой длинной строки внутри, и заданная ширина карточки игнорируется */
  .plan { flex: 0 0 var(--card); min-width: 0; scroll-snap-align: center; }
  /* поля внутри карточки поуже — цена и подзаголовок должны остаться в одну строку */
  .plan__in { padding: 28px 22px 24px; }
  /* Кегли подобраны так, чтобы «Многостраничный» и «от 30 000 ₽» помещались
     в строку на каждой ширине. Значения целые — ступенями, без дробных долей vw. */
  .plan__name { font-size: 20px; }
  .plan__price { white-space: nowrap; }
  .plan__for, .plan__list li { font-size: 15px; }
  /* на самых узких экранах подпись кнопки переносится, а кружок со стрелкой
     не даёт себя сжать — иначе он вылезал за край карточки */
  .plan__cta {
    font-size: 16px; padding-left: 18px;
    white-space: normal; line-height: 1.25; text-align: left;
  }
  .plan__cta > span:first-child { min-width: 0; }
  .plan__cta .btn__icon { width: 30px; height: 30px; flex: none; }
  .plan__tag { font-size: 11px; left: 16px; }
  .plans__hint {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 16px; font-size: 13px; color: var(--dim);
  }
  .plans__hint i { display: inline-flex; color: var(--orange-2); }
  .plans__hint svg { width: 16px; height: 16px; }
  .plans__hint i:first-of-type svg { animation: hint-left 1.8s ease-in-out infinite; }
  .plans__hint i:last-of-type svg { animation: hint-right 1.8s ease-in-out infinite; }
  .addon__in { grid-template-columns: 1fr; }
  .step { grid-template-columns: 80px 1fr; }
  .step__time { grid-column: 2; justify-self: start; }
  .bento {
    grid-template-areas:
      "num num num num num num num num num num num num"
      "big big big big big big big big big big big big"
      "c1 c1 c1 c1 c1 c1 c2 c2 c2 c2 c2 c2"
      "c3 c3 c3 c3 c3 c3 c4 c4 c4 c4 c4 c4"
      "c5 c5 c5 c5 c5 c5 c5 c5 c5 c5 c5 c5";
  }
  .bento__num { flex-direction: row; align-items: flex-end; gap: 20px; }
  .giant { font-size: clamp(120px, 28vw, 200px); }
  .author__in { grid-template-columns: 1fr; }
  .author__photo { max-width: 200px; }
  .footer__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 112px; }
  .hero__title { font-size: clamp(36px, 10.5vw, 48px); letter-spacing: -0.025em; }
  .chip--mock { display: none; }
  .chip--pill { font-size: 0.3em; }
  /* каскад мокапов ниже, чтобы кружки не уезжали далеко вниз */
  .cascade { max-width: 290px; aspect-ratio: 1.12; margin-inline: auto; }
  .mock--a, .mock--b, .mock--c { transform: none; }
  .mock--a { width: 66%; left: 0; top: 0; }
  .mock--b { width: 58%; right: 0; top: 12%; }
  .mock--c { width: 68%; left: 16%; bottom: 0; }
  .mock__body { padding: 12px; gap: 8px; border-radius: 8px; }
  .mock__img { height: 46px; }
  .mock__img--wide { height: 58px; }
  .mock__grid span { height: 34px; }
  .mock__btn { height: 14px; }
  .hero__visual:hover .mock--a, .hero__visual:hover .mock--b, .hero__visual:hover .mock--c { transform: none; }
  /* padding + отрицательный margin: горизонтальный скролл не срезает свечение */
  /* три кружка всегда целиком в экране: размер считается от ширины контейнера */
  .orbs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; max-width: 492px;
  }
  .orb { width: 100%; height: auto; aspect-ratio: 1; padding: 8px; gap: 0; }
  .orb strong { font-size: clamp(20px, 7.4vw, 34px); }
  .orb span { font-size: clamp(9px, 2.6vw, 11.5px); line-height: 1.22; max-width: 80%; }
  .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; }
  .fit__title { grid-column: 1; grid-row: auto; }
  .fit__list--yes > li, .fit__list--no > li { grid-column: 1; }
  .fit__list > li:nth-child(n) { grid-row: auto; }
  .fit__title--no { grid-column: 1; margin-top: 32px; }
  .card__in, .card--big .card__in { padding: 24px; }
  .bento { display: flex; flex-direction: column; }
  .bento__num { flex-direction: column; align-items: flex-start; }
  .step { grid-template-columns: 1fr; gap: 16px; }
  .step__num { font-size: 40px; }
  .form__in { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr; }
  .btn--lg { padding: 8px 8px 8px 24px; font-size: 16px; }
  .btn--lg .btn__icon { width: 40px; height: 40px; }
  .hero__actions .btn--primary { width: 100%; justify-content: space-between; }
}


/* =========================================================
   Карточки работ и просмотр скриншота
   Используются и на главной, и на странице портфолио
   ========================================================= */

/* ——— сетка работ ——— */
.works__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* карточка с двойной рамкой — как .card на главной */
.work {
  border-radius: var(--r-xl); padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hair);
  transition: transform 0.7s var(--ease), border-color 0.7s var(--ease);
}
.work:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.work__in {
  height: 100%; border-radius: calc(var(--r-xl) - 8px); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07);
  display: flex; flex-direction: column;
}

/* ——— миниатюра первого экрана ——— */
/* Кнопка, а не ссылка: открывает просмотр картинки, а не отдельную страницу */
.work__frame {
  position: relative; display: block; width: 100%; overflow: hidden; cursor: zoom-in;
  padding: 0; border: 0; border-bottom: 1px solid var(--hair);
  background: none; color: inherit; font: inherit; text-align: left;
}
.work__bar {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px; background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--hair);
}
.work__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); opacity: 0.6; }

/* Окно одного размера для всех работ: сами скриншоты разной пропорции,
   поэтому картинка кадрируется по верхнему краю — шапка и заголовок всегда видны */
.work__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.work__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 0.7s var(--ease);
}
.work:hover .work__shot img { transform: scale(1.03); }

/* значок лупы в углу миниатюры */
.work__zoom {
  position: absolute; right: 12px; bottom: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 11, 0.7); backdrop-filter: blur(8px);
  color: var(--text); opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.work__zoom svg { width: 19px; height: 19px; }
.work:hover .work__zoom, .work__frame:focus-visible .work__zoom { opacity: 1; transform: none; }

/* ——— просмотр скриншота ——— */
.viewer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.viewer[hidden] { display: none; }
.viewer__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 7, 0.88); backdrop-filter: blur(8px); cursor: zoom-out; animation: viewer-fade 0.3s var(--ease); }

.viewer__figure { position: relative; margin: 0; display: grid; gap: 16px; justify-items: center; max-width: 100%; animation: viewer-in 0.4s var(--ease); }
.viewer__figure img {
  display: block; max-width: 100%; max-height: calc(100vh - 160px);
  width: auto; height: auto; border-radius: var(--r-md);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.viewer__caption { font-size: 14.5px; color: var(--muted); text-align: center; }

.viewer__close, .viewer__nav {
  position: absolute; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--hair-2); color: var(--text);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.viewer__close:hover, .viewer__nav:hover { background: var(--orange); border-color: var(--orange); }
.viewer__close svg, .viewer__nav svg { width: 20px; height: 20px; }
.viewer__close { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); }
.viewer__nav--prev { left: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); }
.viewer__nav--next { right: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); }

@keyframes viewer-fade { from { opacity: 0; } }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.96); } }

body.viewer-open { overflow: hidden; }

/* ——— подпись под миниатюрой ——— */
.work__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.work__tag {
  align-self: flex-start; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange-2); background: rgba(255, 90, 31, 0.1);
  border: 1px solid rgba(255, 90, 31, 0.3); border-radius: 999px; padding: 4px 12px;
}
.work__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: balance;
}
.work__desc { color: var(--muted); font-size: 15.5px; text-wrap: pretty; }
.work__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: 14px; color: var(--dim);
}

@media (max-width: 1100px) {
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .works__grid { grid-template-columns: 1fr; }
  .work__body { padding: 20px; }
  .viewer__nav { top: auto; bottom: 16px; transform: none; }
  .viewer__figure img { max-height: calc(100vh - 200px); }
}

/* кнопка «смотреть все работы» под сеткой на главной */
.works__more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }


/* =========================================================
   Тарифы на узких экранах: кегли ступенями
   Карточка в карусели — 70vw, внутри неё остаётся ширина минус 60 px полей.
   Для каждой ступени размер взят по нижней границе диапазона, чтобы
   «Многостраничный» и «от 30 000 ₽» помещались в одну строку без переносов.
   ========================================================= */
/* цена — самая широкая строка в карточке («от 30 000 ₽»), ступени по ширине колонки */
@media (max-width: 1360px) { .plan__price { font-size: 38px; } }
@media (max-width: 1200px) { .plan__price { font-size: 34px; } }
@media (max-width: 1000px) { .plan__price { font-size: 30px; } }
@media (max-width: 860px)  { .plan__price { font-size: 32px; } }

@media (max-width: 420px) {
  .plan__name { font-size: 17px; }
  .plan__price { font-size: 28px; }
  .plan__for, .plan__list li { font-size: 14px; }
  .plan__cta { font-size: 15px; }
  .plan__tag { font-size: 10px; }
}
@media (max-width: 380px) {
  .plan__name { font-size: 15px; }
  .plan__price { font-size: 25px; }
  .plan__for, .plan__list li { font-size: 13px; }
  .plan__cta { font-size: 14px; }
}
@media (max-width: 345px) {
  .plan__name { font-size: 13px; }
  .plan__price { font-size: 22px; }
  .plan__cta { font-size: 13px; }
  .plan__tag { font-size: 9px; }
}

/* =========================================================
   Уведомление о cookie
   ========================================================= */
.cc {
  position: fixed; z-index: 70; inset: auto 20px 20px;
  display: flex; justify-content: flex-end;     /* прижат к правому краю, не перекрывает центр */
}
.cc[hidden] { display: none; }
.cc__in {
  width: 100%; max-width: 400px;
  display: grid; gap: 12px; padding: 20px;
  background: rgba(20, 20, 22, 0.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hair-2); border-radius: var(--r-md);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  animation: cc-in 0.4s var(--ease) both;
}
.cc__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.cc__text { font-size: 12px; line-height: 1.45; color: var(--muted); }
.cc__text a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }
.cc__text a:hover { color: var(--orange); }

.cc__opts { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.cc__opts[hidden] { display: none; }
.cc__opt { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.cc__opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.cc__opt input:disabled { opacity: 0.45; cursor: default; }
.cc__opt b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 500; font-size: 12px; }

.cc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* у этих кнопок нет иконки справа, поэтому отступы симметричные:
   базовые 24px слева и 8px справа сдвигали бы надпись вправо */
.cc__actions .btn {
  flex: 1 1 auto; min-width: 0;
  justify-content: center; text-align: center;
  padding: 8px 12px; min-height: 36px; font-size: 12px; white-space: normal;
}

@keyframes cc-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .cc__in { animation: none; } }

@media (max-width: 560px) {
  .cc { inset: auto 12px 12px; }
  .cc__in { max-width: none; padding: 16px; gap: 8px; }
  .cc__title { font-size: 13px; }
  .cc__text { font-size: 11px; }
  .cc__actions { gap: 4px; }
  .cc__actions .btn { padding: 8px 8px; min-height: 32px; font-size: 11px; }
}

/* кнопка-ссылка в футере: вызывает те же настройки, что и баннер */
.footer__btn {
  justify-self: start; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.footer__btn:hover { color: var(--text); }