/* ═══════════════════════════════════════════════════════════════
   Тема «Полночь» — тёмный клубный
   Ночной баклажан · золотая фольга · приглушённый фиолет
   Bebas Neue + Golos Text + JetBrains Mono
   ───────────────────────────────────────────────────────────────
   Шаблон намеренно тёмный по умолчанию — это его характер, а не
   следствие настроек системы. Светлая версия есть и включается
   переключателем: :root[data-theme="light"].
   Перекрасить под клиента — блок «1. Токены».
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Токены ──────────────────────────────────────────────── */
:root{
  color-scheme: dark;

  --ground:      #131218;
  --ground-2:    #0E0D12;
  --surface:     #1A1922;
  --surface-2:   #22212C;
  --ink:         #F0ECF6;
  --ink-2:       #CBC4DA;
  --ink-soft:    #948CA6;
  --line:        #2C2A38;
  --line-strong: #413E52;

  --accent:      #C9A227;   /* золотая фольга */
  --on-accent:   #141109;
  --accent-2:    #7A63B8;   /* холодный фиолет */
  --on-accent-2: #0D0A16;

  --ok:   #62C79B;  --ok-bg:   #142C24;
  --warn: #D9AE5F;  --warn-bg: #2E2413;
  --crit: #EE7E6E;  --crit-bg: #331715;
  --info: #8EA9E8;  --info-bg: #182140;

  --r-s: 2px;
  --r-m: 3px;
  --r-btn: 2px;

  --shadow-s: 0 1px 2px rgba(0,0,0,.5);
  --shadow-m: 0 6px 20px rgba(0,0,0,.55);
  --shadow-l: 0 18px 50px rgba(0,0,0,.7);

  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 54px);

  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --ease: cubic-bezier(.22,.7,.3,1);
  --t: 220ms;
}

:root[data-theme="light"]{
  color-scheme: light;
  --ground:#F5F3F8; --ground-2:#EBE8F1; --surface:#FFFFFF; --surface-2:#F0EDF5;
  --ink:#17151E; --ink-2:#3C3748; --ink-soft:#6B6480;
  --line:#DEDAE7; --line-strong:#C3BDD2;
  --accent:#8A6E12; --on-accent:#FFFFFF;
  --accent-2:#5B4796; --on-accent-2:#FFFFFF;
  --ok:#1F6B4C;  --ok-bg:#E1F0E8;
  --warn:#8A5C12; --warn-bg:#F7EEDC;
  --crit:#A62A18; --crit-bg:#F9E5E1;
  --info:#2B4B9E; --info-bg:#E5EAF8;
  --shadow-s: 0 1px 2px rgba(23,21,30,.08);
  --shadow-m: 0 6px 20px rgba(23,21,30,.12);
  --shadow-l: 0 18px 50px rgba(23,21,30,.2);
}

