/* Лендинг «Опоры» (главная). Макет: Figma kVMiIYLImWNRISxfsnr9If, страница Landing (Desktop «Лёд» 53:1682, Mobile 53:2412,
 * «Ночь» 53:7059). Цвета, тени, скругления — только var(--opora-…) из ds/tokens.css (сторож tests/guards.test.mjs).
 * Тёмные секции («Знакомо?») и символ — через data-theme="dark" на элементе: токены «Ночи» действуют внутри него.
 * Движение: только transform/opacity (+ stroke-dashoffset графика в телефоне); класс .motion ставит landing-boot.js,
 * если нет prefers-reduced-motion. Без .motion всё стоит в конечном состоянии. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.lp { display: block; background: var(--opora-bg-canvas); background-image: none; overflow-x: clip; }
.lp .skip { position: fixed; z-index: 60; }
.lp-main { width: 100%; }
.lp-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- типографика ---------- */
.lp-h1 { font: 600 60px/1.08 var(--opora-font); letter-spacing: -1.2px; color: var(--opora-text-primary); text-wrap: balance; }
.lp-h2 { font: 600 44px/1.12 var(--opora-font); letter-spacing: -0.66px; color: var(--opora-text-primary); text-wrap: balance; }
.lp-h3 { font: 600 18px/24px var(--opora-font); color: var(--opora-text-primary); }
.lp-h3-l { font-size: 22px; line-height: 28px; letter-spacing: -0.2px; }
.lp-h3-xl { font-size: 28px; line-height: 34px; letter-spacing: -0.4px; }
.lp-lead { font: 400 20px/1.5 var(--opora-font); color: var(--opora-text-secondary); max-width: 640px; }
.lp-text { font: 400 15px/22px var(--opora-font); color: var(--opora-text-secondary); }
.lp-text-strong { font: 400 15px/22px var(--opora-font); color: var(--opora-text-primary); }
.lp-micro { font: 400 13px/18px var(--opora-font); color: var(--opora-text-secondary); }
.lp-micro-accent { color: var(--opora-text-accent); }
.lp-overline { font: 500 15px/20px var(--opora-font); color: var(--opora-text-accent); }
.lp-caption { font: 400 11px/14px var(--opora-font); letter-spacing: 0.2px; color: var(--opora-text-secondary); }
.lp-label { font: 500 13px/16px var(--opora-font); color: var(--opora-text-accent); }
.lp-note { font: 400 15px/24px var(--opora-font); color: var(--opora-text-secondary); max-width: 620px; }
.lp-note-strong { color: var(--opora-text-primary); }

/* ---------- кнопки ---------- */
.lp .btn.lp-btn { width: auto; gap: var(--opora-space-8); transition: translate .25s ease, scale .2s ease, opacity .2s ease; }
.lp-btn-l { min-height: 52px; padding: var(--opora-space-16) var(--opora-space-24); }
.lp-btn-s { min-height: var(--opora-size-touch); padding: var(--opora-space-8) var(--opora-space-16); font-size: 13px; line-height: 16px; }
.lp-btn-inverse { background: var(--opora-bg-knob); color: var(--opora-text-on-warning); box-shadow: var(--opora-shadow-floating); }
.lp-arrow { flex: none; transition: translate .25s ease; }
@media (hover: hover) {
  .lp .btn.lp-btn:hover { translate: 0 -2px; }
  .lp .btn.lp-btn:hover .lp-arrow { translate: 2px -2px; }
}
.lp .btn.lp-btn:active { scale: .98; }

