/* Barber Abduaziz — стили. Сначала мобильная версия, потом от 760 и 1100 px.
   Анимируются только transform, opacity и clip-path. */

/* ---------- Шрифты (локально, кириллица + латиница) ---------- */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/unbounded-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/unbounded-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/manrope-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/manrope-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/manrope-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/jetbrains-mono-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Основа ---------- */
:root {
  --black: #0e0e0f;
  --graph: #1c1c1f;
  --graph-2: #26262a;
  --brass: #c8894a;
  --brass-hi: #e0a668;
  --brass-dk: #85511f;  /* латунь для текста на кремовом фоне (контраст AA) */
  --cream: #efe6d8;
  --muted: rgba(239, 230, 216, .74);
  --line: rgba(200, 137, 74, .38);
  --f-head: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(18px, 5vw, 56px);
  --max: 1240px;
  --hdr: 64px;
  --bar: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 8px); }
body {
  margin: 0; background: var(--black); color: var(--cream);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
  padding-bottom: var(--bar);
}
/* Зерно: статичный слой поверх тёмного фона */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url(../img/grain.png); opacity: .55;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 8.4vw, 72px); text-transform: uppercase; }
h3 { font-size: clamp(18px, 4.6vw, 22px); }
p { margin: 0 0 1em; }
.mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: clamp(64px, 12vw, 128px) 0; position: relative; }
.kicker { font: 500 12px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; display: flex; gap: 10px; align-items: center; }
.kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.lead { color: var(--muted); font-size: clamp(16px, 4.2vw, 19px); max-width: 38em; }
.sec-head { margin-bottom: clamp(28px, 6vw, 56px); }
.sec-head .lead { margin-top: 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--brass); color: var(--black); padding: 10px 14px; border-radius: 8px; font-weight: 800; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; border-radius: 4px; }

/* Заглушка — видна сразу */
.todo {
  background: #ffd84d; color: #111; font: 800 .78em/1.3 var(--f-body); letter-spacing: 0;
  text-transform: none; padding: .12em .4em; border-radius: 4px; display: inline;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: normal;
}