/* ── 2. База ────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:74px; }
body{
  margin:0; background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:400; line-height:.94; letter-spacing:.01em; text-wrap:balance; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; text-underline-offset:3px; }
button, input, textarea, select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background: var(--accent); color: var(--on-accent); }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; background: var(--accent); color: var(--on-accent); padding:10px 16px; text-decoration:none; }
.skip:focus{ left:8px; }

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

/* ── 3. Типографика ─────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color: var(--accent);
}
.eyebrow::before{ content:""; width:28px; height:1px; background: var(--accent); }
.sec__h{ font-size: clamp(38px, 6vw, 76px); }
.sec__lead{ max-width:58ch; color: var(--ink-soft); font-size:16.5px; }
.dim{ color: var(--ink-soft); font-size:14px; }

/* ── 4. Кнопки ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border:1px solid var(--accent); border-radius: var(--r-s);
  font-family: var(--font-display); font-size:19px; letter-spacing:.06em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  background:transparent; color: var(--accent);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover{ background: var(--accent); color: var(--on-accent); }
.btn--solid{ background: var(--accent); color: var(--on-accent); }
.btn--solid:hover{ background: transparent; color: var(--accent); }
.btn--sm{ min-height:38px; padding:0 16px; font-size:16px; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }

.iconbtn{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid var(--line-strong); border-radius: var(--r-s);
  background:transparent; color: var(--ink); cursor:pointer;
}
.iconbtn:hover{ border-color: var(--accent); color: var(--accent); }
.iconbtn__svg{ width:17px; height:17px; display:block; }

.chip{
  display:inline-flex; align-items:center; height:34px; padding:0 15px;
  border:1px solid var(--line-strong); border-radius: var(--r-s);
  background:transparent; color: var(--ink-soft);
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition: all var(--t) var(--ease);
}
.chip:hover{ border-color: var(--accent); color: var(--accent); }
.chip.is-on{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── 5. Шапка ───────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:40;
  background: color-mix(in oklab, var(--ground) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.top__in{ display:flex; align-items:center; gap:18px; padding-block:12px; }
.logo{ display:flex; align-items:baseline; gap:10px; text-decoration:none; flex:0 0 auto; }
.logo b{ font-family: var(--font-display); font-size:27px; letter-spacing:.16em; color: var(--ink); }
.logo i{ font-style:normal; font-family: var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); }

.nav{ display:flex; gap:22px; margin-left:auto; }
.nav a{
  text-decoration:none; font-family: var(--font-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft);
  padding-block:6px; border-bottom:1px solid transparent;
}
.nav a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.top__act{ display:flex; align-items:center; gap:10px; }

.burger{ display:none; width:40px; height:40px; border:1px solid var(--line-strong); border-radius: var(--r-s); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.burger span{ width:16px; height:1px; background: var(--ink); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* ── 6. Hero — афиша в золотой рамке ────────────────────────── */
.hero{
  padding: clamp(34px,5vw,74px) var(--pad) clamp(30px,4vw,60px);
  background: var(--ground-2); border-bottom:1px solid var(--line);
}
.hero__frame{
  max-width: var(--wrap); margin-inline:auto;
  border:1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding: clamp(26px,4vw,58px) clamp(18px,3vw,44px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
  position:relative;
}
.hero__frame::before, .hero__frame::after{
  content:""; position:absolute; width:12px; height:12px; border:1px solid var(--accent);
}
.hero__frame::before{ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.hero__frame::after{ bottom:-6px; right:-6px; border-left:0; border-top:0; }
.hero__h{ font-size: clamp(52px, 11vw, 148px); letter-spacing:.02em; line-height:.86; }
.hero__h em{ font-style:normal; color: var(--accent); }
.hero__sub{ max-width:52ch; color: var(--ink-2); font-size:17px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft);
  padding-top:8px; border-top:1px solid var(--line); width:100%;
}

/* ── 7. Секции ──────────────────────────────────────────────── */
/* полоса секции — во всю ширину, содержимое — в колонке */
.sec{ padding: clamp(44px,6vw,92px) var(--pad); border-bottom:1px solid var(--line); }
.sec > *{ max-width: var(--wrap); margin-inline:auto; }
.sec--dark{ background: var(--ground-2); }
.sec__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }

