/*
  Повторяющиеся компоненты (кнопки, карточки, квиз, декор). Обычный CSS, а не @apply:
  Tailwind из CDN не обрабатывает внешние css-файлы. Цвета те же, что в tailwind.config.
*/
:root {
  --paper: #F4F3EF;
  --surface: #FFFFFF;
  --line: #E3E0D8;
  --ink: #15171C;
  --ink-soft: #4A4F59;
  --ink-mute: #6B7079;
  --accent: #C2531E;
  --accent-hover: #A84618;
  --accent-ink: #FFFFFF;
  --accent-tint: rgba(194, 83, 30, .09);
  --card: var(--surface);
  --card-line: var(--line);
  --field: #FBFAF8;
  /* Тени в три слоя: контактная, ближняя, дальняя - так островок "стоит" на странице, а не наклеен */
  --shadow: 0 0 0 1px rgba(16,18,22,.02), 0 1px 2px rgba(16,18,22,.05), 0 8px 18px -10px rgba(16,18,22,.14), 0 28px 48px -28px rgba(16,18,22,.22);
  --shadow-hover: 0 0 0 1px rgba(16,18,22,.02), 0 2px 4px rgba(16,18,22,.05), 0 16px 28px -14px rgba(16,18,22,.2), 0 44px 64px -32px rgba(16,18,22,.32);
  --gloss: rgba(255,255,255,.9);
  --grain-opacity: .045;

  /* Декоративные плитки (псевдо-3D) */
  --tile-hi: #FFFFFF;
  --tile-lo: #ECE9E2;
  --tile-line: rgba(21,23,28,.07);
  --tile-side: #D6D1C6;
  --tile-ink: #4A4F59;
  --tile-gloss: rgba(255,255,255,.95);
  --tile-drop: rgba(16,18,22,.32);
}

.dark {
  --paper: #0F1115;
  --surface: #1A1D23;
  --line: #2E333B;
  --ink: #F2F1EE;
  --ink-soft: #B9BCC2;
  --ink-mute: #8B9099;
  --accent: #E8763D;
  --accent-hover: #F08A55;
  --accent-ink: #15171C;
  --accent-tint: rgba(232, 118, 61, .12);
  --card: #1A1D23;
  --card-line: #2E333B;
  --field: #22262E;
  --shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.4), 0 10px 22px -12px rgba(0,0,0,.6), 0 30px 54px -30px rgba(0,0,0,.8);
  --shadow-hover: 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.4), 0 18px 32px -14px rgba(0,0,0,.7), 0 48px 70px -32px rgba(0,0,0,.9);
  --gloss: rgba(255,255,255,.06);
  --grain-opacity: .06;

  --tile-hi: #2B3039;
  --tile-lo: #1A1E24;
  --tile-line: rgba(255,255,255,.07);
  --tile-side: #08090C;
  --tile-ink: #C3C6CC;
  --tile-gloss: rgba(255,255,255,.08);
  --tile-drop: rgba(0,0,0,.7);
}

html { -webkit-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}
.text-balance { text-wrap: balance; }

/* Плёночное зерно поверх всей страницы: убирает "пластиковую" гладкость заливок */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: var(--grain-opacity);
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark body::after { mix-blend-mode: screen; filter: invert(1); }

/* Крупные заголовки: плотнее трекинг и межстрочный - так гротеск выглядит как набранный, а не "по умолчанию" */
.display {
  letter-spacing: -.035em;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

/* Подпись над заголовком: короткая черта + капс */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.eyebrow-on-dark { color: #F0915F; }

/* Меню-островок: тень в слоях + тонкий блик по верхней кромке */
.nav-island {
  box-shadow: inset 0 1px 0 var(--gloss), var(--shadow);
}
.contact-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--paper) 60%, var(--surface)));
  color: var(--ink-soft);
  box-shadow: inset 0 1px 0 var(--gloss), 0 1px 2px rgba(16,18,22,.06);
  transition: color .2s, border-color .2s, transform .2s;
}
.contact-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.contact-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопки */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%);
  color: var(--accent-ink);
  font-size: .9375rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(16,18,22,.12), 0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.social-link:focus-visible,
