/* ─────────────────────────────────────────────────────────────
   OKKO v5 — design overrides поверх v4 базы.
   OKLCH палитра, Inter Tight для display, премиум motion,
   glass материалы, 3D хёроу canvas, refined hovers.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── палитра OKLCH ── */
  --bg:           oklch(8%  0.020 290);
  --bg-2:         oklch(11% 0.025 290);
  --bg-3:         oklch(14% 0.030 290);
  --surface:      oklch(12% 0.025 290 / 60%);
  --surface-2:    oklch(15% 0.035 290 / 75%);

  --okko:         oklch(67% 0.220 305);
  --okko-2:       oklch(78% 0.180 295);
  --okko-3:       oklch(58% 0.230 308);
  --okko-4:       oklch(50% 0.220 290);
  --okko-soft:    oklch(70% 0.150 305 / 14%);
  --okko-deep:    oklch(28% 0.140 295);
  --okko-darker:  oklch(18% 0.080 295);

  --text:         oklch(98% 0     0);
  --text-2:       oklch(80% 0.005 280);
  --text-3:       oklch(60% 0.010 280);
  --text-4:       oklch(45% 0.015 280);

  --border:       oklch(28% 0.030 290 / 35%);
  --border-2:     oklch(36% 0.040 290 / 55%);

  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2:       cubic-bezier(0.19, 1, 0.22, 1);
  --ease-3:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-4:       cubic-bezier(0.4, 0, 0.2, 1);

  --grad:         linear-gradient(135deg, oklch(78% 0.180 295), oklch(58% 0.230 308));
  --grad-2:       linear-gradient(135deg, oklch(82% 0.150 195), oklch(67% 0.220 305));
  --grad-soft:    linear-gradient(180deg, oklch(14% 0.04 290 / 70%) 0%, oklch(10% 0.02 290 / 90%) 100%);
  --grad-mesh:    radial-gradient(ellipse at 20% 10%, oklch(20% 0.10 295) 0%, transparent 55%),
                  radial-gradient(ellipse at 80% 70%, oklch(15% 0.10 200) 0%, transparent 50%);

  --radius:       18px;
  --radius-sm:    10px;
  --radius-lg:    28px;
}

/* ── Премиум типографика для display ── */
body {
  font-family: 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4,
.hero-title, .featured-title, .section-title,
.ability h3, .ui-copy h3, .case h3, .price h3, .step h3, .fact h3 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-title {
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}
.section-title, .featured-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

/* ── Body fluency ── */
p, .hero-sub, .lead, .section-sub, .featured-lead {
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* ── Глобальный фон страницы ── */
html, body {
  background: var(--bg);
  color: var(--text);
}

/* ── HERO — 3D canvas + grain + слои ── */
.hero {
  isolation: isolate;
  position: relative;
}
.hero-inner {
  position: relative !important;
  z-index: 2 !important;
}
.hero-canvas-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}
.hero-canvas-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: var(--grad-mesh), var(--bg);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; inset-inline: 0;
  height: 220px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
/* orbs из v4 оставляем — они хорошо ложатся под 3D-сцену */

/* Hero typography & layout */
.pill {
  background: oklch(98% 0 0 / 3%) !important;
  border-color: var(--border) !important;
  backdrop-filter: blur(12px);
}
.hero-trust strong {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* ── Buttons — refined ── */
.btn {
  border-radius: 999px !important;
  transition:
    background var(--d-fast, 220ms) var(--ease),
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    border-color 220ms var(--ease) !important;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--okko-2), var(--okko)) !important;
  color: oklch(8% 0.02 290) !important;
  box-shadow:
    0 8px 24px -8px oklch(67% 0.22 305 / 50%),
    inset 0 1px 0 oklch(95% 0.05 305 / 40%) !important;
  border: 0 !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px -10px oklch(67% 0.22 305 / 70%),
    inset 0 1px 0 oklch(95% 0.05 305 / 50%) !important;
}
.btn-ghost {
  background: oklch(98% 0 0 / 5%) !important;
  /* Граница ярче, чтобы прозрачные кнопки не сливались с тёмным фоном */
  border: 1px solid oklch(70% 0.06 290 / 45%) !important;
  backdrop-filter: blur(12px);
  color: var(--text) !important;
}
.btn-ghost:hover {
  background: oklch(98% 0 0 / 10%) !important;
  border-color: oklch(78% 0.09 290 / 70%) !important;
  transform: translateY(-1px);
}

/* ── NAV — backdrop-glass с акцентом ── */
.nav {
  transition: background 220ms var(--ease), border-color 220ms var(--ease), padding 220ms var(--ease);
}
.nav.is-scrolled {
  background: oklch(8% 0.02 290 / 72%) !important;
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border) !important;
}
.nav-cta {
  background: oklch(98% 0 0 / 5%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px);
}

/* ── Cards: ability / ui / case / price / step / fact ── */
.ability, .ui-mock, .case, .price, .step, .fact, .featured-frame, .contact-card,
.aud-card, .extra, .comp, .feature {
  background: var(--grad-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color 320ms var(--ease), transform 320ms var(--ease-2), box-shadow 320ms var(--ease) !important;
}
.ability:hover, .case:hover, .price:hover, .step:hover, .fact:hover,
.aud-card:hover, .extra:hover, .comp:hover, .feature:hover {
  border-color: var(--border-2) !important;
  box-shadow: 0 32px 80px -20px oklch(0% 0 0 / 70%) !important;
}

/* Ui-card mock — tilt perspective */
.ui-mock {
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px oklch(0% 0 0 / 75%), 0 0 0 1px oklch(80% 0.06 290 / 8%) !important;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform 720ms var(--ease-2), box-shadow 720ms var(--ease) !important;
}
.ui-card.reverse .ui-mock { transform: perspective(1200px) rotateY(3deg) rotateX(2deg); }
.ui-mock:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0) !important;
  box-shadow: 0 60px 140px -30px oklch(0% 0 0 / 80%), 0 0 0 1px oklch(80% 0.06 290 / 14%), 0 0 80px -10px oklch(67% 0.22 305 / 40%) !important;
}

/* ── Hero device — глубокая 3D перспектива ── */
.hero-device {
  perspective: 1600px;
}
.hero-device-inner {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 60px 140px -40px oklch(0% 0 0 / 85%),
    0 0 0 1px oklch(80% 0.06 290 / 10%),
    0 0 120px -20px oklch(67% 0.22 305 / 35%) !important;
  background: linear-gradient(180deg, oklch(11% 0.025 290) 0%, oklch(8% 0.02 290) 100%) !important;
}

/* ── Browser chrome — refined ── */
.browser-bar, .news-bar {
  background: oklch(8% 0.02 290) !important;
  border-bottom: 1px solid var(--border) !important;
}
.browser-url {
  background: oklch(11% 0.025 290) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-3) !important;
}

/* ── Inputs ── */
.lead-form input, .lead-form textarea, input[type="text"], input[type="email"], input[type="tel"], textarea {
  background: oklch(8% 0.02 290 / 60%) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.lead-form input:focus, .lead-form textarea:focus,
input:focus, textarea:focus {
  border-color: var(--okko) !important;
  background: oklch(10% 0.03 290 / 80%) !important;
  outline: none;
}

/* ── Form submit ── */
.lead-form button[type="submit"], .form-submit {
  background: linear-gradient(135deg, var(--okko-2), var(--okko)) !important;
  color: oklch(8% 0.02 290) !important;
  border: 0 !important;
  border-radius: 999px !important;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease) !important;
}
.lead-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px oklch(67% 0.22 305 / 70%) !important;
}

/* ── Eyebrow — animated pulse dot ── */
.eyebrow, .pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3) !important;
}

/* ── Section heads ── */
.section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ── Gradient text — обновлён под v5 палитру
   ВАЖНО: используем background-image (не shorthand background),
   иначе сбрасывается background-clip: text у родительского правила v4. ── */