/* ── 8. Работы — лента с горизонтальной прокруткой ──────────── */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.cuts{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:16px; scrollbar-width:thin;
}
.cuts::-webkit-scrollbar{ height:4px; }
.cuts::-webkit-scrollbar-thumb{ background: var(--line-strong); }
.cut{ flex:0 0 clamp(220px, 26vw, 288px); scroll-snap-align:start; display:flex; flex-direction:column; }
.cut__plate{
  aspect-ratio:3/4; position:relative; overflow:hidden;
  background: linear-gradient(176deg, var(--b) 0%, color-mix(in oklab, var(--b) 55%, var(--a)) 42%, var(--a) 100%);
  border:1px solid var(--line);
}
.cut__plate::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.cut__no{
  position:absolute; left:12px; bottom:10px; z-index:2;
  font-family: var(--font-display); font-size:40px; line-height:1;
  color: color-mix(in oklab, var(--accent) 85%, #fff); opacity:.85;
}
.cut__meta{ padding-top:14px; display:flex; flex-direction:column; gap:5px; }
.cut__t{ font-size:26px; letter-spacing:.03em; }
.cut__d{ font-size:13.5px; color: var(--ink-soft); }
.cut__tag{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-top:3px; }
.cuts__hint{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-top:10px; }

/* ── 9. Прайс — карточки по группам ─────────────────────────── */
.pricelist{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; align-items:start; }
.pgroup{ border:1px solid var(--line); background: var(--surface); }
.pgroup__h{
  font-family: var(--font-display); font-size:23px; letter-spacing:.1em;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background: var(--surface-2); color: var(--accent);
}
.prow{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:3px 14px; padding:15px 20px; border-bottom:1px solid var(--line); }
.prow:last-child{ border-bottom:0; }
.prow:hover{ background: var(--surface-2); }
.prow__n{ font-family: var(--font-ui); font-size:15.5px; font-weight:600; }
.prow__p{ font-family: var(--font-display); font-size:23px; color: var(--accent); white-space:nowrap; font-variant-numeric: tabular-nums; }
.prow__d{ grid-column:1/2; font-size:13px; color: var(--ink-soft); }
.prow__t{ grid-column:2/3; grid-row:2/3; justify-self:end; font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); white-space:nowrap; }
.prow__go{
  grid-column:1/-1; justify-self:start; margin-top:8px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
.prow__go:hover{ border-bottom-color: var(--accent); }

/* ── 10. Мастер ─────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: clamp(24px,4vw,56px); align-items:center; }
.about__card{
  aspect-ratio:3/4; border:1px solid var(--line); background: var(--surface);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.about__card::before{
  content:""; position:absolute; inset:14px; border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.about__mono{ font-family: var(--font-display); font-size: clamp(64px,10vw,130px); color: var(--accent); letter-spacing:.06em; }
.about__copy{ display:flex; flex-direction:column; gap:16px; }
.about__copy p{ color: var(--ink-2); max-width:60ch; }
.creds{ display:flex; flex-direction:column; margin-top:6px; }
.creds li{ display:grid; grid-template-columns:72px 1fr; gap:14px; font-size:14px; color: var(--ink-soft); padding:10px 0; border-top:1px solid var(--line); }
.creds b{ font-family: var(--font-mono); font-size:12px; color: var(--accent); }

/* ── 11. Отзывы ─────────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.quote{ margin:0; padding:24px; border:1px solid var(--line); background: var(--surface); display:flex; flex-direction:column; gap:14px; }
.quote__stars{ font-family: var(--font-mono); font-size:13px; letter-spacing:.2em; color: var(--accent); }
.quote blockquote{ margin:0; font-size:15.5px; color: var(--ink-2); flex:1; }
.quote__who{ display:flex; flex-direction:column; gap:1px; padding-top:12px; border-top:1px solid var(--line); }
.quote__who b{ font-size:14px; }
.quote__who span{ font-size:12.5px; color: var(--ink-soft); }

/* ── 12. FAQ ────────────────────────────────────────────────── */
.faq{ max-width:80ch; }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ cursor:pointer; list-style:none; padding:18px 44px 18px 0; position:relative; font-family: var(--font-display); font-size:24px; letter-spacing:.04em; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family: var(--font-ui); font-size:20px; color: var(--accent); transition: transform var(--t) var(--ease); }
.qa[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.qa p{ padding:0 10% 20px 0; color: var(--ink-soft); font-size:15px; max-width:68ch; }

/* ── 13. Контакты ───────────────────────────────────────────── */
.contacts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); }
.contacts div{ background: var(--ground); padding:20px; }
.contacts dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); margin-bottom:8px; }
.contacts dd{ font-size:15.5px; }

/* ── 14. Мастер записи ──────────────────────────────────────── */
.wizard{ border:1px solid var(--line); background: var(--surface); }
.steps{ display:grid; grid-template-columns: repeat(4,1fr); border-bottom:1px solid var(--line); }
.step{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-right:1px solid var(--line);
  font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.step:last-child{ border-right:0; }
.step span{ width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; font-size:11px; border:1px solid currentColor; border-radius: var(--r-s); }
.step.is-on{ color: var(--accent); background: var(--surface-2); }
.step.is-on span{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step.is-done span{ background: var(--ink-soft); color: var(--ground); border-color: var(--ink-soft); }

.wizard__body{ padding: clamp(18px,3vw,30px); min-height:340px; }
.pane{ display:none; }
.pane.is-on{ display:block; animation: fade 260ms var(--ease) both; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.pickgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(262px,1fr)); gap:12px; }
.pick{
  text-align:left; cursor:pointer; padding:16px 18px; background: var(--ground);
  border:1px solid var(--line); border-radius: var(--r-s);
  display:flex; flex-direction:column; gap:6px;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.pick:hover{ border-color: var(--line-strong); }
.pick.is-on{ border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--ground)); }
.pick__t{ font-family: var(--font-display); font-size:21px; letter-spacing:.04em; }
.pick__d{ font-size:13px; color: var(--ink-soft); }
.pick__f{ display:flex; gap:14px; margin-top:4px; font-family: var(--font-mono); font-size:12px; font-variant-numeric: tabular-nums; }
.pick__f b{ color: var(--accent); font-weight:500; }

