/* ============================================================
   /cases/hair-atelier — «сайт как кейс».
   Дизайн-система клиента (hair-atelier: tailwind.config.js +
   src/app/globals.css), перенесённая в ванильный CSS и изолированная
   под .hat. Монохром, прямые углы, линии в 1px, сетка 48×48.
   Анимации — только transform/opacity.
   ============================================================ */
.hat {
  --hat-ink: #141414;
  --hat-ink-800: #2a2a2a;
  --hat-ink-700: #3d3d3d;
  --hat-graphite: #6b6b6b;
  --hat-ash: #888888;
  --hat-mute: #adadad;
  --hat-line: #e4e4e4;
  --hat-line-2: #cccccc;
  --hat-mist: #fafafa;
  --hat-paper: #ffffff;
  --hat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hat-pad: clamp(20px, 4.4vw, 64px);

  position: relative;
  background: var(--hat-paper);
  color: var(--hat-ink);
  font-family: var(--hat-font-body), system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  overflow-x: clip;
}
.hat *,
.hat *::before,
.hat *::after { box-sizing: border-box; }
.hat a { color: inherit; text-decoration: none; }
.hat h1, .hat h2, .hat h3, .hat p, .hat dl, .hat dd, .hat dt, .hat figure { margin: 0; }
.hat :where(button) { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
.hat em { font-style: normal; color: var(--hat-ash); }
.hat [id] { scroll-margin-top: 84px; }
.hat ::selection { background: var(--hat-ink); color: var(--hat-paper); }
.hat :focus-visible { outline: 2px solid var(--hat-ink); outline-offset: 3px; }
.hat-dark :focus-visible, .hat-cta :focus-visible { outline-color: var(--hat-paper); }

.hat-container { width: 100%; max-width: calc(1280px + var(--hat-pad) * 2); margin-inline: auto; padding-inline: var(--hat-pad); }
.hat-section { padding-block: clamp(64px, 8vw, 112px); }
.hat-bt { border-top: 1px solid var(--hat-line); }
.hat-grid-bg, .hat-hero {
  background-color: var(--hat-paper);
  background-image: linear-gradient(var(--hat-line) 1px, transparent 1px), linear-gradient(90deg, var(--hat-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Типографика */
.hat-display { font-family: var(--hat-font-display), system-ui, sans-serif; font-weight: 600; letter-spacing: -0.025em; }
.hat-h1 { font-size: clamp(3.4rem, 8.4vw, 7.5rem); line-height: 0.92; text-transform: uppercase; }
.hat-h1 span { color: var(--hat-ash); }
.hat-h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.04; }
.hat-h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.hat-eyebrow { margin-bottom: 12px !important; font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hat-graphite); }
.hat-eyebrow-wide { letter-spacing: 0.35em; margin-bottom: 28px !important; }
.hat-body { color: #555; line-height: 1.65; }
.hat-sub { margin-top: 18px !important; max-width: 60ch; }
.hat-divider { display: block; flex-shrink: 0; width: 48px; height: 1px; background: var(--hat-ink); }

.hat-brand { display: inline-flex; align-items: center; gap: 14px; }
.hat-diamond { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid currentColor; transform: rotate(45deg); }
.hat-diamond-lg { width: 30px; height: 30px; border-width: 1px; margin: 5px; }
.hat-diamond-xl { display: block; width: 40px; height: 40px; margin: 0 auto 22px; color: var(--hat-mute); }
.hat-logo { font-family: var(--hat-font-logo), Georgia, serif; font-weight: 300; font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.hat-brand-sm .hat-diamond { width: 16px; height: 16px; }

/* Кнопки (.btn-primary / .btn-outline / .btn-gold сайта) */
.hat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: 1px solid var(--hat-ink);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.hat-btn:active { transform: scale(0.98); }
.hat-btn-sm { padding: 10px 24px; letter-spacing: 0.12em; white-space: nowrap; }
.hat-btn-block { display: flex; width: 100%; }
.hat-btn-primary, .hat a.hat-btn-primary { background: var(--hat-ink); color: var(--hat-paper); }
.hat a.hat-btn-primary:hover, .hat button.hat-btn-primary:hover { background: var(--hat-ink-700); }
.hat-btn-outline { background: transparent; color: var(--hat-ink); }
.hat a.hat-btn-outline:hover, .hat button.hat-btn-outline:hover { background: var(--hat-ink); color: var(--hat-paper); }
.hat a.hat-btn-white { background: var(--hat-paper); border-color: var(--hat-paper); color: var(--hat-ink); }
.hat a.hat-btn-white:hover { background: transparent; color: var(--hat-paper); }
.hat a.hat-btn-ghost { border-color: transparent; color: var(--hat-ash); letter-spacing: 0.1em; text-transform: none; font-size: 0.8rem; }
.hat a.hat-btn-ghost:hover { color: var(--hat-paper); }

/* ---------- HERO ---------- */
.hat-hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--site-top, 72px) + 66px + 40px) 0 56px; overflow: hidden; }
.hat-hero::after { /* скрим под текстом, как .mosaic-scrim — сетка не спорит с заголовком */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 22% 55%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 100%);
}
.hat-site-header { position: absolute; inset: var(--site-top, 72px) 0 auto; z-index: 3; background: var(--hat-paper); border-bottom: 2px solid var(--hat-ink); }
.hat-site-header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.hat-site-nav { display: flex; margin-left: auto; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hat-graphite); }
.hat-site-nav a { padding: 4px 18px; transition: color 0.2s; }
.hat-site-nav a:hover { color: var(--hat-ink); }

