/*
 * Стили лендинга menqazaq.kz.
 *
 * Сначала общие цвета и размеры (переменные --…) для тёмной и светлой темы,
 * потом блоки страницы: .landing-… — первый экран и финал, .overview-… —
 * видеообзор, .steps-… — три шага. Тема — атрибут data-theme у <html>.
 */

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/75f2fdf2e0b68dfe-s.p.woff2)format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/cfdfbee4d6cf0a93-s.p.woff2)format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/634e9805ffc8f226-s.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/b4a06a523f527a0e-s.p.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Golos Text Fallback;
  src: local(Arial);
  ascent-override: 90.27%;
  descent-override: 20.26%;
  line-gap-override: 0.0%;
  size-adjust: 108.57%;
}

.font-golos {
  --font-golos: "Golos Text", "Golos Text Fallback";
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/c17e85220dab5903-s.p.woff2)format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/659720fbcac806cc-s.p.woff2)format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/c3500a4952f4c03f-s.woff2)format("woff2");
  unicode-range: U+302-303,U+305,U+307-308,U+310,U+312,U+315,U+31A,U+326-327,U+32C,U+32F-330,U+332-333,U+338,U+33A,U+346,U+34D,U+391-3A1,U+3A3-3A9,U+3B1-3C9,U+3D1,U+3D5-3D6,U+3F0-3F1,U+3F4-3F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-209F,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE??;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/6adbe22fa8bff382-s.woff2)format("woff2");
  unicode-range: U+1-C,U+E-1F,U+7F-9F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+28??,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B??,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F0??,U+1F100-1F1AE,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F8D0-1F8D8,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FAC6,U+1FAC8,U+1FACC-1FADD,U+1FADF-1FAEB,U+1FAEF-1FAFA,U+1FB??;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/3adc3f408d8054fb-s.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/6f8cddd3f32356db-s.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/5e5dfa9e86f764b8-s.p.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Lora Fallback;
  src: local(Times New Roman);
  ascent-override: 87.33%;
  descent-override: 23.78%;
  line-gap-override: 0.0%;
  size-adjust: 115.2%;
}

.font-lora {
  --font-lora: "Lora", "Lora Fallback";
}

@font-face {
  font-family: Bad Script;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f436b33c02625d49-s.woff2)format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: Bad Script;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fd0ed3d1a7b71e32-s.woff2)format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}

@font-face {
  font-family: Bad Script;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/603a45fb60f05df6-s.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Bad Script;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/af9c9d757bb53a91-s.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Bad Script;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/e6cfdafe83602f0c-s.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Bad Script Fallback;
  src: local(Arial);
  ascent-override: 153.51%;
  descent-override: 75.17%;
  line-gap-override: 0.0%;
  size-adjust: 86.2%;
}

.font-badscript {
  --font-badscript: "Bad Script", "Bad Script Fallback";
}

.font-caveat {
  --font-caveat: "Caveat", "Caveat Fallback";
}

:root {
  --gold-300: #f0d9a0;
  --gold-400: #e3c07a;
  --gold-500: #d4a853;
  --gold-600: #b98c39;
  --parchment-1: #f3e6c8;
  --parchment-2: #e9d6ac;
  --parchment-3: #c9a86b;
  --ink: #3b2a17;
  --ink-soft: #6b5233;
  --rod-light: #8a5a33;
  --rod-mid: #5c3a1f;
  --rod-dark: #2e1c0e;
  --text-on-photo: #f4ecdc;
  --photo-shade: #08090cb8;
  --screen: #0b0a08;
  --jade-400: #4ade9e;
  --jade-500: #22c07f;
  --violet-400: #a78bfa;
  --danger-500: #e5624a;
  --ink-card: #1d1a15;
  --ink-card-text: #f4ecdc;
  --ink-card-muted: #c9bfae;
  --ink-card-soft: #f4ecdc14;
  --ink-card-line: #f4ecdc38;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --font-sans: var(--font-golos), ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: var(--font-golos), ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-lora), Georgia, "Times New Roman", serif;
  --font-script: var(--font-badscript), var(--font-lora), cursive;
  --font-hand: var(--font-caveat), var(--font-lora), cursive;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --panel-width: 340px;
  --transition-fast: .14s cubic-bezier(.4, 0, .2, 1);
  --transition-base: .22s cubic-bezier(.22, 1, .36, 1);
}

