/* Vaultoria v2 - site styles. Mobile-first; breakpoints 720px and 1024px.
   Palette, type, spacing and motion live in :root; change them there only.
   Motion follows specs/.../research/2026-10-17-motion.md: transform/opacity only, two curves,
   150/300/600 ms, reduced motion turns movement into fades. */

/* One typeface for the whole site: Onest (OFL, see fonts/Onest-OFL.txt), variable 400-800, subset to Latin,
   Cyrillic with the Kazakh letters, punctuation and ₸. One file, preloaded: the hero H1 is the LCP text. */
@font-face {
  font-family: "Onest";
  src: url("/fonts/Onest-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette. Contrast notes: text colour on its usual background. */
  --plum-950: #170b2b;            /* footer, CTA bar */
  --plum-900: #21103d;            /* dark base: header, hero, control, form section; white 17.4:1 */
  --plum-800: #2d1754;            /* raised surfaces on dark */
  --plum-700: #4a2390;            /* links and focus on light: 10.9:1 on white, 9.8:1 on lavender */
  --plum-500: #7b4fd0;            /* decoration only */
  --gold: #e9b949;                /* the one accent: filled CTA (plum-700 text 5.95:1), markers, focus on dark */
  --gold-300: #f2c75c;            /* lighter gold (plum-700 text 6.77:1) */
  --lavender-50: #f5f1fc;         /* light surface: benefits, FAQ */
  --lavender-100: #e9e1f8;        /* hairlines and card borders on light */
  --lavender-200: #d9d0ec;        /* body copy on dark: 11.8:1 on plum-900, 12.7:1 on plum-950 */

  --color-bg: #ffffff;
  --color-surface: var(--lavender-50);
  --color-ink: #1c1430;           /* headings and body on white 17.6:1 */
  --color-muted: #574e6b;         /* secondary copy: 7.8:1 white, 7.0:1 lavender */
  --color-line: var(--lavender-100);
  --color-field: #8b7fa6;         /* form control borders 3.7:1 */
  --color-link: var(--plum-700);
  --color-accent: var(--gold);
  --color-on-accent: var(--plum-700); /* button text: brand purple, 5.95:1 on gold in every state */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: var(--lavender-200);
  --color-error: #b42318;         /* 6.6:1 */
  --color-error-bg: #fdf0ee;
  --color-focus: var(--plum-700); /* switched to gold inside dark sections */

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Type scale, fluid between 360px and 1280px */
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1875rem, 1.12rem + 0.3vw, 1.25rem);
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h1: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);

  /* Spacing: 4-pt base */
  --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;
  --gutter: 16px;
  --section-y: 64px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --cta-bar-h: 76px;
  /* One hero height for all six pages (R5); content is centred vertically inside it. */
  --hero-h: 360px;

  /* Motion */
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --d-fast: 150ms;
  --d-med: 300ms;
  --d-slow: 600ms;
  --stagger: 60ms;
}

@media (min-width: 720px) {
  :root { --gutter: 24px; --section-y: 96px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --section-y: 120px; }
}

/* Cross-document view transitions: progressive enhancement, 200 ms cross-fade. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 200ms; animation-timing-function: var(--ease-std); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-weight: 640; text-wrap: balance; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.012em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.004em; font-weight: 600; }
/* Small text (nav, labels, notes, footer): Onest opens up with a hair of tracking at 14-15px. */
.nav a, #lead-form label, .form-note, .site-footer, .form-error { letter-spacing: 0.01em; }
p { margin: 0 0 var(--s-4); max-width: 66ch; text-wrap: pretty; }
a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }

/* Focus: one visible ring everywhere; gold on dark, plum on light. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.on-dark, .hero, .site-header, .site-footer, .cta-bar { --color-focus: var(--gold); }

/* Dark sections */
.on-dark, .hero {
  background: var(--plum-900);
  color: var(--color-on-dark-muted);
}
.on-dark h2, .on-dark h3, .hero h1 { color: var(--color-on-dark); }
.on-dark a, .hero a { color: var(--color-on-dark); }

/* Header */
.site-header {
  background: var(--plum-900);
  color: var(--color-on-dark);
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(217, 208, 236, 0.12);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
  padding-block: var(--s-3);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-on-dark);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex: none;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  /* Brand mark «Тұмар»: gold amulet triangle with a plum frame and a plum V (same drawing as img/favicon.svg).
     The frame keeps the mark readable on gold surfaces; on plum it merges with the background. */
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 13H54L32 53Z' fill='%2321103d' stroke='%2321103d' stroke-width='4.2' stroke-linejoin='round'/%3E%3Cpath d='M10 13H54L32 53Z' fill='%23e9b949' stroke='%23e9b949' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M22 23.5 32 41 42 23.5' fill='none' stroke='%2321103d' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.nav a { color: var(--color-on-dark-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--color-on-dark); }
.nav-short { display: none; }
/* Language switch: a pill after the menu (desktop) or on the logo row (phones, see the 480px block). */
.lang-switch {
  flex: none;
  padding: 4px 10px;
  border: 1px solid rgba(217, 208, 236, 0.35);
  border-radius: 999px;
  color: var(--color-on-dark);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch:hover { border-color: var(--gold); color: var(--color-on-dark); text-decoration: none; }

/* Buttons: gold with plum text, text only. Hover lifts by 2px and fades a soft shadow in (::before);
   press scales down. No colour change, no arrows. Card links (.card-link) share the look. */
.btn, .card-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-std);
}
.on-dark .btn, .hero .btn, .cta-bar .btn, .on-dark .card-link { color: var(--color-on-accent); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 10px 24px -10px rgba(233, 185, 73, 0.75);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-std);
  pointer-events: none;
}
.btn:hover, .card-link:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover::before { opacity: 1; }
}
.btn:active { transform: scale(0.98); }
.btn:disabled { cursor: progress; }