.hat-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 80px); align-items: center; }
.hat-back { display: inline-block; margin-bottom: 26px; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--hat-ash) !important; transition: color 0.2s; }
.hat-back:hover { color: var(--hat-ink) !important; }
.hat-hero-lead { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.hat-hero-lead p { max-width: 44ch; font-size: 0.9rem; color: var(--hat-graphite); }
.hat-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hat-hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--hat-line); }
.hat-hero-stats > div { padding-right: 28px; }
.hat-hero-stats > div + div { padding-left: 24px; border-left: 1px solid var(--hat-line); }
.hat-hero-stat-num { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em; }
.hat-hero-stat-label { margin-top: 4px; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hat-graphite); }

.hat-frame-wrap { position: relative; max-width: 520px; width: 100%; margin-left: auto; padding-right: 28px; }
.hat-frame { position: relative; aspect-ratio: 4 / 5; border: 2px solid var(--hat-ink); background: rgba(255, 255, 255, 0.55); }
.hat-frame-shadow { position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--hat-line-2); pointer-events: none; }
.hat-frame-center { position: absolute; inset: 0 0 28%; display: grid; place-content: center; text-align: center; }
.hat-frame-center p { font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hat-ash); }
.hat-corner { position: absolute; width: 24px; height: 24px; border: 0 solid var(--hat-ink); }
.hat-corner-tl { top: 20px; left: 20px; border-top-width: 2px; border-left-width: 2px; }
.hat-corner-tr { top: 20px; right: 20px; border-top-width: 2px; border-right-width: 2px; }
.hat-corner-bl { bottom: 20px; left: 20px; border-bottom-width: 2px; border-left-width: 2px; }
.hat-corner-br { bottom: 20px; right: 20px; border-bottom-width: 2px; border-right-width: 2px; }
.hat-frame-side { position: absolute; top: 50%; right: 0; font-size: 0.5625rem; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; color: var(--hat-ash); transform: translate(50%, -50%) rotate(-90deg); transform-origin: center; margin-right: 6px !important; }

.hat-next { position: absolute; left: -36px; bottom: 56px; width: min(340px, 86%); padding: 22px 24px; background: var(--hat-paper); border: 1px solid var(--hat-line); }
.hat-next-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hat-next-top p { font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hat-ash); }
.hat-next-top span { flex-shrink: 0; padding: 2px 8px; font-size: 0.5625rem; letter-spacing: 0.15em; text-transform: uppercase; background: var(--hat-ink); color: var(--hat-paper); }
.hat-next-time { display: flex; align-items: baseline; gap: 12px; }
.hat-next-time .hat-display { font-size: 2.1rem; line-height: 1.1; }
.hat-next-time span:last-child { font-size: 0.875rem; color: var(--hat-graphite); }
.hat-next .hat-divider { margin-block: 14px; }
.hat-next-row { font-size: 0.875rem; color: var(--hat-ink-700); }
.hat-next-row span { font-size: 0.75rem; color: var(--hat-ash); }
.hat-next-row + .hat-next-row { margin-top: 6px !important; }

