/* Подписайт — общие стили. Значения сняты с макета Figma «сайт дизайн новый / сайт» (1920 × 13807). */

:root {
  --ink: #504359;
  --ink-strong: #262626;
  --ink-case: #222326;
  --grey: #8a8c99;
  --grey-case: #828899;
  --grey-soft: #9085a6;
  --grey-light: #acafbf;
  --grey-cookie: #737580;
  --line: #e1e3eb;
  --surface: #f5f6fa;
  --purple: #8249f2;
  --purple-deep: #6322ff;
  --purple-18: #e0d1ff;
  --purple-8: #f1ebff;
  --hero-bg: #f1edfe;
  --muted: #b1a3cc;
  --muted-info: #5b4b7a;
  --hint: rgba(159, 143, 191, 0.9);
  --orange: #ff8040;
  --white: #fff;

  --grad-warm: linear-gradient(-74deg, #ffebe0 0%, #fbe5ff 50%, #f1ebff 75%);
  --grad-text: linear-gradient(192deg, #6322ff 3%, #b080e3 59%, #fecfbd 97%);

  --radius-xl: clamp(30px, 3vw, 44px);
  --radius-l: clamp(24px, 2.3vw, 32px);
  --radius-m: 20px;
  --radius-s: 12px;

  --container: 1344px;
  --gutter: 24px;
  --section-gap: clamp(96px, 8.4vw, 160px);

  --h2: clamp(34px, 4.45vw, 64px);
  --h3: clamp(28px, 3.33vw, 48px);
  --lead: clamp(18px, 1.67vw, 24px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* слои: base → elevated → floating */
  --shadow-elevated: 0 1px 2px rgba(80, 67, 89, 0.04), 0 8px 24px -8px rgba(98, 34, 255, 0.10);
  --shadow-floating: 0 2px 6px rgba(80, 67, 89, 0.06), 0 24px 48px -16px rgba(98, 34, 255, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 100px;
  background: var(--purple); color: #fff; font-weight: 800;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

:focus-visible { outline: 3px solid rgba(130, 73, 242, 0.55); outline-offset: 3px; border-radius: 12px; }

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

.h2 {
  font-size: var(--h2); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance;
}
.h3 { font-size: var(--h3); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.lead { font-size: var(--lead); line-height: 1.25; letter-spacing: -0.03em; color: var(--grey); text-wrap: pretty; }

main > section + section,
main > section + .slogan,
main > .slogan + section { margin-top: var(--section-gap); }

/* ---------- кнопки ---------- */
.btn {
  --btn-bg: var(--orange);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 16px 32px;
  border-radius: 100px;
  background: var(--btn-bg); color: #fff;
  font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -0.03em;
  white-space: nowrap;
  position: relative; isolation: isolate;
  transition: transform 160ms var(--ease-out);
}
.btn::after {
  /* подсветка при наведении — только opacity */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0; transition: opacity 200ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover::after { opacity: 1; } }
.btn--purple { --btn-bg: var(--purple); }
.btn__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #fff; flex: none; }
.btn--orange { box-shadow: 0 1px 2px rgba(255, 128, 64, 0.2), 0 12px 28px -12px rgba(255, 128, 64, 0.65); }

/* ---------- шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid #ebecf2;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.header__logo { display: inline-flex; align-items: center; height: 48px; flex: none; }
.header__logo img { width: 158px; height: 18px; }
.nav { display: flex; gap: clamp(20px, 2vw, 36px); }
.nav a {
  font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  padding: 10px 0; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--purple); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav a:active { opacity: 0.7; }
.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: 14px; font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: -0.03em;
  transition: transform 160ms var(--ease-out);
  position: relative; isolation: isolate;
}
.pill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: rgba(255, 255, 255, 0.16); opacity: 0; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pill:hover::after { opacity: 1; } }
.pill:active { transform: scale(0.97); }
.pill--purple { background: var(--purple); color: #fff; }
.pill--soft { background: var(--purple-8); color: var(--purple); padding: 0 24px; margin-left: 2px; }
.pill--soft::after { background: rgba(130, 73, 242, 0.1); }
.pill--round { width: 48px; padding: 0; justify-content: center; }
.pill--round img, .pill--round svg { width: 18px; height: 18px; }
.contact > .pill { position: relative; z-index: 2; min-width: 176px; }
.pill__chev { width: 11.5px; height: 6.3px; transition: transform 300ms var(--ease-out); }
.pill[aria-expanded="true"] .pill__chev { transform: rotate(180deg); }

.contact { position: relative; }
.popover {
  position: absolute; z-index: 1; top: 24px; left: 0; width: 100%; min-width: 138px;
  padding: 30px 12px 8px 14px; border-radius: 0 0 18px 18px; background: #f1f1f6;
  box-shadow: 0 18px 32px -18px rgba(80, 67, 89, 0.28);
  transform-origin: top center;
  opacity: 0; transform: translateY(-10px) scaleY(0.92); pointer-events: none; visibility: hidden;
  transition: opacity 220ms ease, transform 360ms var(--ease-out), visibility 0s linear 360ms;
}
.popover.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 220ms ease, transform 360ms var(--ease-out), visibility 0s; }
.popover a {
  display: flex; align-items: center; gap: 6px; padding: 11px 2px;
  font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap;
  transition: color 160ms ease;
}
.popover a + a { border-top: 1px solid #dfe0e8; }
.popover a img { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) { .popover a:hover { color: var(--purple); } }
.popover a:active { opacity: 0.7; }
.contact:has(.popover.is-open) > .pill .pill__chev { transform: rotate(180deg); }

.burger { display: none; width: 48px; height: 48px; border-radius: 14px; background: var(--purple-8); align-items: center; justify-content: center; transition: transform 160ms var(--ease-out); }
.burger:active { transform: scale(0.94); }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; transition: transform 220ms var(--ease-out), opacity 150ms ease; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(6px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 80px 0 auto; z-index: 49; padding: 16px var(--gutter) 28px;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-floating);
  display: grid; gap: 4px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 240ms var(--ease-out);
}
.mobile-menu.is-open { transform: none; opacity: 1; pointer-events: auto; }
.mobile-menu a:not(.btn) { padding: 14px 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; border-bottom: 1px solid var(--surface); }
.mobile-menu .btn { margin-top: 16px; }

@media (max-width: 1180px) {
  .nav, .header__actions .contact, .header__actions .pill--round { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .header__actions .pill--soft { display: none; }
  .header__inner { height: 64px; }
  .mobile-menu { inset: 64px 0 auto; }
}

/* ---------- футер ---------- */
.footer { background: #efe9fd; margin-top: var(--section-gap); padding: 70px 0 64px; }
.footer__grid { display: grid; grid-template-columns: 1fr 214px 440px; column-gap: clamp(40px, 9vw, 125px); align-items: start; }
.footer__brand { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; gap: 32px; }
.footer__brand img { width: 225px; max-width: 100%; height: auto; }
.footer__legal { display: grid; gap: 8px; font-size: 14px; color: var(--grey-soft); }
.footer__legal a, .footer__col a { transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__legal a:hover, .footer__col a:hover { opacity: 0.65; } }
.footer__legal a:active, .footer__col a:active { opacity: 0.5; }
.footer__head { font-size: 16px; color: var(--grey-soft); padding-bottom: 14px; border-bottom: 1px solid var(--purple-18); margin-bottom: 22px; }
.footer__col ul { display: grid; gap: 12px; }
.footer__col a { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.footer__contacts { display: grid; grid-template-columns: 1fr auto; gap: 12px 40px; }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer__brand { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__contacts { grid-template-columns: 1fr; }
}

/* ---------- cookies ---------- */
.cookie {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 346px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 24px;
  background: #fff; border-radius: 24px; text-align: center;
  box-shadow: var(--shadow-floating);
  font-size: 12px; line-height: 1.35; color: var(--grey-cookie); letter-spacing: -0.03em;
  transition: opacity 200ms ease, transform 260ms var(--ease-out);
}
.cookie[hidden] { display: none; }
.cookie.is-leaving { opacity: 0; transform: translateY(12px) scale(0.98); }
.cookie img { width: 44px; height: 40px; filter: drop-shadow(-2px 5px 4.8px rgba(118, 92, 34, 0.1)); }
.cookie a { color: var(--purple); font-weight: 800; text-decoration: underline; text-decoration-thickness: 8%; }
.cookie .btn { min-height: 40px; padding: 12px 20px; font-size: 14px; }
@media (max-width: 560px) { .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ---------- появление при прокрутке: один раз, только opacity/transform ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal, .screenshot-mode .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 300ms ease; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* режим скриншота: фиксированные слои не повторяются в каждом кадре склейки */
.screenshot-mode .header { position: relative; }
.screenshot-mode .cookie { position: absolute; top: 658px; bottom: auto; right: max(16px, calc(50% - 896px)); }
@media (max-width: 860px) { .screenshot-mode .cookie { display: none; } }
@media (max-width: 560px) { .header__actions > a.pill--purple { display: none; } }

/* единые состояния кнопок: фокус с клавиатуры — одно кольцо на всех */
.btn:focus-visible, .pill:focus-visible, .burger:focus-visible { outline: 3px solid rgba(130, 73, 242, 0.45); outline-offset: 3px; }
.btn--orange:focus-visible { outline-color: rgba(255, 128, 64, 0.5); }