/* ---------- шапка: липкая, стекло после прокрутки ---------- */
.site-header.lp-header { position: fixed; inset: 0 0 auto 0; z-index: 50; max-width: none; width: 100%; padding: 0; min-height: 0; display: block; }
.lp-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--opora-bg-nav); border-bottom: var(--opora-stroke-hairline) solid var(--opora-border-glass);
  backdrop-filter: blur(var(--opora-blur-nav)); -webkit-backdrop-filter: blur(var(--opora-blur-nav));
  box-shadow: var(--opora-shadow-glass-nav);
  opacity: 0; transition: opacity .3s ease;
}
.lp-header.is-scrolled::before { opacity: 1; }
.lp-header-in { width: min(1200px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: var(--opora-space-24); padding: var(--opora-space-16) 0; }
.lp-brand { gap: var(--opora-space-8); color: var(--opora-text-primary); }
.lp-brand img { width: 32px; height: 32px; }
.lp-wordmark { display: block; width: 66px; height: auto; color: var(--opora-text-primary); }
.lp-brand-name { font: 600 24px/1 var(--opora-font); letter-spacing: -0.5px; }
.lp-switch {
  position: relative; display: flex; gap: var(--opora-space-4); padding: var(--opora-space-4); width: 300px; margin-inline: auto;
  border-radius: var(--opora-radius-full); background: var(--opora-bg-glass); border: var(--opora-stroke-hairline) solid var(--opora-border-glass);
  backdrop-filter: blur(var(--opora-blur-card)); -webkit-backdrop-filter: blur(var(--opora-blur-card));
}
.lp-switch::before {
  content: ""; position: absolute; top: var(--opora-space-4); left: var(--opora-space-4); bottom: var(--opora-space-4); width: calc(50% - 6px);
  border-radius: var(--opora-radius-full); background: var(--opora-bg-accent); box-shadow: var(--opora-glow-accent);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.lp-switch[data-active="pro"]::before { transform: translateX(calc(100% + 4px)); }
.lp-seg {
  position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--opora-size-touch);
  border-radius: var(--opora-radius-full); font: 500 13px/16px var(--opora-font); letter-spacing: .1px; color: var(--opora-text-secondary);
  text-decoration: none; transition: color .25s ease;
}
.lp-seg.is-active { color: var(--opora-text-on-accent); }
.lp-sos-link { display: inline-flex; align-items: center; min-height: var(--opora-size-touch); padding: 0 var(--opora-space-4); font: 500 15px/20px var(--opora-font); color: var(--opora-text-danger); text-decoration: none; white-space: nowrap; }
.lp-sos-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp .btn.lp-head-cta { font-size: 13px; line-height: 16px; white-space: nowrap; }
.lp-head-cta[data-for="pro"] { display: none; }
body[data-branch="pro"] .lp-head-cta[data-for="pro"] { display: inline-flex; }
body[data-branch="pro"] .lp-head-cta[data-for="self"] { display: none; }

/* ---------- секции ---------- */
.lp-sec { padding: 96px 0; }
.lp-bg-canvas { background: var(--opora-bg-canvas); }
.lp-bg-alt { background: var(--opora-bg-canvas-alt); }
.lp-bg-surface { background: var(--opora-bg-surface); }
.lp-head { display: flex; flex-direction: column; gap: var(--opora-space-16); margin-bottom: var(--opora-space-48); }
.lp-head-row { display: flex; align-items: center; gap: 64px; margin-bottom: var(--opora-space-48); }
.lp-head-row .lp-head { flex: 1; margin-bottom: 0; }
.lp-illu { flex: none; width: 440px; aspect-ratio: 440 / 300; border-radius: var(--opora-radius-xl); overflow: hidden; background: var(--opora-bg-surface); }
.lp-illu img, .lp-scene img, .lp-loop img, .lp-pro-visual img, .lp-miniapp-shots img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-split { display: grid; grid-template-columns: 520px 1fr; gap: 80px; align-items: center; }
.lp-split-wide { grid-template-columns: 560px 1fr; }
.lp-prose { display: flex; flex-direction: column; gap: 20px; }
.lp-prose > p:not([class]) { font: 400 17px/1.6 var(--opora-font); color: var(--opora-text-secondary); }
.lp-prose-light { gap: var(--opora-space-12); }
.lp-prose-light .lp-lead { margin-bottom: var(--opora-space-12); }
.lp-prose-light .lp-h3 { margin-top: var(--opora-space-12); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--opora-space-12); }
.lp-actions-row { margin-top: var(--opora-space-48); }
.lp-notes { margin-top: var(--opora-space-48); display: flex; flex-direction: column; gap: var(--opora-space-8); }
#inside .lp-note, #program > .lp-wrap > .lp-micro, #pro-offer .lp-note { margin-top: var(--opora-space-48); }