@keyframes hat-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hat-rise { animation: hat-rise 0.7s var(--hat-ease) both; }

/* ---------- Шапка секции ---------- */
.hat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hat-head-link { flex-shrink: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hat-graphite) !important; transition: color 0.2s; }
.hat-head-link:hover { color: var(--hat-ink) !important; }

/* ---------- Задача ---------- */
.hat-task { max-width: 880px; }
.hat-task-text { display: grid; gap: 16px; margin-top: 28px; max-width: 68ch; }

/* ---------- Брендбук ---------- */
.hat-bb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 40px; }
.hat-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hat-line); border: 1px solid var(--hat-line); }
.hat-swatch { position: relative; display: grid; gap: 3px; padding: 10px 10px 14px; text-align: left; background: var(--hat-paper); border: 0; transition: background-color 0.2s; }
.hat-swatch:hover { background: var(--hat-mist); }
.hat-swatch::after { content: ''; position: absolute; inset: auto 10px 0; height: 2px; background: var(--hat-ink); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--hat-ease); }
.hat-swatch[aria-selected='true']::after { transform: none; }
.hat-swatch-chip { display: block; height: 124px; margin-bottom: 8px; border: 1px solid var(--hat-line); }
.hat-swatch-name { font-size: 0.875rem; font-weight: 500; }
.hat-swatch-hex { font-family: var(--hat-font-display), system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--hat-ash); }