/* Hero: one height everywhere (--hero-h), content centred vertically. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding-block: var(--s-6);
  contain: layout paint;
}
.hero > .container { width: 100%; }
/* Aurora: two soft blobs on one pseudo-element; only transform moves. Round 4: no blur filter (a blurred
   layer this large was re-filtered every frame); the softness comes from multi-stop radial gradients, painted
   once, and the compositor only translates the layer. WCAG 2.2.2: decorative motion runs a finite course
   (2 × 30 s, then rests) instead of looping forever; reduced motion turns it off. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(44% 52% at 72% 38%, rgba(123, 79, 208, 0.5), rgba(123, 79, 208, 0.3) 35%, rgba(123, 79, 208, 0.1) 62%, rgba(123, 79, 208, 0) 82%),
    radial-gradient(32% 36% at 84% 64%, rgba(233, 185, 73, 0.12), rgba(233, 185, 73, 0.05) 45%, rgba(233, 185, 73, 0) 80%);
  will-change: transform;
  animation: drift 30s var(--ease-std) 2 alternate;
  pointer-events: none;
}
/* Gold hairline closing the dark hero. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 185, 73, 0.7) 20%, rgba(233, 185, 73, 0.15) 80%, transparent);
}
@keyframes drift {
  to { transform: translate3d(-6%, 4%, 0) scale(1.08); }
}
.hero-grid { position: relative; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 22ch; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 46ch;
  color: var(--color-on-dark-muted);
  margin-bottom: var(--s-6);
}

/* Hero composition «Хранилище»: beside the H1 from 768px; on phones a background (see «Phones: hero»).
   Round 4 (performance): each composition is one static base SVG plus a few HTML layers (.v-layer, the gift,
   the glow) that move with transform or opacity only, so the compositor runs the loops without repainting
   or re-laying out the SVG; will-change sits on those moving layers only. Containment keeps the work local. */