.whenwrap{ display:grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(20px,3vw,36px); }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.cal__m{ font-family: var(--font-display); font-size:24px; letter-spacing:.06em; text-transform:uppercase; }
.cal__nav{ display:flex; gap:6px; }
.cal__nav button{ width:32px; height:32px; border:1px solid var(--line-strong); border-radius: var(--r-s); background:transparent; color: var(--ink); cursor:pointer; line-height:1; }
.cal__nav button:hover:not([disabled]){ border-color: var(--accent); color: var(--accent); }
.cal__nav button[disabled]{ opacity:.3; cursor:not-allowed; }
.cal__dow, .cal__grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; }
.cal__dow span{ text-align:center; font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); padding-bottom:6px; }
.cal__d{
  aspect-ratio:1; border:1px solid var(--line); border-radius: var(--r-s); background: var(--ground); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family: var(--font-mono); font-size:13px; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: all 150ms var(--ease);
}
.cal__d:hover:not([disabled]){ border-color: var(--accent); color: var(--accent); }
.cal__d[disabled]{ border-color:transparent; color: color-mix(in oklab, var(--ink-soft) 50%, transparent); cursor:not-allowed; background:transparent; }
.cal__d.is-empty{ border:0; background:transparent; cursor:default; }
.cal__d.is-today{ border-color: var(--line-strong); }
.cal__d.is-on{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cal__dot{ width:4px; height:4px; border-radius:50%; background: var(--accent); }
.cal__d.is-on .cal__dot{ background: var(--on-accent); }
.cal__d.is-full .cal__dot{ background: var(--ink-soft); }

.slots__head h3{ font-family: var(--font-display); font-size:26px; letter-spacing:.04em; }
.slots__hint{ font-size:13px; color: var(--ink-soft); margin-top:6px; }
.slots__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.slot{
  min-width:76px; height:40px; padding:0 12px; cursor:pointer;
  border:1px solid var(--line-strong); border-radius: var(--r-s); background: var(--ground); color: var(--ink);
  font-family: var(--font-mono); font-size:13px; font-variant-numeric: tabular-nums;
  transition: all 150ms var(--ease);
}
.slot:hover{ border-color: var(--accent); color: var(--accent); }
.slot.is-on{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slot[disabled]{ opacity:.3; cursor:not-allowed; text-decoration: line-through; }
.slots__empty{ padding:20px; border:1px dashed var(--line-strong); border-radius: var(--r-s); color: var(--ink-soft); font-size:14px; max-width:48ch; }

.form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; max-width:720px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--wide{ grid-column:1/-1; }
.field > label{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); }
.req{ color: var(--accent); }
.field input[type="text"], .field input[type="tel"], .field textarea{
  width:100%; padding:12px 14px; background: var(--ground); color: var(--ink);
  border:1px solid var(--line-strong); border-radius: var(--r-s); font-size:15px;
}
.field input:focus, .field textarea:focus{ border-color: var(--accent); }
.field textarea{ resize:vertical; font-family: var(--font-ui); }
.field.is-bad input, .field.is-bad textarea{ border-color: var(--crit); }
.hint{ font-size:12.5px; color: var(--ink-soft); }
.err{ font-size:12.5px; color: var(--crit); }
.form__err{ grid-column:1/-1; padding:12px 16px; background: var(--crit-bg); color: var(--crit); font-size:14px; border:1px solid var(--crit); border-radius: var(--r-s); }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color: var(--ink-2); cursor:pointer; text-transform:none; letter-spacing:0; }
.check input{ margin-top:3px; width:17px; height:17px; accent-color: var(--accent); }

.confirm{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,270px); gap:26px; }
.summary{ display:flex; flex-direction:column; }
.summary__row{ display:grid; grid-template-columns:140px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.summary__row dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); padding-top:3px; }
.summary__row dd{ font-size:16px; }
.summary__total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:18px; }
.summary__total b{ font-family: var(--font-display); font-size:40px; color: var(--accent); font-variant-numeric: tabular-nums; }
.rules{ padding:20px; border:1px solid color-mix(in oklab, var(--accent) 35%, transparent); background: var(--ground); }
.rules h4{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); margin-bottom:12px; }
.rules li{ font-size:13.5px; color: var(--ink-2); padding-left:18px; position:relative; margin-bottom:9px; }
.rules li::before{ content:"—"; position:absolute; left:0; top:0; color: var(--accent); }

