:root {
  --yoji-blue: #013ad1;
  --yoji-blue-deep: #01378f;
  --yoji-blue-electric: #3b5aff;
  --yoji-blue-bright: #0232d5;
  --yoji-slate: #8494bc;
  --yoji-slate-soft: #afbbd6;
  --yoji-sky: #a4d1fb;
  --yoji-bg: #f6f6f6;
  --yoji-bg-soft: #ffffff;
  --yoji-ink: #0a1330;
  --yoji-black: #000;

  --font-display: "Actay", system-ui, sans-serif;
  --font-wide: "Actay Wide", "Actay", system-ui, sans-serif;
  --font-body: "Actay", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card: 0 18px 91px rgba(87, 89, 92, 0.27);
  --shadow-deep: 0 32px 80px rgba(0, 0, 0, 0.25);

  /* Глубокое стекло — как в iOS */
  --glass-bg: rgba(255, 255, 255, 0.18);
  --glass-bg-strong: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-blur: 22px;

  /* Единая система: радиусы, тени (один навигационный тинт), вертикальный ритм */
  --r-sm: 12px;
  --r-md: 26px;
  --r-lg: 40px;
  --r-pill: 999px;
  --sh-1: 0 8px 24px rgba(10, 19, 48, 0.10);
  --sh-2: 0 20px 50px rgba(10, 19, 48, 0.16);
  --sh-3: 0 32px 80px rgba(10, 19, 48, 0.24);
  --section-y: clamp(72px, 10vw, 140px);
  --fs-display: clamp(40px, 5.5vw, 66px);
  --fs-h2: clamp(30px, 4vw, 54px);
  --muted-on-light: #515f86;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* якоря не уезжают под фикс-топбар */
  overflow-x: clip; /* режем горизонтальный «выезд» фикс-элементов (шапка/меню) — иначе мобилка ломается */
}
@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
}

/* Единое кольцо фокуса для клавиатуры/доступности */
:focus-visible {
  outline: 2px solid var(--yoji-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.topbar :focus-visible, .drawer :focus-visible, .footer :focus-visible,
.hero :focus-visible, .flow :focus-visible, .phone :focus-visible {
  outline-color: var(--yoji-sky);
}
body {
  font-family: var(--font-body);
  color: var(--yoji-ink);
  background: var(--yoji-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .wrap {
    padding: 0 20px;
  }
}