.vault {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
  contain: layout style;
}
.vault-svg { display: block; width: 100%; height: 100%; }
.v-layer { position: absolute; inset: 0; }
.v-layer > svg, svg.v-layer { display: block; width: 100%; height: 100%; }
.vault .tile { fill: rgba(255, 255, 255, 0.05); stroke: rgba(217, 208, 236, 0.3); stroke-width: 1; }
.vault .tile-warm { stroke: rgba(233, 185, 73, 0.55); }
.vault .tile-line { stroke: rgba(217, 208, 236, 0.4); stroke-width: 3; stroke-linecap: round; }
.vault .tile-dot { fill: var(--gold); opacity: 0.75; }
.vault .ring { fill: none; stroke: var(--gold); }
.vault .ring-1 { stroke-opacity: 0.55; }
.vault .ring-2 { stroke-opacity: 0.4; stroke-dasharray: 2 9; stroke-linecap: round; stroke-width: 1.5; }
.vault .ring-3 { stroke-opacity: 0.16; }
.vault .node { fill: var(--gold); }
.vault .core { fill: url(#vault-core); stroke: var(--gold); stroke-width: 1.5; }
.vault .orbit {
  will-change: transform;
  animation: orbit 60s linear 2; /* finite: two turns, then rests (WCAG 2.2.2) */
}
@keyframes orbit { to { transform: rotate(360deg); } }
.vault .mark { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
/* Brand mark «Тұмар» inside the compositions (icons.html.j2: tumar()). Same three strokes as the favicon;
   the group is scaled, so widths are in mark units (64). */
.vault .tumar-frame, .motif .tumar-frame { fill: var(--plum-900); stroke: var(--plum-900); stroke-width: 4.2; stroke-linejoin: round; }
.vault .tumar-body, .motif .tumar-body { fill: var(--gold); stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.vault .tumar-v, .motif .tumar-v { fill: none; stroke: var(--plum-900); stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
.vault .field-faint { opacity: 0.55; }
/* team: seat tiles, two always lit */
.vault .seat rect { fill: rgba(255, 255, 255, 0.05); stroke: rgba(217, 208, 236, 0.3); }
.vault .seat circle, .vault .seat path { fill: none; stroke: rgba(217, 208, 236, 0.45); stroke-width: 2.5; stroke-linecap: round; }
.vault .seat-lit rect { fill: rgba(233, 185, 73, 0.14); stroke: var(--gold); stroke-width: 1.5; }
.vault .seat-lit circle, .vault .seat-lit path { stroke: var(--gold); }
/* bonus: gift card with a gold code strip */
.vault .card-back { fill: var(--plum-800); stroke: rgba(217, 208, 236, 0.28); }
.vault .notch { fill: var(--plum-900); stroke: var(--gold); stroke-width: 1.5; }
.vault .perf { stroke: rgba(217, 208, 236, 0.4); stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; }
.vault .code { fill: var(--gold); }
.vault .motif-ico { color: var(--lavender-200); stroke-width: 1.4; }
.vault .sat-in .motif-ico { color: var(--gold); stroke-width: 1.5; }
/* Hero loops (R13): the team orbit, the seat glow, the gift card turn and the partner orbit run
   continuously, but only while site.js marks the hero .is-live (on screen, tab visible, no reduced
   motion). Otherwise they hold their current frame; without JS they stay on the static first frame. */
.vault:not(.is-live) * { animation-play-state: paused !important; }
.vault-team { --seat-pulse: 4.2s; }
.vault-team .orbit, .vault-bonus .orbit { animation: orbit 45s linear infinite; }
.vault-bonus .orbit { animation-duration: 90s; }
/* team glow: six seat-sized layers under the vault's radial fade. Each fades up for 35% of --seat-pulse, holds
   30%, fades out, and while dark hops to its next seat (seat-hop-N, one step per pulse); the six layers start
   1/6 pulse apart, so a new seat lights every 0.7 s and about three glow at any moment. */
.vault-team .seat-pulses {
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.vault-team .seat-pulse {
  position: absolute;
  left: 5.625%;
  top: 5.625%;
  width: 15.4167%;
  height: 15.4167%;
  opacity: 0;
  will-change: transform, opacity;
  animation-duration: var(--seat-pulse), calc(var(--seat-pulse) * 4);
  animation-timing-function: var(--ease-std), step-end;
  animation-iteration-count: infinite;
}
.vault-team .seat-pulse:nth-child(1) { animation-name: seat-pulse, seat-hop-1; animation-delay: calc(var(--seat-pulse) * 0 / 6 - var(--seat-pulse) * 4); }
.vault-team .seat-pulse:nth-child(2) { animation-name: seat-pulse, seat-hop-2; animation-delay: calc(var(--seat-pulse) * 1 / 6 - var(--seat-pulse) * 4); }
.vault-team .seat-pulse:nth-child(3) { animation-name: seat-pulse, seat-hop-3; animation-delay: calc(var(--seat-pulse) * 2 / 6 - var(--seat-pulse) * 4); }
.vault-team .seat-pulse:nth-child(4) { animation-name: seat-pulse, seat-hop-4; animation-delay: calc(var(--seat-pulse) * 3 / 6 - var(--seat-pulse) * 4); }
.vault-team .seat-pulse:nth-child(5) { animation-name: seat-pulse, seat-hop-5; animation-delay: calc(var(--seat-pulse) * 4 / 6 - var(--seat-pulse) * 4); }
.vault-team .seat-pulse:nth-child(6) { animation-name: seat-pulse, seat-hop-6; animation-delay: calc(var(--seat-pulse) * 5 / 6 - var(--seat-pulse) * 4); }
@keyframes seat-pulse {
  0%, 100% { opacity: 0; }
  35%, 65% { opacity: 1; }
}
@keyframes seat-hop-1 { 0% { transform: translate(356.76%, 237.84%); } 25% { transform: translate(118.92%, 0); } 50% { transform: translate(0, 237.84%); } 75% { transform: translate(237.84%, 0); } 100% { transform: translate(237.84%, 0); } }
@keyframes seat-hop-2 { 0% { transform: translate(237.84%, 475.68%); } 25% { transform: translate(118.92%, 237.84%); } 50% { transform: translate(237.84%, 118.92%); } 75% { transform: translate(237.84%, 237.84%); } 100% { transform: translate(237.84%, 237.84%); } }
@keyframes seat-hop-3 { 0% { transform: translate(237.84%, 118.92%); } 25% { transform: translate(356.76%, 118.92%); } 50% { transform: translate(118.92%, 356.76%); } 75% { transform: translate(0, 356.76%); } 100% { transform: translate(0, 356.76%); } }
@keyframes seat-hop-4 { 0% { transform: translate(0, 356.76%); } 25% { transform: translate(0, 118.92%); } 50% { transform: translate(118.92%, 0); } 75% { transform: translate(475.68%, 237.84%); } 100% { transform: translate(475.68%, 237.84%); } }
@keyframes seat-hop-5 { 0% { transform: translate(237.84%, 0); } 25% { transform: translate(475.68%, 237.84%); } 50% { transform: translate(356.76%, 237.84%); } 75% { transform: translate(118.92%, 356.76%); } 100% { transform: translate(118.92%, 356.76%); } }
@keyframes seat-hop-6 { 0% { transform: translate(356.76%, 356.76%); } 25% { transform: translate(237.84%, 237.84%); } 50% { transform: translate(237.84%, 475.68%); } 75% { transform: translate(0, 118.92%); } 100% { transform: translate(0, 118.92%); } }
/* bonus: the card turns around its vertical axis: a slow swing on the front, a turn, the same on the back */
.gift-stage { position: absolute; inset: 0; perspective: 1400px; }
.gift {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 53%;
  will-change: transform;
  animation: gift-turn 20s var(--ease-std) infinite;
}
.gift-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gift-back { transform: rotateY(180deg); }
@keyframes gift-turn {
  0% { transform: rotateY(-12deg); }
  34% { transform: rotateY(12deg); }
  50% { transform: rotateY(168deg); }
  84% { transform: rotateY(192deg); }
  100% { transform: rotateY(348deg); }
}
.vault .gift-band { stroke: rgba(233, 185, 73, 0.35); stroke-width: 2; }
.vault .gift-seal { fill: rgba(233, 185, 73, 0.12); stroke: var(--gold); stroke-width: 1.5; }
/* partners: two icon badges (client, company) orbit the mark, no text; they counter-rotate to stay upright */
.vault-partners .sat-orbit, .vault-partners .orbit-drift {
  will-change: transform;
  animation: orbit 48s linear infinite;
}
.vault-partners .orbit-drift { animation-duration: 140s; animation-direction: reverse; }
.vault-partners .sat { position: absolute; width: 18.75%; height: 18.75%; }
.vault-partners .sat-in {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
  animation: orbit 48s linear infinite reverse;
}
.vault .sat-disc { fill: var(--plum-800); stroke: rgba(233, 185, 73, 0.7); stroke-width: 1.5; }
.vault .logo-glow {
  position: absolute;
  inset: 27.0833%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 185, 73, 0.5) 30%, rgba(233, 185, 73, 0.2) 62%, rgba(233, 185, 73, 0));
  opacity: 0.55;
  will-change: opacity;
  animation: glow-pulse 5s var(--ease-std) infinite alternate;
}
@keyframes glow-pulse { to { opacity: 1; } }
/* Hub spotlight: a soft glow that follows the mouse over the composition (site.js moves it with transform
   inside one animation frame). Plain alpha, no blend mode: the compositor only moves and fades it. */
.vault-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 199, 92, 0.26), rgba(123, 79, 208, 0.16) 55%, rgba(123, 79, 208, 0));
  opacity: 0;
  transition: opacity var(--d-med) var(--ease-std);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
.vault.is-lit .vault-spot { opacity: 1; }
/* Hub: the brand mark turns about its vertical axis (three turns with a rest between them, then stops) and
   a highlight sweeps across the gold face while it turns. Both are transforms/opacity on one layer.
   Relief: the mark is a thin plate in a preserve-3d layer under the vault's perspective. The front face
   (gold lit from the top left, icons.html.j2: tumar_relief) sits at z 0, four side slices of the frame's
   silhouette every 1.8 px behind it, the back face (the same drawing, turned round) at -9 px, and a soft floor
   shadow at -34 px.
   As the plate turns, the slices show as a lit edge, the shadow narrows when the plate is edge-on and the
   back face takes over past 90 degrees (the faces hide their backs). Nothing here is animated on its own:
   every piece is a static texture that follows the layer's one transform. */
.vault-mark { perspective: 1200px; }
.vault-mark .mark-spin {
  transform-style: preserve-3d;
  will-change: transform;
  animation: mark-spin 16s var(--ease-std) 3;
}
@keyframes mark-spin {
  0% { transform: rotateY(0); }
  62% { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}
.vault-mark .mark-spin > svg { position: absolute; inset: 0; }
.vault-mark .mark-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vault-mark .mark-back { transform: translateZ(-9px) rotateY(180deg); }
.vault-mark .mark-side:nth-of-type(2) { transform: translateZ(-1.8px); }
.vault-mark .mark-side:nth-of-type(3) { transform: translateZ(-3.6px); }
.vault-mark .mark-side:nth-of-type(4) { transform: translateZ(-5.4px); }
.vault-mark .mark-side:nth-of-type(5) { transform: translateZ(-7.2px); }
.vault .tumar-relief .tumar-body { fill: url(#tumar-g-gold); stroke: url(#tumar-g-gold); }
.vault .tumar-side { fill: url(#tumar-g-side); stroke: url(#tumar-g-side); stroke-width: 4.2; stroke-linejoin: round; }
.vault-mark .mark-shade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 3, 18, 0.5), rgba(8, 3, 18, 0.22) 55%, rgba(8, 3, 18, 0));
  transform: translate3d(-50%, -38%, -34px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.vault-mark .mark-shine {
  position: absolute;
  inset: 0;
  clip-path: polygon(37.6% 38.4%, 62.4% 38.4%, 50% 61.2%);
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.vault-mark .mark-shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  will-change: transform, opacity;
  animation: mark-shine 16s var(--ease-std) 3;
}
@keyframes mark-shine {
  0% { transform: translateX(-40%); opacity: 0; }
  10% { opacity: 0.9; }
  40% { opacity: 0.9; }
  50% { transform: translateX(40%); opacity: 0; }
  100% { transform: translateX(40%); opacity: 0; }
}

/* Section rhythm. Section titles (H2) and their subtitles are centred on every page (R7). */
.section { padding-block: var(--section-y); }
.section h2 { margin: 0 auto var(--s-6); max-width: 32ch; text-align: center; text-wrap: balance; }
.section h2:has(+ .section-sub) { margin-bottom: var(--s-3); }
.section-sub {
  margin: 0 auto var(--s-6);
  max-width: 46rem;
  text-wrap: balance;
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--color-muted);
}
.on-dark .section-sub { color: var(--color-on-dark-muted); }
.tint { background: var(--color-surface); }
/* Below the form only (anchor jumps to #zayavka must land on real heights): skip rendering until near. */
.other-directions, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.faq-list { max-width: 72ch; margin-inline: auto; }

/* Cards */
.cards { display: grid; gap: var(--s-4); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--s-5);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--color-muted); margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-5);
  border-radius: 14px;
  background: var(--lavender-50);
  color: var(--plum-700);
}
.card-icon .ico { width: 32px; height: 32px; }

/* Card button: the gold button at full card width; its ::before is stretched over the whole card. */
.card-link {
  width: 100%;
  margin-top: auto;
  min-height: 48px;
  padding: 12px 20px;
}
.card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card .card-link { position: static; }
.card .card-link::before { border-radius: var(--radius-m); }
.card:active { transform: scale(0.98); }
/* The whole card shows the focus ring when its link is focused (the link's own ring hides then). */
.card:has(.card-link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.card:has(.card-link:focus-visible) .card-link:focus-visible { outline-color: transparent; }

/* Hub cards: a clean 1px border and a soft shadow; on hover/focus the card lifts 4px, a gold border and a
   deeper shadow fade in (two pseudo-elements, opacity only, solid colours: no edge artifacts). */
.directions { background: var(--color-surface); }
.cards-hub .card {
  border-radius: var(--radius-l);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: 0 1px 2px rgba(33, 16, 61, 0.05), 0 8px 24px -16px rgba(33, 16, 61, 0.25);
  transition: transform var(--d-med) var(--ease-enter);
}
.cards-hub .card h3 { font-size: 1.4375rem; letter-spacing: -0.01em; }
.cards-hub .card > p:last-of-type { margin-bottom: var(--s-6); }
.cards-hub .card::before,
.cards-hub .card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-med) var(--ease-std);
}
.cards-hub .card::before { border: 1.5px solid var(--gold); }
.cards-hub .card::after { z-index: -1; box-shadow: 0 22px 44px -20px rgba(33, 16, 61, 0.4); }
.cards-hub .card:has(.card-link:focus-visible) { transform: translateY(-4px); }
.cards-hub .card:has(.card-link:focus-visible)::before,
.cards-hub .card:has(.card-link:focus-visible)::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cards-hub .card:hover { transform: translateY(-4px); }
  .cards-hub .card:hover::before,
  .cards-hub .card:hover::after { opacity: 1; }
}

