:root {
    --yellow:   #EECD56;
    --orange:   #EB8A2D;
    --red:      #E83A21;
    --pink:     #F25C8E;
    --cyan:     #16F2D7;
    --violet:   #6C5CE7;
    --blue:     #0546C9;
    --blue-h:   #0438A8;
    --navy:     #0D0E3D;
    --navy2:    #212154;
    --lavender: #E9EDFF;
    --white:    #FFFFFF;
    --gray:     #6B7B8D;
    --gray-lt:  #94A3B8;
    --logo-gradient: linear-gradient(135deg, #E83A21 0%, #EB8A2D 50%, #EECD56 100%);
    --font-head: 'Raleway', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  video::-webkit-media-controls {
    display: none;
  }

  /* Дополнительно для других браузеров */
  video::-moz-media-controls {
    display: none;
  }

  /* Shared content wrapper — каркас 1280px по центру */
  .wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
  }
  @media (max-width: 1024px) { .wrap { padding: 0 32px; } }
  @media (max-width: 768px)  { .wrap { padding: 0 20px; } }

  /* ── Header ── */
  .header {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0; right: 0; z-index: 200;
    height: 72px;
    padding-top: env(safe-area-inset-top, 0);
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(13,14,61,0.07);
    animation: fadeDown 0.5s ease-out both;
  }
  .header .wrap {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo { display: flex; align-items: center; text-decoration: none; }
  .logo img { height: 30px; width: auto; display: block; }
  .requestBlock .logo img { height: unset; }
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a { font-size: 14px; font-weight: 500; color: var(--gray); text-decoration: none; transition: color 0.2s; }
  .nav a:hover { color: var(--navy); }
  .nav-actions { display: flex; align-items: center; gap: 16px; }
  .btn-login { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
  .btn-login:hover { color: var(--blue); }
  .btn-cta {
    font-size: 14px; font-weight: 600; color: var(--white);
    background: var(--blue); border: none; border-radius: 8px;
    padding: 10px 22px; cursor: pointer; transition: all 0.2s;
  }
  .btn-cta:hover { background: var(--blue-h); transform: translateY(-1px); }

  .vacancys .btn-cta {
    border: 2px solid var(--blue);
  }

  /* Burger button — visible only when nav collapses */
  .burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    background: transparent; border: none; cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background 0.2s;
  }
  .burger:hover { background: rgba(13,14,61,0.05); }
  .burger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile dropdown menu */
  .mobile-menu {
    display: none;
    border-top: 1px solid rgba(13,14,61,0.07);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
  }
  .mobile-menu[data-open="true"] { display: block; }
  .mobile-nav {
    padding: 16px 0 24px;
    display: flex; flex-direction: column;
    max-width: 1280px; margin: 0 auto;
    padding-left: 20px; padding-right: 20px;
  }
  .mobile-nav a {
    font-size: 16px; font-weight: 500;
    color: var(--navy); text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(13,14,61,0.06);
  }
  .mobile-nav a:last-of-type { border-bottom: none; }
  .mobile-nav .mobile-login { color: var(--gray); }
  .mobile-nav .btn-primary { margin-top: 16px; width: 100%; }

  /* ── Hero ── */
  .hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 0 72px;
    overflow: hidden;
  }
  .hero .wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 172px);
  }

  .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

  .dot-grid {
    position: absolute; left: 50%; top: 0;
    width: min(720px, 60%); height: 100%;
    transform: translateX(-10%);
    background-image: radial-gradient(circle, rgba(13,14,61,0.06) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, black 15%, transparent 70%);
  }

  /* Stage holds whichever variant is active */
  .stage {
    position: relative;
    margin-left: auto;
    width: clamp(360px, 42vw, 540px);
    height: clamp(360px, 42vw, 540px);
    z-index: 1; pointer-events: none;
    flex-shrink: 0;
    order: 2;
  }
  .variant {
    position: absolute;
    width: 600px; height: 600px;
    top: 50%; left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .variant.is-active { opacity: 1; }
  /* Pause heavy animations on inactive variants so they don't burn CPU */
  .variant:not(.is-active),
  .variant:not(.is-active) * { animation-play-state: paused !important; }
  /* Pause everything when stage scrolls out of viewport */
  .stage[data-visible="0"],
  .stage[data-visible="0"] * { animation-play-state: paused !important; }

  /* ─────────────────────────────────────────────────────────────
     VARIANT A — PEBBLES (gravity bounce)
     Capsule-shaped brand "drops" fall, bounce, settle in a heap.
     Each pebble has its own delay so they cascade endlessly.
  ───────────────────────────────────────────────────────────── */
  .pebbles { perspective: 600px; }
  .pebbles .ground {
    position: absolute; left: 50%; bottom: 80px;
    transform: translateX(-50%);
    width: 380px; height: 8px;
    background: linear-gradient(90deg, transparent, rgba(13,14,61,0.08), transparent);
    border-radius: 50%; filter: blur(2px);
  }
  .pebble {
    position: absolute;
    left: 50%; top: 0;
    width: 22px; height: 56px;
    border-radius: 999px;
    transform-origin: center bottom;
    will-change: transform;
    box-shadow: 0 8px 18px -6px rgba(13,14,61,0.25);
  }
  .pebble::after {
    content: ''; position: absolute;
    left: 50%; bottom: -28px;
    transform: translateX(-50%);
    width: 30px; height: 6px;
    background: rgba(13,14,61,0.18);
    border-radius: 50%; filter: blur(3px);
    animation: pebbleShadow 2.6s cubic-bezier(.55,.06,.68,.19) infinite;
  }
  @keyframes pebbleFall {
    0%   { transform: translate(var(--tx-from, -50%), -120%) rotate(var(--rot-from,-15deg)); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
    55%  { transform: translate(var(--tx-to, -50%), var(--y-floor, 480px)) rotate(var(--rot-to, 0deg)); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
    68%  { transform: translate(var(--tx-to, -50%), calc(var(--y-floor, 480px) - 60px)) rotate(var(--rot-to, 0deg)); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
    78%  { transform: translate(var(--tx-to, -50%), var(--y-floor, 480px)) rotate(var(--rot-to, 0deg)); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
    85%  { transform: translate(var(--tx-to, -50%), calc(var(--y-floor, 480px) - 22px)) rotate(var(--rot-to, 0deg)); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
    92%  { transform: translate(var(--tx-to, -50%), var(--y-floor, 480px)) rotate(var(--rot-to, 0deg)); }
    100% { transform: translate(var(--tx-to, -50%), var(--y-floor, 480px)) rotate(var(--rot-to, 0deg)); opacity: 1; }
  }
  @keyframes pebbleShadow {
    0%, 54% { opacity: 0; transform: translateX(-50%) scale(0.4); }
    55%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  }
  .pebble {
    animation: pebbleFall 2.6s infinite both;
  }
  /* Individual pebbles */
  .pebble.p1  { background: linear-gradient(160deg, #FF6A3D, #E83A21); --tx-from: -300%; --tx-to: -340%; --y-floor: 470px; --rot-from: -25deg; --rot-to: -8deg;  animation-delay: 0s;    width: 24px; height: 60px; }
  .pebble.p2  { background: linear-gradient(160deg, #FFB14E, #EB8A2D); --tx-from: -180%; --tx-to: -210%; --y-floor: 470px; --rot-from:  20deg; --rot-to:  4deg;  animation-delay: 0.35s; width: 20px; height: 50px; }
  .pebble.p3  { background: linear-gradient(160deg, #FFE07A, #EECD56); --tx-from:  -50%; --tx-to:  -90%; --y-floor: 466px; --rot-from: -10deg; --rot-to: -2deg;  animation-delay: 0.7s;  width: 22px; height: 56px; }
  .pebble.p4  { background: linear-gradient(160deg, #2A6CFF, #0546C9); --tx-from:   80%; --tx-to:   40%; --y-floor: 470px; --rot-from:  15deg; --rot-to:  6deg;  animation-delay: 1.05s; width: 22px; height: 54px; }
  .pebble.p5  { background: linear-gradient(160deg, #5BFFEA, #16F2D7); --tx-from:  220%; --tx-to:  170%; --y-floor: 472px; --rot-from: -20deg; --rot-to: -4deg;  animation-delay: 1.4s;  width: 20px; height: 48px; }
  .pebble.p6  { background: linear-gradient(160deg, #FF6A3D, #E83A21); --tx-from: -250%; --tx-to: -270%; --y-floor: 412px; --rot-from:  10deg; --rot-to:  -3deg; animation-delay: 1.75s; width: 22px; height: 52px; }
  .pebble.p7  { background: linear-gradient(160deg, #FFE07A, #EECD56); --tx-from:  -30%; --tx-to:   10%; --y-floor: 414px; --rot-from: -18deg; --rot-to:  2deg;  animation-delay: 2.1s;  width: 24px; height: 58px; }
  .pebble.p8  { background: linear-gradient(160deg, #FFB14E, #EB8A2D); --tx-from:  150%; --tx-to:  100%; --y-floor: 412px; --rot-from:  25deg; --rot-to:  8deg;  animation-delay: 2.45s; width: 22px; height: 52px; }
  .pebble.p9  { background: linear-gradient(160deg, #2A6CFF, #0546C9); --tx-from: -120%; --tx-to:  -60%; --y-floor: 358px; --rot-from: -12deg; --rot-to:  -1deg; animation-delay: 2.8s;  width: 22px; height: 50px; }
  .pebble.p10 { background: linear-gradient(160deg, #5BFFEA, #16F2D7); --tx-from:   90%; --tx-to:   50%; --y-floor: 360px; --rot-from:  18deg; --rot-to:  4deg;  animation-delay: 3.15s; width: 20px; height: 46px; }

  /* Soft halo behind */
  .pebbles .halo {
    position: absolute; left: 50%; top: 50%;
    width: 480px; height: 480px;
    transform: translate(-50%, -45%);
    background: radial-gradient(circle,
      rgba(235,138,45,0.12) 0%,
      rgba(238,205,86,0.06) 35%,
      transparent 65%);
    border-radius: 50%; filter: blur(20px);
    animation: haloPulse 6s ease-in-out infinite;
  }
  @keyframes haloPulse { 0%,100% { transform: translate(-50%,-45%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%,-45%) scale(1.06); opacity: 1; } }

  /* ─────────────────────────────────────────────────────────────
     VARIANT B — ORBIT MAGNET
     Particles orbit on tilted ellipses; center pulses like a heart.
  ───────────────────────────────────────────────────────────── */
  .orbit {}
  .orbit .core {
    position: absolute; top: 50%; left: 50%;
    width: 120px; height: 120px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE07A, #EB8A2D 45%, #E83A21 80%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.4) inset,
      0 0 60px rgba(235,138,45,0.55),
      0 0 120px rgba(232,58,33,0.3);
    animation: corePulse 2.4s ease-in-out infinite;
  }
  .orbit .core::before {
    content: ''; position: absolute; inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), transparent 50%);
    mix-blend-mode: screen;
  }
  @keyframes corePulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50%      { transform: translate(-50%,-50%) scale(1.08); }
  }
  .orbit-ring {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(13,14,61,0.1);
  }
  .orbit-ring.r1 { width: 320px; height: 220px; transform: translate(-50%,-50%) rotate(-12deg); }
  .orbit-ring.r2 { width: 460px; height: 300px; transform: translate(-50%,-50%) rotate(18deg); }
  .orbit-ring.r3 { width: 560px; height: 380px; transform: translate(-50%,-50%) rotate(-30deg); }

  .orb-track {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
  }
  .orb-track.t1 { width: 320px; height: 220px; animation: orbitSpin 8s linear infinite; }
  .orb-track.t2 { width: 460px; height: 300px; animation: orbitSpin 14s linear infinite reverse; }
  .orb-track.t3 { width: 560px; height: 380px; animation: orbitSpin 22s linear infinite; }
  .orb-track.t1 { transform: translate(-50%,-50%) rotate(-12deg); }
  .orb-track.t2 { transform: translate(-50%,-50%) rotate(18deg); }
  .orb-track.t3 { transform: translate(-50%,-50%) rotate(-30deg); }
  @keyframes orbitSpin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
  }
  /* override per-track tilt by using a child wrapper */
  .orb-track > .tilt { width: 100%; height: 100%; position: relative; }
  .orb-track.t1 > .tilt { transform: rotate(-12deg); }
  .orb-track.t2 > .tilt { transform: rotate(18deg); }
  .orb-track.t3 > .tilt { transform: rotate(-30deg); }

  .planet {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 18px currentColor;
  }
  /* place planets along their ellipse via transform */
  .orb-track.t1 .planet { top: 50%; left: 100%; transform: translate(-50%,-50%); }
  .orb-track.t2 .planet { top: 0%; left: 50%; transform: translate(-50%,-50%); }
  .orb-track.t3 .planet { top: 100%; left: 50%; transform: translate(-50%,-50%); }

  .planet.red    { width: 14px; height: 14px; background: #E83A21; color: rgba(232,58,33,0.6); }
  .planet.cyan   { width: 12px; height: 12px; background: #16F2D7; color: rgba(22,242,215,0.6); }
  .planet.violet { width: 16px; height: 16px; background: #6C5CE7; color: rgba(108,92,231,0.6); }

  /* Extra little dust particles drawn as multiple radial gradients */
  .orbit .dust {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 15% 22%, rgba(232,58,33,0.6) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 82% 18%, rgba(22,242,215,0.7) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 70% 78%, rgba(238,205,86,0.7) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 22% 75%, rgba(108,92,231,0.6) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 50% 12%, rgba(235,138,45,0.6) 0 1.2px, transparent 2px),
      radial-gradient(circle at 90% 50%, rgba(232,58,33,0.5) 0 1.2px, transparent 2px),
      radial-gradient(circle at 8% 50%, rgba(22,242,215,0.5) 0 1.2px, transparent 2px);
    animation: dustDrift 20s linear infinite;
    opacity: 0.8;
  }
  @keyframes dustDrift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ─────────────────────────────────────────────────────────────
     VARIANT C — NEWTON'S CRADLE (pendulum)
     Five colored balls hanging from a bar. Outer balls swing,
     inner ones stay still. Endless click-clack rhythm.
  ───────────────────────────────────────────────────────────── */
  .cradle {}
  .cradle .frame {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 460px; height: 380px;
  }
  .cradle .bar {
    position: absolute;
    top: 30px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 4%, rgba(13,14,61,0.5) 8%, rgba(13,14,61,0.5) 92%, transparent 96%);
    border-radius: 2px;
  }
  .cradle .post {
    position: absolute;
    top: 0; bottom: 0;
    width: 3px;
    background: rgba(13,14,61,0.18);
    border-radius: 2px;
  }
  .cradle .post.left { left: 30px; }
  .cradle .post.right { right: 30px; }

  .pendulum {
    position: absolute;
    top: 30px;
    width: 60px;
    height: 260px;
    transform-origin: top center;
  }
  .pendulum .string {
    position: absolute;
    top: 0; left: 50%;
    width: 1.5px; height: 220px;
    background: rgba(13,14,61,0.35);
    transform: translateX(-50%);
  }
  .pendulum .ball {
    position: absolute;
    top: 220px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    box-shadow:
      inset -8px -10px 18px rgba(0,0,0,0.25),
      inset 6px 8px 12px rgba(255,255,255,0.45),
      0 14px 24px -8px rgba(13,14,61,0.4);
  }
  .ball.red    { background: radial-gradient(circle at 35% 30%, #FF7E5F, #E83A21 70%); }
  .ball.orange { background: radial-gradient(circle at 35% 30%, #FFB97A, #EB8A2D 70%); }
  .ball.yellow { background: radial-gradient(circle at 35% 30%, #FFE7A1, #EECD56 70%); }
  .ball.cyan   { background: radial-gradient(circle at 35% 30%, #8FFCEC, #16F2D7 70%); }
  .ball.blue   { background: radial-gradient(circle at 35% 30%, #6B92FF, #0546C9 70%); }

  /* Pendulum positions across the 460px frame */
  .pendulum.n1 { left: calc(50% - 122px); }
  .pendulum.n2 { left: calc(50% - 61px);  }
  .pendulum.n3 { left: calc(50% - 0px);   transform: translateX(-50%); }
  .pendulum.n4 { left: calc(50% + 61px);  }
  .pendulum.n5 { left: calc(50% + 122px); }

  /* outer pendulums swing; the alternation is achieved by phase */
  .pendulum.n1 { animation: swingL 1.6s cubic-bezier(.5,0,.5,1) infinite; }
  .pendulum.n5 { animation: swingR 1.6s cubic-bezier(.5,0,.5,1) infinite; }
  /* tiny "tick" on inner balls when impact happens */
  .pendulum.n2 .ball,
  .pendulum.n3 .ball,
  .pendulum.n4 .ball {
    animation: ballNudge 1.6s ease-in-out infinite;
  }
  @keyframes swingL {
    0%   { transform: rotate(-38deg); }
    50%  { transform: rotate(0deg); }
    50.1%{ transform: rotate(0deg); }
    100% { transform: rotate(-38deg); }
  }
  @keyframes swingR {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(38deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes ballNudge {
    0%, 48%, 52%, 98%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(0.5px); }
  }
  /* Bottom shadow plate */
  .cradle .floor {
    position: absolute; left: 50%; bottom: -40px;
    transform: translateX(-50%);
    width: 380px; height: 18px;
    background: radial-gradient(ellipse at center, rgba(13,14,61,0.18), transparent 70%);
    filter: blur(6px);
  }

  /* ─────────────────────────────────────────────────────────────
     VARIANT D — LIQUID BLOB
     Hypnotic morphing organic shape with shifting brand gradient
     and a slow inner caustic.
  ───────────────────────────────────────────────────────────── */
  .blob {}
  .blob .shape {
    position: absolute; top: 50%; left: 50%;
    width: 460px; height: 460px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 30% 25%, #FFE07A, transparent 45%),
      radial-gradient(circle at 75% 30%, #EB8A2D, transparent 50%),
      radial-gradient(circle at 60% 80%, #E83A21, transparent 55%),
      radial-gradient(circle at 20% 75%, #6C5CE7, transparent 60%),
      linear-gradient(135deg, #E83A21, #EB8A2D 50%, #EECD56);
    background-size: 200% 200%;
    border-radius: 47% 53% 60% 40% / 45% 50% 50% 55%;
    box-shadow:
      0 30px 80px -20px rgba(232,58,33,0.4),
      0 0 100px rgba(235,138,45,0.25);
    will-change: transform, border-radius, background-position;
    animation:
      blobMorph 14s ease-in-out infinite,
      blobShift 16s ease-in-out infinite,
      blobRot 40s linear infinite;
  }
  .blob .shape::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at 70% 20%, rgba(255,255,255,0.5), transparent 30%),
      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.2), transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  /* removed rotating conic-gradient overlay — too heavy with mix-blend-mode + spin */

  /* ── Inside-blob dynamics ──
     (pulsing halo + sonar ripples removed — they read as a "nipple" at center).
     Movement now lives only in the bubbles, satellites and the blob's own morph. */
  .blob .core-stack,
  .blob .ripple,
  .blob .core-halo { display: none; }
  /* Tally counter inside the blob */
  .blob .tally {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 0 2px 12px rgba(13,14,61,0.35);
    font-family: var(--font-head);
    z-index: 3;
    animation: tallyBob 4s ease-in-out infinite;
  }
  @keyframes tallyBob {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, -54%); }
  }
  .blob .tally-num {
    font-size: 56px; font-weight: 900;
    letter-spacing: -0.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .blob .tally-num .digit {
    display: inline-block;
    animation: digitFlip 0.6s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes digitFlip {
    0%   { transform: translateY(-100%) rotateX(-90deg); opacity: 0; }
    100% { transform: translateY(0) rotateX(0); opacity: 1; }
  }
  .blob .tally-lbl {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    opacity: 0.9;
  }
  /* Floating bubbles rising inside the blob */
  .blob .bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 60%, transparent 80%);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
  }
  .blob .bubble.b1 { width: 14px; height: 14px; left: 38%; top: 70%; animation: bubbleRise 5s ease-in 0s    infinite; }
  .blob .bubble.b2 { width: 8px;  height: 8px;  left: 58%; top: 70%; animation: bubbleRise 5.6s ease-in 1.2s  infinite; }
  .blob .bubble.b3 { width: 11px; height: 11px; left: 48%; top: 70%; animation: bubbleRise 5.2s ease-in 2.4s  infinite; }
  @keyframes bubbleRise {
    0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    15%  { opacity: 0.9; }
    50%  { transform: translateY(-110px) translateX(-8px) scale(1); }
    85%  { opacity: 0.6; }
    100% { transform: translateY(-220px) translateX(6px) scale(0.4); opacity: 0; }
  }
  @keyframes blobMorph {
    0%   { border-radius: 47% 53% 60% 40% / 45% 50% 50% 55%; }
    25%  { border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%; }
    50%  { border-radius: 40% 60% 55% 45% / 60% 55% 40% 45%; }
    75%  { border-radius: 55% 45% 40% 60% / 45% 60% 55% 40%; }
    100% { border-radius: 47% 53% 60% 40% / 45% 50% 50% 55%; }
  }
  @keyframes blobShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  @keyframes blobRot {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
  }
  .blob .satellite {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .blob .satellite.s1 {
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    background: #16F2D7;
    box-shadow: 0 0 16px rgba(22,242,215,0.7);
    animation: satOrbit1 7s linear infinite;
  }
  .blob .satellite.s2 {
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: #0546C9;
    box-shadow: 0 0 14px rgba(5,70,201,0.7);
    animation: satOrbit2 11s linear infinite;
  }
  @keyframes satOrbit1 {
    from { transform: translate(-50%,-50%) rotate(0deg) translateX(260px) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg) translateX(260px) rotate(-360deg); }
  }
  @keyframes satOrbit2 {
    from { transform: translate(-50%,-50%) rotate(0deg) translateX(310px) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(-360deg) translateX(310px) rotate(360deg); }
  }

  /* ─────────────────────────────────────────────────────────────
     PULSE CARD — re-themed per variant via theme classes
  ───────────────────────────────────────────────────────────── */
  /* Positioned around the blob at ~215° (lower-left). Lives inside .stage so it follows the animation. */
  .pulse-card {
    position: absolute;
    /* 215° from center, radius ≈50% of stage: sin≈–0.57, cos≈–0.82 */
    left: 22%;
    top: 91%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: auto;
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 12px 36px -12px rgba(13,14,61,0.18), 0 4px 12px rgba(13,14,61,0.05);
    display: flex; align-items: center; gap: 16px;
    opacity: 0;
    animation: pulseCardIn 0.6s ease-out 0.9s forwards, floatCard 7s ease-in-out 1.5s infinite;
    white-space: nowrap;
  }
  @keyframes pulseCardIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
  @keyframes floatCard {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 6px)); }
  }
  .pc-tick {
    width: 10px; height: 10px; border-radius: 50%;
    background: #16F2D7;
    box-shadow: 0 0 0 0 rgba(22,242,215,0.7);
    animation: tickPulse 1.4s ease-out infinite;
    flex-shrink: 0;
  }
  @keyframes tickPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,242,215,0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(22,242,215,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,242,215,0); }
  }
  .pc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pc-line1 {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--gray); letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .pc-line2 {
    font-family: var(--font-head);
    font-size: 16px; font-weight: 700;
    color: var(--navy); letter-spacing: -0.01em; line-height: 1.25;
  }
  .pc-line2 .num {
    font-variant-numeric: tabular-nums;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Left: text ── */
  .hero-content {
    position: relative;
    z-index: 3;
    max-width: 560px;
    flex: 1 1 auto;
    padding-right: 32px;
    order: 1;
  }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px 5px 8px;
    background: var(--lavender); border-radius: 100px;
    font-size: 12px; font-weight: 600; color: var(--blue);
    margin-bottom: 28px;
    animation: fadeUp 0.5s ease-out 0.2s both;
  }
  .badge-dot {
    width: 6px; height: 6px;
    background: var(--blue); border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
  }
  .hero h1 {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.1; color: var(--navy);
    margin-bottom: 20px; letter-spacing: -0.02em;
    animation: fadeUp 0.5s ease-out 0.3s both;
  }
  .hero h1 em {
    font-style: normal;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-sub {
    font-size: 16px; line-height: 1.7; color: var(--gray);
    max-width: 440px; margin-bottom: 32px;
    animation: fadeUp 0.5s ease-out 0.4s both;
  }
  .hero-actions {
    display: flex; align-items: center; gap: 14px;
    animation: fadeUp 0.5s ease-out 0.5s both;
  }
  .btn-primary {
    font-family: var(--font-body);
    font-size: 15px; font-weight: 600; color: var(--white);
    background: var(--blue); border: none; border-radius: 10px;
    padding: 13px 28px; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(5,70,201,0.25);
  }
  .btn-primary:hover { background: var(--blue-h); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(5,70,201,0.3); }
  .btn-secondary {
    font-family: var(--font-body);
    font-size: 15px; font-weight: 500; color: var(--navy);
    background: transparent;
    border: 1.5px solid rgba(13,14,61,0.14);
    border-radius: 10px; padding: 12px 26px; cursor: pointer;
    transition: all 0.2s;
  }
  .btn-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
  .hero-stats {
    display: flex; gap: 40px;
    margin-top: 44px; padding-top: 24px;
    border-top: 1px solid rgba(13,14,61,0.07);
    animation: fadeUp 0.5s ease-out 0.65s both;
  }
  .stat-val { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
  .stat-lbl { font-size: 12px; color: var(--gray-lt); font-weight: 500; margin-top: 2px; }

  /* ── Variant labels (helper) ── */
  .variant-label {
    position: absolute; left: 0; bottom: -52px;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--gray-lt);
    letter-spacing: 0.08em; text-transform: uppercase;
    z-index: 5;
    display: flex; gap: 14px;
  }
  .variant-label .name { color: var(--navy); font-weight: 600; }

  /* Animations */
  @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* ── Responsive ── */
  @media (max-width: 1280px) {
    .nav { gap: 22px; }
  }
  /* Tablet / narrow desktop: hide the animation entirely, hero becomes single column */
  @media (max-width: 1024px) {
    .hero { padding: 110px 0 70px; min-height: auto; }
    .hero .wrap {
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
    }
    .hero-content { order: 1; max-width: 640px; margin: 0 auto; text-align: center; padding-right: 0; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .stage { display: none; }
    .dot-grid { display: none; }
    .variant-label { display: none; }
  }
  @media (max-width: 768px) {
    .header { height: 64px; }
    .nav { display: none; }
    .nav-actions { gap: 10px; }
    .btn-cta { padding: 9px 16px; font-size: 13px; }
    .btn-login { display: none; }
    .burger { display: inline-flex; }
    .hero { padding: 92px 0 48px; }
    .hero h1 { font-size: clamp(30px, 8vw, 40px); }
    .hero-sub { font-size: 15px; }
    .hero-actions {
      flex-direction: column; align-items: stretch;
      width: 100%; max-width: 320px; margin: 0 auto;
    }
    .btn-primary, .btn-secondary { width: 100%; text-align: center; }
    .hero-stats {
      gap: 20px; flex-wrap: wrap;
      justify-content: center; text-align: center;
    }
    .stat { flex: 1 1 30%; min-width: 90px; }
    .stat-val { font-size: 18px; }
    .stage {
      width: min(360px, 88vw);
      height: min(360px, 88vw);
      margin-top: 28px;
    }
    /* on phones: bring the card closer to the stage edge so it doesn't overflow */
    .pulse-card { padding: 12px 14px; left: 30%; top: 92%; white-space: normal; max-width: 70%; }
    .pc-line2 { font-size: 14px; }
    .pc-line1 { font-size: 10px; }
  }
  @media (max-width: 420px) {
    .logo img { height: 24px; }
    .hero { padding: 80px 0 36px; }
    .hero h1 { font-size: clamp(26px, 8.5vw, 34px); }
    .stage { width: 88vw; height: 88vw; }
  }

  /* ═══════════════════════════════════════════════════════════
     SECTION CHROME — shared
     ═══════════════════════════════════════════════════════════ */
  section { padding: 110px 0; position: relative; }
  @media (max-width: 1024px) { section { padding: 80px 0; } }
  @media (max-width: 768px)  { section { padding: 64px 0; } }

  .section-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    color: var(--blue); letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.15; letter-spacing: -0.02em;
    color: var(--navy);
    max-width: 880px;
    text-wrap: balance;
  }
  /* Single-line modifier — keep title on one line on wide enough viewports */
  .section-title.is-oneline {
    max-width: none;
    text-wrap: nowrap;
    white-space: nowrap;
  }
  @media (max-width: 900px) {
    .section-title.is-oneline {
      white-space: normal;
      text-wrap: balance;
    }
  }
  .section-sub {
    margin-top: 16px;
    font-size: 16px; line-height: 1.6; color: var(--gray);
    max-width: 640px;
  }
  .section-head { margin-bottom: 56px; }
  @media (max-width: 768px) { .section-head { margin-bottom: 40px; } }

  /* ═══════════════════════════════════════════════════════════
     CLIENT LOGOS (trust bar)
     ═══════════════════════════════════════════════════════════ */
  .trust { padding: 56px 0; border-top: 1px solid rgba(13,14,61,0.06); border-bottom: 1px solid rgba(13,14,61,0.06); background: #FAFBFD; }
  .trust .wrap { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 48px; align-items: center; }
  .trust-label {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    color: var(--gray); letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1.5;
  }
  .trust-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 56px;
    align-items: center;
    gap: 12px;
  }
  .trust-logo {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .trust-logo img {
    max-height: 30px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.78) opacity(0.7);
    transition: filter 0.3s;
  }
  .trust-logo:hover img { filter: grayscale(0%) opacity(1); }
  @media (max-width: 768px) {
    .trust .wrap { grid-template-columns: 1fr; gap: 24px; }
    .trust-logos { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 420px) {
    .trust-logos { grid-template-columns: repeat(2, 1fr); }
  }

  /* ═══════════════════════════════════════════════════════════
     TASKS — split percentages
     ═══════════════════════════════════════════════════════════ */
  .tasks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .task-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 18px;
    padding: 32px 28px 28px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  .task-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(13,14,61,0.18); border-color: rgba(13,14,61,0.14); }
  .task-card .pct {
    font-family: var(--font-head);
    font-weight: 800; font-size: 56px; line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .task-card.c1 .pct,
  .task-card.c2 .pct,
  .task-card.c3 .pct,
  .task-card.c4 .pct { background: linear-gradient(135deg, #0546C9 0%, #16F2D7 85%); -webkit-background-clip: text; background-clip: text; }
  .task-card .pct {
    -webkit-text-fill-color: transparent;
  }
  .task-card h3 {
    font-family: var(--font-head);
    font-weight: 700; font-size: 18px;
    line-height: 1.3; letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 10px;
  }
  .task-card p {
    font-size: 14px; line-height: 1.55; color: var(--gray);
  }
  .tasks-footnote {
    margin-top: 28px;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--gray-lt); letter-spacing: 0.04em;
  }
  @media (max-width: 1024px) { .tasks-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px)  { .tasks-grid { grid-template-columns: 1fr; } .task-card .pct { font-size: 48px; } }

  /* ═══════════════════════════════════════════════════════════
     HOW IT WORKS — 3 columns
     ═══════════════════════════════════════════════════════════ */
  .how { background: var(--navy); color: var(--white); }
  .how .section-title { color: var(--white); }
  .how .section-eyebrow { color: var(--cyan); }
  .how .section-sub { color: rgba(255,255,255,0.6); }

  .how-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }
  .how-card {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 32px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background 0.25s, border-color 0.25s;
    overflow: hidden;
  }
  .how-card:hover { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.16); }
  .how-card.span-7 { grid-column: span 7; }
  .how-card.span-5 { grid-column: span 5; }
  .how-card.span-12 { grid-column: span 12; }

  .how-step {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 18px;
    color: var(--cyan);
  }
  .how-step .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
  }
  .how-card.k1 .how-step { color: #FFD66B; }
  .how-card.k2 .how-step { color: #16F2D7; }
  .how-card.k3 .how-step { color: #EB8A2D; }
  .how-card.k4 .how-step { color: #F25C8E; }
  .how-card.k5 .how-step { color: #9B8CFF; }

  .how-card h3 {
    font-family: var(--font-head);
    font-weight: 700; font-size: 22px;
    color: var(--white); letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 10px;
    text-wrap: balance;
  }
  .how-card .lead {
    font-family: var(--font-head);
    font-weight: 600; font-size: 16px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 14px;
    line-height: 1.35;
  }
  .how-card p {
    font-size: 14.5px; line-height: 1.65;
    color: rgba(255,255,255,0.62);
  }

  /* ─ Shared mock chrome ─ */
  .mock {
    margin-top: 24px;
    background: #FBFCFE;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    color: var(--navy);
  }
  .mock-tabs {
    display: flex; align-items: center; gap: 28px;
    padding: 14px 20px 0;
    border-bottom: 1px solid rgba(13,14,61,0.08);
    background: var(--white);
  }
  .mock-tabs .tab {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 500;
    color: var(--gray);
    padding: 6px 0 12px;
    position: relative;
    white-space: nowrap;
  }
  .mock-tabs .tab.active {
    color: var(--navy);
    font-weight: 600;
  }
  .mock-tabs .tab.active::after {
    content: ''; position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--blue-h);
    border-radius: 2px 2px 0 0;
  }

  /* ─ MOCK 1 — constructor Ken Burns slideshow ─ */
  .kb-wrap {
    position: relative;
    overflow: hidden;
    height: 360px;
    background: #eef0f8;
  }
  .kb-slide {
    position: absolute;
    inset: 0;
    will-change: opacity;
  }
  .kb-slide:nth-child(1) {
    z-index: 1;
    animation: kbOpacity1 20s ease-in-out infinite;
  }
  .kb-slide:nth-child(2) {
    z-index: 2;
    animation: kbOpacity2 20s ease-in-out infinite;
    animation-delay: -10s; /* start at 50% → opacity 0 at load */
  }
  .kb-slide img,
  .kb-slide video {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    will-change: transform;
  }
  /* slide 1: dynamic zoom-in video */
  .kb-slide:nth-child(1) img, .kb-slide:nth-child(1) video {
    transform-origin: 50% 50%;
    animation: kbZoomIn1 8s ease-in infinite;
  }
  /* slide 1: visible 0–8 s, fades 8–10 s, invisible 10–18 s, fades back 18–20 s */
  @keyframes kbOpacity1 {
    0%,  40%  { opacity: 1; }
    50%       { opacity: 0; }
    90%       { opacity: 0; }
    100%      { opacity: 1; }
  }
  /* slide 2: at -10 s delay it starts mid-cycle (50%=0); fades in 80→90%, visible, fades out 40→50% */
  @keyframes kbOpacity2 {
    0%,  40%  { opacity: 1; }
    50%       { opacity: 0; }
    80%       { opacity: 0; }
    90%, 100% { opacity: 1; }
  }
  /* Slide 1: dynamic zoom-in — от 100% до 140% за 8 с */
  @keyframes kbZoomIn1 {
    from { transform: scale(1.0); }
    to   { transform: scale(1.4); }
  }
  /* Slide 2: быстрый zoom-out от top-left, затем плавный пан к top-right */
  .kb-slide:nth-child(2) img, .kb-slide:nth-child(2) video {
    transform-origin: 0% 0%;             /* top-left */
    object-position: 0% 0%;
    animation: kbZoomOutPan2 20s ease-out infinite;
    animation-delay: -10s;
  }
  @keyframes kbZoomOutPan2 {
    /* быстрый zoom-out: 0→20% (4 s при цикле 20 s) */
    0%   { transform: scale(1.6); object-position:   0% 0%; }
    20%  { transform: scale(1.0); object-position:   0% 0%; }
    /* плавный пан top-left → top-right: 20→100% */
    100% { transform: scale(1.0); object-position: 100% 0%; }
  }

  .qb-list {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .qb-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 4px;
    padding: 11px 12px;
    font-size: 13px;
    color: var(--navy);
    min-height: 40px;
  }
  .qb-row.qb-intro {
    /* same look as regular question rows */
    background: var(--white);
    border-color: rgba(13,14,61,0.08);
  }
  .qb-row.qb-end {
    background: rgba(34,197,94,0.05);
    border-color: rgba(34,197,94,0.16);
  }
  .qb-n {
    font-family: var(--font-head);
    font-size: 13px; font-weight: 700;
    color: var(--navy);
    width: 16px;
    flex-shrink: 0;
    text-align: center;
  }
  .qb-pencil {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--gray-lt);
  }
  .qb-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }
  .qb-badge {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 500;
    color: var(--gray);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .qb-badge.intro {
    color: var(--gray);
  }
  .qb-badge.end {
    color: #16A34A;
  }
  .qb-badge.type {
    font-family: var(--font-mono);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--gray);
    background: transparent;
    padding: 0;
  }
  .qb-drop {
    border-style: dashed;
    border-color: rgba(13,14,61,0.18);
    background: rgba(13,14,61,0.02);
    color: var(--gray-lt);
    font-size: 12.5px;
    justify-content: center;
    font-style: italic;
  }
  .qb-actions {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--gray-lt);
    flex-shrink: 0;
  }
  .qb-actions .ic {
    width: 14px; height: 14px;
    color: rgba(13,14,61,0.32);
    display: inline-flex;
    align-items: center; justify-content: center;
  }
  .qb-actions .ic svg {
    width: 100%; height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ─ MOCK 2 — results infographic (loose UI atoms on dark bg) ─ */
  .dash {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .dash-tile {
    background: var(--white);
    border-radius: 10px;
    padding: 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 18px 36px -22px rgba(0,0,0,0.6),
      0 2px 6px rgba(0,0,0,0.18);
  }
  /* offset every other tile so it doesn’t read as a single dashboard screen */
  .dash-tile:nth-child(2) { transform: translateY(14px); }
  .dash-tile:nth-child(3) { transform: translateY(-10px); }
  .dash-tile:nth-child(4) { transform: translateY(4px); }
  .dash-lbl {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--gray);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .dash-big {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 32px;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .dash-big.green { color: #16A34A; }
  .dash-big small {
    font-size: 16px;
    color: var(--gray-lt);
    font-weight: 600;
    margin-left: 4px;
  }
  .dash-bar { display: flex; flex-direction: column; gap: 6px; }
  .dash-bar-track {
    position: relative;
    height: 6px;
    background: #EEF1F4;
    border-radius: 3px;
  }
  .dash-bar-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, #86EFAC, #16A34A);
    border-radius: 3px;
  }
  .dash-bar-ticks {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--gray-lt);
    font-variant-numeric: tabular-nums;
  }
  .dash-dots {
    display: flex; gap: 4px; align-items: center;
  }
  .dash-dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 1.4px solid rgba(13,14,61,0.18);
    display: inline-block;
    flex-shrink: 0;
  }
  .dash-dots i.on {
    background: var(--blue);
    border-color: var(--blue);
  }
  .dash-bars {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
  }
  .dash-bars li { display: flex; flex-direction: column; gap: 4px; }
  .dash-bars .head {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 11px;
  }
  .dash-bars .head b {
    font-weight: 500;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-bars .head em {
    font-style: normal;
    font-family: var(--font-mono);
    color: var(--gray);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .dash-bars .bar {
    position: relative;
    height: 5px;
    background: #EEF1F4;
    border-radius: 3px;
    overflow: hidden;
  }
  .dash-bars .bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--w, 50%);
    background: var(--blue);
    border-radius: 3px;
  }
  .dash-bars li.r .bar::before { background: linear-gradient(90deg, #FF6A3D, #E83A21); }
  .dash-bars li.o .bar::before { background: linear-gradient(90deg, #FFB14E, #EB8A2D); }
  .dash-bars li.b .bar::before { background: linear-gradient(90deg, #2A6CFF, #0546C9); }
  .dash-stack {
    display: flex;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
  }
  .dash-stack span { height: 100%; }
  .dash-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--gray);
  }
  .dash-legend span {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .dash-legend i {
    width: 8px; height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .dash-legend b {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 540px) {
    .dash { grid-template-columns: 1fr; gap: 10px; }
    .dash-tile:nth-child(n) { transform: none; }
  }

  /* ─ Abstract viz inside k3 (bar + donut + rating) ─ */
  .viz {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 32px;
    align-items: end;
    padding: 8px 4px 4px;
  }
  .viz-cell {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 160px;
    position: relative;
  }

  /* Vertical bars */
  .viz-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    height: 160px;
  }
  .viz-bars i {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 6px 6px 2px 2px;
    background: var(--c, #EB8A2D);
    position: relative;
    transform-origin: bottom;
    animation: vizBarIn 0.8s cubic-bezier(.34,1.56,.64,1) both;
  }
  .viz-bars i::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
    border-radius: inherit;
  }
  .viz-bars i:nth-child(1) { animation-delay: 0.05s; }
  .viz-bars i:nth-child(2) { animation-delay: 0.12s; }
  .viz-bars i:nth-child(3) { animation-delay: 0.19s; }
  .viz-bars i:nth-child(4) { animation-delay: 0.26s; }
  .viz-bars i:nth-child(5) { animation-delay: 0.33s; }
  .viz-bars i:nth-child(6) { animation-delay: 0.40s; }
  @keyframes vizBarIn {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
  }

  /* Donut */
  .viz-donut {
    width: 160px; height: 160px;
    position: relative;
  }
  .viz-donut svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
  }
  .viz-donut circle {
    fill: none;
    stroke-width: 14;
    stroke-linecap: butt;
  }
  .viz-donut .track { stroke: rgba(255,255,255,0.07); }
  .viz-donut .seg {
    stroke-dasharray: 0 999;
    animation: vizDonutDraw 1.2s cubic-bezier(.5,0,.2,1) both;
  }
  .viz-donut .seg.s1 { stroke: #16F2D7; --len: 116; --off: 0;    animation-delay: 0.1s; }
  .viz-donut .seg.s2 { stroke: #EB8A2D; --len: 75;  --off: -116; animation-delay: 0.5s; }
  .viz-donut .seg.s3 { stroke: #F25C8E; --len: 40;  --off: -191; animation-delay: 0.9s; }
  .viz-donut .seg { stroke-dashoffset: var(--off); }
  @keyframes vizDonutDraw {
    from { stroke-dasharray: 0 999; }
    to   { stroke-dasharray: var(--len) 999; }
  }
  .viz-donut-center {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    color: #fff;
    font-family: var(--font-head);
  }
  .viz-donut-center .pct {
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.03em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .viz-donut-center .lbl {
    font-family: var(--font-mono);
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-top: 6px;
  }

  /* Rating */
  .viz-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 160px;
  }
  .viz-rating .num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .viz-rating .num small {
    font-size: 22px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    margin-left: 2px;
    letter-spacing: 0;
  }
  .viz-stars {
    display: flex; gap: 6px;
  }
  .viz-stars svg {
    width: 18px; height: 18px;
    display: block;
  }
  .viz-stars .on { fill: #FFD66B; }
  .viz-stars .off { fill: rgba(255,255,255,0.12); }

  @media (max-width: 900px) {
    .viz { grid-template-columns: 1fr; gap: 28px; }
    .viz-cell { min-height: 0; }
    .viz-bars { height: 120px; }
    .viz-donut { width: 140px; height: 140px; }
    .viz-rating { height: auto; }
  }
  .res-tile {
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 6px;
    padding: 14px;
  }
  .res-tile-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
  }
  .res-tile-title {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--gray);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .res-chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--blue);
    padding: 2px 7px;
    background: rgba(5,70,201,0.08);
    border-radius: 100px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .res-chip.live {
    color: #16A34A;
    background: rgba(34,197,94,0.08);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .res-chip.live::before {
    content: ''; width: 5px; height: 5px;
    border-radius: 50%; background: #16A34A;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: tickPulse 1.6s ease-out infinite;
  }

  /* Heatmap mock — mini UI with hot zones */
  .hm {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    height: 142px;
    border-radius: 4px;
    overflow: hidden;
  }
  .hm-side {
    display: flex; flex-direction: column; gap: 4px;
  }
  .hm-side i {
    height: 12px;
    background: rgba(13,14,61,0.06);
    border-radius: 1px;
  }
  .hm-side i:nth-child(1) { background: rgba(13,14,61,0.15); }
  .hm-body {
    display: flex; flex-direction: column; gap: 6px;
  }
  .hm-card {
    flex: 1;
    background: rgba(13,14,61,0.04);
    border-radius: 3px;
    position: relative;
    padding: 5px 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .hm-card::before {
    content: ''; width: 26px; height: 16px;
    background: rgba(13,14,61,0.08);
    border-radius: 1px;
    flex-shrink: 0;
  }
  .hm-card::after {
    content: ''; flex: 1;
    height: 6px;
    background: rgba(13,14,61,0.07);
    border-radius: 1px;
  }
  .hm-blob {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(7px);
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
  }
  .hm-blob.r { background: radial-gradient(circle, rgba(232,58,33,0.85) 0%, rgba(232,58,33,0) 70%); }
  .hm-blob.y { background: radial-gradient(circle, rgba(255,180,40,0.85) 0%, rgba(255,180,40,0) 70%); }
  .hm-blob.g { background: radial-gradient(circle, rgba(34,197,94,0.7) 0%, rgba(34,197,94,0) 70%); }
  .hm-legend {
    margin-top: 10px;
    display: flex; gap: 12px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--gray);
    letter-spacing: 0.04em;
  }
  .hm-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .hm-legend i {
    width: 8px; height: 8px; border-radius: 50%;
  }
  .hm-legend .lg-r i { background: #E83A21; }
  .hm-legend .lg-y i { background: #FFB428; }
  .hm-legend .lg-g i { background: #22C55E; }

  .res-big {
    display: flex; align-items: baseline; gap: 8px;
  }
  .res-big .num {
    font-family: var(--font-head);
    font-size: 38px; font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--navy);
    line-height: 1;
  }
  .res-big .delta {
    font-family: var(--font-mono);
    font-size: 11px; color: #16A34A;
  }
  .res-spark {
    display: flex; align-items: flex-end; gap: 3px;
    height: 30px; margin-top: 14px;
  }
  .res-spark span {
    flex: 1; background: rgba(5,70,201,0.35);
    border-radius: 1px;
  }
  .res-spark span:last-child { background: var(--blue); }
  .res-meta {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--gray-lt);
    letter-spacing: 0.04em;
    margin-top: 10px;
  }

  /* ─ MOCK 3 — channels chips ─ */
  .ch-list {
    margin-top: 22px;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .ch-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 6px 14px 6px 10px;
    font-size: 12.5px; color: rgba(255,255,255,0.82);
  }
  .ch-chip .d {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cyan);
  }
  .ch-chip.c1 .d { background: #16F2D7; }
  .ch-chip.c2 .d { background: #EB8A2D; }
  .ch-chip.c3 .d { background: #F25C8E; }
  .ch-chip.c4 .d { background: #6C5CE7; }
  .ch-chip.c5 .d { background: #FFD66B; }
  .ch-chip.c6 .d { background: #0546C9; }
  .ch-stat {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    display: flex; align-items: last baseline; flex-wrap: wrap; gap: 14px;
    font-family: var(--font-head);
  }
  .panel-logos {
    flex-basis: 100%;
    display: flex; align-items: center; gap: 16px;
    margin-top: 16px;
  }
  .panel-logo {
    height: 26px; width: auto; object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.6;
  }
  .ch-stat .big {
    font-family: var(--font-body);
    font-size: 28px; font-weight: 700;
    color: var(--white); letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .ch-stat .lbl {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.62);
    letter-spacing: 0;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
  }

  /* ─ MOCK 4 — automation rule ─ */
  .rule {
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
  }
  .rule-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid var(--cyan);
    border-radius: 6px;
    color: rgba(255,255,255,0.88);
  }
  .rule-row.trigger { border-color: #F25C8E; }
  .rule-row.action  { border-color: #16F2D7; }
  .rule-row .label {
    font-size: 9.5px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: 56px;
  }
  .rule-arrow {
    align-self: center;
    color: rgba(255,255,255,0.3);
    margin-left: 56px;
    font-family: var(--font-mono);
  }

  /* ─ MOCK 5 — team ─ */
  .team-mock {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .team-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .team-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-weight: 700; font-size: 11px;
    color: var(--white);
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .team-info { min-width: 0; }
  .team-name {
    font-size: 13px;
    color: var(--white);
    font-weight: 500;
    line-height: 1.2;
  }
  .team-role {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.06em;
    margin-top: 2px;
    text-transform: uppercase;
  }
  .team-access {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: rgba(255,255,255,0.5);
    padding: 2px 7px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .team-access.adm { color: #FFD66B; background: rgba(255,214,107,0.08); }
  .team-access.edt { color: #16F2D7; background: rgba(22,242,215,0.08); }
  .team-access.viw { color: rgba(255,255,255,0.5); }

  .how-closing {
    grid-column: span 12;
    margin-top: 16px;
    text-align: center;
    font-family: var(--font-head);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
    text-wrap: balance;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 24px 0;
  }
  .how-closing em {
    font-style: normal;
    background: linear-gradient(135deg, #16F2D7, #FFD66B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  @media (max-width: 1024px) {
    .how-card.span-7,
    .how-card.span-5 { grid-column: span 12; }
    .res-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .how-card { padding: 26px 22px; }
    .res-grid { grid-template-columns: 1fr; }
    .team-mock { grid-template-columns: 1fr; }
    .flow-nodes { gap: 6px; }
    .flow-node { padding: 7px 10px; font-size: 12px; }
    .flow-arrow { display: none; }
  }

  /* ═══════════════════════════════════════════════════════════
     METHODS — tag cloud
     ═══════════════════════════════════════════════════════════ */
  .methods-tags {
    display: flex; flex-wrap: wrap; gap: 12px;
    max-width: 960px;
  }
  .m-tag {
    font-family: var(--font-body);
    font-size: 15px; font-weight: 500;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid rgba(13,14,61,0.1);
    border-radius: 100px;
    padding: 11px 22px;
    transition: all 0.2s;
    cursor: default;
  }
  .m-tag:hover {
    border-color: var(--blue); color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(5,70,201,0.4);
  }
  .m-tag.soon {
    color: var(--gray-lt);
    background: transparent;
    border-style: dashed;
  }
  .m-tag.soon::after {
    content: 'скоро';
    font-family: var(--font-mono); font-size: 10px;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(13,14,61,0.06);
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ═══════════════════════════════════════════════════════════
     SOCIAL PROOF — logos + headline number
     ═══════════════════════════════════════════════════════════ */
  .social { background: #FAFBFD; }
  .social-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .social-num {
    font-family: var(--font-head);
    font-size: clamp(72px, 9vw, 128px);
    font-weight: 900;
    line-height: 0.95; letter-spacing: -0.05em;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .social-num small {
    display: block;
    font-family: var(--font-head); font-size: 18px;
    font-weight: 600; color: var(--navy);
    -webkit-text-fill-color: var(--navy);
    margin-top: 16px; letter-spacing: -0.01em;
    line-height: 1.4;
  }
  .social-logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(13,14,61,0.08);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 16px;
    overflow: hidden;
  }
  .social-logo {
    background: var(--white);
    padding: 28px 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-size: 14px; font-weight: 600;
    color: var(--navy); opacity: 0.5;
    min-height: 80px;
    transition: opacity 0.2s, background 0.2s;
  }
  .social-logo:hover { opacity: 1; background: #FCFDFF; }
  @media (max-width: 1024px) {
    .social-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  }
  @media (max-width: 540px) {
    .social-logos-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ═══════════════════════════════════════════════════════════
     PILOT — 3 steps
     ═══════════════════════════════════════════════════════════ */
  .pilot { background: #FAFBFD; }
  .pilot-wrap {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: 80px; align-items: start;
  }
  .pilot-copy p {
    font-size: 16.5px; line-height: 1.7; color: var(--gray);
    margin-bottom: 32px;
  }
  .pilot-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .pilot-cta .note { font-family: var(--font-mono); font-size: 12px; color: var(--gray-lt); letter-spacing: 0.06em; text-transform: uppercase; }
  .pilot-steps { display: flex; flex-direction: column; gap: 18px; position: relative; }
  .pilot-step {
    display: grid; grid-template-columns: 56px 1fr; gap: 20px;
    align-items: center;
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 14px;
    position: relative;
  }
  .pilot-step .n {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lavender);
    color: var(--blue);
    font-family: var(--font-body);
    font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0;
  }
  .pilot-step .txt {
    font-size: 15px; line-height: 1.5; color: var(--navy);
    font-weight: 500;
  }
  .pilot-step + .pilot-step::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 44px;
    width: 1.5px; height: 18px;
    background: rgba(13,14,61,0.12);
  }
  @media (max-width: 1024px) {
    .pilot-wrap { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ═══════════════════════════════════════════════════════════
     PRICING TABLE
     ═══════════════════════════════════════════════════════════ */
  .pricing { background: #FAFBFD; }

  /* Pricing cards grid */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
  }
  .price-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 18px;
    padding: 32px 28px 28px;
    display: flex; flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  .price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(13,14,61,0.18);
    border-color: rgba(13,14,61,0.14);
  }
  .price-card.featured {
    border-color: rgba(5,70,201,0.45);
    box-shadow: 0 18px 40px -20px rgba(5,70,201,0.25);
  }
  .price-card.featured:hover {
    box-shadow: 0 24px 56px -20px rgba(5,70,201,0.35);
  }
  .price-card.custom {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
  }

  .pc-tag {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--white);
    background: var(--blue);
    padding: 5px 12px;
    border-radius: 100px;
    white-space: nowrap;
  }

  .price-card .pc-name {
    font-family: var(--font-head);
    font-weight: 800; font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .price-card.custom .pc-name { color: var(--white); }

  .price-card .pc-lead {
    font-size: 13.5px; line-height: 1.5;
    color: var(--gray);
    margin-bottom: 22px;
    min-height: 42px;
  }
  .price-card.custom .pc-lead { color: rgba(255,255,255,0.65); }

  .price-card .pc-price {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.01em;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .price-card.custom .pc-price { color: var(--white); }
  .price-card .pc-price .per,
  .price-card .pc-price .from {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--gray-lt);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .price-card.custom .pc-price .per,
  .price-card.custom .pc-price .from { color: rgba(255,255,255,0.4); }

  .price-card .pc-vat {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--gray-lt);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .price-card.custom .pc-vat { color: rgba(255,255,255,0.4); }

  .price-card .pc-quota {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    color: var(--gray);
    letter-spacing: 0.02em;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(13,14,61,0.08);
    min-height: 38px;
  }
  .price-card.custom .pc-quota {
    color: rgba(255,255,255,0.6);
    border-bottom-color: rgba(255,255,255,0.12);
  }

  .price-card .pc-desc {
    font-size: 14px; line-height: 1.6;
    color: var(--navy);
    margin-bottom: 16px;
  }
  .price-card.custom .pc-desc { color: rgba(255,255,255,0.88); }

  .price-card .pc-incl {
    /* visual “stacks on top of previous tier” badge */
    display: inline-flex; align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 5px 12px 5px 5px;
    background: rgba(5,70,201,0.06);
    border: 1px solid rgba(5,70,201,0.16);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0;
    color: var(--navy);
  }
  .price-card .pc-incl::before {
    content: '+';
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 13px; font-weight: 700;
    line-height: 1;
  }
  .price-card.custom .pc-incl {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: var(--white);
  }
  .price-card.custom .pc-incl::before {
    background: var(--cyan);
    color: var(--navy);
  }

  .price-card .pc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .price-card .pc-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--gray);
  }
  .price-card .pc-list li::before {
    content: '—';
    position: absolute;
    left: 0; top: 0;
    color: var(--blue);
    font-weight: 600;
  }
  .price-card.custom .pc-list li { color: rgba(255,255,255,0.7); }
  .price-card.custom .pc-list li::before { color: var(--cyan); }

  .price-card .pc-fit {
    font-size: 13px; line-height: 1.55;
    color: var(--gray);
    margin-bottom: 24px;
    flex: 1;
  }
  .price-card.custom .pc-fit { color: rgba(255,255,255,0.55); }
  .price-card .pc-fit:empty { display: none; }

  .price-card .pc-btn, .vacancys .pc-btn, .btnContainer .pc-btn, .productBanner .pc-btn {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 600;
    color: var(--navy);
    background: transparent;
    border: 1.5px solid rgba(13,14,61,0.14);
    border-radius: 10px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
  }
  .price-card .pc-btn:hover, .vacancys .pc-btn:hover, .btnContainer .pc-btn:hover, .productBanner .pc-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    transform: translateY(-1px);
  }
  .price-card.featured .pc-btn {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    box-shadow: 0 4px 16px rgba(5,70,201,0.25);
  }
  .price-card.featured .pc-btn:hover {
    background: var(--blue-h);
    border-color: var(--blue-h);
    color: var(--white);
    box-shadow: 0 6px 24px rgba(5,70,201,0.3);
  }
  .price-card.custom .pc-btn {
    color: var(--white);
    border-color: rgba(255,255,255,0.25);
  }
  .price-card.custom .pc-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
  }

  .productBanner .pc-btn {
    background-color: var(--white);
    border-color: var(--gray);
    width: unset;
  }

  @media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card { padding: 28px 24px 24px; }
  }
  .pricing-note {
    margin-top: 28px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gray-lt);
    letter-spacing: 0.04em;
    line-height: 1.5;
    max-width: 720px;
  }
  .pricing-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 20px;
    background: var(--white);
    -webkit-overflow-scrolling: touch;
  }
  .pricing-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-family: var(--font-body);
  }
  .pricing-table thead th {
    text-align: left;
    padding: 28px 22px 22px;
    font-family: var(--font-head);
    font-size: 17px; font-weight: 700;
    color: var(--navy); letter-spacing: -0.01em;
    background: var(--white);
    border-bottom: 1.5px solid rgba(13,14,61,0.1);
    vertical-align: bottom;
  }
  .pricing-table thead th:first-child {
    color: var(--gray-lt);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pricing-table thead th.featured {
    background: linear-gradient(180deg, rgba(5,70,201,0.04), transparent);
    color: var(--blue);
  }
  .pricing-table .price-row td {
    padding: 18px 22px;
    font-family: var(--font-head);
    font-size: 18px; font-weight: 800;
    color: var(--navy); letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(13,14,61,0.06);
    background: rgba(13,14,61,0.015);
  }
  .pricing-table .price-row td:first-child {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--gray); letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pricing-table tbody td {
    padding: 14px 22px;
    font-size: 14px; color: var(--navy);
    border-bottom: 1px solid rgba(13,14,61,0.05);
    vertical-align: middle;
  }
  .pricing-table tbody tr:last-child td { border-bottom: none; }
  .pricing-table tbody td:first-child {
    color: var(--gray);
    font-size: 14px;
  }
  .pricing-table tbody td.featured { background: rgba(5,70,201,0.025); }
  .pricing-table .check { color: var(--blue); font-weight: 700; font-size: 16px; }
  .pricing-table .dash { color: var(--gray-lt); }
  .pricing-cta {
    margin-top: 28px;
    display: flex; justify-content: center;
  }
  .pricing-hint {
    margin-top: 16px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--gray-lt);
    letter-spacing: 0.08em; text-transform: uppercase;
    display: none;
  }
  @media (max-width: 880px) { .pricing-hint { display: block; } }

  /* ═══════════════════════════════════════════════════════════
     SECURITY — 3 blocks
     ═══════════════════════════════════════════════════════════ */
  .sec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .sec-card {
    background: var(--white);
    border: 1px solid rgba(13,14,61,0.08);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .sec-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(13,14,61,0.18); }
  .sec-mark {
    min-width: 48px; height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--lavender);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--blue);
    font-family: var(--font-mono); font-weight: 600; font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    align-self: flex-start;
  }
  .sec-card h3 {
    font-family: var(--font-head);
    font-weight: 700; font-size: 18px;
    color: var(--navy); letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .sec-card p {
    font-size: 14px; line-height: 1.6; color: var(--gray);
  }
  @media (max-width: 1024px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px)  { .sec-grid { grid-template-columns: 1fr; } }

  /* ═══════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════ */
  .footer {
    background: var(--navy);
    color: rgba(255,255,255,0.7);
    padding: 72px 0 32px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer .brand img { height: 30px; filter: brightness(0) invert(1); margin-bottom: 20px; }
  .footer .brand p {
    font-size: 13.5px; line-height: 1.6;
    color: rgba(255,255,255,0.5);
    max-width: 260px;
  }
  .footer-col h4 {
    font-family: var(--font-head);
    font-size: 12px; font-weight: 700;
    color: var(--white);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 18px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--white); }
  .footer-bottom {
    margin-top: 28px;
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 16px;
    font-size: 12.5px; color: rgba(255,255,255,0.4);
  }
  .footer-bottom .links { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
  .footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
  .footer-bottom a:hover { color: var(--white); }
  .btn-footer-write {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--white) !important;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .btn-footer-write:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
  .footer-socials {
    display: flex; align-items: center; gap: 8px;
  }
  .footer-socials a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .footer-socials a:hover { opacity: 1; border-color: rgba(255,255,255,0.5); }
  .footer-socials img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); }
  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .footer .brand { grid-column: span 2; }
  }




  .teamSlider .button.big {
    margin: unset;
    margin-top: 20px;
  }