/* ---------- сетки и карточки ---------- */
.lp-grid { display: grid; gap: var(--opora-space-24); list-style: none; margin: 0; padding: 0; }
.lp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lp-limits { grid-template-columns: repeat(6, 1fr); }
.lp-limits > li { grid-column: span 2; }
.lp-limits > .lp-span-half { grid-column: span 3; }
.lp-data-sos { margin-top: var(--opora-space-48); }
.lp-card { position: relative; border-radius: var(--opora-radius-xl); padding: 28px; display: flex; flex-direction: column; gap: var(--opora-space-12); transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.lp-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--opora-shadow-floating); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@media (hover: hover) {
  .lp-grid > .lp-card:hover, .lp-grid > li.lp-card:hover { translate: 0 -4px; }
  .lp-grid > .lp-card:hover::after { opacity: 1; }
}
.lp-solid { background: var(--opora-bg-surface); box-shadow: var(--opora-shadow-glass-card); }
.lp-danger { background: var(--opora-bg-danger-soft); border: var(--opora-stroke-hairline) solid var(--opora-border-danger); }
.lp-qa { padding: 24px; gap: var(--opora-space-8); }
.lp-step-num { font: 400 36px/40px var(--opora-font); letter-spacing: -0.8px; color: var(--opora-text-accent); }
.lp-feature .lp-tag { margin-top: auto; }
.lp-feature .lp-h3 { margin-top: var(--opora-space-4); }
.lp-tag {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 6px var(--opora-space-12); border-radius: var(--opora-radius-full);
  background: var(--opora-bg-glass-strong); border: var(--opora-stroke-hairline) solid var(--opora-border-glass);
  font: 500 13px/16px var(--opora-font); color: var(--opora-text-primary);
}
.lp-tag-accent { background: var(--opora-bg-accent); border-color: var(--opora-bg-accent); color: var(--opora-text-on-accent); }
.lp-tag-solid { background: var(--opora-bg-surface); }
.lp-solid .lp-tag:not(.lp-tag-accent), .lp-miniapp .lp-tag { background: var(--opora-bg-accent-soft); border-color: var(--opora-bg-accent-soft); }
.lp-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--opora-radius-full);
  background: var(--opora-bg-glass-strong); border: var(--opora-stroke-hairline) solid var(--opora-border-glass); color: var(--opora-icon-primary);
  box-shadow: var(--opora-shadow-glass-card);
}
.lp-icon svg { width: 20px; height: 20px; }
.lp-icon-accent { background: var(--opora-bg-accent); border-color: var(--opora-bg-accent); color: var(--opora-icon-on-accent); }
.lp-icon-danger { color: var(--opora-icon-danger); border-color: var(--opora-border-danger); background: var(--opora-bg-surface); }
.lp-links { display: flex; flex-direction: column; }
.lp-links a { display: flex; align-items: center; min-height: var(--opora-size-touch); font: 500 15px/20px var(--opora-font); color: var(--opora-text-accent); text-decoration: none; }
.lp-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- первый экран ---------- */
.lp-hero { position: relative; overflow: hidden; padding: 132px 0 96px; isolation: isolate; }
.lp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--opora-bg-canvas); }
.lp-hero-bg-img {
  position: absolute; inset: -4%; background-size: cover; background-position: right center; background-repeat: no-repeat;
  background-image: url("/assets/landing/hero-ice.webp");
  background-image: image-set(url("/assets/landing/hero-ice.avif") type("image/avif"), url("/assets/landing/hero-ice.webp") type("image/webp"));
}
:root[data-theme="dark"] .lp-hero-bg-img {
  background-image: url("/assets/landing/hero-night.webp");
  background-image: image-set(url("/assets/landing/hero-night.avif") type("image/avif"), url("/assets/landing/hero-night.webp") type("image/webp"));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-hero-bg-img {
    background-image: url("/assets/landing/hero-night.webp");
    background-image: image-set(url("/assets/landing/hero-night.avif") type("image/avif"), url("/assets/landing/hero-night.webp") type("image/webp"));
  }
}
.lp-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; }
.lp-hero-text { display: flex; flex-direction: column; gap: var(--opora-space-24); align-items: flex-start; }
.lp-hero-visual { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--opora-space-12); }
.lp-hero-symbol { position: absolute; left: -150px; top: 640px; width: 150px; height: 150px; }

/* символ «точка опоры»: шар парит над чашей, блик скользит */
.lp-symbol {
  display: flex; align-items: center; justify-content: center; border-radius: var(--opora-radius-full);
  background: var(--opora-bg-glass-strong); border: var(--opora-stroke-hairline) solid var(--opora-border-glass);
  box-shadow: var(--opora-shadow-floating); backdrop-filter: blur(var(--opora-blur-card)); -webkit-backdrop-filter: blur(var(--opora-blur-card));
}
.lp-symbol-s { width: 120px; height: 120px; }
.sym { width: 82%; height: 82%; overflow: visible; }
.sym-s-hi { stop-color: var(--opora-bg-knob); }
.sym-s-mid { stop-color: var(--opora-bg-accent); }
.sym-s-deep { stop-color: var(--opora-bg-surface); }
.sym-rim { fill: none; stroke: var(--opora-bg-knob); stroke-opacity: .55; stroke-width: 1.2; }
.sym-shadow { fill: var(--opora-bg-canvas); opacity: .35; }
.sym-ball, .sym-spec, .sym-shadow { transform-box: fill-box; transform-origin: center; }