/* Steps (thanks page «Что дальше») use the shared path component below (.path.path-h). */

/* Trust («Почему Vaultoria»): five cards on the dark section: a slightly lighter plum surface, a thin
   border, rounded corners; icon, title, text. Desktop 2 + 3, phones one column; grid rows stretch, so the
   cards of one row share a height. Hover: the card lifts and the icon tilts (transform only). */
.tiles { display: grid; gap: var(--s-4); }
.trust-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5);
  border: 1px solid rgba(217, 208, 236, 0.16);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(123, 79, 208, 0.22), transparent 60%),
    rgba(255, 255, 255, 0.045);
  transition: transform var(--d-med) var(--ease-enter);
}
.tiles .ico {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 11px;
  margin-bottom: var(--s-5);
  border-radius: 16px;
  background: radial-gradient(circle at 30% 20%, rgba(123, 79, 208, 0.55), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.35);
  color: var(--lavender-200);
  transition: transform var(--d-med) var(--ease-enter);
}
.tiles h3 { margin-bottom: var(--s-2); }
.tiles p { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .trust-card:hover { transform: translateY(-3px); }
  .trust-card:hover .ico { transform: translateY(-3px) rotate(-6deg); }
}
@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .tiles li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tiles li { grid-column: span 2; padding: var(--s-6); }
  .tiles li:nth-child(-n+2) { grid-column: span 3; }
  .tiles li:nth-child(-n+2) h3 { font-size: 1.5rem; letter-spacing: -0.01em; }
}

/* Pains («Знакомая ситуация?»): a thread of remarks. Bubbles alternate sides with a slight tilt and
   straighten on hover; a large outlined «?» sits behind the thread. The tilt lives on the <p>, so the
   reveal transform on the <li> never fights it. */