.footer-contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: 9999px;
  color: var(--ink-soft);
  font-size: .9375rem;
  font-weight: 600;
  transition: background-color .2s, color .2s;
}
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.dark .btn-ghost:hover { background: #22262E; }

/* ---------- Декор: плитки-иконки с лёгким наклоном ----------
   Один и тот же наклон (как будто свет и камера одни на всю страницу) - это и даёт "дорогое" единообразие.
   Толщина плитки - жёсткая тень в её же плоскости: после перспективы читается как ребро. */
.decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.decor-tile {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--s, 56px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 28%;
  border: 1px solid var(--tile-line);
  background: linear-gradient(150deg, var(--tile-hi) 0%, var(--tile-lo) 100%);
  color: var(--tile-ink);
  opacity: var(--o, 1);
  filter: blur(var(--blur, 0));
  /* грань потолще и контрастнее + мягкая цветная подсветка снизу - больше объёма, не плоская плашка */
  box-shadow:
    inset 0 1.5px 0 var(--tile-gloss),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 9px 0 -2px var(--tile-side),
    0 14px 0 -4px color-mix(in srgb, var(--tile-side) 70%, #000),
    22px 34px 42px -16px var(--tile-drop),
    0 0 34px -6px var(--tile-glow, transparent);
  transform: perspective(640px) rotateX(20deg) rotateY(-26deg) rotate(var(--rz, 0deg));
  animation: decor-float 9s ease-in-out var(--delay, 0s) infinite alternate;
}
.decor-tile > svg,
.decor-tile > img {
  width: 46%;
  height: 46%;
  stroke-width: 1.75;
}
/* TODO: decor - положит S02-B: брендовые файлы из assets/images/decor/ вставлять <img> внутрь .decor-tile[data-decor] вместо иконки-заглушки (размер уже задан правилом выше) */
.decor-tile[data-decor] > img { object-fit: contain; }
.decor-tile.is-accent {
  border-color: transparent;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 80%, #fff) 0%, var(--accent) 60%, var(--accent-hover) 100%);
  color: var(--accent-ink);
  --tile-side: color-mix(in srgb, var(--accent-hover) 70%, #000);
  --tile-gloss: rgba(255,255,255,.35);
}
/* Плитки на тёмной секции (контакты) - полупрозрачные, в обеих темах */
.decor-glass .decor-tile {
  --tile-hi: rgba(255,255,255,.13);
  --tile-lo: rgba(255,255,255,.03);
  --tile-line: rgba(255,255,255,.14);
  --tile-side: rgba(0,0,0,.28);
  --tile-ink: rgba(255,255,255,.72);
  --tile-gloss: rgba(255,255,255,.18);
  --tile-drop: rgba(0,0,0,.5);
}
.decor-md, .decor-lg { display: none; }
@media (min-width: 768px) {
  .decor-tile {
    left: var(--x-md, var(--x, 0));
    top: var(--y-md, var(--y, 0));
    width: var(--s-md, var(--s, 56px));
  }
  .decor-md { display: grid; }
}
@media (min-width: 1024px) { .decor-lg { display: grid; } }
@keyframes decor-float {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

/* ---------- Hero ---------- */
.hero-shell::after {
  /* тонкая светлая кромка по контуру островка */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -60px 80px -60px rgba(16,18,22,.08);
}
.dark .hero-shell::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -60px 80px -60px rgba(0,0,0,.5); }
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-scrim {
  background: radial-gradient(120% 70% at 50% 0%, rgba(244,243,239,.55) 0%, rgba(244,243,239,0) 70%);
}
.dark .hero-scrim {
  background: radial-gradient(120% 70% at 50% 0%, rgba(15,17,21,.55) 0%, rgba(15,17,21,0) 70%);
}
.hero-person {
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.hero-person img { filter: drop-shadow(0 30px 40px rgba(16,18,22,.18)); }
.dark .hero-person img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }

.hero-tags { display: none; }

/* Телефон и узкий планшет: фигура сверху на всю ширину, текст накладывается на её нижнюю часть.
   Читаемость держит подложка-градиент под текстом (.hero-copy::before), фото сквозь неё видно.
   Величины вынесены в переменные - под новую фигуру от S02-B подгоняется здесь же. */
@media (max-width: 767.98px) {
  .hero-shell {
    --hero-fig-top: 2.25rem;          /* верх рамки фигуры от верха островка */
    --hero-fig-width: min(108vw, 470px);
    --hero-copy-top: min(76vw, 340px); /* откуда начинается текст (от верха сетки) */
  }
  .hero-grid {
    grid-template-areas: "stack";
    grid-template-columns: minmax(0, 1fr); /* фигура шире колонки и не должна её растягивать */
    padding-top: var(--hero-fig-top);
  }
  .hero-grid > * { grid-area: stack; }
  .hero-figure { align-self: start; justify-self: center; z-index: 0; }
  .hero-person { width: var(--hero-fig-width); }
  .hero-copy {
    position: relative;
    z-index: 1;
    align-self: start;
    padding-top: var(--hero-copy-top);
    padding-bottom: 2rem;
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -1.25rem;
    right: -1.25rem;
    top: calc(var(--hero-copy-top) - 7rem);
    bottom: 0;
    background: linear-gradient(180deg,
      rgba(244,243,239,0) 0%,
      rgba(244,243,239,.62) 5rem,
      rgba(244,243,239,.84) 9rem,
      rgba(244,243,239,.95) 15rem,
      #F4F3EF 100%);
  }
  .dark .hero-copy::before {
    background: linear-gradient(180deg,
      rgba(22,26,32,0) 0%,
      rgba(22,26,32,.66) 5rem,
      rgba(22,26,32,.86) 9rem,
      rgba(22,26,32,.95) 15rem,
      #161A20 100%);
  }
  .hero-copy h1 { text-shadow: 0 1px 18px rgba(244,243,239,.7); }
  .dark .hero-copy h1 { text-shadow: 0 1px 18px rgba(15,17,21,.7); }
  /* Мобильный градиент сверху не нужен: текст теперь внизу */
  .hero-scrim { background: none; }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  .hero-grid { padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero-copy::before { left: -2.5rem; right: -2.5rem; }
}
@media (min-width: 768px) {
  .hero-scrim {
    background: linear-gradient(90deg, rgba(244,243,239,.94) 0%, rgba(244,243,239,.76) 38%, rgba(244,243,239,0) 66%);
  }
  .dark .hero-scrim {
    background: linear-gradient(90deg, rgba(15,17,21,.92) 0%, rgba(15,17,21,.64) 38%, rgba(15,17,21,0) 66%);
  }
  .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    max-width: 31rem;
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  /* точка у каждого пункта, а не "между": при переносе строки ряд остаётся ровным */
  .hero-tags li { display: inline-flex; align-items: center; }
  .hero-tags li::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: .5rem;
    border-radius: 9999px;
    background: var(--accent);
    opacity: .7;
  }
}

/* ---------- Матовое стекло + светящиеся точки под карточками/квизом ----------
   Точки - большие цветные пятна с сильным размытием позади карточек; сама карточка -
   полупрозрачная с backdrop-blur, поэтому свечение проступает сквозь неё (эффект frosted glass). */
.glow-field {
  position: absolute;
  inset: -10% -5%;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}
.glow-dot {
  position: absolute;
  left: var(--gx, 50%);
  top: var(--gy, 50%);
  width: var(--gs, 26rem);
  height: var(--gs, 26rem);
  border-radius: 9999px;
  background: var(--gc, var(--accent));
  filter: blur(80px);
  opacity: var(--go, .65);
  transform: translate(-50%, -50%);
  animation: decor-float 12s ease-in-out var(--gdelay, 0s) infinite alternate;
}
.dark .glow-dot { opacity: var(--go-dark, calc(var(--go, .65) * .9)); mix-blend-mode: screen; }

.glass-surface {
  background: color-mix(in srgb, var(--card) 26%, transparent);
  backdrop-filter: blur(26px) saturate(200%);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
}

/* ---------- Услуги ---------- */
.dot-grid {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 85% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 60% at 85% 10%, #000 0%, transparent 70%);
  opacity: .7;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--card-line);
  background: color-mix(in srgb, var(--card) 26%, transparent);
  backdrop-filter: blur(26px) saturate(200%);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  box-shadow: inset 0 1px 0 var(--gloss), var(--shadow);
  transform: perspective(1200px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
}
@media (min-width: 640px) { .service-card { padding: 1.75rem 1.75rem 2rem; } }
.service-card:hover {
  transform: perspective(1200px) rotateX(4deg) rotateY(-4deg) translateY(-4px);
  box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--card-line));
}
/* Иконка услуги - та же плитка с наклоном, что и в декоре */
.service-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid var(--tile-line);
  background: linear-gradient(150deg, var(--tile-hi) 0%, var(--tile-lo) 100%);
  color: var(--accent);
  box-shadow:
    inset 0 1.5px 0 var(--tile-gloss),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 5px 0 -1px var(--tile-side),
    0 8px 0 -2px color-mix(in srgb, var(--tile-side) 70%, #000),
    14px 20px 24px -12px var(--tile-drop);
  transform: perspective(500px) rotateX(18deg) rotateY(-24deg) rotate(-3deg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-icon { transform: perspective(500px) rotateX(10deg) rotateY(-14deg) rotate(-2deg) translateY(-2px); }
.service-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.service-title {
  margin-top: 1.75rem;
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.02em;
}
.service-text {
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- Контакты: фото поверх акцентного цвета, приглушённое ---------- */
.section-photo {
  background-size: cover;
  background-position: center;
  opacity: .28;
  mix-blend-mode: luminosity;
}
.dark .section-photo { opacity: .18; }
.contacts-scrim {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(255,255,255,.07) 0%, transparent 70%),
    linear-gradient(160deg, rgba(28,39,51,.35) 0%, rgba(28,39,51,.88) 70%);
}
.dark .contacts-scrim {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(255,255,255,.05) 0%, transparent 70%),
    linear-gradient(160deg, rgba(23,32,43,.35) 0%, rgba(23,32,43,.92) 70%);
}
.quiz-card {
  background: color-mix(in srgb, var(--card) 26%, transparent) !important;
  backdrop-filter: blur(26px) saturate(200%);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  box-shadow: inset 0 1px 0 var(--gloss), 0 2px 4px rgba(0,0,0,.12), 0 24px 48px -20px rgba(0,0,0,.45), 0 60px 90px -50px rgba(0,0,0,.55);
}

/* Боковой список шагов квиза */
.quiz-outline-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.quiz-outline-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.25);
  font-size: .8125rem;
  transition: background-color .2s, border-color .2s, color .2s;
}
.quiz-outline-item.is-current { color: #fff; }
.quiz-outline-item.is-current .quiz-outline-num { background: #fff; border-color: #fff; color: #15171C; }
.quiz-outline-item.is-done .quiz-outline-num { border-color: #F0915F; color: #F0915F; }

/* Квиз */
.quiz-legend {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.02em;
  outline: none;
}
@media (min-width: 640px) { .quiz-legend { font-size: 1.5rem; } }
.quiz-hint {
  margin-top: .5rem;
  font-size: .9375rem;
  color: var(--ink-mute);
}
.quiz-option { display: block; cursor: pointer; }
.quiz-option-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .75rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--field);
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--gloss);
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.quiz-option-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--ink-mute); transition: color .15s; }
.quiz-option:hover .quiz-option-box { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.peer:checked + .quiz-option-box,
.peer:checked + .quiz-chip-box {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.peer:checked + .quiz-option-box .quiz-option-icon { color: var(--accent); }
.peer:focus-visible + .quiz-option-box,
.peer:focus-visible + .quiz-chip-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quiz-chip { cursor: pointer; }
.quiz-chip-box {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--field);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.quiz-chip:hover .quiz-chip-box { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.quiz-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
}
.quiz-input {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: .875rem;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.quiz-input::placeholder { color: var(--ink-mute); opacity: .8; }
.quiz-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.quiz-input[aria-invalid="true"] { border-color: #C2361E; }
.dark .quiz-input[aria-invalid="true"] { border-color: #F07059; }
.quiz-error {
  margin-top: 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: #B4321C;
}
.dark .quiz-error { color: #F48A75; }

/* ---------- Футер ---------- */
.footer-shell { box-shadow: inset 0 1px 0 var(--gloss), var(--shadow); }
.footer-heading {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-contact {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem .5rem .5rem;
  margin-left: -.5rem;
  border-radius: 1rem;
  transition: background-color .2s;
}
.footer-contact:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.dark .footer-contact:hover { background: rgba(255,255,255,.04); }
.footer-contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .875rem;
  border: 1px solid var(--tile-line);
  background: linear-gradient(150deg, var(--tile-hi) 0%, var(--tile-lo) 100%);
  color: var(--accent);
  box-shadow: inset 0 1px 0 var(--tile-gloss), 2px 3px 0 -1px var(--tile-side), 6px 10px 14px -8px var(--tile-drop);
  transform: perspective(400px) rotateX(14deg) rotateY(-20deg) rotate(-3deg);
}
.footer-contact-icon svg { width: 1.125rem; height: 1.125rem; }
.footer-contact-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-mute);
}
.footer-contact-value {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.footer-contact:hover .footer-contact-value { color: var(--accent); }

/* Соцсети в футере */
.social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 0 1px 0 var(--gloss), 0 1px 2px rgba(16,18,22,.06);
  transition: color .2s, border-color .2s, background-color .2s;
}
.social-link:hover { color: var(--accent); border-color: var(--accent); }

/* Футер: текстура почти незаметна, чтобы не спорить с текстом */
.footer-photo {
  background-size: cover;
  background-position: center;
  opacity: .10;
  mix-blend-mode: luminosity;
}
.dark .footer-photo { opacity: .08; }
.footer-scrim {
  background: linear-gradient(180deg, transparent 0%, var(--surface) 85%);
}
/* Крупное имя сайта внизу футера - "подпись" страницы, почти без контраста */
.footer-wordmark {
  margin: 2rem auto -0.18em;
  max-width: 72rem;
  font-size: clamp(3rem, 13.5vw, 11.5rem);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 9%, transparent) 0%, color-mix(in srgb, var(--ink) 2%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}