/* телефон «Прогресс» — вёрстка, размеры в em от font-size телефона (16px = макет 375×812) */
.lp-phone-tilt { perspective: 1400px; }
.lp-phone {
  font-size: 16px; width: 24.9375em; padding: .75em; border-radius: 3.25em;
  background: var(--opora-bg-glass-strong); border: var(--opora-stroke-hairline) solid var(--opora-border-glass); box-shadow: var(--opora-shadow-floating);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.ph-screen { position: relative; width: 23.4375em; height: 50.75em; border-radius: 2.5em; overflow: hidden; background: var(--opora-bg-canvas); font-family: var(--opora-font); color: var(--opora-text-primary); }
.ph-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.ph-glow-1 { left: -8.75em; top: -10em; width: 26.25em; height: 26.25em; background: radial-gradient(closest-side, var(--opora-bg-surface), transparent); opacity: .7; }
.ph-glow-2 { left: 11.25em; top: 26.25em; width: 18.75em; height: 18.75em; background: radial-gradient(closest-side, var(--opora-bg-canvas-alt), transparent); }
.ph-content { position: absolute; inset: 0; padding: 3em 1em 6.875em; display: flex; flex-direction: column; gap: 1em; }
.ph-appbar { display: flex; align-items: center; gap: .75em; min-height: 3.75em; }
.ph-title { font-size: 1.375em; line-height: 1.27; font-weight: 600; letter-spacing: -.2px; }
.ph-sos {
  margin-left: auto; display: inline-flex; align-items: center; gap: .46em; min-height: 2.77em; padding: 0 .92em;
  font-size: .8125em; font-weight: 500; border-radius: var(--opora-radius-full);
  background: var(--opora-bg-danger-soft); border: var(--opora-stroke-hairline) solid var(--opora-border-danger); color: var(--opora-text-danger);
}
.ph-sos svg { width: 1.385em; height: 1.385em; }
.ph-card { background: var(--opora-bg-glass); border: var(--opora-stroke-hairline) solid var(--opora-border-glass); border-radius: 1.75em; padding: 1.25em; box-shadow: var(--opora-shadow-glass-card); }
.ph-top { display: flex; align-items: center; gap: 1em; }
.ph-ring { position: relative; flex: none; width: 7.5em; height: 7.5em; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ph-ring circle { fill: none; stroke-width: 10; }
.ph-ring-track { stroke: var(--opora-bg-accent-soft); }
.ph-ring-val { stroke: var(--opora-bg-accent); stroke-linecap: round; stroke-dasharray: 9 21; stroke-dashoffset: 0; }
.ph-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ph-num { font-size: 2.25em; line-height: 1.11; letter-spacing: -.8px; font-weight: 400; }
.ph-cap { font-size: .6875em; line-height: 1.27; letter-spacing: .2px; color: var(--opora-text-tertiary); }
.ph-ring .ph-cap { color: var(--opora-text-secondary); }
.ph-day { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.ph-h { font-size: 1.375em; line-height: 1.27; font-weight: 600; letter-spacing: -.2px; }
.ph-s { font-size: .8125em; line-height: 1.385; color: var(--opora-text-secondary); }
.ph-week { display: flex; flex-direction: column; gap: .5em; margin-top: .75em; }
.ph-track { display: block; height: .5em; border-radius: var(--opora-radius-full); background: var(--opora-bg-accent-soft); overflow: hidden; }
.ph-fill { display: block; width: 35.3%; height: 100%; border-radius: var(--opora-radius-full); background: var(--opora-bg-accent); }
.ph-stats { display: flex; gap: .75em; }
.ph-tile { flex: 1; display: flex; flex-direction: column; gap: .25em; padding: 1em; border-radius: 1.25em; }
.ph-gad { display: flex; flex-direction: column; gap: .75em; position: relative; }
.ph-m { font-size: .9375em; line-height: 1.33; font-weight: 500; }
.ph-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ph-line { fill: none; stroke: var(--opora-bg-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ph-dots { position: relative; display: block; height: 4.5em; margin-top: -5.25em; margin-bottom: .75em; pointer-events: none; }
.ph-dot { position: absolute; width: .5em; height: .5em; border-radius: 50%; background: var(--opora-bg-accent); translate: -50% -50%; box-shadow: var(--opora-glow-accent); }
.ph-dot-1 { left: 1.32%; top: 16.67%; }
.ph-dot-2 { left: 33.33%; top: 47.2%; }
.ph-dot-3 { left: 66.67%; top: 69.4%; }
.ph-axis { display: flex; justify-content: space-between; font-size: .6875em; line-height: 1.27; color: var(--opora-text-secondary); letter-spacing: .2px; }
.ph-tabbar {
  position: absolute; left: 1em; right: 1em; top: 45em; height: 4.25em; display: flex; gap: .25em; padding: .5em; border-radius: 1.75em;
  background: var(--opora-bg-nav); border: var(--opora-stroke-hairline) solid var(--opora-border-glass); box-shadow: var(--opora-shadow-glass-nav);
}
.ph-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 1.25em; font-size: .6875em; color: var(--opora-text-secondary); }
.ph-tab svg { width: 2em; height: 2em; color: var(--opora-icon-secondary); }
.ph-tab.is-active { background: var(--opora-bg-accent-soft); color: var(--opora-text-accent); }
.ph-tab.is-active svg { color: var(--opora-icon-accent); }

/* ---------- «Знакомо?»: мысли по кругу ---------- */
.lp-problem { background: var(--opora-bg-canvas); color: var(--opora-text-primary); }
.lp-loop {
  position: relative; aspect-ratio: 520 / 390; border-radius: var(--opora-radius-xl); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--opora-bg-canvas-alt) 0%, var(--opora-bg-canvas) 75%);
  border: var(--opora-stroke-hairline) solid var(--opora-border-glass);
}
.lp-loop-img { display: block; width: 100%; height: 100%; transition: opacity .8s ease; }
.lp-rings { position: absolute; inset: 0; display: none; perspective: 900px; }
.lp-rings::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--opora-bg-surface), transparent); opacity: .55; }
.lp-rings-c { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; translate: -50% -50%; transform-style: preserve-3d; }
.lp-rings-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(16deg); }
.ring {
  --x: 70deg; --z: 0deg; --s: 1; --t: 30s;
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--opora-bg-accent); border-top-color: var(--opora-text-primary); border-left-color: var(--opora-text-secondary);
  box-shadow: var(--opora-glow-accent), inset var(--opora-glow-accent);
  transform: rotateZ(var(--z)) rotateY(0deg) rotateX(var(--x)) scale(var(--s));
}
.ring::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--opora-bg-accent); box-shadow: var(--opora-glow-accent); opacity: .15; }
.r1 { --x: 72deg; --z: 0deg; --s: 1; --t: 26s; }
.r2 { --x: 66deg; --z: 60deg; --s: .92; --t: 34s; }
.r3 { --x: 76deg; --z: 120deg; --s: 1.06; --t: 40s; }
.r4 { --x: 24deg; --z: 30deg; --s: .62; --t: 22s; }
.r5 { --x: 56deg; --z: -40deg; --s: .8; --t: 30s; }
.r6 { --x: 82deg; --z: 90deg; --s: .5; --t: 18s; }
.r7 { --x: 44deg; --z: 150deg; --s: 1.14; --t: 38s; }
.r8 { --x: 62deg; --z: -110deg; --s: .72; --t: 28s; }
.r9 { --x: 78deg; --z: 200deg; --s: .86; --t: 36s; }
.lp-bridge { font: 500 20px/1.4 var(--opora-font); color: var(--opora-text-accent); }