.hat-swatch-roles { display: grid; margin-top: 28px; }
.hat-swatch-roles p {
  grid-area: 1 / 1;
  padding-left: 18px;
  border-left: 2px solid var(--hat-ink);
  color: #555;
  font-size: 0.97rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s var(--hat-ease), visibility 0s 0.35s;
}
.hat[data-hl='ink'] [data-role='ink'],
.hat[data-hl='graphite'] [data-role='graphite'],
.hat[data-hl='ash'] [data-role='ash'],
.hat[data-hl='line'] [data-role='line'],
.hat[data-hl='paper'] [data-role='paper'] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.hat-stage {
  padding: clamp(18px, 3vw, 32px);
  background-color: var(--hat-paper);
  background-image: linear-gradient(var(--hat-line) 1px, transparent 1px), linear-gradient(90deg, var(--hat-line) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 2px solid var(--hat-ink);
}
.hat-stage-in { display: grid; gap: 10px; padding: clamp(16px, 2.4vw, 24px); background: var(--hat-paper); border: 1px solid var(--hat-line); outline: 1.5px dashed transparent; outline-offset: 5px; transition: outline-color 0.35s; }
.hat-stage-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hat-stage-line { flex: 1; height: 1px; background: var(--hat-line); }
.hat-stage-line-on { background: var(--hat-ink); }
.hat-stage [data-c], .hat-stage [data-b] { transition: opacity 0.35s, border-color 0.35s; }
.hat-stage .hat-btn { cursor: default; margin-top: 6px; }

/* подсветка: всё, что не выбранного цвета, гаснет; границы — отдельно */
.hat[data-hl='ink'] .hat-stage [data-c]:not([data-c~='ink']),
.hat[data-hl='graphite'] .hat-stage [data-c]:not([data-c~='graphite']),
.hat[data-hl='ash'] .hat-stage [data-c]:not([data-c~='ash']),
.hat[data-hl='line'] .hat-stage [data-c]:not([data-c~='line']),
.hat[data-hl='paper'] .hat-stage [data-c]:not([data-c~='paper']) { opacity: 0.14; }
.hat[data-hl='line'] .hat-stage [data-c~='paper'] { opacity: 0.04; }
.hat:not([data-hl='line']) .hat-stage [data-b] { border-color: #f0f0f0; }
.hat[data-hl='line'] .hat-stage [data-b] { border-color: var(--hat-ash); }
.hat[data-hl='paper'] .hat-stage-in { outline-color: var(--hat-ink); }

/* Элементы формы записи (общие для демо и степпера) */
.hat-book-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hat-graphite); }
.hat-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; text-align: left; background: var(--hat-paper); border: 1px solid var(--hat-line); }
.hat-row-col { flex-direction: column; align-items: flex-start; gap: 2px; }
.hat-row-btn { transition: border-color 0.2s, background-color 0.2s; }
.hat-row-btn:hover { border-color: var(--hat-ash); }
.hat-row-btn[aria-pressed='true'] { border-color: #9e9e9e; background: #f7f7f7; }
.hat-row-t { display: block; font-size: 0.9rem; font-weight: 500; color: var(--hat-ink); }
.hat-row-d { display: block; font-size: 0.75rem; color: var(--hat-graphite); }
.hat-row-meta { color: var(--hat-ash); }
.hat-avatar { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--hat-line); font-family: var(--hat-font-display), system-ui, sans-serif; font-size: 0.85rem; color: #363636; }
.hat-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hat-slot { display: block; padding: 10px 4px; text-align: center; font-size: 0.875rem; color: #555; background: var(--hat-paper); border: 1px solid var(--hat-line); transition: border-color 0.2s, background-color 0.2s; }
button.hat-slot:hover { border-color: var(--hat-line-2); }
.hat-slot[aria-pressed='true'], .hat-slot[aria-current] { border-color: #9e9e9e; background: #f7f7f7; color: var(--hat-ink); }
.hat[data-hl='line'] .hat-stage .hat-slot[aria-current] { border-color: var(--hat-ink); }
.hat-progress-dot { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--hat-line); color: var(--hat-ash); font-size: 0.875rem; font-weight: 500; transition: background-color 0.25s, color 0.25s; }
.hat-dot-on { background: var(--hat-ink); color: var(--hat-paper); }

/* Шрифты */
.hat-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(48px, 6vw, 80px); background: var(--hat-line); border: 1px solid var(--hat-line); }
.hat-type { padding: clamp(24px, 3vw, 40px); background: var(--hat-paper); }
.hat-type-sample { display: flex; align-items: center; gap: 14px; min-height: 96px; }
.hat-type-sample.hat-logo { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.hat-type-sample.hat-display { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 0.95; text-transform: uppercase; }
.hat-type-sample.hat-caps { font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--hat-graphite); }
.hat-type-name { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hat-line); font-weight: 500; }
.hat-type-role { margin-top: 8px !important; font-size: 0.875rem; color: var(--hat-graphite); }

/* ---------- Ячейки (блок «Услуги» 01–03) ---------- */
.hat-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: var(--hat-line); border: 1px solid var(--hat-line); }
.hat-cell { display: flex; flex-direction: column; padding: clamp(24px, 2.8vw, 40px); background: var(--hat-paper); transition: background-color 0.2s; }
.hat-cell-num { display: block; font-size: 3rem; line-height: 1; color: var(--hat-line); transition: color 0.2s; }
.hat-cell-t { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; transition: color 0.2s; }
.hat-cell-rule { display: block; width: 32px; height: 1px; margin-block: 14px; background: #d5d5d5; transition: background-color 0.2s; }
.hat-cell-d { font-size: 0.875rem; line-height: 1.6; color: var(--hat-graphite); transition: color 0.2s; }
.hat-cell-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hat-mute); transition: color 0.2s; }
.hat-screen .hat-cell-num { margin-bottom: 20px; }
.hat-shot { display: block; aspect-ratio: 16 / 10; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--hat-line); background: var(--hat-mist); }
.hat-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hat-shot-phone { padding-top: 12px; }
.hat-shot-phone img { width: auto; height: 170%; margin-inline: auto; border: 1px solid var(--hat-line); }
a.hat-screen:hover { background: var(--hat-ink); }
a.hat-screen:hover .hat-cell-num { color: var(--hat-ink-700); }
a.hat-screen:hover .hat-cell-t { color: var(--hat-paper); }
a.hat-screen:hover .hat-cell-rule { background: #555; }
a.hat-screen:hover .hat-cell-d { color: var(--hat-ash); }
a.hat-screen:hover .hat-cell-more { color: var(--hat-paper); }

/* ---------- Степпер записи ---------- */
.hat-book { margin-top: 44px; border: 1px solid var(--hat-line); }
.hat-progress { display: flex; align-items: center; gap: 10px; padding: 20px clamp(16px, 2.8vw, 40px); border-bottom: 1px solid var(--hat-line); }
.hat-progress-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hat-progress-item:last-child { flex: 0 0 auto; }
.hat-progress-btn { display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; }
.hat-progress-btn[data-on] .hat-progress-dot { background: var(--hat-ink); color: var(--hat-paper); }
.hat-progress-name { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hat-ash); transition: color 0.25s; }
.hat-progress-btn[aria-selected='true'] .hat-progress-name { color: var(--hat-ink); }
.hat-progress-line { position: relative; flex: 1; height: 1px; min-width: 12px; background: var(--hat-line); }
.hat-progress-line::after { content: ''; position: absolute; inset: 0; background: var(--hat-ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--hat-ease); }
.hat-progress-item[data-done] .hat-progress-line::after { transform: none; }