:root, :root[data-theme=light] {
  --lightningcss-light: initial;
  --lightningcss-dark:;
  color-scheme: light;
  --bg-app: #f7f4ee;
  --bg-surface: #fff;
  --bg-surface-2: #f2ede4;
  --bg-elevated: #fff;
  --bg-hover: #1816120d;
  --bg-active: #d4a85324;
  --bg-inset: #efe9de;
  --text-primary: #1c1a16;
  --text-secondary: #5f5850;
  --text-muted: #8b8279;
  --text-inverse: #fff;
  --border-subtle: #1c1a161a;
  --border-strong: #1c1a162e;
  --accent: var(--gold-600);
  --accent-contrast: #fff;
  --accent-soft: #d4a85329;
  --accent-text: #8f6a24;
  --match-text: #14603f;
  --match-soft: #dff1e7;
  --match-band: #eef7f1;
  --shadow-sm: 0 1px 2px #1c1a160f;
  --shadow-md: 0 4px 16px #1c1a1614;
  --shadow-lg: 0 12px 40px #1c1a161f;
  --tree-backdrop-opacity: .12;
  --scene-shade: #f7f4eee0;
  --scene-text: #2b2318;
  --scene-accent: #9a7228;
  --map-1: #d7eef6;
  --map-2: #a5dbea;
  --map-3: #5cbfd8;
  --map-4: #1d96b5;
  --map-5: #0b6478;
  --map-pick: #d8a629;
  --map-land: #e4ddcf;
  --map-edge: #a69d8f;
  --map-shade: #5a544b;
  --map-label-halo: #f7f3ec;
}

:root[data-theme=dark] {
  --lightningcss-light:;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg-app: #0e0f12;
  --bg-surface: #16181d;
  --bg-surface-2: #1c1f25;
  --bg-elevated: #1f2229;
  --bg-hover: #ffffff0f;
  --bg-active: #d4a85329;
  --bg-inset: #101216;
  --text-primary: #f2efe9;
  --text-secondary: #a8a49c;
  --text-muted: #77736c;
  --text-inverse: #16181d;
  --border-subtle: #ffffff14;
  --border-strong: #ffffff29;
  --accent: var(--gold-500);
  --accent-contrast: #1a1710;
  --accent-soft: #d4a85324;
  --accent-text: var(--gold-400);
  --match-text: var(--jade-400);
  --match-soft: #22c07f29;
  --match-band: #22c07f14;
  --shadow-sm: 0 1px 2px #0006;
  --shadow-md: 0 6px 24px #00000073;
  --shadow-lg: 0 18px 50px #0000008c;
  --tree-backdrop-opacity: .2;
  --scene-shade: #08090cb8;
  --scene-text: #f4ecdc;
  --scene-accent: #f0d9a0;
  --map-1: #204e5e;
  --map-2: #22708a;
  --map-3: #2794b2;
  --map-4: #3ebcd8;
  --map-5: #86e4f4;
  --map-pick: #f5c542;
  --map-land: #2a2f39;
  --map-edge: #10131a;
  --map-shade: #06080c;
  --map-label-halo: #0d1016;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    --lightningcss-light:;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --bg-app: #0e0f12;
    --bg-surface: #16181d;
    --bg-surface-2: #1c1f25;
    --bg-elevated: #1f2229;
    --bg-hover: #ffffff0f;
    --bg-active: #d4a85329;
    --bg-inset: #101216;
    --text-primary: #f2efe9;
    --text-secondary: #a8a49c;
    --text-muted: #77736c;
    --text-inverse: #16181d;
    --border-subtle: #ffffff14;
    --border-strong: #ffffff29;
    --accent: var(--gold-500);
    --accent-contrast: #1a1710;
    --accent-soft: #d4a85324;
    --accent-text: var(--gold-400);
    --match-text: var(--jade-400);
    --match-soft: #22c07f29;
    --match-band: #22c07f14;
    --shadow-sm: 0 1px 2px #0006;
    --shadow-md: 0 6px 24px #00000073;
    --shadow-lg: 0 18px 50px #0000008c;
    --tree-backdrop-opacity: .2;
    --scene-shade: #08090cb8;
    --scene-text: #f4ecdc;
    --scene-accent: #f0d9a0;
    --map-1: #204e5e;
    --map-2: #22708a;
    --map-3: #2794b2;
    --map-4: #3ebcd8;
    --map-5: #86e4f4;
    --map-pick: #f5c542;
    --map-land: #2a2f39;
    --map-edge: #10131a;
    --map-shade: #06080c;
    --map-label-halo: #0d1016;
  }
}