/* ---------- мини-апп, прогресс, цитата ---------- */
.lp-miniapp { margin-top: var(--opora-space-48); display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--opora-space-48); align-items: center; padding: 40px 48px; background: var(--opora-bg-surface); box-shadow: var(--opora-shadow-glass-card); overflow: hidden; }
.lp-miniapp-text { display: flex; flex-direction: column; gap: var(--opora-space-12); align-items: flex-start; }
.lp-miniapp-shots { aspect-ratio: 1309 / 916; border-radius: var(--opora-radius-lg); overflow: hidden; }
.lp-miniapp-shots img { object-fit: contain; }
.lp-scene { aspect-ratio: 560 / 770; border-radius: var(--opora-radius-xl); overflow: hidden; background: var(--opora-bg-surface); }
.lp-quote { background: var(--opora-bg-accent); color: var(--opora-text-on-accent); padding: 72px 0; }
.lp-quote-in { margin-inline: auto; display: flex; align-items: center; gap: var(--opora-space-48); }
.lp-quote-text { margin: 0; }
.lp-quote-text p { font: 600 40px/1.2 var(--opora-font); letter-spacing: -0.6px; max-width: 920px; text-wrap: balance; }
.lp-quote-author { margin-top: var(--opora-space-16); font: 500 15px/20px var(--opora-font); }
.lp-avatar { flex: none; display: block; border-radius: 50%; overflow: hidden; border: 3px solid var(--opora-border-glass); box-shadow: var(--opora-shadow-floating); }
.lp-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-avatar-s { width: 120px; height: 120px; }
.lp-avatar-l { width: 160px; height: 160px; }
.lp-meth { display: flex; align-items: center; gap: var(--opora-space-48); }
.lp-meth .lp-text { max-width: 620px; }
.lp-meth .btn { align-self: flex-start; margin-top: var(--opora-space-8); }

/* ---------- цены ---------- */
.lp-plan { background: var(--opora-bg-surface); box-shadow: var(--opora-shadow-glass-card); }
.lp-plan .btn { width: 100%; margin-top: auto; }
.lp-plan .lp-text { margin-bottom: var(--opora-space-12); }
.lp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--opora-space-8); }
.lp-price-num { font: 300 48px/1.1 var(--opora-font); letter-spacing: -1.5px; color: var(--opora-text-primary); font-variant-numeric: tabular-nums; }
.lp-price-unit { font: 400 15px/20px var(--opora-font); color: var(--opora-text-secondary); }
.lp-plan-main { background: var(--opora-bg-accent); box-shadow: var(--opora-glow-accent), var(--opora-shadow-glass-card); }
.lp-plan-main .lp-h3, .lp-plan-main .lp-price-num, .lp-plan-main .lp-price-unit, .lp-plan-main .lp-text { color: var(--opora-text-on-accent); }