.hat-book-viewport { overflow: hidden; }
.hat-book-track { display: grid; }
.hat-book[data-live] .hat-book-track { display: flex; width: 400%; align-items: stretch; transition: transform 0.45s var(--hat-ease); }
.hat-book[data-live] .hat-book-panel { width: 25%; flex-shrink: 0; }
.hat-book:not([data-live]) .hat-book-panel + .hat-book-panel { border-top: 1px solid var(--hat-line); }
.hat-book-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hat-book-ui { display: grid; align-content: start; gap: 12px; min-height: 380px; padding: clamp(20px, 2.8vw, 40px); border-right: 1px solid var(--hat-line); }
.hat-book-list { display: grid; gap: 8px; }
.hat-book-behind { padding: clamp(24px, 3.4vw, 56px); background: var(--hat-mist); align-self: stretch; }
.hat-book-behind .hat-divider { margin-block: 20px; }
.hat-book-behind .hat-body { max-width: 52ch; font-size: 0.95rem; }
.hat-picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 6px; background: var(--hat-mist); border: 1px solid var(--hat-line); }
.hat-summary { display: grid; gap: 6px; padding: 16px; background: var(--hat-mist); border: 1px solid var(--hat-line); font-size: 0.875rem; }
.hat-summary > div { display: flex; justify-content: space-between; gap: 16px; }
.hat-summary dt { color: var(--hat-graphite); }
.hat-summary dd { font-weight: 500; text-align: right; }
.hat-book-hint { font-size: 0.85rem; color: var(--hat-graphite); }
.hat-book-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.hat-book-actions .hat-btn { padding-inline: 12px; }
.hat-tg { padding: 16px 18px; border: 1px solid var(--hat-ink); font-size: 0.85rem; line-height: 1.55; color: var(--hat-ink-700); animation: hat-rise 0.45s var(--hat-ease) both; }
.hat-tg-head { margin-bottom: 8px !important; font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hat-ash); }
.hat-tg-title { font-weight: 600; color: var(--hat-ink); }
.hat-tg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hat-tg-actions span { padding: 7px; text-align: center; font-size: 0.75rem; border: 1px solid var(--hat-line-2); }
.hat-tg-actions span:first-child { background: var(--hat-ink); border-color: var(--hat-ink); color: var(--hat-paper); }