*, :before, :after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  transition: background-color var(--transition-base), color var(--transition-base);
  margin: 0;
  line-height: 1.5;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: var(--radius-pill);
  background-clip: content-box;
  border: 3px solid #0000;
}

::-webkit-scrollbar-track {
  background: 0 0;
}

@media (prefers-reduced-motion:reduce) {
  *, :before, :after {
    transition-duration: .01ms!important;
    animation-duration: .01ms!important;
  }
}

.overview-banner {
  z-index: 1;
  width: min(1100px,100%);
  margin: 0 auto;
  position: relative;
}

.overview-frame {
  border: 1px solid var(--border-strong);
  background-color: var(--screen);
  box-shadow: var(--shadow-lg);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.overview-video {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  display: block;
}

.overview-sound {
  top: var(--space-4);
  right: var(--space-4);
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink-card-line);
  border-radius: var(--radius-pill);
  background-color: var(--photo-shade);
  color: var(--text-on-photo);
  font-size: var(--text-base);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-fast);
  font-weight: 600;
  display: inline-flex;
  position: absolute;
}

.overview-sound:hover {
  background-color: var(--screen);
}

.overview-sound svg {
  width: 18px;
  height: 18px;
}

.overview-caption {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-base);
  text-align: center;
}

@media (max-width:640px) {
  .overview-frame {
    border-radius: var(--radius-lg);
  }
  .overview-sound {
    top: var(--space-2);
    right: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
  }
}

.steps-section {
  max-width: 1200px;
  padding: 128px var(--space-6) 0;
  margin: 0 auto;
  position: relative;
}

.steps-head {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.steps-eyebrow {
  color: var(--accent-text);
  font-size: var(--text-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
}

.steps-heading {
  margin: var(--space-3) 0 0;
  letter-spacing: -.035em;
  font-size: clamp(34px,4.6vw,60px);
  font-weight: 800;
  line-height: 1.05;
}

.steps-sub {
  max-width: 620px;
  margin: var(--space-4) 0 0;
  color: var(--text-secondary);
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.55;
}

.steps-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.steps-card {
  border: 1px solid var(--border-subtle);
  background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--gold-500) 10%, transparent), transparent 60%), var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  border-radius: 28px;
  flex-direction: column;
  padding: 14px;
  display: flex;
}

.steps-card:hover {
  border-color: color-mix(in srgb, var(--gold-500) 35%, transparent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.steps-scene {
  height: 360px;
  padding: 56px var(--space-5) var(--space-5);
  border: 1px solid var(--border-subtle);
  background: radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--gold-500) 14%, transparent), transparent 75%), radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-primary) 12%, transparent) 1px, transparent 0) 0 0 / 18px 18px, var(--bg-inset);
  border-radius: 20px;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.steps-number {
  color: color-mix(in srgb, var(--gold-500) 70%, transparent);
  font-family: var(--font-serif);
  font-size: 40px;
  font-style: italic;
  line-height: 1;
  position: absolute;
  top: 12px;
  left: 18px;
}

.steps-body {
  gap: var(--space-3);
  flex-direction: column;
  flex: 1;
  padding: 22px 12px 12px;
  display: flex;
}

.steps-title {
  letter-spacing: -.015em;
  margin: 0;
  font-size: 23px;
  font-weight: 800;
}

.steps-text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin: 0;
  line-height: 1.6;
}

.steps-points {
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
  display: grid;
}