/* ---------- финал ---------- */
.lp-start { position: relative; overflow: hidden; isolation: isolate; min-height: 558px; display: flex; align-items: flex-start; padding: 120px 0 220px; text-align: center; }
.lp-start-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lp-start-bg-img {
  position: absolute; inset: -3%; background-size: cover; background-position: center 60%;
  background-image: url("/assets/landing/start-horizon.webp");
  background-image: image-set(url("/assets/landing/start-horizon.avif") type("image/avif"), url("/assets/landing/start-horizon.webp") type("image/webp"));
}
.lp-start-bg::after { content: ""; position: absolute; inset: 0; background: var(--opora-bg-canvas); opacity: 0; }
:root[data-theme="dark"] .lp-start-bg::after { opacity: .72; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-start-bg::after { opacity: .72; } }
.lp-start-in { display: flex; flex-direction: column; align-items: center; gap: var(--opora-space-16); }
.lp-start-in .lp-h2 { max-width: 760px; }
.lp-start-in .btn { margin-top: var(--opora-space-8); }

/* ---------- ветка для психологов ---------- */
.lp-pro-hero { padding-top: 160px; }
.lp-pro-hero .lp-hero-grid { grid-template-columns: 556px 1fr; }
.lp-pro-visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--opora-space-12); }
.lp-pro-visual picture { display: block; width: 100%; max-width: 600px; aspect-ratio: 1232 / 1274; border-radius: var(--opora-radius-xl); overflow: hidden; }
.lp-pro-visual img { object-fit: contain; }
.lp-illu-l { width: auto; aspect-ratio: 560 / 420; }
.lp-stages > .lp-card .lp-h3 { margin-top: var(--opora-space-12); }
.lp-stages > .lp-card .lp-h3 + .lp-text { margin-top: -6px; }
.lp-checks { list-style: none; margin: var(--opora-space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--opora-space-16); }
.lp-checks li { position: relative; min-height: var(--opora-size-touch); display: flex; align-items: center; padding-left: 44px; font: 400 15px/22px var(--opora-font); color: var(--opora-text-primary); }
.lp-checks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--opora-bg-accent); }
.lp-checks li::after { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 5px; margin-top: -4px; border-left: 2px solid var(--opora-text-on-accent); border-bottom: 2px solid var(--opora-text-on-accent); transform: rotate(-45deg); }
.lp-pro-start { align-items: center; text-align: center; padding: 56px 64px; gap: var(--opora-space-16); }
.lp-pro-start .lp-h2 { margin-top: var(--opora-space-8); }

/* ---------- подвал ---------- */
.site-footer.lp-footer { max-width: none; width: 100%; padding: 64px 0; background: var(--opora-bg-surface); color: var(--opora-text-primary); display: block; }
.lp-footer .lp-wrap { display: flex; flex-direction: column; gap: var(--opora-space-24); }
.lp-footer-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--opora-space-16) 48px; }
.lp-footer .footer-links { gap: 0 var(--opora-space-32); }
.lp-footer .footer-links a { color: var(--opora-text-accent); font: 500 15px/20px var(--opora-font); text-decoration: none; }
.lp-footer .footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-footer-disc { font: 400 15px/22px var(--opora-font); max-width: 580px; }
.lp-footer-crisis { font: 500 15px/20px var(--opora-font); color: var(--opora-text-danger); }
.lp-footer-crisis a { color: inherit; font-weight: 600; }
.lp-footer-meta { display: flex; flex-direction: column; gap: var(--opora-space-4); font: 400 13px/18px var(--opora-font); color: var(--opora-text-secondary); }
.lp-footer-meta a { color: var(--opora-text-accent); }

/* ---------- адаптив ---------- */
/* экспорт экранов из Figma — «Лёд» на светлой подложке; в «Ночи» показываем его как светлую витрину со скруглением */
.lp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--opora-bg-canvas) 0%, transparent 62%); opacity: 0; }
:root[data-theme="dark"] .lp-hero-bg::after { opacity: .8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-hero-bg::after { opacity: .8; } }