/* ---------- Прайс ---------- */
.hat-price { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: 52px; }
.hat-price-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hat-price-title { font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; }
.hat-price-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hat-price-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; background: var(--hat-paper); border: 1px solid var(--hat-line); transition: border-color 0.2s; }
.hat-price-row:hover { border-color: var(--hat-ash); }
.hat-price-row .hat-row-t { font-size: 1rem; }
.hat-price-d { margin-top: 4px !important; font-size: 0.875rem; color: var(--hat-graphite); }
.hat-price-tag { margin-top: 8px; font-size: 0.75rem; color: var(--hat-ash); }
.hat-price-val { flex-shrink: 0; text-align: right; }
.hat-price-val .hat-display { font-weight: 400; font-size: 1.125rem; letter-spacing: 0; white-space: nowrap; }
.hat-price-val span { display: block; margin-top: 6px; font-size: 0.75rem; color: #505050; }

/* ---------- Тёмный блок «Мастера» ---------- */
.hat-dark { background: var(--hat-ink); color: var(--hat-paper); }
.hat-dark .hat-eyebrow { color: var(--hat-ash); }
.hat-dark .hat-cells { background: var(--hat-ink-800); border-color: var(--hat-ink-800); }
.hat-dark .hat-cell { background: var(--hat-ink); }
.hat-dark .hat-cell:hover { background: var(--hat-ink-800); }
.hat-role-avatar { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; font-size: 1.25rem; letter-spacing: 0; color: var(--hat-mute); background: var(--hat-ink-800); border: 1px solid var(--hat-ink-700); transition: border-color 0.2s; }
.hat-role:hover .hat-role-avatar { border-color: var(--hat-graphite); }
.hat-role-sub { margin: 4px 0 12px !important; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hat-ash); }
.hat-dark .hat-cell-d { color: #9a9a9a; }
.hat-role-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hat-ash) !important; transition: color 0.2s; }
.hat-role .hat-cell-d { padding-bottom: 20px; border-bottom: 1px solid var(--hat-ink-800); }
.hat-role-link:hover { color: var(--hat-paper) !important; }
.hat-crm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 6vw, 80px); }
.hat-crm-shot { border: 1px solid var(--hat-ink-700); background: var(--hat-paper); }
.hat-crm-shot img { display: block; width: 100%; height: auto; }
.hat-crm-item figcaption { display: grid; gap: 6px; margin-top: 16px; }
.hat-crm-t { font-size: 1.125rem; letter-spacing: -0.01em; }

/* ---------- Сообщения ---------- */
.hat-msg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hat-prompt { max-width: 460px; margin-top: 32px; padding: 20px; background: var(--hat-paper); border: 1px solid var(--hat-line); }
.hat-prompt-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; transition: opacity 0.3s; }
.hat-prompt[data-ack] .hat-prompt-top { opacity: 0.6; }
.hat-prompt-from { margin-bottom: 4px !important; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hat-ash); }
.hat-prompt-q { font-size: 0.9rem; color: var(--hat-ink); }
.hat-prompt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.hat-chip { padding: 8px 16px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; border: 1px solid var(--hat-ink); transition: background-color 0.2s, color 0.2s; }
.hat-chip:hover { background: var(--hat-ink); color: var(--hat-paper); }
.hat-prompt-ack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px !important; border-top: 1px solid var(--hat-line); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hat-graphite); animation: hat-rise 0.4s var(--hat-ease) both; }
.hat-prompt-ack b { font-weight: 500; color: var(--hat-ink); }
.hat-prompt-ack button { margin-left: auto; padding: 0; background: none; border: 0; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--hat-ash); text-decoration: underline; text-underline-offset: 3px; }
.hat-msg-notes { display: grid; gap: 1px; background: var(--hat-line); border: 1px solid var(--hat-line); }
.hat-msg-notes > div { display: grid; grid-template-columns: 72px 1fr; column-gap: 8px; padding: 24px 28px; background: var(--hat-paper); }
.hat-msg-notes .hat-cell-num { grid-row: span 2; font-size: 2.25rem; }
.hat-msg-notes .hat-cell-d { margin-top: 4px !important; }