/* The large «?» hangs 40px past the container; clip it at the section edge (720-800px had a page scroll). */
.pains { overflow-x: clip; }
.quotes {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 900px;
  margin-inline: auto;
}
.quotes::before {
  content: "?" / "";
  position: absolute;
  z-index: -1;
  display: none;
  top: -110px;
  right: -40px;
  font-size: 24rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--lavender-100);
  pointer-events: none;
}
.quotes li { display: flex; }
.quotes li:nth-child(even) { justify-content: flex-end; }
.quotes p {
  --tilt: -0.6deg;
  position: relative;
  max-width: 94%;
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-4) 54px;
  border-radius: 22px 22px 22px 6px;
  background: var(--lavender-50);
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  transform: rotate(var(--tilt));
  transition: transform var(--d-med) var(--ease-enter);
}
.quotes p::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 22px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cpath d='M0 18V11C0 4.8 3.3 1.2 8.6 0l1 2.6C6.6 3.6 5 5.6 4.8 8.6H9V18zm13 0V11c0-6.2 3.3-9.8 8.6-11l1 2.6c-3 1-4.6 3-4.8 6H22V18z' fill='%23e9b949'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quotes li:nth-child(even) p {
  --tilt: 0.7deg;
  border-radius: 22px 22px 6px 22px;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-line), 0 16px 32px -24px rgba(33, 16, 61, 0.35);
}
.quotes li:nth-child(3) p {
  --tilt: -1deg;
  background: var(--plum-900);
  color: var(--color-on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .quotes p:hover { transform: translateY(-3px); }
}
@media (min-width: 720px) {
  .quotes { gap: var(--s-2); }
  .quotes::before { display: block; }
  .quotes p { max-width: 66%; padding: var(--s-5) var(--s-6) var(--s-5) 64px; font-size: 1.1875rem; }
  .quotes p::before { left: 24px; top: 27px; width: 24px; height: 20px; }
  .quotes li:nth-child(4n+3) { padding-left: 8%; }
  .quotes li:nth-child(4n) { padding-right: 6%; }
}

/* «Что меняется»: large benefit titles and their explanations in a zigzag, linked by a gold line that
   draws on reveal (scaleX). No icons or markers on the items. On phones: the title, the explanation in a card below. */
.gains { display: grid; gap: var(--s-6); max-width: 1040px; margin-inline: auto; }
.gain h3 {
  position: relative;
  margin-bottom: var(--s-3);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--plum-900);
}
.gain p {
  margin: 0;
  max-width: none;
  padding: var(--s-5);
  border-radius: 6px var(--radius-l) var(--radius-l) var(--radius-l);
  background: var(--color-bg);
  color: var(--color-muted);
  box-shadow: 0 1px 2px rgba(33, 16, 61, 0.05), 0 18px 40px -28px rgba(33, 16, 61, 0.4);
  transition: transform var(--d-med) var(--ease-enter);
}
@media (hover: hover) and (pointer: fine) {
  .gain:hover p { transform: translateY(-4px); }
}
@media (min-width: 1024px) {
  .gains { gap: var(--s-7); }
  .gain {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 6fr;
    column-gap: 96px;
    align-items: center;
  }
  .gain h3 { margin: 0; text-align: right; }
  .gain p { padding: var(--s-6); font-size: 1.125rem; border-radius: var(--radius-l); }
  .gain:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .gain:nth-child(even) h3 { order: 2; text-align: left; }
  .gain::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc((100% - 96px) * 5 / 11 + 8px);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), rgba(233, 185, 73, 0.25));
    transform-origin: left;
    transition: transform var(--d-slow) var(--ease-enter) 250ms;
  }
  .gain:nth-child(even)::after {
    left: calc((100% - 96px) * 6 / 11 + 8px);
    background: linear-gradient(90deg, rgba(233, 185, 73, 0.25), var(--gold));
    transform-origin: right;
  }
  .js .gains:not(.in) .gain::after { transform: scaleX(0); }
}

/* Steps as a path (hub «Как получить доступ», landing «Как это работает»). A gold line fills with scroll
   (scaleY/scaleX of --p, set by site.js), each node lights up when reached (.on), outline numerals come
   from a counter. Phones and tablets: line on the left. Desktop: landings zigzag around a centre line;
   the hub (.path-h) is a horizontal line with cards stepping down like stairs. */
.path {
  --p: 1;
  counter-reset: step;
  position: relative;
  display: grid;
  gap: var(--s-5);
  max-width: 1000px;
  margin-inline: auto;
}
.path::before, .path::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--lavender-100);
}
.path::after {
  background: linear-gradient(var(--gold), #c8952a);
  transform-origin: top;
  transform: scaleY(var(--p));
  will-change: transform; /* its own layer: a scroll step only updates the transform, no repaint */
}
.path li { counter-increment: step; position: relative; padding-left: 56px; }
.path li::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 27px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 2px var(--lavender-100);
}
.path-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 32px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(233, 185, 73, 0.22);
  transition: transform var(--d-med) var(--ease-enter);
}
.js .path li:not(.on) .path-card::before { transform: scale(0); }
.path-card {
  padding: var(--s-5);
  border-radius: var(--radius-l);
  background: var(--lavender-50);
}
.path li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  right: 18px;
  top: -0.32em;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--gold) 20%, rgba(233, 185, 73, 0.18) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.path h3 { margin-bottom: var(--s-2); padding-right: 52px; }
.path p { margin: 0; color: var(--color-muted); }
@media (min-width: 1024px) {
  .path li::before { font-size: 4.25rem; right: 24px; }
  .path-card { padding: var(--s-6); }
  .path h3 { padding-right: 80px; }
  /* Landings: zigzag around a centre line. */
  .path:not(.path-h) { gap: 0; }
  .path:not(.path-h)::before, .path:not(.path-h)::after { left: 50%; margin-left: -1px; }
  .path:not(.path-h) li { width: 50%; padding: 0 56px 0 0; }
  .path:not(.path-h) li:nth-child(even) { margin-left: 50%; padding: 0 0 0 56px; }
  .path:not(.path-h) li + li { margin-top: -56px; }
  .path:not(.path-h) li:nth-child(odd)::after { left: auto; right: -11px; top: 35px; }
  .path:not(.path-h) li:nth-child(even)::after { left: -11px; top: 35px; }
  .path:not(.path-h) li:nth-child(odd) .path-card::before { left: auto; right: -6px; top: 40px; }
  .path:not(.path-h) li:nth-child(even) .path-card::before { left: -6px; top: 40px; }
  /* Numerals sit inside each card's top-right corner, never on the centre axis or its nodes. */
  .path:not(.path-h) li::before { top: 20px; font-size: 3.5rem; }
  .path:not(.path-h) li:nth-child(odd)::before { right: calc(56px + 24px); }
  /* Hub: horizontal line, cards stepping down (stairs) on stems from their nodes. */
  .path-h { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); max-width: 1120px; }
  .path-h::before, .path-h::after { left: 0; right: 0; top: 19px; bottom: auto; width: auto; height: 2px; }
  .path-h::after {
    background: linear-gradient(90deg, var(--gold), #c8952a);
    transform-origin: left;
    transform: scaleX(var(--p));
  }
  .path-h li { --drop: 100px; padding: var(--drop) 0 0; }
  .path-h li:nth-child(2) { --drop: 156px; }
  .path-h li:nth-child(3) { --drop: 212px; }
  .path-h li::before { left: 48px; right: auto; top: calc(var(--drop) - 0.86em); font-size: 3.5rem; }
  .path-h h3 { padding-right: 0; }
  .path-h li::after { left: 22px; top: 9px; }
  .path-h .path-card::before { left: 27px; top: 14px; }
  .path-h .path-card::after {
    content: "";
    position: absolute;
    left: 32px;
    top: 31px;
    width: 2px;
    height: calc(var(--drop) - 31px);
    background: linear-gradient(var(--gold), rgba(233, 185, 73, 0.15));
    transform-origin: top;
    transition: transform var(--d-slow) var(--ease-enter);
  }
  .js .path-h li:not(.on) .path-card::after { transform: scaleY(0); }
  .path-h .path-card { border-top-left-radius: 6px; }
}

/* Price: one estimate on plum, like a receipt with a torn edge (mask-image), small gold diamond bullets and
   the «free» phrase marked in gold. No seal, icon or line numbers; the receipt lifts on hover. */
/* The torn-edge shadow sits on an inner wrapper (.bill-shade), painted once into the receipt's layer; the
   hover lift moves the outer .bill, so the compositor never re-filters the shadow per frame. */