.done{ grid-column:1/-1; text-align:center; padding:26px 0 8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.done__mark{ width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--accent); color: var(--accent); font-size:28px; border-radius: var(--r-s); }
.done h3{ font-size: clamp(34px,5vw,52px); letter-spacing:.04em; }
.done p{ color: var(--ink-soft); max-width:48ch; }
.done__code{ font-family: var(--font-mono); font-size:16px; letter-spacing:.2em; padding:10px 22px; border:1px dashed var(--accent); color: var(--accent); }

.wizard__foot{ display:flex; align-items:center; gap:16px; padding:15px clamp(18px,3vw,30px); border-top:1px solid var(--line); background: var(--surface-2); }
.wizard__state{ flex:1; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.06em; color: var(--ink-soft); text-align:center; }

/* ── 15. Подвал ─────────────────────────────────────────────── */
.foot{ background: var(--ground-2); border-top:1px solid var(--line); }
.foot__in{ max-width: var(--wrap); margin-inline:auto; padding: 38px var(--pad) 44px; display:grid; grid-template-columns:1fr auto; gap:20px 40px; align-items:center; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:20px; }
.foot__nav a{ font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); text-decoration:none; }
.foot__nav a:hover{ color: var(--accent); }
.foot__legal{ grid-column:1/-1; font-size:12px; color: var(--ink-soft); padding-top:18px; border-top:1px solid var(--line); }

.fab{ position:fixed; right:14px; bottom:14px; z-index:35; display:none; background: var(--accent); color: var(--on-accent); padding:14px 22px; text-decoration:none; font-family: var(--font-display); font-size:19px; letter-spacing:.06em; border-radius: var(--r-s); }

/* ── 16. Варианты блоков (переключаются конструктором) ──────── */
/* работы: лента или обычная сетка */
[data-variant="grid"] .cuts{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(228px,1fr));
  overflow:visible; scroll-snap-type:none;
}
[data-variant="grid"] .cut{ flex:initial; }
[data-variant="grid"] .cuts__hint{ display:none; }

/* прайс: карточки по группам или сплошной список */
[data-variant="list"] .pricelist{ grid-template-columns:1fr; gap:0; }
[data-variant="list"] .pgroup{ border:0; border-top:1px solid var(--line); background:transparent; }
[data-variant="list"] .pgroup__h{ background:transparent; border-bottom:0; padding-inline:0; padding-bottom:6px; }
[data-variant="list"] .prow{ padding-inline:0; }
[data-variant="list"] .prow:hover{ background:transparent; }
[data-variant="list"] .prow:hover .prow__n{ color: var(--accent); }

/* отзывы: в ряд или столбцом покрупнее */
[data-variant="stack"] .quotes{ grid-template-columns:1fr; max-width:72ch; }
[data-variant="stack"] .quote blockquote{ font-family: var(--font-display); font-size:27px; line-height:1.15; letter-spacing:.03em; color: var(--ink); }

/* обложка: афиша по центру или текст слева */
[data-variant="left"] .hero__frame{ align-items:flex-start; text-align:left; }
[data-variant="left"] .hero__cta, [data-variant="left"] .hero__meta{ justify-content:flex-start; }
[data-variant="left"] .hero__h{ font-size: clamp(46px, 8vw, 104px); }

/* ── 17. Адаптив ────────────────────────────────────────────── */
@media (max-width: 1040px){
  .quotes{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .nav{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    background: var(--ground); border-bottom:1px solid var(--line);
    padding: 8px var(--pad) 16px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding-block:11px; border-bottom:1px solid var(--line); }
  .burger{ display:flex; }
  .top__act .btn{ display:none; }
  .about{ grid-template-columns:1fr; }
  .about__card{ max-width:260px; aspect-ratio:1; }
  .whenwrap{ grid-template-columns:1fr; }
  .confirm{ grid-template-columns:1fr; }
  .fab{ display:block; }
}
@media (max-width: 680px){
  .quotes{ grid-template-columns:1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); }
  .step{ border-bottom:1px solid var(--line); }
  .form{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
}

/* ── 18. Уважение к настройкам движения ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
  .cuts{ scroll-snap-type:none; }
}