/* ---------- Метрики ---------- */
.hat-metrics-in { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(40px, 5vw, 64px); }
.hat-metrics-in > div { padding-inline: 28px; border-left: 1px solid var(--hat-line); }
.hat-metrics-in > div:first-child { padding-left: 0; border-left: 0; }
.hat-metric-num { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- CTA ---------- */
.hat-cta { position: relative; overflow: hidden; background: var(--hat-ink); color: var(--hat-paper); }
.hat-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.hat-cta .hat-corner { border-color: #555; top: auto; }
.hat-cta .hat-corner-tl, .hat-cta .hat-corner-tr { top: 16px; }
.hat-cta .hat-corner-bl, .hat-cta .hat-corner-br { bottom: 16px; }
.hat-cta .hat-corner-tl, .hat-cta .hat-corner-bl { left: 16px; }
.hat-cta .hat-corner-tr, .hat-cta .hat-corner-br { right: 16px; }
.hat-cta-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 64px); }
.hat-cta .hat-divider { margin-bottom: 28px; background: #555; }
.hat-cta .hat-eyebrow { color: var(--hat-ash); }
.hat-cta-text { margin-top: 20px !important; max-width: 62ch; font-size: 0.92rem; color: #a8a8a8; }
.hat-cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

.hat-footer { background: var(--hat-ink); color: var(--hat-ash); font-size: 0.85rem; }
.hat-footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-block: 28px; }
.hat-footer .hat-brand { color: var(--hat-paper); }
.hat-footer .hat-logo { font-size: 1.05rem; }

/* ---------- Появления (только с JS и без reduced-motion) ---------- */
.hat.js-sc [data-sc='reveal'] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--hat-ease) calc(var(--i, 0) * 90ms), transform 0.7s var(--hat-ease) calc(var(--i, 0) * 90ms), background-color 0.2s;
}
.hat.js-sc [data-sc='reveal'].in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hat-rise, .hat-tg, .hat-prompt-ack { animation: none; }
  .hat-book[data-live] .hat-book-track, .hat-progress-line::after, .hat-swatch::after { transition: none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .hat-site-nav { display: none; }
}
@media (max-width: 1023px) {
  .hat-bb { grid-template-columns: 1fr; }
  .hat-stage { max-width: 520px; }
  .hat-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hat-roles { grid-template-columns: minmax(0, 1fr); }
  .hat-msg { grid-template-columns: 1fr; }
  .hat-cta-in { flex-direction: column; align-items: flex-start; }
  .hat-cta-actions { width: 100%; max-width: 360px; }
  .hat-next { left: -16px; }
}
@media (max-width: 767px) {
  .hat-hero { padding-top: calc(var(--site-top, 72px) + 66px + 28px); align-items: flex-start; }
  .hat-hero-grid { grid-template-columns: 1fr; }
  .hat-frame-wrap { display: none; }
  .hat-hero-actions .hat-btn { flex: 1 1 100%; }
  .hat-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hat-hero-stats > div { padding-right: 10px; }
  .hat-hero-stats > div + div { padding-left: 12px; }
  .hat-hero-stat-num { font-size: 1.3rem; }
  .hat-hero-stats .hat-hero-stat-label { font-size: 0.5625rem; letter-spacing: 0.03em; overflow-wrap: anywhere; }
  .hat-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hat-swatches { grid-template-columns: repeat(3, 1fr); }
  .hat-swatch:first-child { grid-column: span 2; }
  .hat-swatch-chip { height: 56px; }
  .hat-types { grid-template-columns: 1fr; }
  .hat-type-sample { min-height: 72px; }
  .hat-cells { grid-template-columns: minmax(0, 1fr); }
  .hat-book-panel { grid-template-columns: 1fr; }
  .hat-book-ui { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hat-line); }
  .hat-progress-name { display: none; }
  .hat-price-rows { grid-template-columns: 1fr; }
  .hat-crm { grid-template-columns: 1fr; }
  .hat-metrics-in { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .hat-metrics-in > div { padding-inline: 20px; }
  .hat-metrics-in > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hat-msg-notes > div { grid-template-columns: 56px 1fr; padding: 20px; }
}
@media (max-width: 479px) {
  .hat-site-header .hat-btn { padding-inline: 14px; }
  .hat-logo { font-size: 1.05rem; }
  .hat-brand { gap: 10px; }
  .hat-diamond { width: 18px; height: 18px; }
  .hat-diamond-lg { width: 30px; height: 30px; }
  .hat-diamond-xl { width: 40px; height: 40px; }
  .hat-price-row { padding: 18px 16px; gap: 12px; }
  .hat-btn { padding-inline: 20px; }
}