@media (max-width: 1099px) {
  .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lp-grid-3, .lp-stages { grid-template-columns: 1fr; }
  .lp-limits { grid-template-columns: repeat(2, 1fr); }
  .lp-limits > li, .lp-limits > .lp-span-half { grid-column: auto; }
  .lp-hero-grid, .lp-pro-hero .lp-hero-grid, .lp-split, .lp-split-wide { grid-template-columns: 1fr; gap: 48px; }
  .lp-hero-visual { justify-self: center; }
  .lp-head-row { gap: 40px; }
  .lp-illu { width: 380px; }
  .lp-miniapp { grid-template-columns: 1fr; }
  .lp-scene { max-width: 560px; }
  .lp-hero-symbol { left: -96px; top: auto; bottom: 80px; width: 120px; height: 120px; }
  .lp-switch { width: 260px; }
}
@media (max-width: 719px) {
  html { scroll-padding-top: 80px; }
  .lp-h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.8px; }
  .lp-h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.5px; }
  .lp-lead { font-size: 17px; }
  .lp-quote-text p { font-size: 26px; line-height: 1.25; }
  .lp-bridge { font-size: 20px; }
  .lp-sec { padding: 56px 0; }
  .lp-head, .lp-head-row { margin-bottom: var(--opora-space-32); }
  .lp-head-row { flex-direction: column; align-items: stretch; }
  .lp-illu { width: 100%; }
  .lp-grid-4, .lp-grid-2, .lp-limits { grid-template-columns: 1fr; }
  .lp-grid { gap: var(--opora-space-16); }
  .lp-card { padding: 24px; }
  .lp-actions-row, .lp-data-sos, .lp-notes, .lp-miniapp { margin-top: var(--opora-space-32); }
  .lp .btn.lp-btn-wide { width: 100%; }
  .lp-miniapp { padding: 24px; gap: var(--opora-space-24); }
  .lp-quote { padding: 48px 0; }
  .lp-quote-in, .lp-meth { flex-direction: column; align-items: flex-start; gap: var(--opora-space-24); }
  .lp-avatar-l { width: 120px; height: 120px; }
  .lp-start { min-height: 520px; padding: 72px 0 200px; }
  .lp-pro-start { padding: 40px 20px; }
  .lp-footer .footer-links { flex-direction: column; }
  .lp-footer .footer-links a { min-height: var(--opora-size-touch); display: flex; align-items: center; }

  /* шапка: 1-я строка — логотип и кнопка (липкие), 2–3 — переключатель и SOS, при прокрутке уезжают */
  .lp-header-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--opora-space-12) var(--opora-space-8); padding: var(--opora-space-12) 0; }
  .lp-header::before { bottom: auto; height: 68px; }
  .lp-head-cta { justify-self: end; grid-column: 2; grid-row: 1; }
  .lp-switch { grid-column: 1 / -1; width: 100%; }
  .lp-sos-link { grid-column: 1 / -1; justify-self: end; min-height: 32px; margin-top: -8px; }
  .lp-switch, .lp-sos-link { transition: opacity .25s ease, transform .3s ease, visibility 0s linear 0s; }
  .lp-header.is-scrolled .lp-switch, .lp-header.is-scrolled .lp-sos-link { opacity: 0; transform: translateY(-12px); visibility: hidden; transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s; }

  .lp-hero { padding: 188px 0 56px; }
  .lp-hero-text { gap: var(--opora-space-16); }
  .lp-hero-text .lp-actions { align-self: stretch; }
  .lp-hero-grid { gap: 32px; }
  .lp-hero-bg-img { background-position: 70% top; background-image: url("/assets/landing/hero-ice-mobile.webp"); background-image: image-set(url("/assets/landing/hero-ice-mobile.avif") type("image/avif"), url("/assets/landing/hero-ice-mobile.webp") type("image/webp")); }
  :root[data-theme="dark"] .lp-hero-bg-img { background-position: 72% center; background-image: url("/assets/landing/hero-night.webp"); background-image: image-set(url("/assets/landing/hero-night.avif") type("image/avif"), url("/assets/landing/hero-night.webp") type("image/webp")); }
  .lp-phone { font-size: min(14px, calc((100vw - 72px) / 24.94)); }
  .lp-hero-symbol { display: none; }
  .lp-hero-bg::after { background: linear-gradient(180deg, var(--opora-bg-canvas) 0%, var(--opora-bg-canvas) 30%, transparent 70%); }
  .lp-pro-hero { padding-top: 188px; }
}
@media (max-width: 719px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-hero-bg-img { background-position: 72% center; background-image: url("/assets/landing/hero-night.webp"); background-image: image-set(url("/assets/landing/hero-night.avif") type("image/avif"), url("/assets/landing/hero-night.webp") type("image/webp")); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .lp-phone { font-size: 14px; }
  .lp-header-in { gap: var(--opora-space-16); }
}

/* =====================================================================
 * ДВИЖЕНИЕ. Всё ниже действует только при html.motion (нет prefers-reduced-motion, JS загрузился).
 * ===================================================================== */

/* появление при прокрутке: fade + сдвиг, карточки по очереди (--d ставит landing.js) */
.motion [data-reveal], .motion [data-stagger] > * {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity .6s ease var(--d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .35s cubic-bezier(.2, .7, .2, 1);
}
.motion [data-reveal].is-in, .motion [data-stagger] > .is-in { opacity: 1; transform: none; }
.motion .lp-grid > .lp-card::after { transition: opacity .35s ease; }

/* фон первого экрана и финала медленно дрейфует */
.motion .lp-hero-bg-img { animation: lp-drift 36s ease-in-out infinite alternate; }
.motion .lp-start-bg-img { animation: lp-drift 44s ease-in-out infinite alternate-reverse; }
@keyframes lp-drift {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to { transform: translate3d(-2%, 1.2%, 0) scale(1.07); }
}

/* параллакс иллюстраций (--py ставит landing.js) */
.motion [data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); will-change: transform; }
.motion .lp-miniapp-shots[data-parallax] img, .motion .lp-pro-visual[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0); }