.gradient-text {
  background-image: linear-gradient(105deg, var(--okko-2) 0%, oklch(82% 0.15 195) 50%, var(--okko-3) 100%) !important;
  background-size: 200% 100% !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: v5-gradient-shift 8s var(--ease) infinite !important;
}
@keyframes v5-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Reveal: гладче и медленнее ── */
.reveal {
  transition:
    opacity 1200ms var(--ease-2),
    transform 1200ms var(--ease-2) !important;
}

/* ── Cursor — refined под v5 ── */
.cursor-ring {
  border-color: oklch(98% 0 0) !important;
  mix-blend-mode: difference;
  transition: width 220ms var(--ease), height 220ms var(--ease), border-color 220ms var(--ease) !important;
}

/* ── Marquee — subtle ── */
.marquee {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: oklch(10% 0.025 290 / 50%) !important;
}

/* ── Player modal — refined ── */
.player-modal-backdrop {
  background: oklch(4% 0 0 / 80%) !important;
  backdrop-filter: blur(20px);
}
.player-modal-frame,
.player-modal-controls {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, oklch(14% 0.035 290) 0%, oklch(9% 0.02 290) 100%) !important;
  box-shadow: 0 40px 100px -20px oklch(0% 0 0 / 75%), 0 0 0 1px oklch(80% 0.06 290 / 8%) !important;
}
.player-modal-close {
  background: oklch(98% 0 0 / 8%) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}
.pmc-toggle {
  background: oklch(98% 0 0 / 2%) !important;
  /* gap между переключателем и подписью — иначе текст налезал на toggle */
  gap: 12px !important;
}
.pmc-toggle:hover {
  background: oklch(67% 0.22 305 / 10%) !important;
}
.pmc-toggle input {
  background: oklch(98% 0 0 / 10%) !important;
}
.pmc-toggle input:checked {
  background: var(--okko) !important;
}

/* ── Tilt depth boost для всех 3D-mockup'ов ── */
.devices-mock, .case-mock, .auto-body, .pl-grid {
  filter: drop-shadow(0 24px 60px oklch(0% 0 0 / 50%));
}

/* ── Hover lift только через box-shadow (не transform, чтобы курсор не уезжал) ── */
.case:hover, .step:hover, .price:hover, .fact:hover, .aud-card:hover, .extra:hover, .comp:hover, .feature:hover, .ability:hover {
  box-shadow:
    0 40px 80px -20px oklch(0% 0 0 / 75%),
    0 0 60px -20px oklch(67% 0.22 305 / 25%) !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ui-mock { transform: none !important; }
}

/* ── ::selection ── */
::selection {
  background: var(--okko) !important;
  color: oklch(99% 0 0) !important;
}

/* ═══════════════════════════════════════════════════════════════
   V5 — WOW LAYER: больше масштаба, больше depth, больше motion
   ═══════════════════════════════════════════════════════════════ */

/* ── CASES — фикс grid (v4 ожидал 5 карточек, у нас 4 → 2×2 равных) ── */
.cases {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
}
.case:nth-child(1),
.case:nth-child(2),
.case:nth-child(3),
.case:nth-child(4),
.case:nth-child(5) {
  grid-column: span 1 !important;
}
@media (max-width: 880px) {
  .cases { grid-template-columns: 1fr !important; }
}

/* Case-frame — глубже + glow при ховере */
.case-frame {
  background: linear-gradient(135deg, oklch(18% 0.10 295) 0%, oklch(8% 0.025 290) 100%) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.case {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.case .case-body,
.case > h3,
.case > p,
.case > .case-tags {
  padding: clamp(22px, 2.5vw, 32px) !important;
  padding-top: clamp(18px, 2vw, 24px) !important;
  padding-bottom: clamp(22px, 2.5vw, 32px) !important;
}
.case h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
}
.case p {
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
}
.case:hover {
  border-color: oklch(67% 0.22 305 / 40%) !important;
  box-shadow:
    0 40px 80px -20px oklch(0% 0 0 / 80%),
    0 0 100px -20px oklch(67% 0.22 305 / 35%),
    inset 0 0 0 1px oklch(78% 0.18 295 / 18%) !important;
}

/* ── TYPOGRAPHY — больше масштаба для section titles ── */
.section-title, .featured-title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}
.hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

/* ── SECTION HEAD — drama (но центрирование сохраняем v4-стиль) ── */
.section-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 auto clamp(3rem, 6vw, 5rem) !important;
  max-width: 840px !important;
  text-align: center !important;
}
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: oklch(98% 0 0 / 3%) !important;
  backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-3) !important;
  width: max-content;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--okko-2);
  box-shadow: 0 0 12px var(--okko-2);
  animation: v5-pulse 2.4s var(--ease) infinite;
}
@keyframes v5-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

/* ── ABILITIES — на 3 равные колонки + сильный hover ── */
.abilities .container > div:not(.section-head) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important;
  gap: clamp(20px, 2vw, 28px) !important;
}
.ability {
  padding: clamp(28px, 3vw, 40px) !important;
  border-radius: var(--radius-lg) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ability::before {
  content: '';
  position: absolute; inset: -1px;
  z-index: -1;
  background: conic-gradient(from 180deg at 50% 50%,
    oklch(67% 0.22 305 / 0) 0deg,
    oklch(67% 0.22 305 / 40%) 90deg,
    oklch(82% 0.15 195 / 0) 180deg,
    oklch(67% 0.22 305 / 40%) 270deg,
    oklch(67% 0.22 305 / 0) 360deg);
  opacity: 0;
  border-radius: inherit;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  animation: v5-rot 8s linear infinite;
  animation-play-state: paused;
  transition: opacity 600ms var(--ease);
}
.ability:hover::before { opacity: 1; animation-play-state: running; }
@keyframes v5-rot { to { transform: rotate(360deg); } }
.ability:hover {
  box-shadow:
    0 40px 80px -20px oklch(0% 0 0 / 75%),
    0 0 80px -20px oklch(67% 0.22 305 / 35%) !important;
}


/* ── PRICING — middle tier выделение через ::before (не ::after — конфликт с bezel inner-core) ── */
.price:nth-child(2)::before {
  content: 'Популярный';
  position: absolute; top: 14px; right: 14px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(8% 0.02 290);
  background: var(--okko-2);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── FEATURED CASE Звук — больше depth ── */
.featured-frame {
  background: linear-gradient(180deg, oklch(15% 0.05 290 / 80%) 0%, oklch(9% 0.02 290 / 95%) 100%) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(2.5rem, 5vw, 4.5rem) !important;
  position: relative;
  overflow: hidden;
}
.featured-frame::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, oklch(67% 0.22 305 / 14%) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 100%, oklch(82% 0.15 195 / 10%) 0%, transparent 50%);
  pointer-events: none;
}
.featured-frame > * { position: relative; z-index: 1; }

/* ── HERO DEVICE — больше depth ── */
.hero-device-inner {
  transform: perspective(2000px) rotateX(8deg) !important;
  transform-origin: center top;
}