.bill {
  position: relative;
  max-width: 700px;
  margin: var(--s-7) auto 0;
  transition: transform var(--d-slow) var(--ease-enter);
}
.bill-shade { filter: drop-shadow(0 28px 34px rgba(33, 16, 61, 0.28)); }
.bill-rows {
  padding: var(--s-6) var(--s-5) 36px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(123, 79, 208, 0.38), transparent 70%),
    var(--plum-900);
  color: var(--color-on-dark-muted);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px);
  mask-image: linear-gradient(#000, #000), radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px);
  -webkit-mask-size: 100% calc(100% - 11px), 18px 12px;
  mask-size: 100% calc(100% - 11px), 18px 12px;
  -webkit-mask-position: top, bottom left;
  mask-position: top, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}
.bill-rows li {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 32px;
  border-top: 1px dashed rgba(217, 208, 236, 0.24);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.bill-rows li:first-child { border-top: 0; padding-top: 0; }
/* Bullet: a small gold diamond centred on the first line (line-height 1.5, so the line's middle is 0.75em). */
.bill-rows li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(var(--s-4) + 0.75em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.18);
  transform: rotate(45deg);
}
.bill-rows li:first-child::before { top: calc(0.75em - 4px); }
.bill-rows strong {
  font-weight: 650;
  color: var(--gold);
  text-decoration: underline 2px rgba(233, 185, 73, 0.45);
  text-underline-offset: 0.3em;
}
@media (min-width: 720px) {
  .bill-rows { padding: var(--s-7) var(--s-7) 40px; }
  .bill-rows li { font-size: 1.125rem; padding-left: 36px; }
}
@media (hover: hover) and (pointer: fine) {
  .bill:hover { transform: translateY(-4px); }
}

/* Other directions: two large plum panels, each one link (the gold button's ::before covers the panel).
   Hover/focus: the panel lifts, a gold border fades in, the direction motif moves (transform only). */
.dir-panels { display: grid; gap: var(--s-4); max-width: 1040px; margin-inline: auto; }
.card.dir-panel {
  isolation: isolate;
  overflow: hidden;
  min-height: 300px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 0;
  border-radius: var(--radius-l);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(123, 79, 208, 0.45), transparent 70%),
    var(--plum-900);
  color: var(--color-on-dark-muted);
  transition: transform var(--d-med) var(--ease-enter);
}
.dir-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--gold);
  opacity: 0;
  transition: opacity var(--d-med) var(--ease-std);
  pointer-events: none;
}
.dir-panel h3 { max-width: 16ch; margin-bottom: var(--s-3); color: var(--color-on-dark); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); letter-spacing: -0.01em; }
.card.dir-panel p { max-width: 30ch; margin-bottom: var(--s-6); color: var(--color-on-dark-muted); }
.dir-panel .card-link { color: var(--color-on-accent); }
.motif {
  position: absolute;
  z-index: -1;
  right: -52px;
  top: -52px;
  width: 168px;
  height: 168px;
  opacity: 0.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.motif .m-ring { stroke: rgba(233, 185, 73, 0.3); stroke-width: 1.5; stroke-dasharray: 2 8; }
.motif .m-move, .motif .m-lit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform var(--d-slow) var(--ease-enter);
}
.motif .m-lit { transform-box: fill-box; }
.motif .m-seat rect { fill: rgba(255, 255, 255, 0.05); stroke: rgba(217, 208, 236, 0.35); }
.motif .m-seat circle, .motif .m-seat path { stroke: rgba(217, 208, 236, 0.5); stroke-width: 2; }
.motif .m-lit rect { fill: rgba(233, 185, 73, 0.16); stroke: var(--gold); }
.motif .m-lit circle, .motif .m-lit path { stroke: var(--gold); }
.motif .m-back { fill: var(--plum-800); stroke: rgba(217, 208, 236, 0.3); }
.motif .m-card { fill: #3a1d6e; stroke: var(--gold); stroke-width: 1.5; }
.motif .m-notch { fill: var(--plum-900); stroke: var(--gold); stroke-width: 1.5; }
.motif .m-perf { stroke: rgba(217, 208, 236, 0.45); stroke-width: 1.5; stroke-dasharray: 3 5; }
.motif .m-gift { stroke: var(--lavender-200); stroke-width: 2; }
.motif .m-code, .motif .m-dot, .motif .m-sat { fill: var(--gold); }
.motif .m-orbit { stroke: rgba(233, 185, 73, 0.5); stroke-width: 1.5; stroke-dasharray: 2 7; }
.motif .m-node { fill: var(--plum-800); stroke: var(--lavender-200); stroke-width: 2; }
.motif .m-node-gold { stroke: var(--gold); }
.motif-bonus .m-move { transform: rotate(-6deg); }
.dir-panel:has(.card-link:focus-visible) { transform: translateY(-6px); }
.dir-panel:has(.card-link:focus-visible)::after { opacity: 1; }
.dir-panel:has(.card-link:focus-visible) .motif-team .m-move { transform: rotate(-8deg) scale(1.04); }
.dir-panel:has(.card-link:focus-visible) .motif-team .m-lit { transform: scale(1.14); }
.dir-panel:has(.card-link:focus-visible) .motif-bonus .m-move { transform: rotate(5deg) translateY(-8px); }
.dir-panel:has(.card-link:focus-visible) .motif-partners .m-move { transform: rotate(120deg); }
@media (hover: hover) and (pointer: fine) {
  .dir-panel:hover { transform: translateY(-6px); }
  .dir-panel:hover::after { opacity: 1; }
  .dir-panel:hover .motif-team .m-move { transform: rotate(-8deg) scale(1.04); }
  .dir-panel:hover .motif-team .m-lit { transform: scale(1.14); }
  .dir-panel:hover .motif-bonus .m-move { transform: rotate(5deg) translateY(-8px); }
  .dir-panel:hover .motif-partners .m-move { transform: rotate(120deg); }
}
@media (min-width: 720px) {
  .dir-panels { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .card.dir-panel { min-height: 340px; padding: var(--s-7) var(--s-6) var(--s-6); }
  .motif { right: -24px; top: -24px; width: 200px; height: 200px; opacity: 0.95; }
}

/* Icons */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico .acc { stroke: var(--gold); }
.ico .acc-bar { stroke-width: 3.2; }
.card-icon .ico .acc { stroke: #c8952a; }
.ico [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-enter);
}

/* FAQ accordion */
.faq-list { border-top: 1px solid var(--lavender-100); max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--lavender-100); }
.faq summary {
  position: relative;
  display: block;
  padding: var(--s-5) 48px var(--s-5) 0;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: calc(var(--s-5) + 0.1em);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%234a2390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--d-med) var(--ease-std);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--plum-700); }