.steps-points li {
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.steps-check {
  background-color: var(--accent-soft);
  width: 18px;
  height: 18px;
  color: var(--accent-text);
  border-radius: 50%;
  flex: none;
  padding: 3px;
}

.steps-tree {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.steps-couple {
  align-items: center;
  gap: 6px;
  display: flex;
}

.steps-person {
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  padding: 5px 12px 5px 5px;
  display: inline-flex;
}

.steps-avatar {
  background-color: var(--accent-soft);
  width: 30px;
  height: 30px;
  color: var(--accent-text);
  font-size: var(--text-sm);
  border-radius: 50%;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.steps-avatar svg {
  width: 17px;
  height: 17px;
}

.steps-who {
  text-align: left;
  line-height: 1.2;
  display: grid;
}

.steps-who strong {
  font-size: var(--text-sm);
  font-weight: 700;
}

.steps-who small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.steps-me {
  border-color: var(--gold-500);
  background-color: var(--accent-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 16%, transparent);
}

.steps-me .steps-avatar {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--accent-contrast);
}

.steps-rings {
  width: 18px;
  height: 10px;
  position: relative;
}

.steps-rings:before, .steps-rings:after {
  content: "";
  border: 1.5px solid var(--gold-500);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
}

.steps-rings:before {
  left: 0;
}

.steps-rings:after {
  right: 0;
}

.steps-stem {
  background-color: color-mix(in srgb, var(--gold-500) 75%, transparent);
  width: 2px;
  height: 18px;
}

.steps-add {
  height: 42px;
  margin-left: var(--space-2);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-weight: 600;
  display: inline-flex;
}

.steps-add svg {
  width: 14px;
  height: 14px;
}

.steps-line {
  gap: 10px;
  width: min(280px,100%);
  display: grid;
}

.steps-chain {
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.steps-chain li {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  display: flex;
}

.steps-ok {
  background-color: var(--match-soft);
  width: 22px;
  height: 22px;
  color: var(--match-text);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.steps-ok svg {
  width: 14px;
  height: 14px;
}

.steps-linkName {
  font-size: var(--text-sm);
  font-weight: 700;
}

.steps-linkTag {
  color: var(--match-text);
  font-size: var(--text-xs);
  margin-left: auto;
  font-weight: 600;
}

.steps-result {
  border: 1px solid var(--ink-card-line);
  border-radius: var(--radius-md);
  background-color: var(--ink-card);
  color: var(--ink-card-text);
  box-shadow: var(--shadow-md);
  gap: 4px;
  padding: 12px 14px;
  display: grid;
}

.steps-resultLabel {
  color: var(--gold-400);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.steps-resultRow {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.steps-resultRow strong {
  color: var(--gold-300);
  font-size: var(--text-xl);
  font-weight: 800;
}

.steps-resultRow b {
  font-size: var(--text-xl);
  font-weight: 800;
}

.steps-meter {
  border-radius: var(--radius-pill);
  background-color: var(--ink-card-soft);
  height: 4px;
  overflow: hidden;
}

.steps-meter span {
  border-radius: inherit;
  background-color: var(--gold-500);
  width: 94%;
  height: 100%;
  display: block;
}

.steps-resultPath {
  color: var(--ink-card-muted);
  font-size: var(--text-xs);
}

.steps-story {
  justify-items: center;
  gap: 14px;
  width: min(290px,100%);
  display: grid;
}

.steps-paper {
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--parchment-1), var(--parchment-2));
  width: 100%;
  color: var(--ink);
  box-shadow: var(--shadow-md), inset 0 0 24px color-mix(in srgb, var(--rod-light) 25%, transparent);
  gap: 6px;
  padding: 16px 18px 18px;
  display: grid;
  transform: rotate(-1.5deg);
}

.steps-paperYear {
  color: var(--ink-soft);
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 700;
}

.steps-paperTitle {
  font-family: var(--font-script);
  font-size: 21px;
  line-height: 1.2;
}

.steps-paperText {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.45;
}

.steps-media {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  display: flex;
}

.steps-chip {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface);
  height: 32px;
  font-size: var(--text-xs);
  box-shadow: var(--shadow-sm);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-weight: 600;
  display: inline-flex;
}

.steps-chip svg {
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}

.steps-wave {
  align-items: center;
  gap: 2px;
  height: 16px;
  display: inline-flex;
}

.steps-wave span {
  background-color: var(--accent-text);
  border-radius: 1px;
  width: 2px;
  height: 40%;
}

.steps-wave span:nth-child(2), .steps-wave span:nth-child(8) {
  height: 70%;
}

.steps-wave span:nth-child(3), .steps-wave span:nth-child(6) {
  height: 100%;
}

.steps-wave span:nth-child(4) {
  height: 55%;
}

.steps-wave span:nth-child(5) {
  height: 85%;
}

@media (max-width:640px) {
  .steps-section {
    padding: 96px var(--space-4) 0;
  }
  .steps-scene {
    padding-inline: var(--space-3);
  }
}

.landing-page {
  --cta-bg: var(--text-primary);
  --cta-text: var(--bg-app);
  --glow: color-mix(in srgb, var(--gold-500) 18%, transparent);
  background-color: var(--bg-app);
  min-height: 100dvh;
  color: var(--text-primary);
  overflow-x: hidden;
}

:root[data-theme=dark] .landing-page {
  --cta-bg: var(--accent);
  --cta-text: var(--accent-contrast);
  --glow: color-mix(in srgb, var(--gold-500) 12%, transparent);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) .landing-page {
    --cta-bg: var(--accent);
    --cta-text: var(--accent-contrast);
    --glow: color-mix(in srgb, var(--gold-500) 12%, transparent);
  }
}

.landing-day, .landing-night {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.landing-steppe .landing-night, .landing-shanyrak .landing-night, :is(:root[data-theme=dark] .landing-steppe .landing-day,:root[data-theme=dark] .landing-shanyrak .landing-day) {
  display: none;
}

:is(:root[data-theme=dark] .landing-steppe .landing-night,:root[data-theme=dark] .landing-shanyrak .landing-night) {
  display: block;
}

@media (prefers-color-scheme:dark) {
  :is(:root:not([data-theme=light]) .landing-steppe .landing-day,:root:not([data-theme=light]) .landing-shanyrak .landing-day) {
    display: none;
  }
  :is(:root:not([data-theme=light]) .landing-steppe .landing-night,:root:not([data-theme=light]) .landing-shanyrak .landing-night) {
    display: block;
  }
}

.landing-hero {
  isolation: isolate;
  background: radial-gradient(70% 60% at 50% 0%, var(--glow), transparent 72%), var(--bg-app);
  position: relative;
}

.landing-header {
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  max-width: 1200px;
  padding: var(--space-5) var(--space-6);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.landing-logo {
  align-items: center;
  gap: var(--space-3);
  display: inline-flex;
}

.landing-logo img {
  border-radius: var(--radius-sm);
}

.landing-logo strong {
  letter-spacing: -.01em;
  font-size: 19px;
  font-weight: 800;
}

.landing-tools {
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.landing-langs {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  gap: 2px;
  padding: 3px;
  display: flex;
}

.landing-lang {
  min-width: 44px;
  height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  background: 0 0;
  border: 0;
  font-weight: 700;
}

.landing-lang:hover {
  color: var(--text-primary);
}

.landing-langOn, .landing-langOn:hover {
  background-color: var(--bg-active);
  color: var(--accent-text);
}

.landing-theme {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  width: 46px;
  height: 46px;
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-fast);
  place-items: center;
  display: grid;
}

.landing-theme:hover {
  background-color: var(--bg-active);
}

.landing-theme svg {
  width: 20px;
  height: 20px;
}

.landing-signIn {
  min-height: 46px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-fast);
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
}

.landing-signIn:hover {
  background-color: var(--bg-hover);
}

.landing-heroBody {
  z-index: 2;
  max-width: 1200px;
  padding: 72px var(--space-6) 0;
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.landing-eyebrow {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
  border-radius: var(--radius-pill);
  background-color: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-base);
  margin: 0;
  font-weight: 600;
  display: inline-flex;
}

.landing-dot {
  background-color: var(--gold-500);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.landing-title {
  letter-spacing: -.035em;
  max-width: 980px;
  margin: 28px 0 0;
  font-size: clamp(44px,7.4vw,104px);
  font-weight: 800;
  line-height: 1;
}

.landing-title em {
  font-family: var(--font-serif);
  letter-spacing: -.01em;
  color: var(--accent-text);
  font-style: italic;
  font-weight: 500;
}

.landing-lead {
  max-width: 660px;
  color: var(--text-secondary);
  margin: 28px 0 0;
  font-size: clamp(17px,1.7vw,21px);
  line-height: 1.55;
}

.landing-actions {
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 40px;
  display: flex;
}

.landing-primary, .landing-secondary {
  min-height: 58px;
  transition: transform var(--transition-fast), background-color var(--transition-fast), filter var(--transition-fast);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
}

.landing-primary {
  background-color: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-md);
}

.landing-primary:hover {
  filter: brightness(1.08);
}

.landing-primary:active, .landing-secondary:active {
  transform: translateY(1px);
}

.landing-secondary {
  border: 1px solid var(--border-strong);
  background-color: color-mix(in srgb, var(--bg-surface) 60%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 600;
}

.landing-secondary:hover {
  background-color: var(--bg-hover);
}

.landing-arrow {
  width: 20px;
  height: 20px;
}

.landing-note {
  margin: var(--space-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.landing-steppe {
  z-index: 0;
  height: clamp(380px,52vw,720px);
  margin-top: -96px;
  position: relative;
}

.landing-steppe img {
  object-position: 50% 74%;
  -webkit-mask-image: linear-gradient(#0000 0%,#000 42% 72%,#0000 100%);
  mask-image: linear-gradient(#0000 0%,#000 42% 72%,#0000 100%);
}

.landing-overview {
  z-index: 1;
  padding: 0 var(--space-6);
  margin-top: clamp(-260px,-16vw,-120px);
  position: relative;
}

.landing-heading {
  letter-spacing: -.03em;
  text-align: center;
  margin: 0;
  font-size: clamp(32px,4.4vw,56px);
  font-weight: 800;
  line-height: 1.08;
}

.landing-finale {
  isolation: isolate;
  place-items: center;
  min-height: clamp(520px,56vw,760px);
  margin-top: 120px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.landing-shanyrak {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.landing-shanyrak img {
  object-position: 50% 50%;
}

.landing-finale:before {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, var(--bg-app) 0%, transparent 22%, transparent 78%, var(--bg-app) 100%), radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--bg-app) 82%, transparent), color-mix(in srgb, var(--bg-app) 40%, transparent));
  position: absolute;
  inset: 0;
}

.landing-finaleBody {
  max-width: 820px;
  padding: 96px var(--space-6);
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.landing-quote {
  color: var(--accent-text);
  font-family: var(--font-serif);
  margin: 20px 0 0;
  font-size: clamp(24px,2.8vw,34px);
  font-style: italic;
  line-height: 1.3;
}

.landing-quoteTranslation {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.landing-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  max-width: 1200px;
  padding: 28px var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-base);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.landing-footer strong {
  color: var(--text-primary);
}

@media (max-width:640px) {
  .landing-header {
    padding-inline: var(--space-4);
  }
  .landing-heroBody {
    padding: var(--space-10) var(--space-4) 0;
  }
  .landing-steppe {
    margin-top: -40px;
  }
  .landing-overview {
    padding: 0 var(--space-4);
  }
  .landing-finale {
    margin-top: 88px;
  }
  .landing-finaleBody {
    padding: 72px var(--space-4);
  }
}

/* Значки темы и звука: виден один, остальные прячет состояние страницы */
:root[data-theme='dark'] .icon-moon,
:root[data-theme='light'] .icon-sun,
.overview-sound .icon-volume,
.overview-sound .icon-play,
.overview-sound.is-on .icon-muted,
.overview-sound.is-still .icon-muted {
  display: none;
}

.overview-sound.is-on .icon-volume,
.overview-sound.is-still:not(.is-on) .icon-play {
  display: block;
}