/* ── BUTTON magnetic — premium glow ── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, oklch(95% 0.05 305 / 30%) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

/* ── NAV — extra glass ── */
.nav.is-scrolled {
  background: oklch(8% 0.02 290 / 78%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

/* ── Trust strip — крупнее цифры ── */
.hero-trust strong {
  font-size: clamp(1.25rem, 2vw, 1.625rem) !important;
  background: linear-gradient(135deg, var(--text), var(--text-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Lead-form — premium ── */
.contact-card {
  background: linear-gradient(180deg, oklch(15% 0.05 290 / 80%) 0%, oklch(10% 0.025 290 / 90%) 100%) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(3rem, 6vw, 5rem) !important;
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 90deg at 50% 50%,
    oklch(67% 0.22 305 / 0) 0deg,
    oklch(67% 0.22 305 / 50%) 90deg,
    oklch(82% 0.15 195 / 0) 180deg,
    oklch(67% 0.22 305 / 50%) 270deg,
    oklch(67% 0.22 305 / 0) 360deg);
  padding: 1px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: v5-rot 20s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
.contact-card > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   V5 — CINEMATIC LAYER: page-load intro, ambient background mesh,
   section colour-grading, premium depth, magnetic hover, drama.
   ═══════════════════════════════════════════════════════════════ */

/* ── PAGE-LOAD INTRO ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--bg);
  pointer-events: none;
  animation: v5-intro-fade 1.4s var(--ease-2) 0.1s forwards;
}
body::after {
  content: '';
  position: fixed; top: 50%; left: 50%;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  z-index: 10000;
  border-radius: 18px;
  background: conic-gradient(from 0deg, var(--okko) 0deg, oklch(82% 0.15 195) 180deg, var(--okko-3) 360deg);
  filter: blur(0.5px);
  pointer-events: none;
  animation:
    v5-intro-logo 1.4s var(--ease-2) forwards,
    v5-intro-spin 1.4s linear forwards;
}
@keyframes v5-intro-fade {
  0%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes v5-intro-logo {
  0%   { transform: scale(0.5); opacity: 0; }
  30%  { transform: scale(1.0); opacity: 1; }
  70%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes v5-intro-spin {
  to { rotate: 540deg; }
}

/* ── AMBIENT MESH BG (фиксированный, через всю страницу) ── */
.noise {
  background-image:
    radial-gradient(ellipse 1200px 800px at 15% 20%, oklch(20% 0.10 305 / 35%) 0%, transparent 50%),
    radial-gradient(ellipse 1000px 600px at 85% 70%, oklch(18% 0.12 200 / 30%) 0%, transparent 50%),
    radial-gradient(ellipse 800px 500px at 50% 50%, oklch(18% 0.10 280 / 20%) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 200px 200px !important;
  background-attachment: fixed !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: v5-mesh-drift 30s var(--ease) infinite alternate;
}
@keyframes v5-mesh-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  100% { background-position: 10% 5%, 90% 95%, 55% 45%, 50px 50px; }
}

/* ── SECTION COLOR-GRADING (мягкий hue cast per section) ── */
.platform { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.04 305 / 40%) 50%, transparent 100%); }
.examples, #cases { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.05 250 / 40%) 50%, transparent 100%); }
#zvuk { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.06 195 / 30%) 50%, transparent 100%); }
#pricing { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.04 295 / 30%) 50%, transparent 100%); }
#contact { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.06 305 / 50%) 100%); }

/* ── PREMIUM CARD DEPTH — multi-layer shadows (price без bezel) ── */
.ability, .case, .step, .fact, .ui-mock, .featured-frame, .contact-card {
  box-shadow:
    0 1px 0 oklch(98% 0 0 / 4%) inset,
    0 30px 60px -25px oklch(0% 0 0 / 60%),
    0 12px 24px -12px oklch(0% 0 0 / 40%) !important;
}
.price {
  box-shadow:
    0 20px 40px -16px oklch(0% 0 0 / 50%) !important;
}
.ability:hover, .case:hover, .price:hover, .step:hover, .fact:hover {
  box-shadow:
    0 1px 0 oklch(98% 0 0 / 8%) inset,
    0 40px 80px -20px oklch(0% 0 0 / 75%),
    0 0 100px -20px oklch(67% 0.22 305 / 35%),
    0 0 0 1px oklch(78% 0.18 295 / 25%) !important;
}

/* ── MAGNETIC HOVER GLOW на CTA ── */
.btn.magnetic, .nav-cta {
  position: relative;
  overflow: hidden;
}
.btn-primary.magnetic::before {
  content: '';
  position: absolute; inset: -2px;
  background: conic-gradient(from var(--g-angle, 0deg),
    oklch(78% 0.18 295) 0deg,
    oklch(82% 0.15 195) 120deg,
    oklch(58% 0.23 308) 240deg,
    oklch(78% 0.18 295) 360deg);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms var(--ease);
  animation: v5-rot 4s linear infinite;
  filter: blur(8px);
}
.btn-primary.magnetic:hover::before { opacity: 0.8; }

/* ── ENHANCED TRUST NUMBERS ── */
.trust-item strong, .hero-meta-num, .fact-num {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  background: linear-gradient(135deg, var(--text) 0%, var(--okko-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  position: relative;
}

/* ── SECTION DIVIDER LINES — убраны (выглядели как пустые черты в воздухе) ── */

/* ── HERO CTAs — bigger drama ── */
.hero-cta .btn {
  padding: 16px 28px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

/* ── REVEAL — staggered with subtle scale ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985) !important;
  transition:
    opacity 1100ms var(--ease-2),
    transform 1100ms var(--ease-2) !important;
}
.reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ── FOOTER refinement ── */
.footer {
  position: relative;
  background: linear-gradient(180deg, oklch(8% 0.02 290) 0%, oklch(5% 0.01 290) 100%) !important;
}

/* ── CINEMATIC SCROLL CUE ── */
.scroll-hint {
  opacity: 0.5 !important;
  filter: drop-shadow(0 0 8px oklch(67% 0.22 305 / 50%));
}

/* ── PROGRESS bar at top of page ── */
.progress {
  background: linear-gradient(90deg, var(--okko-2), oklch(82% 0.15 195), var(--okko-3)) !important;
  height: 2px !important;
  box-shadow: 0 0 12px oklch(67% 0.22 305 / 60%);
}

/* ── MARQUEE — fade edges + premium ── */
.marquee {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* ── HERO DEVICE — glow halo ── */
.hero-device::before {
  content: '';
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, oklch(67% 0.22 305 / 25%) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  animation: v5-halo-pulse 6s var(--ease) infinite;
}
@keyframes v5-halo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ── BIG NUMBERS animations on scroll-into-view ── */
.trust-item, .hero-meta-item, .fact {
  animation: v5-num-pop 800ms var(--ease-2) backwards;
}
.reveal.is-in .trust-item:nth-child(odd)  { animation-delay: 100ms; }
.reveal.is-in .trust-item:nth-child(even) { animation-delay: 200ms; }
@keyframes v5-num-pop {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   V5 — POLISH PASS (impeccable)
   ═══════════════════════════════════════════════════════════════ */

/* ── INTRO loader: укоротить + сделать инертным ── */
body::before, body::after {
  pointer-events: none !important;
}
body::before {
  animation: v5-intro-fade 0.9s var(--ease-2) 0.05s forwards !important;
}
body::after {
  animation:
    v5-intro-logo 0.9s var(--ease-2) forwards,
    v5-intro-spin 0.9s linear forwards !important;
}

/* ── Trust numbers: убрать смазывание от font-smoothing на gradient text ── */
.trust-item strong, .hero-meta-num, .fact-num {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "ss01", "tnum" !important;
}

/* ── FOCUS-VISIBLE: видимый ring на интерактиве (a11y) ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
.btn:focus-visible, .pmc-toggle:focus-visible, .pmc-preset:focus-visible {
  outline: 2px solid var(--okko-2) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}

/* ── BACKDROP-FILTER fallback (Firefox старых версий) ── */
@supports not (backdrop-filter: blur(1px)) {
  .nav.is-scrolled,
  .pill,
  .btn-ghost,
  .nav-cta {
    background: oklch(8% 0.02 290 / 92%) !important;
  }
}

/* ── MOBILE: гасим тяжёлые эффекты для перф/читаемости ── */
@media (max-width: 720px) {
  /* Mesh bg — без animation на мобайле */
  .noise {
    animation: none !important;
    background-image:
      radial-gradient(ellipse 100% 60% at 50% 30%, oklch(20% 0.10 305 / 30%) 0%, transparent 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  }
  /* Hero CTA: компактнее */
  .hero-cta .btn {
    padding: 14px 22px !important;
    font-size: 0.9rem !important;
  }
  /* Conic border на ability и contact-card — отключим (тяжело) */
  .ability::before, .contact-card::before {
    display: none !important;
  }
  /* Card depth: облегчить */
  .ability, .case, .price, .step, .fact, .ui-mock {
    box-shadow:
      0 1px 0 oklch(98% 0 0 / 4%) inset,
      0 16px 32px -16px oklch(0% 0 0 / 55%) !important;
  }
  /* 3D blob hero — поменьше weight */
  .hero-canvas-3d {
    opacity: 0.3 !important;
  }
}

/* ── REDUCED-MOTION: все v5 cinematic эффекты гасим ── */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { display: none !important; }
  .noise { animation: none !important; }
  .ability::before, .contact-card::before { display: none !important; }
  .hero-device::before { animation: none !important; opacity: 0.4 !important; }
  .btn-primary.magnetic::before { display: none !important; }
  .gradient-text { animation: none !important; }
  .trust-item, .hero-meta-item, .fact { animation: none !important; }
  .hero-canvas-3d { display: none !important; }
}

/* ── Section divider убраны — болтались как пустые черты в воздухе ── */

/* ── Hero-eyebrow pill: чуть компактнее, ровный capsule ── */
.pill {
  padding: 8px 18px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.1em !important;
}

/* ── Heading optical centering: убрать orphan widows ── */
h1, h2, h3, .hero-title, .section-title, .featured-title {
  text-wrap: balance !important;
}
p, .section-sub, .featured-lead, .hero-sub {
  text-wrap: pretty;
}

/* ── Input invalid state ── */
.lead-form input:invalid:not(:placeholder-shown),
.lead-form textarea:invalid:not(:placeholder-shown) {
  border-color: oklch(70% 0.22 25) !important;
}

/* ── Selection color refinement ── */
::selection {
  background: oklch(67% 0.22 305 / 90%) !important;
  color: oklch(99% 0 0) !important;
  text-shadow: none;
}

/* ── Scroll-bar refinement (Webkit/Chromium) ── */
::-webkit-scrollbar {
  width: 10px;
  background: oklch(8% 0.02 290);
}
::-webkit-scrollbar-thumb {
  background: oklch(20% 0.06 290);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: oklch(28% 0.08 290); }

/* ── Hero-device on mobile — без 3D tilt (лучше читается) ── */
@media (max-width: 720px) {
  .hero-device-inner {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   V5 — EMIL DESIGN ENG + GPT TASTE LAYER
   Emil: strong custom easings, button press feedback,
         specific transitions (not all), <200ms hover.
   gpt-taste: massive section padding, gapless dense grids,
              cinematic scale entrances.
   ═══════════════════════════════════════════════════════════════ */

/* ── EMIL: Strong custom easing curves (override v5 base) ── */
:root {
  --ease:    cubic-bezier(0.23, 1, 0.32, 1)   !important; /* Emil's strong ease-out */
  --ease-2:  cubic-bezier(0.77, 0, 0.175, 1)  !important; /* Emil's strong ease-in-out */
  --ease-3:  cubic-bezier(0.32, 0.72, 0, 1)   !important; /* iOS drawer */
  --ease-4:  cubic-bezier(0.4, 0, 0.2, 1)     !important;
}

/* ── EMIL: Button press feedback (every interactive button) ── */
.btn:active,
button:not(.pmc-toggle):active,
.nav-cta:active,
.lead-form button[type="submit"]:active {
  transform: scale(0.97) !important;
  transition: transform 80ms var(--ease) !important;
}

/* ── EMIL: Specific transition properties — never "all" ── */
.btn, .btn-primary, .btn-ghost, .nav-cta, .lead-form button[type="submit"] {
  transition:
    transform 160ms var(--ease),
    background 200ms var(--ease),
    box-shadow 200ms var(--ease),
    border-color 200ms var(--ease) !important;
}
.ability, .case, .price, .step, .fact, .ui-card, .ui-mock {
  transition:
    transform 280ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 280ms var(--ease) !important;
}
.pl-card, .pmc-preset, .pmc-toggle, .nav a {
  transition:
    transform 140ms var(--ease),
    background 160ms var(--ease),
    border-color 160ms var(--ease) !important;
}

/* ── EMIL: Hover scale + lift on interactive cards (subtle, not flashy) ── */
.case:hover, .price:hover, .step:hover, .fact:hover {
  transform: translate3d(0, -2px, 0) !important;
}
.pl-card:hover {
  transform: translate3d(0, -3px, 0) !important;
}

/* ── EMIL: Nothing appears from nothing (scale + opacity entrance) ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.97) !important;
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease) !important;
}
.reveal.is-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ── GPT-TASTE: section spacing — заметное, но не пустое ── */
section, .section {
  padding-top: clamp(5rem, 8vw, 7.5rem) !important;
  padding-bottom: clamp(5rem, 8vw, 7.5rem) !important;
}
/* FIX: правило `section` выше навешивает огромный clamp-padding на .pmc-section
   внутри модалки плеера (<section class="pmc-section">) — секции разъезжались на ~160px.
   Возвращаем компактный padding как было задумано в базовом style.css. */
.player-modal-controls .pmc-section {
  padding-top: 14px !important;
  padding-bottom: 0 !important;
}
.player-modal-controls .pmc-section:first-of-type {
  padding-top: 0 !important;
}
.hero { padding-top: clamp(7rem, 16vh, 11rem) !important; padding-bottom: clamp(4rem, 8vh, 6rem) !important; }
.marquee { padding-top: 0 !important; padding-bottom: 0 !important; }
.footer { padding-top: clamp(3.5rem, 6vw, 5rem) !important; }

/* ── GPT-TASTE: gapless dense bento grids ── */
.cases, .abilities-grid, .integration-flow, .pricing-grid, .featured-facts {
  grid-auto-flow: dense !important;
}

/* ── GPT-TASTE: section-head max-width — wider, breathes ── */
.section-head {
  max-width: 900px !important;
  margin: 0 auto clamp(3.5rem, 7vw, 6rem) !important;
}
.section-head h2 {
  margin-bottom: 18px !important;
}
/* Если section-sub удалён и h2 — последний в шапке, убираем нижний margin,
   чтобы не оставалось «дыры» под заголовком (секция Возможности). */
.section-head h2:last-child {
  margin-bottom: 0 !important;
}
.section-head .lead, .section-head .section-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
}

/* ── EMIL: Tight, fast hover for nav links (no slow fade) ── */
.nav a {
  transition: color 140ms var(--ease), background 140ms var(--ease) !important;
}

/* ── EMIL: Disable transitions when reveal first hits (no overshoot blur) ── */
.reveal:not(.is-in) {
  will-change: opacity, transform;
}

/* ── EMIL: Custom select / color input — chunky feedback ── */
#pmcColor {
  transition: transform 140ms var(--ease) !important;
}
#pmcColor:active { transform: scale(0.95) !important; }

/* ── EMIL: Modal backdrop fast appearance ── */
.player-modal {
  transition: opacity 220ms var(--ease) !important;
}
.player-modal-shell {
  transition: transform 240ms var(--ease) !important;
}

/* ── GPT-TASTE: refined hero CTA contrast guarantee ── */
.btn-primary {
  color: oklch(8% 0.02 290) !important;
  font-weight: 700 !important;
}
.btn-primary svg { color: currentColor !important; }
.btn-ghost {
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* ── EMIL: Pulse dot easing — softer ── */
.pulse, .pulse-dot::before, .ecom-rec, .live-status::before {
  animation-timing-function: var(--ease) !important;
}

/* ── EMIL: Eliminate transition: all leftovers from v4 на ключевых элементах ── */
.feature, .comp, .aud-card, .extra, .step {
  transition:
    transform 240ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 240ms var(--ease) !important;
}

/* ── GPT-TASTE: footer bigger breathing room ── */
.footer-inner {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
}

/* ── GPT-TASTE: Container max-width slightly wider (с явным auto-centering) ── */
.container {
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 32px) !important;
}
.nav-inner, .hero-inner {
  max-width: 1320px !important;
  margin-inline: auto !important;
}

/* ── EMIL: Better cursor — disable fixed weird positioning glitches ── */
.cursor-ring {
  transition:
    width 200ms var(--ease),
    height 200ms var(--ease),
    border-color 200ms var(--ease) !important;
}

/* ═══════════════════════════════════════════════════════════════
   V5 — IMPECCABLE LAYOUT PASS
   Rhythm через контраст: tight groupings + generous separations.
   4pt spacing scale. Сильнее hierarchy (size+weight+space).
   Break card-grid монотонии.
   ═══════════════════════════════════════════════════════════════ */

/* ── SEMANTIC SPACING SCALE (4pt base) ── */
:root {
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
}

/* ── HERO RHYTHM: tight грейды между близкими, generous между группами ── */
.hero-inner {
  gap: var(--s-7) !important; /* fluid not relied — used for flex children */
}
.pill { margin-bottom: var(--s-5) !important; }
.hero-title { margin-bottom: var(--s-6) !important; }
.hero-sub { margin-bottom: var(--s-7) !important; }
.hero-cta { gap: var(--s-3) !important; margin-bottom: var(--s-8) !important; }
.hero-trust { gap: clamp(20px, 4vw, 56px) !important; margin-bottom: clamp(48px, 8vw, 96px) !important; }

/* ── HERO TRUST: tighter siblings ── */
.trust-item {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-1) !important;
}
.trust-divider {
  width: 1px !important;
  background: linear-gradient(180deg, transparent, var(--border), transparent) !important;
}

/* ── ABILITIES: оставляем v4 stacked vertical layout (icon слева, text справа) ── */
/* Просто убираем мой max-width 38ch на p чтобы текст заполнял правую колонку */
.ability-body {
  flex: 1 1 auto !important;
  min-width: 0;
}
.ability p {
  max-width: none !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   V5 — IMPECCABLE QUIETER PASS
   Убираем все decorative animations.
   3D blob + glass nav + palette = stay (core POV).
   Conic rotating borders / halo pulse / magnetic glow / entry blur / intro loader / mesh drift / gradient shift = OFF.
   ═══════════════════════════════════════════════════════════════ */

/* ── REMOVE decorative rotating conic borders ── */
.ability::before,
.contact-card::before,
.btn-primary.magnetic::before {
  display: none !important;
}

/* ── REMOVE halo pulse под hero-device ── */
.hero-device::before {
  display: none !important;
}

/* ── REMOVE gradient-text animation (статичный gradient) ── */
.gradient-text {
  animation: none !important;
  background-size: 100% 100% !important;
}

/* ── REMOVE entry-blur (только opacity + translate) ── */
.reveal {
  filter: none !important;
  opacity: 0;
  transform: translate3d(0, 16px, 0) !important; /* меньше distance: 32px → 16px */
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease) !important;
}
.reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ── REMOVE intro loader entirely ── */
body::before,
body::after {
  display: none !important;
}

/* ── 3D network-graph — центр, не right edge ──
   Hero — flex justify-content:center, и Chrome игнорит inset на absolute child.
   Нужны explicit top/right/bottom/left + width:auto (driven by left/right). */
.hero-canvas-3d {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 0.55 !important;
  z-index: 0 !important;
}

/* ── Ambient mesh bg — БЕЗ animation (drift убран), opacity ниже ── */
.noise {
  animation: none !important;
  opacity: 0.5 !important;
}

/* ── Hover lift менее агрессивен (2px → 1px) ── */
.case:hover, .price:hover, .step:hover, .fact:hover {
  transform: translate3d(0, -1px, 0) !important;
}
.pl-card:hover {
  transform: translate3d(0, -2px, 0) !important;
}

/* ── Card hover glow softer (убрать second-shadow brand-glow) ── */
.ability:hover, .case:hover, .step:hover, .fact:hover {
  box-shadow:
    0 1px 0 oklch(98% 0 0 / 6%) inset,
    0 28px 56px -20px oklch(0% 0 0 / 65%) !important;
}

/* ── Glass nav backdrop-blur — softer (24 → 16, saturate 160 → 130) ── */
.nav.is-scrolled {
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

/* ── Pulse dots — без glow shadow (просто dot) ── */
.eyebrow::before, .pill::before, .pulse {
  box-shadow: none !important;
  animation: none !important;
}

/* ── Section colour-grading — softer (alpha 14% → 8%) ── */
.platform { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.04 305 / 20%) 50%, transparent 100%) !important; }
.examples, #cases { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.05 250 / 20%) 50%, transparent 100%) !important; }
#zvuk { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.06 195 / 15%) 50%, transparent 100%) !important; }
#pricing { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.04 295 / 15%) 50%, transparent 100%) !important; }
#contact { background: linear-gradient(180deg, transparent 0%, oklch(11% 0.06 305 / 25%) 100%) !important; }

/* ── Live tracker, mp-tv-bar, mp-phone-track, ecom-rec — оставить (functional motion) ── */
/* (intentional — это showcase плеера и кейсов, не декорация) */

/* ── Marquee — без mask edges (cleaner) ── */
.marquee {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ── Trust numbers — solid soft color (без gradient text) ── */
.trust-item strong, .hero-meta-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* ── Scrollbar — даже тише ── */
::-webkit-scrollbar-thumb {
  background: oklch(18% 0.04 290) !important;
}
::-webkit-scrollbar-thumb:hover { background: oklch(24% 0.06 290) !important; }

/* ── btn-primary svg icon: hover микро-translate без scale-jump ── */
.btn-primary:hover svg.btn-icon,
.btn-primary:hover svg:last-child {
  transform: translate(2px, 0) !important; /* убрал -1px Y и scale 1.06 */
}

/* ═══════════════════════════════════════════════════════════════
   V5 — IMPECCABLE HARDEN PASS
   Edge case resilience: text overflow, long content, form states,
   network errors, accessibility resilience.
   ═══════════════════════════════════════════════════════════════ */

/* ── FLEX/GRID overflow protection ── */
.fact, .fact-body, .ability-body, .case-body, .price, .step,
.ui-copy, .featured-frame, .contact-card, .trust-item, .hero-meta-item {
  min-width: 0;
  min-height: 0;
}

/* ── LONG TEXT word-wrap (имена/title могут быть длинными) ──
   hyphens: manual (НЕ auto) — auto рубил слова посередине («ви-деоплатформе»).
   manual переносит только по явному &shy;, длинное слово уезжает на след. строку целиком.
   overflow-wrap оставляем как страховку от переполнения на узких экранах. */
.case h3, .price h3, .ability h3, .fact-body h3, .ui-copy h3,
.section-title, .featured-title, .hero-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: manual;
}
/* Заголовки кейсов — красивый баланс строк, перенос только между словами */
.featured-title {
  text-wrap: balance;
}

/* ── LINE CLAMP для potentially-long descriptions ── */
.case p, .price p, .step p, .fact-body p {
  display: -webkit-box;
  -webkit-line-clamp: 8; /* generous — обрежет только реально огромное */
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* ── LEAD FORM: validation states ── */
.lead-form input,
.lead-form textarea {
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
/* invalid после blur (не сразу при focus) */
.lead-form input:not(:focus):not(:placeholder-shown):invalid,
.lead-form textarea:not(:focus):not(:placeholder-shown):invalid {
  border-color: oklch(70% 0.22 25 / 60%) !important;
  background: oklch(20% 0.10 25 / 8%) !important;
}
/* valid после blur — субтильный green hint */
.lead-form input:not(:focus):not(:placeholder-shown):valid {
  border-color: oklch(60% 0.18 145 / 30%) !important;
}

/* ── SUBMIT BUTTON: disabled state когда form invalid ── */
.lead-form button[type="submit"]:disabled,
.lead-form button[type="submit"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* loading state */
.lead-form button[type="submit"].is-loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}
.lead-form button[type="submit"].is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid oklch(99% 0 0 / 25%);
  border-top-color: oklch(99% 0 0);
  border-radius: 50%;
  animation: harden-spin 0.8s linear infinite;
}
@keyframes harden-spin { to { transform: rotate(360deg); } }

/* ── FORM STATUS messages: error с recovery action ── */
.form-status {
  font-size: 0.875rem;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: opacity 200ms var(--ease);
}
.form-status.ok {
  background: oklch(20% 0.08 145 / 25%);
  color: oklch(80% 0.15 145);
  border: 1px solid oklch(50% 0.15 145 / 30%);
}
.form-status.err {
  background: oklch(25% 0.10 25 / 30%);
  color: oklch(82% 0.18 25);
  border: 1px solid oklch(60% 0.18 25 / 40%);
}

/* ── EMPTY/SKELETON states для плеера (если iframe не загрузился) ── */
.player-modal-frame iframe:not([src]),
.player-modal-frame iframe[src=""] {
  background:
    repeating-linear-gradient(45deg, oklch(11% 0.03 290) 0 12px, oklch(13% 0.04 290) 12px 24px) !important;
}

/* ── SKIP-TO-CONTENT link для keyboard users ── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--okko);
  color: oklch(99% 0 0);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-to-content:focus-visible {
  left: 8px;
  outline: 2px solid oklch(99% 0 0);
  outline-offset: 2px;
}

/* ── RESILIENT IMG: подменим broken alt при img error ── */
img {
  max-width: 100%;
  height: auto;
}
img:not([src]),
img[src=""] {
  background: linear-gradient(135deg, oklch(15% 0.04 290), oklch(10% 0.02 290));
  min-height: 60px;
}

/* ── PRINT-friendly fallback (на случай если кто-то печатает датлист) ── */
@media print {
  .hero-canvas-3d, .noise, .cursor, .cursor-ring, .cursor-dot, .progress,
  .player-modal, body::before, body::after { display: none !important; }
  body { background: white !important; color: black !important; }
  * { color: black !important; background: transparent !important; box-shadow: none !important; }
  a { color: black !important; text-decoration: underline; }
}

/* ── HIGH-CONTRAST mode support ── */
@media (prefers-contrast: more) {
  body { background: oklch(0% 0 0); color: oklch(100% 0 0); }
  .case, .price, .step, .ability, .fact { border-width: 2px !important; }
  .btn-primary { outline: 2px solid oklch(100% 0 0); }
}

/* ── 100dvh fix для iOS Safari (вместо 100vh с jumping toolbar) ── */
@supports (height: 100dvh) {
  .player-modal { height: 100dvh; }
}

/* ═══════════════════════════════════════════════════════════════
   V5 — STEP CARDS CLEANUP
   Убираем v4 артефакты: step-line (блуждающие прямоугольники)
   + step-num вернуть в v4 circle (mono inside circle уродский)
   ═══════════════════════════════════════════════════════════════ */

/* ── REMOVE step-line connecting lines (с bezel-cards смотрятся как мусор) ── */
.step-line {
  display: none !important;
}

/* ── STEP-NUM: вернуть к чистому v4 circle (mono-override смотрелся уродливо) ── */
.step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--okko-2), var(--okko)) !important;
  color: oklch(8% 0.02 290) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  flex-shrink: 0;
}
.step-num span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

/* ── STEP card: padding обеспечивает место для circle + content ── */
.step {
  padding: 0 !important;
  gap: 0 !important;
}
.step > * {
  padding-inline: clamp(20px, 2.5vw, 28px) !important;
  position: relative;
  z-index: 1;
}
.step > .step-num {
  margin: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 28px) 16px !important;
  padding: 0 !important;
}
.step > h3 {
  padding-top: 0 !important;
  margin-bottom: 8px !important;
}
.step > p {
  padding-bottom: clamp(24px, 3vw, 32px) !important;
}

/* ── PERF: defer 3D bundle на low-end + reduced-motion + mobile ── */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .hero-canvas-3d {
    display: none !important;
  }
}

/* ── Preconnect для CDN — добавлю в HTML ── */

/* ── Scroll-margin: при клике anchor-link не подныривать под sticky nav ── */
section[id], .lead-form, #leadForm {
  scroll-margin-top: 80px;
}
#contact, #leadForm {
  scroll-margin-top: 100px;
}