.faq details p { margin: 0; padding: 0 48px var(--s-5) 0; color: var(--color-muted); }
.faq details[open] p { animation: fade-down var(--d-med) var(--ease-enter); }
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Lead form section: centred title and intro, the form in a white card below. */
.zayavka { position: relative; overflow: hidden; }
.zayavka > .container > p { margin: 0 auto; max-width: 52ch; text-align: center; font-size: var(--fs-lead); }
#lead-form { max-width: 760px; margin-inline: auto; }
#lead-form {
  --color-focus: var(--plum-700);
  position: relative;
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--radius-l);
  background: var(--color-bg);
  color: var(--color-ink);
  display: grid;
  gap: var(--s-4);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 720px) {
  #lead-form { padding: var(--s-6); grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  #lead-form > * { grid-column: 1 / -1; }
  #lead-form > div:has(#name), #lead-form > div:has(#company) { grid-column: auto; }
}
#lead-form a { color: var(--color-link); }
#lead-form label { display: block; margin-bottom: 6px; font-weight: 560; font-size: var(--fs-sm); }
input[type="text"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--color-field);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--d-fast) var(--ease-std), box-shadow var(--d-fast) var(--ease-std);
}
textarea { resize: vertical; min-height: 96px; }
select {
  appearance: none;
  padding-right: 40px;
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%234a2390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
}
input[type="text"]:hover, input[type="tel"]:hover, select:hover, textarea:hover { border-color: var(--plum-700); }
input[type="text"]:focus-visible, input[type="tel"]:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--plum-700);
  box-shadow: 0 0 0 3px rgba(74, 35, 144, 0.25);
}
.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
input.is-invalid:focus-visible, select.is-invalid:focus-visible,
textarea.is-invalid:focus-visible {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error), 0 0 0 4px var(--color-focus);
}
.form-check { display: flex; gap: var(--s-3); align-items: flex-start; }
.form-check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--plum-700);
}
#lead-form .form-check label { font-weight: 400; margin: 0; color: var(--color-muted); }
#lead-form .btn { width: 100%; margin-top: var(--s-2); }
/* Sending: a small spinner next to the text while the POST is on its way (form[data-submitting] from site.js). */
#lead-form[data-submitting] .btn::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-note { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
/* Errors fade in (no shake). */
.form-error {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-s);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: 560;
  animation: fade-in var(--d-fast) var(--ease-enter);
}
.form-error-contacts { margin: 0; font-size: var(--fs-sm); }
.form-error[hidden], .form-error-contacts[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }

/* Honeypot: off-screen, still in the form for bots. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Thanks */
.hero-thanks h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.hero-thanks .lead { margin-bottom: 0; }
.hero-policy h1 { max-width: 20ch; }
.success-check {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-5);
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.success-check circle, .success-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.success-check circle { animation: draw var(--d-slow) var(--ease-enter) 150ms forwards; }
.success-check path { animation: draw 400ms var(--ease-enter) 600ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.page-thanks .how .path { margin-bottom: var(--s-7); }
.path-card > p:only-child { color: var(--color-ink); }
.page-thanks .how .container > p { margin-inline: auto; text-align: center; }
.page-thanks .how .contacts { justify-content: center; }
.contacts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.contacts a { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.contacts a:hover span { text-decoration: underline; }
.ico-contact { width: 20px; height: 20px; flex: none; color: var(--gold); stroke-width: 1.25; }

/* Privacy: a reading page. */
.privacy .container > * { max-width: 70ch; }
.privacy h2 { font-size: 1.375rem; letter-spacing: -0.008em; margin: var(--s-6) 0 var(--s-3); max-width: none; text-align: left; }
.privacy h2:first-child { margin-top: 0; }
.privacy-revision { font-size: var(--fs-sm); color: var(--color-muted); }
.privacy .privacy-revision + h2 { margin-top: var(--s-5); }
.privacy ul { margin: 0 0 var(--s-4); padding-left: 1.25em; list-style: disc; }
.privacy li { margin-bottom: var(--s-2); text-wrap: pretty; }
.privacy li::marker { color: var(--gold); }

/* Footer */
.site-footer {
  background: var(--plum-950);
  color: var(--color-on-dark-muted);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--color-on-dark); }
.site-footer .tagline { color: var(--color-on-dark); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; max-width: 40ch; margin-bottom: var(--s-6); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.footer-nav a { font-weight: 560; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.site-footer .contacts { margin-bottom: 0; }
.footer-policy { margin: var(--s-5) 0 0; }
.legal {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(217, 208, 236, 0.14);
  max-width: none;
}

/* Mobile CTA bar: gold action pinned to the bottom; slides away while the target is on screen. */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--plum-950);
  border-top: 1px solid rgba(233, 185, 73, 0.45);
  transition: transform var(--d-med) var(--ease-enter), visibility 0s linear 0s;
}
.cta-bar .btn { width: 100%; }
.cta-bar[hidden] {
  display: flex;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--d-med) var(--ease-exit), visibility 0s linear var(--d-med);
}
body.has-cta-bar .site-footer { padding-bottom: calc(var(--s-6) + var(--cta-bar-h)); }