/* ---------- Кнопки ---------- */
.btn {
  --bg: var(--brass); --fg: var(--black);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 800 15px/1 var(--f-body); letter-spacing: .02em;
  transition: transform .18s var(--ease), background-color .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { --bg: var(--brass-hi); }
.btn:active { transform: scale(.95); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-ghost { --bg: transparent; --fg: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { --bg: rgba(200, 137, 74, .14); }
.btn-dark { --bg: var(--black); --fg: var(--cream); }
.btn-dark:hover { --bg: var(--graph-2); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); opacity: 1; pointer-events: none; z-index: -1; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Шапка ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 120; height: var(--hdr);
  display: flex; align-items: center;
  background: rgba(14, 14, 15, .86); border-bottom: 1px solid rgba(200, 137, 74, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hdr .wrap { display: flex; align-items: center; gap: 16px; width: 100%; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-mark { width: 30px; height: 30px; }
.logo b { font: 800 13px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.logo b span { display: block; color: var(--brass); font-size: 10px; letter-spacing: .2em; }
.nav { display: none; }
.hdr-call { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; color: var(--brass); box-shadow: inset 0 0 0 1.5px var(--line); }
.hdr-call svg { width: 20px; height: 20px; }
.hdr .btn { display: none; }

/* ---------- Нижняя кнопка на телефоне ---------- */
.bar {
  position: fixed; inset: auto 0 0; z-index: 130;
  display: flex; gap: 10px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(14, 14, 15, .98) 60%, rgba(14, 14, 15, 0));
}
.bar .btn { flex: 1; min-height: 54px; font-size: 16px; }
.bar .btn-call { flex: none; width: 54px; padding: 0; }

/* ---------- Интро ---------- */
.intro { display: none; }
.show-intro .intro {
  display: flex; position: fixed; inset: 0; z-index: 110; background: var(--black);
  flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  animation: intro-out .25s ease-in 1s forwards; cursor: pointer;
}
.show-intro.intro-skip .intro { animation: intro-out .2s ease-in forwards; }
.intro-done .intro { display: none !important; }
.intro .pole { height: 120px; width: 34px; }
.intro .pole-stripes { animation-duration: .5s; }
.intro-name { font: 800 clamp(26px, 8vw, 54px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; text-align: center; clip-path: inset(0 100% 0 0); animation: cut .55s var(--ease) .25s forwards; }
.intro-name span { display: block; color: var(--brass); font-size: .42em; letter-spacing: .3em; margin-bottom: 8px; }
.intro-hint { font: 500 11px var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes cut { to { clip-path: inset(0 0 0 0); } }

/* ---------- Барбер-полюс ---------- */
.pole { position: relative; display: block; }
.pole-glass { position: absolute; inset: 9% 0; border-radius: 999px; overflow: hidden; background: var(--cream); }
.pole-stripes {
  position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  /* Период полос по вертикали = 40px (28.28px / cos 45°) — бесшовная петля */
  background: repeating-linear-gradient(135deg, var(--brass) 0 13px, var(--cream) 13px 28.28px);
  animation: pole 2.4s linear infinite; will-change: transform;
}
.pole::before, .pole::after { content: ''; position: absolute; left: -14%; right: -14%; height: 9%; background: var(--brass); border-radius: 6px; }
.pole::before { top: 0; } .pole::after { bottom: 0; }
@keyframes pole { to { transform: translateY(40px); } }

/* ---------- Первый экран ---------- */
.hero {
  position: relative; min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar));
  padding: calc(var(--hdr) + 28px) 0 32px; display: flex; align-items: flex-end; overflow: hidden;
  background:
    radial-gradient(120% 70% at 85% 10%, rgba(200, 137, 74, .2), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(200, 137, 74, .1), transparent 60%),
    linear-gradient(180deg, #121214 0%, var(--black) 100%);
}
/* Фото мастера/работы на фоне: раскомментируйте блок .hero-photo в index.html */
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 15, .4), var(--black) 92%); }
.hero-razor { position: absolute; z-index: 0; width: 150%; max-width: 1100px; right: -40%; top: 16%; color: var(--brass); opacity: .2; transform: rotate(-18deg); pointer-events: none; }
.hero .pole { position: absolute; z-index: 1; right: var(--pad); top: calc(var(--hdr) + 26px); width: 26px; height: 128px; }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-kicker { margin-bottom: 18px; }
.hero h1 { text-transform: uppercase; }
.hero h1 .h1-a { display: block; font-size: clamp(18px, 5.2vw, 40px); letter-spacing: .32em; color: var(--brass); margin-bottom: .25em; }
.hero h1 .h1-b { display: block; font-size: clamp(42px, 12.4vw, 168px); line-height: .92; letter-spacing: -.02em; }
.hero-slogan { font: 800 clamp(19px, 5.2vw, 30px)/1.25 var(--f-body); margin: 22px 0 18px; max-width: 22em; }
.hero-slogan em { font-style: normal; color: var(--brass); }
.hero-meta { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
.hero-meta li { display: flex; gap: 10px; align-items: flex-start; }
.hero-meta svg { width: 18px; height: 18px; flex: none; color: var(--brass); margin-top: 3px; }
.rating { display: inline-flex; align-items: baseline; gap: 8px; color: var(--cream); text-decoration: none; }
.rating .mono { font-size: 20px; color: var(--brass); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta .btn { flex: 1 1 160px; }

/* Появление первого экрана после интро (или сразу) */
.js .hero .rise { opacity: 0; transform: translateY(24px); }
.js.ready .hero .rise { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js.ready .hero .rise:nth-child(2) { transition-delay: .08s; } .js.ready .hero .rise:nth-child(3) { transition-delay: .16s; }
.js.ready .hero .rise:nth-child(4) { transition-delay: .24s; } .js.ready .hero .rise:nth-child(5) { transition-delay: .32s; }

/* ---------- Бегущая строка ---------- */
.mq { overflow: hidden; border-block: 1px solid var(--line); background: var(--graph); padding: 16px 0; }
.mq-track { display: flex; width: max-content; animation: mq 32s linear infinite; will-change: transform; }
.mq-track span { font: 800 clamp(18px, 5vw, 30px)/1 var(--f-head); text-transform: uppercase; white-space: nowrap; padding-right: .9em; }
.mq-track span:nth-child(even) { color: var(--brass); }
.mq-off .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- Лезвие-разделитель ---------- */
.blade { position: relative; overflow: hidden; height: 22px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.blade i { position: absolute; left: var(--pad); right: var(--pad); top: 10px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--brass) 12%, var(--brass-hi) 50%, var(--brass) 88%, transparent); }
.blade b { position: absolute; top: 4px; left: var(--pad); width: 46px; height: 14px; opacity: 0; color: var(--brass-hi); }
.js .blade i { clip-path: inset(0 100% 0 0); }
.js .blade.in i { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.js .blade.in b { animation: slice 1.1s var(--ease) forwards; }
@keyframes slice { 0% { opacity: 1; transform: translateX(-50px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw - 2 * var(--pad))); } }
@media (min-width: 1300px) { @keyframes slice { 0% { opacity: 1; transform: translateX(-50px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(1150px); } } }

/* ---------- Заголовки по словам, появление ---------- */
.wd { display: inline-block; }
.js.ready [data-split] .wd { opacity: 0; transform: translateY(.5em) rotate(3deg); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js.ready [data-split].in .wd { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(28px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* ---------- Услуги: карточки стопкой ---------- */
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.scard { position: sticky; top: calc(var(--hdr) + 12px); }
.scard:nth-child(2) { top: calc(var(--hdr) + 22px); } .scard:nth-child(3) { top: calc(var(--hdr) + 32px); }
.scard:nth-child(4) { top: calc(var(--hdr) + 42px); } .scard:nth-child(5) { top: calc(var(--hdr) + 52px); } .scard:nth-child(6) { top: calc(var(--hdr) + 62px); }
.scard-in {
  position: relative; background: var(--graph); border: 1px solid rgba(200, 137, 74, .25); border-radius: 22px;
  padding: 22px 20px 20px; transform-origin: 50% 0; overflow: hidden;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
}
.scard-dim { position: absolute; inset: 0; background: var(--black); opacity: 0; pointer-events: none; border-radius: inherit; }
.scard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.scard-n { font: 500 13px var(--f-mono); color: var(--brass); letter-spacing: .1em; }
.scard-time { font: 500 13px var(--f-mono); color: var(--muted); }
.scard h3 { font-size: clamp(20px, 5.6vw, 26px); text-transform: uppercase; margin-bottom: 8px; }
.scard p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.scard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px dashed rgba(200, 137, 74, .3); padding-top: 16px; }
.price { font: 500 clamp(26px, 7vw, 34px)/1 var(--f-mono); color: var(--brass); white-space: nowrap; }
.price small { font-size: .55em; color: var(--muted); }
.price .todo { font-size: 13px; }
.scard .btn { flex: 1 1 auto; max-width: 260px; }
.svc-note { margin-top: 22px; color: var(--muted); font-size: 14px; }
.js .scard .scard-in { opacity: 0; transform: translateY(60px) scale(.96); }
.js .scard.in .scard-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ---------- Работы ---------- */
.reel-wrap { position: relative; }
.reel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--pad) 18px; margin: 0 calc(-1 * var(--pad)); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
.reel figure { flex: 0 0 74%; max-width: 340px; margin: 0; scroll-snap-align: center; }
.reel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: var(--graph); }
.reel figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.reel-nav { display: none; gap: 10px; }
.reel-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--graph-2); color: var(--cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.reel-nav button:hover { background: var(--brass); color: var(--black); }
.reel-nav svg { width: 20px; height: 20px; }
.swipe-hint { font: 500 12px var(--f-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

/* До и после */
.ba-block { margin-top: clamp(48px, 10vw, 96px); display: grid; gap: 24px; align-items: center; }
.ba {
  position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--graph);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; max-width: 520px; width: 100%;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-tag { position: absolute; top: 14px; z-index: 2; font: 500 12px var(--f-mono); letter-spacing: .12em; background: rgba(14, 14, 15, .75); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.ba-tag-b { left: 14px; } .ba-tag-a { right: 14px; color: var(--brass); }
.ba-handle { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(50%); }
.ba-handle::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--brass); }
.ba-handle span { position: absolute; left: -24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--brass); color: var(--black); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.ba-handle svg { width: 24px; height: 24px; }
.ba-range { position: absolute; inset: auto 0 0; width: 100%; opacity: 0; z-index: 4; height: 40px; cursor: ew-resize; }
.ba-range:focus-visible + .ba-handle span { outline: 3px solid var(--cream); outline-offset: 3px; }
.ba-text p { color: var(--muted); }

/* ---------- Мастер ---------- */
.master { background: var(--graph); }
.master-grid { display: grid; gap: 32px; }
.master-photo { position: relative; max-width: 480px; }
.master-photo img { border-radius: 22px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.master-photo::after { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid var(--brass); border-radius: 22px; z-index: -1; }
.master-photo { z-index: 0; isolation: isolate; }
.stamp { position: absolute; right: -6px; bottom: 22px; width: 104px; height: 104px; border-radius: 50%; background: var(--brass); color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(-12deg); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.stamp b { font: 500 26px/1 var(--f-mono); }
.stamp span { font: 800 10px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.stamp .todo { font-size: 9px; }
.master-text .lead { margin-bottom: 22px; }
.story { font-size: 17px; }
.quote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--brass); font: 800 clamp(18px, 5vw, 24px)/1.35 var(--f-body); }
.quote footer { font: 500 13px var(--f-mono); color: var(--brass); margin-top: 10px; }
.back-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.back-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.back-list b { font: 500 14px/1.9 var(--f-mono); color: var(--brass); }
.team-note { margin-top: 36px; padding: 18px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); font-size: 14px; }

/* ---------- Отзывы ---------- */
.rev-top { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-end; justify-content: space-between; }
.score { display: flex; align-items: baseline; gap: 14px; }
.score .mono { font-size: clamp(48px, 14vw, 88px); line-height: 1; color: var(--brass); }
.score .todo { font-size: 14px; }
.score small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.revs { margin-top: 28px; }
.revs .reel figure, .rev { flex: 0 0 86%; max-width: 420px; scroll-snap-align: center; }
.rev { margin: 0; background: var(--graph); border-radius: 22px; padding: 24px 22px; border: 1px solid rgba(200, 137, 74, .2); display: flex; flex-direction: column; }
.rev-stars { color: var(--brass); letter-spacing: .2em; font-size: 15px; margin-bottom: 14px; }
.rev blockquote { margin: 0 0 20px; font-size: 16px; flex: 1; }
.rev figcaption { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.rev figcaption b { color: var(--cream); }
.rev-src { font: 500 12px var(--f-mono); color: var(--brass); }

/* ---------- Почему сюда (светлый блок) ---------- */
.why { background: var(--cream); color: var(--black); }
.why .kicker { color: var(--brass-dk); }
.why .lead { color: #3b342c; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: why; }
.why-list li { counter-increment: why; background: #fff8ee; border: 1.5px solid #e1d3be; border-radius: 20px; padding: 22px 20px; position: relative; }
.why-list li::before { content: '0' counter(why); font: 500 14px var(--f-mono); color: var(--brass-dk); display: block; margin-bottom: 10px; }
.why-list h3 { font-size: clamp(17px, 4.6vw, 21px); text-transform: uppercase; margin-bottom: 8px; }
.why-list p { margin: 0; color: #3b342c; font-size: 15px; }
.why .blade-cream i { background: linear-gradient(90deg, transparent, var(--brass-dk) 15%, var(--brass-dk) 85%, transparent); }

/* ---------- Контакты ---------- */
.contacts-grid { display: grid; gap: 28px; }
.cdl { margin: 0 0 26px; display: grid; gap: 0; }
.cdl div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgba(200, 137, 74, .2); }
.cdl dt { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.cdl dd { margin: 0; font-size: 17px; }
.cdl dd a { text-decoration-color: var(--line); text-underline-offset: 4px; }
.route { display: flex; flex-wrap: wrap; gap: 10px; }
.route .btn { flex: 1 1 100%; }
.map { position: relative; min-height: 340px; border-radius: 22px; overflow: hidden; background: var(--graph); border: 1px solid rgba(200, 137, 74, .25); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.map::before { content: ''; position: absolute; inset: 0; opacity: .5; background:
  linear-gradient(90deg, rgba(200, 137, 74, .1) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(rgba(200, 137, 74, .1) 1px, transparent 1px) 0 0 / 40px 40px; }
.map > * { position: relative; }
.map p { color: var(--muted); font-size: 14px; max-width: 26em; margin: 12px auto 0; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.loaded > :not(iframe) { display: none; }

/* ---------- Подвал ---------- */
.ftr { border-top: 1px solid rgba(200, 137, 74, .2); padding: 36px 0 28px; color: var(--muted); font-size: 14px; }
.ftr .wrap { display: grid; gap: 14px; }
.ftr-name { font: 800 18px var(--f-head); color: var(--cream); text-transform: uppercase; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ftr button { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; padding: 0; cursor: pointer; }

/* ---------- Cookie-баннер ---------- */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--bar) + 10px); z-index: 140;
  background: var(--graph-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55); font-size: 14px; color: var(--muted);
  opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s var(--ease);
}
.cookie.show { opacity: 1; transform: none; }
.cookie p { margin: 0 0 14px; }
.cookie a { color: var(--cream); }
.cookie-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .btn { flex: 1 1 140px; }

/* ---------- Простые страницы (privacy, 404) ---------- */
.page { padding: calc(var(--hdr) + 48px) 0 64px; min-height: 80vh; }
.page h1 { font-size: clamp(28px, 7vw, 54px); text-transform: uppercase; margin-bottom: 26px; }
.page h2 { font-size: clamp(18px, 4.6vw, 24px); text-transform: none; margin: 32px 0 12px; }
.page p, .page li { color: var(--muted); max-width: 46em; }
.nf { min-height: 100vh; display: flex; align-items: center; text-align: left; }
.nf .pole { width: 30px; height: 140px; margin-bottom: 30px; }
.nf .mono { font-size: clamp(64px, 20vw, 160px); color: var(--brass); line-height: 1; display: block; }
.no-bar { padding-bottom: 0; }

/* ---------- Планшет и компьютер ---------- */
@media (min-width: 760px) {
  :root { --hdr: 72px; }
  body { padding-bottom: 0; }
  .bar { display: none; }
  .hdr .btn { display: inline-flex; }
  .cookie { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .hero { align-items: center; min-height: 100vh; min-height: 100svh; }
  .hero-razor { width: 80%; right: -6%; top: 22%; }
  .hero .pole { width: 40px; height: 220px; right: calc(var(--pad) + 2%); top: 50%; margin-top: -110px; }
  .hero-meta { grid-template-columns: auto auto; gap: 10px 28px; justify-content: start; }
  .hero-cta .btn { flex: 0 0 auto; min-width: 210px; }
  .stack { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .scard { position: relative; top: auto !important; }
  .scard-in { height: 100%; display: flex; flex-direction: column; }
  .scard p { flex: 1; }
  .reel figure { flex-basis: 42%; }
  .revs .rev { flex-basis: 46%; }
  .reel-nav { display: flex; }
  .swipe-hint { display: none; }
  .ba-block { grid-template-columns: 1fr 1fr; gap: 48px; }
  .why-list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .master-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .contacts-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: stretch; }
  .map { min-height: 460px; }
  .cdl div { grid-template-columns: 150px 1fr; align-items: baseline; }
  .ftr .wrap { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1100px) {
  .nav { display: flex; gap: 26px; margin-right: 12px; }
  .nav a { text-decoration: none; font-size: 14px; font-weight: 800; color: var(--muted); position: relative; padding: 6px 0; }
  .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
  .nav a:hover { color: var(--cream); } .nav a:hover::after { transform: scaleX(1); }
  .stack { grid-template-columns: repeat(3, 1fr); }
  .reel figure { flex-basis: calc((100% - 36px) / 4); }
  .revs .rev { flex-basis: calc((100% - 24px) / 3); }
  .why-list { grid-template-columns: repeat(4, 1fr); }
  .hero-razor { width: 62%; right: 6%; top: 18%; }
}
@media (hover: hover) {
  .reel img { transition: transform .5s var(--ease); }
  .reel figure:hover img { transform: scale(1.02); }
}

/* ---------- Упрощённый режим и без анимаций ---------- */
.lite body::before { display: none; }
.lite .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 15, .97); }
.lite .scard-in { box-shadow: none; }
.lite .pole-stripes { animation-duration: 4s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.reduce .rv, .reduce .scard .scard-in, .reduce .hero .rise, .reduce [data-split] .wd { opacity: 1 !important; transform: none !important; }
.reduce .blade i { clip-path: none !important; }
.reduce .mq-track, .reduce .pole-stripes { animation: none !important; }
.reduce .intro { display: none !important; }