/* ── ABILITY card internal rhythm: visual → num → h3 → body (с правильными gap) ── */
.ability .ability-visual { margin-bottom: var(--s-5) !important; }
.ability-num { margin-bottom: var(--s-3) !important; }
.ability h3 {
  margin-bottom: var(--s-4) !important;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important; /* bigger — strong 3:1 vs body */
  letter-spacing: -0.03em !important;
}
.ability p {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  max-width: 38ch;
}

/* ── INTERFACE ui-card: уменьшить gap между текстом и mock на десктопе ── */
.ui-card {
  gap: clamp(2.5rem, 4vw, 4rem) !important;
  align-items: center !important;
}
.ui-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-4) !important;
}
.ui-copy h3 {
  font-size: clamp(1.875rem, 3vw, 2.5rem) !important; /* primary в этой секции */
  letter-spacing: -0.03em !important;
  margin-bottom: var(--s-2) !important;
}
.ui-label { margin-bottom: var(--s-2) !important; }
.ui-copy ul {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
}

/* ── CASES: чистый 2x2, первая чуть крупнее по тексту (без grid-спанов чтобы избежать orphan) ── */
.case h3 {
  font-size: clamp(1.5rem, 2vw, 1.875rem) !important;
  letter-spacing: -0.025em !important;
  margin-bottom: var(--s-3) !important;
}
.case p { line-height: 1.55 !important; max-width: 50ch; }