/* Cookie banner (opt-in analytics): phones get a light strip at the bottom that replaces the CTA bar while
   open (no overlap with the gold button); from 720px a card at the bottom left. Not modal: the page stays
   usable. Fades and rises in on the motion tokens; reduced motion keeps only the fade. */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--color-bg);
  color: var(--color-ink);
  border-top: 1px solid var(--lavender-100);
  box-shadow: 0 -12px 32px -16px rgba(33, 16, 61, 0.35);
  font-size: var(--fs-sm);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-med) var(--ease-enter), transform var(--d-med) var(--ease-enter);
}
.cookie.is-in { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie-title { margin: 0 0 var(--s-1); font-weight: 600; font-size: 1rem; }
.cookie-text { margin: 0 0 var(--s-3); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cookie .btn { min-height: 44px; padding: 10px 16px; font-size: 1rem; }
/* Decline: same size as Accept, outlined in brand purple (10.9:1 on white). */
.cookie .cookie-decline { background: transparent; color: var(--plum-700); box-shadow: inset 0 0 0 1.5px var(--plum-700); }
.cookie .cookie-decline::before { display: none; }
body.cookie-open .cta-bar { display: none; }
.link-btn {
  margin-left: var(--s-4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.site-footer .link-btn { color: var(--color-on-dark); }
@media (min-width: 720px) {
  .cookie {
    left: var(--s-5);
    right: auto;
    bottom: var(--s-5);
    max-width: 380px;
    padding: var(--s-5);
    border: 1px solid var(--lavender-100);
    border-radius: var(--radius-m);
    box-shadow: 0 18px 44px -18px rgba(33, 16, 61, 0.45);
  }
}

/* Scroll reveal: groups marked [data-reveal] fade up child by child (60 ms stagger).
   Hidden only after site.js added .js and only for groups below the fold; no JS, no hiding. */
[data-reveal] > * {
  transition: opacity var(--d-med) var(--ease-enter), transform var(--d-slow) var(--ease-enter);
}
[data-reveal] > :nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
[data-reveal] > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
[data-reveal] > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
[data-reveal] > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
[data-reveal] > :nth-child(n+6) { transition-delay: calc(var(--stagger) * 5); }
.js [data-reveal]:not(.in) > * { opacity: 0; transform: translateY(16px); }
.js [data-reveal]:not(.in) .ico [pathLength] { stroke-dashoffset: 1; }
[data-reveal] > :nth-child(2) .ico [pathLength] { transition-delay: calc(var(--stagger) * 1 + 150ms); }
[data-reveal] > :nth-child(3) .ico [pathLength] { transition-delay: calc(var(--stagger) * 2 + 150ms); }
[data-reveal] > :nth-child(4) .ico [pathLength] { transition-delay: calc(var(--stagger) * 3 + 150ms); }
[data-reveal] > :nth-child(5) .ico [pathLength] { transition-delay: calc(var(--stagger) * 4 + 150ms); }

/* Layout: tablet */
@media (min-width: 720px) {
  /* Tablet: the hub cards stack but keep one height, their buttons pinned to the card bottom. */
  .cards-hub { grid-auto-rows: 1fr; }
  .cards-hub .card-link { margin-top: auto; }
}

/* Layout: desktop */
@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--s-7);
  }
  /* The H1 starts at the container's left edge (the logo's edge) and sits vertically centred in the hero. */
  .hero-grid { align-items: center; }
  .hero-copy { justify-self: start; }
  .vault { max-width: 440px; justify-self: end; }
  /* Hub cards share row tracks (subgrid): icon, title, text and the button line up across the three
     cards, and the buttons sit on one baseline at the card bottom whatever the text length. */
  .cards-hub { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto; gap: 0 var(--s-5); }
  .cards-hub .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .cards-hub .card-icon { justify-self: start; }
  .cards-hub .card-link { align-self: end; }
  .site-footer .container {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--s-8);
  }
  /* Left column: the tagline, then the policy link on the contacts row; right column: nav, then contacts. */
  .site-footer .tagline { grid-column: 1; grid-row: 1; }
  .footer-nav { grid-column: 2; grid-row: 1; }
  .site-footer .contacts { grid-column: 2; grid-row: 2; align-self: center; }
  .footer-policy { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
  .legal { grid-column: 1 / -1; grid-row: 3; }
  .cta-bar { display: none; }
  .cta-bar[hidden] { display: none; }
  body.has-cta-bar .site-footer { padding-bottom: var(--s-6); }
}

/* Tablet and up: one hero height of 460px, the H1 and the motif side by side; thanks has no motif here. */
@media (min-width: 768px) {
  :root { --hero-h: 460px; }
  .hero-thanks .vault { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: var(--s-6); }
}
@media (min-width: 1024px) {
  :root { --hero-h: 600px; }
}

/* Phones: hero (up to 767px). One height (360px); the H1 sits low on the left, the animated motif is a
   background anchored top right (partly off the edge, 0.75 opacity). A plum scrim (bottom-up and
   left-to-right) lies between the motif and the text, so the H1 keeps AA contrast over the brightest
   part of the motif. The vault anchors to the hero itself (its wrappers are static here). */
@media (max-width: 767px) {
  .hero { align-items: flex-end; }
  .hero > .container, .hero-grid, .hero-copy { position: static; }
  .vault { position: absolute; top: -12px; right: -64px; width: 264px; opacity: 0.75; }
  .hero > .container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(33, 16, 61, 0.94) 0%, rgba(33, 16, 61, 0.8) 34%, rgba(33, 16, 61, 0) 70%),
      linear-gradient(to right, rgba(33, 16, 61, 0.75) 0%, rgba(33, 16, 61, 0.35) 55%, rgba(33, 16, 61, 0) 85%);
  }
  .hero h1, .hero .lead, .success-check { position: relative; z-index: 2; }
}

/* Phones: logo and the language switch on one row, one scrollable nav row under them. */
@media (max-width: 480px) {
  .site-header .container { flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-3) 0; }
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--s-2) var(--gutter) var(--s-3);
    gap: var(--s-4);
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-full { display: none; }
  .nav-short { display: inline; }
  .nav { justify-content: space-between; order: 2; }
  .lang-switch { order: 1; margin-left: auto; }
  .hero::before {
    background: radial-gradient(66% 56% at 90% 10%, rgba(123, 79, 208, 0.45), rgba(123, 79, 208, 0.18) 50%, rgba(123, 79, 208, 0) 80%);
    will-change: auto;
    animation: none;
  }
}

/* Reduced motion: movement becomes a fade or stops; content never waits for a scroll trigger. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal]:not(.in) > * { opacity: 1; transform: none; }
  .js [data-reveal]:not(.in) .ico [pathLength] { stroke-dashoffset: 0; }
  .hero::before, .vault .orbit, .vault * { animation: none !important; }
  .vault-spot { display: none; }
  .cards-hub .card:hover, .cards-hub .card:has(.card-link:focus-visible) { transform: none; }
  .dir-panel:hover, .dir-panel:has(.card-link:focus-visible), .gain:hover p, .trust-card:hover, .trust-card:hover .ico { transform: none; }
  .quotes p:hover { transform: rotate(var(--tilt)); }
  .bill:hover { transform: none; }
  .motif .m-move, .motif .m-lit { transform: none !important; }
  .js .gains:not(.in) .gain::after, .js .path li:not(.on) .path-card::before,
  .js .path-h li:not(.on) .path-card::after { transform: none; }
  .path { --p: 1 !important; }
  .btn:hover, .btn:active, .card:active { transform: none; }
  .cta-bar[hidden] { transform: none; }
  .cookie { transform: none; }
  @view-transition { navigation: none; }
}

/* Forced colours: keep borders and rings visible. */
@media (forced-colors: active) {
  .btn, .card-link, .card, .tiles li { border: 1px solid CanvasText; }
  .card:has(.card-link:focus-visible) { outline-color: Highlight; }
}

@media print {
  .site-header .nav, .cta-bar, .vault, .hero::before, .cookie, .link-btn { display: none; }
  .hero, .on-dark, .site-footer { background: none; color: #000; }
  .hero h1, .on-dark h2, .on-dark h3 { color: #000; }
}