/* телефон: парит; при наведении курсора на первый экран — лёгкий наклон (--rx/--ry) */
.motion .lp-phone-float { animation: lp-float 9s ease-in-out infinite alternate; }
@keyframes lp-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }

/* телефон: «Прогресс» дорисовывается при первом показе */
.motion .lp-phone:not(.is-played) .ph-ring-val { stroke-dashoffset: 9; }
.motion .lp-phone:not(.is-played) .ph-fill { transform: translateX(-101%); }
.motion .lp-phone:not(.is-played) .ph-line { stroke-dashoffset: 1; }
.motion .lp-phone:not(.is-played) .ph-dot { opacity: 0; transform: scale(.2); }
.motion .lp-phone:not(.is-counting) [data-count] { opacity: 0; }
.motion .ph-ring-val { transition: stroke-dashoffset 1.4s cubic-bezier(.3, .7, .2, 1) .35s; }
.motion .ph-fill { transition: transform 1s cubic-bezier(.3, .7, .2, 1) .7s; }
.motion .ph-line { transition: stroke-dashoffset 1.6s cubic-bezier(.4, .1, .2, 1) .9s; }
.motion .ph-dot { transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.motion .ph-dot-1 { transition-delay: .95s; }
.motion .ph-dot-2 { transition-delay: 1.45s; }
.motion .ph-dot-3 { transition-delay: 1.95s; }
.motion [data-count] { transition: opacity .3s ease; }

/* символ: шар парит, тень дышит, блик скользит */
.motion .sym-ball { animation: lp-ball 6s ease-in-out infinite alternate; }
.motion .sym-shadow { animation: lp-shadow 6s ease-in-out infinite alternate; }
.motion .sym-spec { animation: lp-spec 9s ease-in-out infinite alternate; }
@keyframes lp-ball { from { transform: translate3d(0, 1px, 0); } to { transform: translate3d(0, -6px, 0); } }
@keyframes lp-shadow { from { transform: scale(1); opacity: .4; } to { transform: scale(.78); opacity: .2; } }
@keyframes lp-spec { from { transform: translate3d(-3px, -1px, 0); } to { transform: translate3d(9px, 5px, 0); } }

/* «мысли по кругу»: кольца вращаются в разных плоскостях, свечение дышит; PNG — запасной кадр */
.motion .lp-rings { display: block; }
.motion .lp-loop.has-rings .lp-loop-img { opacity: 0; }
.motion .lp-rings-spin { animation: lp-rings-spin 60s linear infinite; }
.motion .ring { animation: lp-orbit var(--t) linear infinite; }
.motion .r2, .motion .r5, .motion .r7, .motion .r9 { animation-direction: reverse; }
.motion .ring::after { animation: lp-breathe 7s ease-in-out infinite alternate; }
.motion .r2::after { animation-delay: -2s; } .motion .r3::after { animation-delay: -4s; } .motion .r4::after { animation-delay: -1s; }
.motion .r5::after { animation-delay: -5s; } .motion .r6::after { animation-delay: -3s; } .motion .r7::after { animation-delay: -6s; }
.motion .r8::after { animation-delay: -1.5s; } .motion .r9::after { animation-delay: -4.5s; }
@keyframes lp-rings-spin { from { transform: rotateX(16deg) rotateZ(0deg); } to { transform: rotateX(16deg) rotateZ(360deg); } }
@keyframes lp-orbit {
  from { transform: rotateZ(var(--z)) rotateY(0deg) rotateX(var(--x)) scale(var(--s)); }
  to { transform: rotateZ(var(--z)) rotateY(360deg) rotateX(var(--x)) scale(var(--s)); }
}
@keyframes lp-breathe { from { opacity: .08; } to { opacity: .55; } }

/* сцена вне экрана — на паузе (класс ставит landing.js) */
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* страховка: системная настройка «уменьшить движение» — всё статично и в конечном состоянии */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp [data-reveal], .lp [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .lp .lp-rings { display: none !important; }
  .lp .lp-loop-img { opacity: 1 !important; }
}