/* ── PRICING: внутренний rhythm ── */
.price {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-4) !important;
}
.price h3 {
  font-size: clamp(1.625rem, 2.2vw, 2rem) !important;
  margin-bottom: 0 !important;
}
.price-desc { margin-bottom: var(--s-4) !important; }
.price-features {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
}

/* ── INTEGRATION steps: компактнее, ровнее ── */
.integration-flow {
  gap: clamp(16px, 2vw, 24px) !important;
}
.step {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
  padding: var(--s-6) !important;
}
.step-num {
  font-size: var(--s-3) !important;
  margin-bottom: var(--s-2) !important;
}

/* ── FEATURED ZVUK: hero-style asymmetric breathing ── */
.featured-frame {
  padding-block: clamp(3rem, 6vw, 5rem) !important;
  padding-inline: clamp(2rem, 5vw, 4.5rem) !important;
}
.featured-eyebrow { margin-bottom: var(--s-4) !important; }
.featured-title { margin-bottom: var(--s-5) !important; }
.featured-lead { margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.featured-screens { margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.featured-facts {
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: stretch !important;
}

/* Compact section-head «Кейсы» — без подзаголовка, и плотно прижата к первому кейсу
   (иначе огромный gap между «Кейсы» и Okko-кейсом). */
.featured-cases-head {
  padding-top: clamp(60px, 7vw, 110px) !important;
  padding-bottom: 0 !important;
}
.featured-cases-head + .featured-case {
  padding-top: clamp(24px, 3vw, 48px) !important;
}

/* Если в кейсе ровно 2 фактовых блока (Okko-кейс), grid-layout превращаем в 2-column
   шириной до 880px и центрируем по горизонтали. Иначе 2 блока липли влево, 3-й столбец пустой. */
.featured-facts--pair {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 880px !important;
  margin-inline: auto !important;
}
/* fact должен растягиваться на всю высоту grid-row, чтобы пара выровнялась */
.featured-facts .fact {
  height: 100% !important;
}
.fact {
  gap: var(--s-3) !important;
  padding: var(--s-5) !important;
}
.fact-body h3 {
  font-size: 1.0625rem !important;
  margin-bottom: var(--s-2) !important;
  letter-spacing: -0.015em !important;
}
.fact-body p {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ── FEATURED OKKO: галерея скриншотов кинотеатра ── */
.featured-shots {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  justify-content: center;
  flex-wrap: nowrap;
}
.featured-shots .shot {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(132px, 15vw, 188px);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1), box-shadow 0.45s;
}
.featured-shots .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* лёгкий «веер» — крайние карточки чуть отклонены, центр приподнят */
.featured-shots .shot:nth-child(1) { transform: rotate(-5deg) translateY(10px); }
.featured-shots .shot:nth-child(2) { transform: rotate(-2.5deg) translateY(2px); }
.featured-shots .shot:nth-child(3) { transform: translateY(-6px) scale(1.04); z-index: 2; }
.featured-shots .shot:nth-child(4) { transform: rotate(2.5deg) translateY(2px); }
.featured-shots .shot:nth-child(5) { transform: rotate(5deg) translateY(10px); }
.featured-shots .shot:hover {
  transform: translateY(-12px) scale(1.06) rotate(0deg);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,0.7);
  z-index: 3;
}
@media (max-width: 720px) {
  .featured-shots {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-inline: calc(-1 * var(--s-5, 1rem));
    padding-inline: var(--s-5, 1rem);
  }
  .featured-shots .shot {
    width: 150px;
    scroll-snap-align: center;
    transform: none !important;
  }
}

/* ── CONTACT FORM rhythm ── */
.contact-card h2 { margin-bottom: var(--s-4) !important; }
.contact-card p { margin-bottom: var(--s-7) !important; }
.lead-form { gap: var(--s-3) !important; }

/* ── NAV: tighter ── */
.nav-inner { gap: var(--s-5) !important; }
.nav-links { gap: var(--s-1) !important; }
.nav-links a { padding: var(--s-2) var(--s-4) !important; }

/* ── FOOTER: больше дыхания ── */
.footer-inner { gap: var(--s-7) !important; }
.footer-top { gap: var(--s-7) !important; }
.footer-links { gap: var(--s-5) !important; }
.footer-bottom { padding-top: var(--s-5) !important; }

/* ── MARQUEE: компактная, но не нулевая ── */
.marquee { padding-block: var(--s-7) !important; }

/* ── Squint-test: убираем «карточные стены» с одинаковыми внутренностями ── */
/* (Это уже сделано через ассиметрию выше — first ability/case крупнее) */

/* ── Touch target a11y: все кнопки >= 44px ── */
.nav-links a,
.pmc-toggle,
.pmc-preset {
  min-height: 36px;
}
@media (hover: none), (pointer: coarse) {
  .nav-links a, .btn, .pmc-toggle, .nav-cta {
    min-height: 44px !important;
    min-width: 44px;
  }
}

/* ── FIX: пресеты цвета — РОВНЫЕ круги, не овалы.
   Раньше .pmc-preset width:24 + min-height:36 (touch-target) → 24×36 эллипс,
   а flex-контейнер ещё и растягивал по вертикали. Делаем равные стороны. ── */
.pmc-color-presets {
  align-items: center !important;
}
.pmc-preset {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
@media (hover: none), (pointer: coarse) {
  .pmc-preset {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* ── Первый «прямоугольник» — нативный input[type=color]. Чтобы было наглядно,
   что это выбор ЛЮБОГО цвета: радужное conic-кольцо вокруг текущего swatch. ── */
#pmcColor {
  width: 46px !important;
  height: 30px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #0a84ff, #5e5ce6, #ff2d55, #ff3b30) !important;
  box-shadow: 0 0 0 1px oklch(98% 0 0 / 22%) !important;
  cursor: pointer !important;
  transition: transform 140ms var(--ease) !important;
}
#pmcColor::-webkit-color-swatch-wrapper { padding: 0 !important; }
#pmcColor::-webkit-color-swatch {
  border: 2px solid oklch(9% 0.02 290) !important;
  border-radius: 5px !important;
}
#pmcColor:active { transform: scale(0.95) !important; }

/* ═══════════════════════════════════════════════════════════════
   V5 — HIGH-END VISUAL DESIGN (Vanguard UI Architect)
   Vibe: Ethereal Glass (SaaS/Tech) — OLED, radial mesh, vantablack
   cards, white/10 hairlines, Grotesk display. $150k agency feel.
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium Grotesk fonts (Inter banned) ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body,
:root {
  --font-display: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif !important;
}
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
h1, h2, h3, h4, .hero-title, .section-title, .featured-title,
.ability h3, .ui-copy h3, .case h3, .price h3, .step h3, .fact h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

/* ── DOUBLE-BEZEL (Doppelrand): outer shell + inner core
   .price УБРАН — конфликтовал с .price-icon (квадратные пустые боксы) ── */
.ability, .case, .step, .ui-mock, .featured-frame, .contact-card, .hero-device-inner, .fact {
  position: relative;
  /* Outer shell — subtle bg, hairline, bigger radius */
  padding: 6px !important;
  background:
    linear-gradient(180deg, oklch(98% 0 0 / 4%) 0%, oklch(98% 0 0 / 1.5%) 100%) !important;
  border: 1px solid oklch(98% 0 0 / 7%) !important;
  border-radius: 32px !important;
  box-shadow:
    0 1px 0 oklch(98% 0 0 / 5%) inset,
    0 24px 60px -20px oklch(0% 0 0 / 65%) !important;
}
/* Inner core — own bg, inset highlight, smaller radius */
.ability > :first-child:not(.ability-visual),
.ability-visual + *:first-of-type {
  /* no extra wrap — we use ::before for inner panel */
}
.ability::after,
.case::after,
.step::after,
.fact::after,
.ui-mock::after,
.featured-frame::after,
.contact-card::after,
.hero-device-inner::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 26px;
  background: linear-gradient(180deg, oklch(13% 0.035 290) 0%, oklch(9% 0.02 290) 100%);
  box-shadow:
    inset 0 1px 0 oklch(98% 0 0 / 12%),
    inset 0 -1px 0 oklch(0% 0 0 / 40%);
  z-index: 0;
  pointer-events: none;
}
/* Lift actual content above inner core */
.ability > *,
.case > *,
.step > *,
.fact > *,
.ui-mock > *,
.featured-frame > *,
.contact-card > *,
.hero-device-inner > * {
  position: relative;
  z-index: 1;
}
/* Все внутреннее padding теперь на children — outer/inner bezel сам не имеет внутреннего padding для контента
   .price УБРАН из bezel списка — v4 default padding 32px 28px остаётся */
.ability,
.case .case-body,
.step,
.fact,
.contact-card {
  padding: 6px !important;
}
.price {
  padding: 32px 28px !important;
}
.ability {
  padding: clamp(28px, 3vw, 40px) !important; /* keep — bezel padding overridden ниже */
}
/* Заставляем bezel padding строго 6px на outer и контент тогда внутри */
.ability { padding: 6px !important; }
.ability > * { padding-inline: clamp(28px, 3vw, 40px); }
.ability > .ability-visual { padding-top: clamp(28px, 3vw, 40px); padding-bottom: 0; }
.ability > :last-child { padding-bottom: clamp(28px, 3vw, 40px); }

.case { padding: 6px !important; }
.case .case-frame { margin: 0; border-radius: 26px !important; border: 0 !important; }
.case .case-body { padding: clamp(22px, 2.5vw, 32px) !important; }

/* .price padding оставлен v4-default — bezel конфликтовал с price-icon */

.step { padding: 6px !important; }
.step > * { padding-inline: clamp(20px, 2.5vw, 28px); }
.step > :first-child { padding-top: clamp(20px, 2.5vw, 28px); }
.step > :last-child { padding-bottom: clamp(20px, 2.5vw, 28px); }

.fact { padding: 6px !important; gap: 0 !important; display: flex !important; flex-direction: row !important; }
.fact > * { padding: clamp(14px, 1.8vw, 18px); }
.fact > .fact-num { padding-right: 0; }
.fact > .fact-body { flex: 1; padding-left: clamp(10px, 1.4vw, 14px); }

.featured-frame { padding: 8px !important; }
.featured-frame > * { padding-inline: clamp(2rem, 5vw, 4.5rem); }
.featured-frame > :first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }
.featured-frame > :last-child { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.contact-card { padding: 8px !important; }
.contact-card > * { padding-inline: clamp(2rem, 5vw, 4rem); }
.contact-card > :first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact-card > :last-child { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* hero-device-inner — inner core берёт всё содержимое */
.hero-device-inner { padding: 0 !important; }
.hero-device-inner > * { padding-block: 0; }
.hero-device-inner .browser-bar,
.hero-device-inner .admin-header,
.hero-device-inner .admin-body { position: relative; z-index: 1; }

/* ui-mock — bezel external */
.ui-mock {
  padding: 6px !important;
  overflow: hidden;
}
.ui-mock .browser {
  position: relative;
  z-index: 1;
  border-radius: 26px !important;
  overflow: hidden;
}
.ui-mock::after { inset: 6px; border-radius: 26px; }

/* ── BUTTON-IN-BUTTON: arrow icon в собственном круглом wrapper ── */
.btn-primary {
  padding-right: 6px !important; /* prep для nested icon */
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
.btn-primary svg.btn-icon,
.btn-primary svg:last-child {
  width: 28px !important;
  height: 28px !important;
  padding: 7px;
  border-radius: 50%;
  background: oklch(0% 0 0 / 18%);
  box-sizing: border-box;
  transition: transform 200ms var(--ease), background 200ms var(--ease) !important;
}
.btn-primary:hover svg.btn-icon,
.btn-primary:hover svg:last-child {
  transform: translate(2px, -1px) scale(1.06);
  background: oklch(0% 0 0 / 30%);
}

/* ── ENTRY: blur добавлен в reveal (high-end signature) ── */
.reveal {
  filter: blur(4px) !important;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985) !important;
  transition:
    opacity 800ms var(--ease),
    transform 800ms var(--ease),
    filter 800ms var(--ease) !important;
}
.reveal.is-in {
  filter: blur(0) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── HAIRLINES: white/7 на всех бордерах (high-end signature) ── */
.case-frame {
  border-radius: 26px 26px 0 0 !important;
  border-bottom: 1px solid oklch(98% 0 0 / 7%) !important;
}

/* ── NAV: edge-to-edge с glass-pill эффектом при скролле (не плавающий island, чтобы не уезжал) ── */
.nav.is-scrolled {
  background: oklch(8% 0.02 290 / 78%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid oklch(98% 0 0 / 8%) !important;
}
.nav-cta {
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: oklch(98% 0 0 / 8%) !important;
  border: 1px solid oklch(98% 0 0 / 8%) !important;
}

/* ── SAFE z-index discipline ── */
.nav { z-index: 60 !important; }
.cursor-ring, .cursor-dot, .cursor { z-index: 90 !important; }
.player-modal { z-index: 100 !important; }

/* ── DISABLE backdrop-blur on non-fixed elements (perf) ── */
.pill {
  background: oklch(98% 0 0 / 4%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid oklch(98% 0 0 / 7%) !important;
}
.btn-ghost {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── MOBILE collapse for Double-Bezel (тяжело на мобайле, .price без bezel) ── */
@media (max-width: 720px) {
  .ability, .case, .step, .ui-mock, .featured-frame, .contact-card, .fact {
    padding: 4px !important;
    border-radius: 24px !important;
  }
  .ability::after, .case::after, .step::after, .fact::after,
  .ui-mock::after, .featured-frame::after, .contact-card::after {
    inset: 4px !important;
    border-radius: 20px !important;
  }
  .nav {
    top: 12px !important;
    padding: 6px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   V5 — IMPECCABLE BOLDER PASS
   Distinctive через scale + weight contrast + committed POV.
   Reject AI slop: режем избыток cyan/purple gradient и glassmorphism.
   Не "more effects" — а одна сильная позиция.
   ═══════════════════════════════════════════════════════════════ */

/* ── SCALE JUMP — hero крупный, но без overflow ── */
.hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}
.hero-title .word { font-weight: 800 !important; }
.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.1875rem) !important;
  font-weight: 400 !important;
  color: var(--text-2) !important;
  letter-spacing: -0.005em !important;
  max-width: 60ch;
}

/* Section titles — крупно но компактнее */
.section-title, .featured-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

/* ── gradient-text в section-titles оставлен из v5-base (выглядел нормально, solid color делал двухцветные заголовки уродливо) ── */

/* ── COMMITTED DOMINANT COLOR — deep purple owns 60% ── */
.btn-primary {
  background: var(--okko) !important;
  color: oklch(99% 0 0) !important;
  border: 0 !important;
}
.btn-primary svg.btn-icon,
.btn-primary svg:last-child {
  background: oklch(99% 0 0 / 12%) !important;
  color: oklch(99% 0 0) !important;
}
.btn-primary:hover {
  background: var(--okko-2) !important;
}

/* ── REJECT AI SLOP: убираем conic-rotating borders (это AI slop декорация) ── */
.ability::before,
.contact-card::before,
.btn-primary.magnetic::before {
  display: none !important;
}

/* ── REJECT AI SLOP: убираем halo pulse на hero-device — не нужно ── */
.hero-device::before {
  display: none !important;
}

/* ── REJECT AI SLOP: hero blob — уменьшим до edge accent (не bg-feature) ── */
.hero-canvas-3d {
  opacity: 0.22 !important;
  /* Position right side only, не overlay весь hero */
  left: auto !important;
  right: 0 !important;
  width: 55% !important;
}

/* ── section-head оставляем центрированным (asymmetric break — была плохая идея) ── */

/* ── EYEBROW: убрать pill background — оставить плоскую mono метку (less AI) ── */
.eyebrow, .pill {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--okko-2) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.eyebrow::before, .pill::before, .pulse {
  width: 8px !important;
  height: 8px !important;
  background: var(--okko) !important;
  box-shadow: 0 0 12px var(--okko-2);
  border-radius: 50%;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 10px;
  animation: v5-pulse 2s ease-in-out infinite;
}

/* ── BIGGER FACT NUMBERS in Zvuk кейс — visual rhythm ── */
.fact-num {
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  font-weight: 200 !important;  /* thin для contrast с 800 fact-body h3 */
  color: var(--okko-3) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--okko-3) !important;
  line-height: 0.9;
}

/* ── BIGGER STEP NUMBERS в integration — same trick ── */
.step-num {
  font-size: 1.125rem !important;
  font-weight: 200 !important;
  color: var(--okko-3) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace !important;
}

/* pricing tier #2 commitment откатан (ломал контент-overlay внутри bezel) */

/* ── REMOVE 3D-tilt на ui-mock — выглядел как AI-default ── */
.ui-mock {
  transform: none !important;
}
.ui-card.reverse .ui-mock { transform: none !important; }
.ui-mock:hover { transform: none !important; }

/* ── BOLDER TYPOGRAPHY: heading weight 200 paired with 900 (extreme weight contrast) ── */
.ability h3, .case h3, .ui-copy h3, .featured-title, .section-title {
  font-weight: 800 !important;
}
.fact-body h3 {
  font-weight: 700 !important;
}
.ability p, .case p, .ui-copy ul li, .step p, .fact-body p, .price-features li {
  font-weight: 400 !important;
}

/* ── REJECT AI: убираем text-shadow на selection ── */
::selection { text-shadow: none !important; }

/* ── BOLDER: hero-meta numbers — без gradient-text (solid цвет) ── */
.trust-item strong, .hero-meta-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}
.trust-item span, .hero-meta-label {
  color: var(--text-3) !important;
  font-weight: 400 !important;
}