/* =========================================================
   LiftoffSpace — mentoring landing
   Темы: по умолчанию следуем системе (prefers-color-scheme),
   ручной выбор хранится в <html data-theme="light|dark">.
   Терминал и код тоже следуют теме (свои цвета подсветки в светлой).
   ========================================================= */

/* ---------- Dark tokens (default) ---------- */
:root {
  --bg: #0b0a10;
  --bg-2: #100e17;
  --surface: #15121f;
  --surface-2: #1b1728;
  --border: #2a2440;
  --border-2: #3a3256;

  --text: #ece9f5;
  --muted: #a8a1bd;
  --dim: #6f6888;

  --accent: #a78bfa;
  --accent-2: #c4b5fd;
  --accent-deep: #7c3aed;
  --pink: #f0abfc;

  --ok: #86efac;
  --warn: #fde68a;
  --info: #93c5fd;
  --err: #fca5a5;
  --kw: #f0abfc;
  --ty: #93c5fd;
  --fn: #c4b5fd;
  --cm: #6f6888;
  --ln: #4a4362;

  /* Поверхности непрозрачные (прежние полупрозрачные цвета, смешанные с --bg),
     чтобы звёзды фона не просвечивали сквозь карточки и терминалы */
  --panel-top: #1a1626;
  --panel-bottom: #14111e;
  --card-top: #171422;
  --card-bottom: #12101b;
  --card-bg: #110f19;
  --bar-bg: rgba(16, 14, 23, .6);
  --control-bg: #12101a;
  --ghost-bg: #15121e;
  --float-bg: #0f0e16;
  --band-bg: #0e0c14;
  --nav-bg: rgba(11, 10, 16, .94);
  --menu-bg: rgba(16, 14, 23, .97);

  --grid-line: rgba(167, 139, 250, .07);
  --star: rgba(236, 233, 245, .9);
  --star-opacity: .32;
  --orbit: rgba(167, 139, 250, .2);
  --glow-a: rgba(139, 92, 246, .55);
  --glow-b: rgba(240, 171, 252, .22);
  --glow-opacity: .5;
  --photo-tint: #e4dcf8;

  --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(167, 139, 250, .05);
  --glow: 0 0 0 1px rgba(167, 139, 250, .35), 0 10px 40px -10px rgba(139, 92, 246, .55);
  --photo-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* ---------- Light tokens ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf9fe;
    --bg-2: #f3f0fc;
    --surface: #ffffff;
    --surface-2: #f3f0fb;
    --border: #e6e0f4;
    --border-2: #d6cdee;

    --text: #17131f;
    --muted: #544d6c;
    --dim: #857e9c;

    --accent: #7c3aed;
    --accent-2: #6d28d9;
    --accent-deep: #7c3aed;
    --pink: #c026d3;

    --ok: #16a34a;
    --warn: #a16207;
    --info: #1d4ed8;
    --err: #dc2626;
    --kw: #a21caf;
    --ty: #1d4ed8;
    --fn: #6d28d9;
    --cm: #8a83a0;
    --ln: #c9c1de;

    --panel-top: #ffffff;
    --panel-bottom: #fbfaff;
    --card-top: rgba(255, 255, 255, .92);
    --card-bottom: rgba(251, 250, 255, .92);
    --card-bg: rgba(255, 255, 255, .8);
    --bar-bg: #f5f2fd;
    --control-bg: rgba(255, 255, 255, .85);
    --ghost-bg: rgba(255, 255, 255, .75);
    --float-bg: rgba(255, 255, 255, .92);
    --band-bg: rgba(255, 255, 255, .65);
    --nav-bg: rgba(250, 249, 254, .82);
    --menu-bg: rgba(255, 255, 255, .98);

    --grid-line: rgba(124, 58, 237, .07);
    --star: rgba(124, 58, 237, .55);
    --star-opacity: .55;
    --orbit: rgba(124, 58, 237, .16);
    --glow-a: rgba(167, 139, 250, .5);
    --glow-b: rgba(240, 171, 252, .4);
    --glow-opacity: .55;
    --photo-tint: #f6f2fe;

    --shadow: 0 20px 50px -26px rgba(76, 29, 149, .28), 0 0 0 1px rgba(124, 58, 237, .03);
    --glow: 0 0 0 1px rgba(124, 58, 237, .28), 0 14px 36px -14px rgba(124, 58, 237, .38);
    --photo-shadow: 0 30px 60px -28px rgba(76, 29, 149, .45);

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #faf9fe;
  --bg-2: #f3f0fc;
  --surface: #ffffff;
  --surface-2: #f3f0fb;
  --border: #e6e0f4;
  --border-2: #d6cdee;

  --text: #17131f;
  --muted: #544d6c;
  --dim: #857e9c;

  --accent: #7c3aed;
  --accent-2: #6d28d9;
  --accent-deep: #7c3aed;
  --pink: #c026d3;

  --ok: #16a34a;
  --warn: #a16207;
  --info: #1d4ed8;
  --err: #dc2626;
  --kw: #a21caf;
  --ty: #1d4ed8;
  --fn: #6d28d9;
  --cm: #8a83a0;
  --ln: #c9c1de;

  --panel-top: #ffffff;
  --panel-bottom: #fbfaff;
  --card-top: rgba(255, 255, 255, .92);
  --card-bottom: rgba(251, 250, 255, .92);
  --card-bg: rgba(255, 255, 255, .8);
  --bar-bg: #f5f2fd;
  --control-bg: rgba(255, 255, 255, .85);
  --ghost-bg: rgba(255, 255, 255, .75);
  --float-bg: rgba(255, 255, 255, .92);
  --band-bg: rgba(255, 255, 255, .65);
  --nav-bg: rgba(250, 249, 254, .82);
  --menu-bg: rgba(255, 255, 255, .98);

  --grid-line: rgba(124, 58, 237, .07);
  --star: rgba(124, 58, 237, .55);
  --star-opacity: .55;
  --orbit: rgba(124, 58, 237, .16);
  --glow-a: rgba(167, 139, 250, .5);
  --glow-b: rgba(240, 171, 252, .4);
  --glow-opacity: .55;
  --photo-tint: #f6f2fe;

  --shadow: 0 20px 50px -26px rgba(76, 29, 149, .28), 0 0 0 1px rgba(124, 58, 237, .03);
  --glow: 0 0 0 1px rgba(124, 58, 237, .28), 0 14px 36px -14px rgba(124, 58, 237, .38);
  --photo-shadow: 0 30px 60px -28px rgba(76, 29, 149, .45);

  color-scheme: light;
}

:root {
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-lg: 20px;
  --gutter: 16px;
  --nav-h: 64px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }


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

/* Фон задаём на html, а не на body: iOS Safari не перерисовывал фон,
   «переданный» с body на холст, при ручном переключении темы — низ страницы
   оставался в старой теме. body без фона, иначе он перекроет звёзды (.sky). */
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
html.i18n-pending body { visibility: hidden; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .35s ease;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--font-mono); }

::selection { background: rgba(167, 139, 250, .35); }

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

.mono { font-family: var(--font-mono); }
.dim { color: var(--dim); }
.ok { color: var(--ok); }
.k { color: var(--pink); }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 920px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent-deep);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.bg__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--glow-opacity);
}
.bg__glow--1 {
  width: 620px; height: 620px;
  top: -260px; right: -120px;
  background: radial-gradient(circle, var(--glow-a), transparent 65%);
}
.bg__glow--2 {
  width: 520px; height: 520px;
  top: 30%; left: -260px;
  background: radial-gradient(circle, var(--glow-b), transparent 65%);
}

/* Звёзды: четырёхлучевые искры по всей странице, местами скоплениями.
   Слой растянут на высоту документа, поэтому прокручивается вместе с контентом.
   Часть звёзд (::after) медленно мерцает.
   Форма — маска, цвет — токен --star, так звёзды следуют теме. */
body { position: relative; }
.sky, .sky::after {
  background: var(--star);
  mask-size: 900px 760px;
  -webkit-mask-size: 900px 760px;
}
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--star-opacity);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='760'%3E%3Cpath d='M696 183Q696.6 186.4 700 187Q696.6 187.6 696 191Q695.4 187.6 692 187Q695.4 186.4 696 183ZM689 94Q689.6 97.4 693 98Q689.6 98.6 689 102Q688.4 98.6 685 98Q688.4 97.4 689 94ZM64 476.5Q64.5 479.5 67.5 480Q64.5 480.5 64 483.5Q63.5 480.5 60.5 480Q63.5 479.5 64 476.5ZM813 576Q813.4 578.6 816 579Q813.4 579.4 813 582Q812.6 579.4 810 579Q812.6 578.6 813 576ZM451 551Q451.4 553.6 454 554Q451.4 554.4 451 557Q450.6 554.4 448 554Q450.6 553.6 451 551ZM882 691Q882.4 693.6 885 694Q882.4 694.4 882 697Q881.6 694.4 879 694Q881.6 693.6 882 691ZM411 470Q411.4 472.6 414 473Q411.4 473.4 411 476Q410.6 473.4 408 473Q410.6 472.6 411 470ZM746 569.5Q746.4 571.6 748.5 572Q746.4 572.4 746 574.5Q745.6 572.4 743.5 572Q745.6 571.6 746 569.5ZM158 136.5Q158.5 139.5 161.5 140Q158.5 140.5 158 143.5Q157.5 140.5 154.5 140Q157.5 139.5 158 136.5ZM161 188Q161.6 191.4 165 192Q161.6 192.6 161 196Q160.4 192.6 157 192Q160.4 191.4 161 188ZM100 326.5Q100.5 329.5 103.5 330Q100.5 330.5 100 333.5Q99.5 330.5 96.5 330Q99.5 329.5 100 326.5ZM548 113.5Q548.4 115.7 550.5 116Q548.4 116.3 548 118.5Q547.6 116.3 545.5 116Q547.6 115.7 548 113.5ZM379 695Q379.6 698.4 383 699Q379.6 699.6 379 703Q378.4 699.6 375 699Q378.4 698.4 379 695ZM159 57Q159.4 59.6 162 60Q159.4 60.4 159 63Q158.6 60.4 156 60Q158.6 59.6 159 57ZM215 60.5Q215.3 62.6 217.5 63Q215.3 63.4 215 65.5Q214.7 63.4 212.5 63Q214.7 62.6 215 60.5ZM742 662.5Q742.4 664.6 744.5 665Q742.4 665.4 742 667.5Q741.6 665.4 739.5 665Q741.6 664.6 742 662.5ZM92 199.5Q92.5 202.5 95.5 203Q92.5 203.5 92 206.5Q91.5 203.5 88.5 203Q91.5 202.5 92 199.5ZM226 153.5Q226.5 156.5 229.5 157Q226.5 157.5 226 160.5Q225.5 157.5 222.5 157Q225.5 156.5 226 153.5ZM587 213.5Q587.5 216.5 590.5 217Q587.5 217.5 587 220.5Q586.5 217.5 583.5 217Q586.5 216.5 587 213.5ZM190 216.5Q190.5 219.5 193.5 220Q190.5 220.5 190 223.5Q189.5 220.5 186.5 220Q189.5 219.5 190 216.5ZM600 287Q600.4 289.6 603 290Q600.4 290.4 600 293Q599.6 290.4 597 290Q599.6 289.6 600 287ZM683 307.5Q683.4 309.6 685.5 310Q683.4 310.4 683 312.5Q682.6 310.4 680.5 310Q682.6 309.6 683 307.5ZM867 659.5Q867.5 662.5 870.5 663Q867.5 663.5 867 666.5Q866.5 663.5 863.5 663Q866.5 662.5 867 659.5ZM394 390.5Q394.4 392.6 396.5 393Q394.4 393.4 394 395.5Q393.6 393.4 391.5 393Q393.6 392.6 394 390.5ZM774 51Q774.4 53.6 777 54Q774.4 54.4 774 57Q773.6 54.4 771 54Q773.6 53.6 774 51ZM788 197.5Q788.4 199.7 790.5 200Q788.4 200.3 788 202.5Q787.6 200.3 785.5 200Q787.6 199.7 788 197.5ZM333 571.5Q333.5 574.5 336.5 575Q333.5 575.5 333 578.5Q332.5 575.5 329.5 575Q332.5 574.5 333 571.5ZM282 507.5Q282.4 509.6 284.5 510Q282.4 510.4 282 512.5Q281.6 510.4 279.5 510Q281.6 509.6 282 507.5ZM451 132Q451.6 135.4 455 136Q451.6 136.6 451 140Q450.4 136.6 447 136Q450.4 135.4 451 132ZM239 660Q239.4 662.6 242 663Q239.4 663.4 239 666Q238.6 663.4 236 663Q238.6 662.6 239 660ZM198 130.5Q198.5 133.5 201.5 134Q198.5 134.5 198 137.5Q197.5 134.5 194.5 134Q197.5 133.5 198 130.5ZM891 636.5Q891.4 638.6 893.5 639Q891.4 639.4 891 641.5Q890.6 639.4 888.5 639Q890.6 638.6 891 636.5ZM304 443.5Q304.5 446.5 307.5 447Q304.5 447.5 304 450.5Q303.5 447.5 300.5 447Q303.5 446.5 304 443.5ZM62 575Q62.4 577.6 65 578Q62.4 578.4 62 581Q61.6 578.4 59 578Q61.6 577.6 62 575ZM303 599.5Q303.5 602.5 306.5 603Q303.5 603.5 303 606.5Q302.5 603.5 299.5 603Q302.5 602.5 303 599.5ZM633 571.5Q633.5 574.5 636.5 575Q633.5 575.5 633 578.5Q632.5 575.5 629.5 575Q632.5 574.5 633 571.5ZM277 41.5Q277.4 43.6 279.5 44Q277.4 44.4 277 46.5Q276.6 44.4 274.5 44Q276.6 43.6 277 41.5ZM381 157.5Q381.5 160.5 384.5 161Q381.5 161.5 381 164.5Q380.5 161.5 377.5 161Q380.5 160.5 381 157.5ZM107 86.5Q107.3 88.7 109.5 89Q107.3 89.3 107 91.5Q106.7 89.3 104.5 89Q106.7 88.7 107 86.5ZM694 277.5Q694.5 280.5 697.5 281Q694.5 281.5 694 284.5Q693.5 281.5 690.5 281Q693.5 280.5 694 277.5ZM269 538Q269.6 541.4 273 542Q269.6 542.6 269 546Q268.4 542.6 265 542Q268.4 541.4 269 538ZM842 430.5Q842.5 433.5 845.5 434Q842.5 434.5 842 437.5Q841.5 434.5 838.5 434Q841.5 433.5 842 430.5ZM619 396.5Q619.5 399.5 622.5 400Q619.5 400.5 619 403.5Q618.5 400.5 615.5 400Q618.5 399.5 619 396.5ZM812 646.5Q812.5 649.5 815.5 650Q812.5 650.5 812 653.5Q811.5 650.5 808.5 650Q811.5 649.5 812 646.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='760'%3E%3Cpath d='M696 183Q696.6 186.4 700 187Q696.6 187.6 696 191Q695.4 187.6 692 187Q695.4 186.4 696 183ZM689 94Q689.6 97.4 693 98Q689.6 98.6 689 102Q688.4 98.6 685 98Q688.4 97.4 689 94ZM64 476.5Q64.5 479.5 67.5 480Q64.5 480.5 64 483.5Q63.5 480.5 60.5 480Q63.5 479.5 64 476.5ZM813 576Q813.4 578.6 816 579Q813.4 579.4 813 582Q812.6 579.4 810 579Q812.6 578.6 813 576ZM451 551Q451.4 553.6 454 554Q451.4 554.4 451 557Q450.6 554.4 448 554Q450.6 553.6 451 551ZM882 691Q882.4 693.6 885 694Q882.4 694.4 882 697Q881.6 694.4 879 694Q881.6 693.6 882 691ZM411 470Q411.4 472.6 414 473Q411.4 473.4 411 476Q410.6 473.4 408 473Q410.6 472.6 411 470ZM746 569.5Q746.4 571.6 748.5 572Q746.4 572.4 746 574.5Q745.6 572.4 743.5 572Q745.6 571.6 746 569.5ZM158 136.5Q158.5 139.5 161.5 140Q158.5 140.5 158 143.5Q157.5 140.5 154.5 140Q157.5 139.5 158 136.5ZM161 188Q161.6 191.4 165 192Q161.6 192.6 161 196Q160.4 192.6 157 192Q160.4 191.4 161 188ZM100 326.5Q100.5 329.5 103.5 330Q100.5 330.5 100 333.5Q99.5 330.5 96.5 330Q99.5 329.5 100 326.5ZM548 113.5Q548.4 115.7 550.5 116Q548.4 116.3 548 118.5Q547.6 116.3 545.5 116Q547.6 115.7 548 113.5ZM379 695Q379.6 698.4 383 699Q379.6 699.6 379 703Q378.4 699.6 375 699Q378.4 698.4 379 695ZM159 57Q159.4 59.6 162 60Q159.4 60.4 159 63Q158.6 60.4 156 60Q158.6 59.6 159 57ZM215 60.5Q215.3 62.6 217.5 63Q215.3 63.4 215 65.5Q214.7 63.4 212.5 63Q214.7 62.6 215 60.5ZM742 662.5Q742.4 664.6 744.5 665Q742.4 665.4 742 667.5Q741.6 665.4 739.5 665Q741.6 664.6 742 662.5ZM92 199.5Q92.5 202.5 95.5 203Q92.5 203.5 92 206.5Q91.5 203.5 88.5 203Q91.5 202.5 92 199.5ZM226 153.5Q226.5 156.5 229.5 157Q226.5 157.5 226 160.5Q225.5 157.5 222.5 157Q225.5 156.5 226 153.5ZM587 213.5Q587.5 216.5 590.5 217Q587.5 217.5 587 220.5Q586.5 217.5 583.5 217Q586.5 216.5 587 213.5ZM190 216.5Q190.5 219.5 193.5 220Q190.5 220.5 190 223.5Q189.5 220.5 186.5 220Q189.5 219.5 190 216.5ZM600 287Q600.4 289.6 603 290Q600.4 290.4 600 293Q599.6 290.4 597 290Q599.6 289.6 600 287ZM683 307.5Q683.4 309.6 685.5 310Q683.4 310.4 683 312.5Q682.6 310.4 680.5 310Q682.6 309.6 683 307.5ZM867 659.5Q867.5 662.5 870.5 663Q867.5 663.5 867 666.5Q866.5 663.5 863.5 663Q866.5 662.5 867 659.5ZM394 390.5Q394.4 392.6 396.5 393Q394.4 393.4 394 395.5Q393.6 393.4 391.5 393Q393.6 392.6 394 390.5ZM774 51Q774.4 53.6 777 54Q774.4 54.4 774 57Q773.6 54.4 771 54Q773.6 53.6 774 51ZM788 197.5Q788.4 199.7 790.5 200Q788.4 200.3 788 202.5Q787.6 200.3 785.5 200Q787.6 199.7 788 197.5ZM333 571.5Q333.5 574.5 336.5 575Q333.5 575.5 333 578.5Q332.5 575.5 329.5 575Q332.5 574.5 333 571.5ZM282 507.5Q282.4 509.6 284.5 510Q282.4 510.4 282 512.5Q281.6 510.4 279.5 510Q281.6 509.6 282 507.5ZM451 132Q451.6 135.4 455 136Q451.6 136.6 451 140Q450.4 136.6 447 136Q450.4 135.4 451 132ZM239 660Q239.4 662.6 242 663Q239.4 663.4 239 666Q238.6 663.4 236 663Q238.6 662.6 239 660ZM198 130.5Q198.5 133.5 201.5 134Q198.5 134.5 198 137.5Q197.5 134.5 194.5 134Q197.5 133.5 198 130.5ZM891 636.5Q891.4 638.6 893.5 639Q891.4 639.4 891 641.5Q890.6 639.4 888.5 639Q890.6 638.6 891 636.5ZM304 443.5Q304.5 446.5 307.5 447Q304.5 447.5 304 450.5Q303.5 447.5 300.5 447Q303.5 446.5 304 443.5ZM62 575Q62.4 577.6 65 578Q62.4 578.4 62 581Q61.6 578.4 59 578Q61.6 577.6 62 575ZM303 599.5Q303.5 602.5 306.5 603Q303.5 603.5 303 606.5Q302.5 603.5 299.5 603Q302.5 602.5 303 599.5ZM633 571.5Q633.5 574.5 636.5 575Q633.5 575.5 633 578.5Q632.5 575.5 629.5 575Q632.5 574.5 633 571.5ZM277 41.5Q277.4 43.6 279.5 44Q277.4 44.4 277 46.5Q276.6 44.4 274.5 44Q276.6 43.6 277 41.5ZM381 157.5Q381.5 160.5 384.5 161Q381.5 161.5 381 164.5Q380.5 161.5 377.5 161Q380.5 160.5 381 157.5ZM107 86.5Q107.3 88.7 109.5 89Q107.3 89.3 107 91.5Q106.7 89.3 104.5 89Q106.7 88.7 107 86.5ZM694 277.5Q694.5 280.5 697.5 281Q694.5 281.5 694 284.5Q693.5 281.5 690.5 281Q693.5 280.5 694 277.5ZM269 538Q269.6 541.4 273 542Q269.6 542.6 269 546Q268.4 542.6 265 542Q268.4 541.4 269 538ZM842 430.5Q842.5 433.5 845.5 434Q842.5 434.5 842 437.5Q841.5 434.5 838.5 434Q841.5 433.5 842 430.5ZM619 396.5Q619.5 399.5 622.5 400Q619.5 400.5 619 403.5Q618.5 400.5 615.5 400Q618.5 399.5 619 396.5ZM812 646.5Q812.5 649.5 815.5 650Q812.5 650.5 812 653.5Q811.5 650.5 808.5 650Q811.5 649.5 812 646.5Z'/%3E%3C/svg%3E");
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='760'%3E%3Cpath d='M650 304Q650.7 308.3 655 309Q650.7 309.7 650 314Q649.3 309.7 645 309Q649.3 308.3 650 304ZM18 701Q18.7 705.3 23 706Q18.7 706.7 18 711Q17.3 706.7 13 706Q17.3 705.3 18 701ZM777 720Q777.7 724.3 782 725Q777.7 725.7 777 730Q776.3 725.7 772 725Q776.3 724.3 777 720ZM209 523Q209.7 527.3 214 528Q209.7 528.7 209 533Q208.3 528.7 204 528Q208.3 527.3 209 523ZM705 340Q705.7 344.3 710 345Q705.7 345.7 705 350Q704.3 345.7 700 345Q704.3 344.3 705 340ZM383 517.5Q383.8 522.2 388.5 523Q383.8 523.8 383 528.5Q382.2 523.8 377.5 523Q382.2 522.2 383 517.5ZM633 236.5Q633.8 241.2 638.5 242Q633.8 242.8 633 247.5Q632.2 242.8 627.5 242Q632.2 241.2 633 236.5ZM686 404.5Q686.8 409.2 691.5 410Q686.8 410.8 686 415.5Q685.2 410.8 680.5 410Q685.2 409.2 686 404.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='760'%3E%3Cpath d='M650 304Q650.7 308.3 655 309Q650.7 309.7 650 314Q649.3 309.7 645 309Q649.3 308.3 650 304ZM18 701Q18.7 705.3 23 706Q18.7 706.7 18 711Q17.3 706.7 13 706Q17.3 705.3 18 701ZM777 720Q777.7 724.3 782 725Q777.7 725.7 777 730Q776.3 725.7 772 725Q776.3 724.3 777 720ZM209 523Q209.7 527.3 214 528Q209.7 528.7 209 533Q208.3 528.7 204 528Q208.3 527.3 209 523ZM705 340Q705.7 344.3 710 345Q705.7 345.7 705 350Q704.3 345.7 700 345Q704.3 344.3 705 340ZM383 517.5Q383.8 522.2 388.5 523Q383.8 523.8 383 528.5Q382.2 523.8 377.5 523Q382.2 522.2 383 517.5ZM633 236.5Q633.8 241.2 638.5 242Q633.8 242.8 633 247.5Q632.2 242.8 627.5 242Q632.2 241.2 633 236.5ZM686 404.5Q686.8 409.2 691.5 410Q686.8 410.8 686 415.5Q685.2 410.8 680.5 410Q685.2 409.2 686 404.5Z'/%3E%3C/svg%3E");
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .2; }
  to { opacity: 1; }
}

/* ---------- Buttons ---------- */
.btn {
  --h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--sm { --h: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn--block { width: 100%; }

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #9061f9 55%, #a879ff 100%);
  box-shadow: 0 8px 30px -8px rgba(139, 92, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -8px rgba(139, 92, 246, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn--ghost {
  color: var(--text);
  background: var(--ghost-bg);
  border-color: var(--border-2);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; width: 18px; height: 18px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.nav.is-scrolled {
  background: var(--nav-bg);
  border-bottom-color: var(--border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  color: var(--text);
}
.logo__mark {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(35deg);
  transition: transform .4s ease;
}
.logo:hover .logo__mark { transform: rotate(0) translateY(-3px); }
.logo__b { font-weight: 400; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

.nav__links { display: flex; gap: 4px; }
.nav__links a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: rgba(167, 139, 250, .1); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--control-bg);
}
.lang__btn {
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.lang__btn:hover { color: var(--text); }
.lang__btn[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn .icon { width: 18px; height: 18px; }

/* показываем иконку целевой темы: в тёмной — солнце, в светлой — луну */
.theme-toggle .i-moon { display: none; }
:root[data-mode="light"] .theme-toggle .i-sun { display: none; }
:root[data-mode="light"] .theme-toggle .i-moon { display: block; }
.theme-toggle .icon { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.theme-toggle:hover .icon { transform: rotate(25deg); }

.nav__menu {
  display: none;
  position: relative;
}
.nav__menu span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .25s, top .25s;
}
.nav__menu span:first-child { top: 14px; }
.nav__menu span:last-child { top: 21px; }
.nav__menu[aria-expanded="true"] span:first-child { top: 17.5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { top: 17.5px; transform: rotate(-45deg); }

@media (max-width: 920px) {
  .nav__menu { display: inline-block; }
  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--menu-bg);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav__links a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 480px) {
  .nav__book { display: none; }
}

/* ---------- Common bits ---------- */
.pulse {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.pulse--sm { width: 7px; height: 7px; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.window, .term, .code-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bar-bg);
}
.window__title {
  flex: 1;
  min-width: 0;
  margin-right: 46px;
  text-align: center;
  font-size: 12.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dots { display: inline-flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; }
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

.photo { position: relative; overflow: hidden; }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.photo--tall img { aspect-ratio: 4 / 5; object-position: 50% 15%; }
.window--photo:hover .photo img { transform: scale(1.03); }
/* лиловая подложка для фото на белом фоне — связывает их с палитрой */
.photo--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-tint);
  mix-blend-mode: multiply;
}
.photo__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(11, 10, 16, .04) 3px 4px);
  mix-blend-mode: multiply;
}
.photo__scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 30%;
  top: -30%;
  background: linear-gradient(180deg, transparent, rgba(196, 181, 253, .14), transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan { to { top: 130%; } }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(24px, 6vw, 72px); }
.hero__grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  margin-bottom: 26px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 13px;
}

.tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--accent);
}
.tagline__mark {
  font-size: .8em;
  animation: lift 2.6s ease-in-out infinite;
}
@keyframes lift {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-3px); }
}

.hero__title {
  font-size: clamp(2.35rem, 5.6vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.grad {
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 40%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.typed { white-space: pre; font-weight: 700; color: var(--accent-2); }
.cursor {
  display: inline-block;
  width: .5em; height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

/* Подпись автора под заголовком */
.byline {
  margin-top: 22px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.byline__by {
  margin-right: 4px;
  font-size: .8em;
  font-weight: 400;
  color: var(--accent);
}

.hero__lead {
  max-width: 600px;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 480px) {
  .hero__cta .btn { width: 100%; }
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.stats__n {
  display: block;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}
.stats__l { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }

.hero__visual {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -4% -6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 65%);
  filter: blur(40px);
  z-index: -1;
}
.hero__visual .window { transform: rotate(1.2deg); }

/* Орбита вокруг фото: пунктирный круг с маленьким спутником */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px dashed var(--orbit);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: spin 90s linear infinite;
}
.orbit::after {
  content: "";
  position: absolute;
  top: 14.6%;
  left: 14.6%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px var(--accent);
  translate: -50% -50%;
}
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 719px) { .orbit { width: 112%; } }

.float {
  position: absolute;
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: var(--float-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float--1 { left: -44px; bottom: 54px; }
.float--2 { right: -26px; top: 70px; display: inline-flex; align-items: center; gap: 8px; animation-delay: -2s; }
.float--3 { right: 26px; bottom: -18px; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

@media (max-width: 620px) {
  .float { font-size: 11px; padding: 8px 10px; }
  .float--1 { left: -6px; bottom: 34px; }
  .float--2 { right: -6px; top: 56px; }
  .float--3 { right: 12px; bottom: -14px; }
}

/* ---------- Ticker ---------- */
.ticker {
  margin-top: clamp(64px, 9vw, 110px);
  padding: 18px 0;
  border-block: 1px solid var(--border);
  background: var(--band-bg);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.ticker__track span {
  padding: 0 26px;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__track span::before { content: "▹ "; color: var(--accent); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 128px); }
.section__head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.section__head--left { margin-inline: 0; text-align: left; margin-bottom: 26px; }
.kicker {
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--accent);
  letter-spacing: .02em;
}
.section h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section__sub {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.05rem;
}
.section__sub code {
  padding: 2px 7px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent-2);
  font-size: .9em;
}

/* ---------- Interactive terminal ---------- */
.term { position: relative; }
.term::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 120px rgba(139, 92, 246, .08);
}
.term__body {
  height: clamp(340px, 52vh, 460px);
  padding: 18px 20px 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
@media (max-width: 520px) { .term__body { font-size: 12.5px; padding: 14px; } }
.term__out > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__line { display: flex; align-items: center; gap: 10px; }
.term__prompt { flex: none; white-space: nowrap; }
.term__prompt .u, .t-u { color: var(--ok); }
.term__prompt .h, .t-h { color: var(--info); }
.term__prompt .p, .t-p { color: var(--accent); }
.term__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  caret-color: var(--accent);
}
.term__input::placeholder { color: var(--dim); opacity: .7; }
.term__input:focus-visible { outline: none; }
.term:focus-within { border-color: rgba(167, 139, 250, .45); }

.t-dim { color: var(--dim); }
.t-acc { color: var(--accent-2); }
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-err { color: var(--err); }
.t-b { color: var(--text); font-weight: 700; }
.t-hash { color: var(--warn); }
.t-link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.chip {
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.chip::before { content: "$ "; color: var(--dim); }
.chip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.chip--accent { color: var(--accent-2); border-color: rgba(167, 139, 250, .5); background: rgba(124, 58, 237, .12); }

/* ---------- About ---------- */
.about {
  display: grid;
  gap: 48px;
  align-items: start;
}
@media (min-width: 940px) {
  .about { grid-template-columns: .8fr 1.2fr; gap: 72px; }
  .about__photo { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.about__photo { margin: 0; max-width: 440px; width: 100%; justify-self: center; }
.about__photo .window { transform: rotate(-1.2deg); }

.prose { display: grid; gap: 16px; color: var(--muted); font-size: 1.05rem; }
.prose p:first-child { color: var(--text); }

.code-card { margin-top: 32px; }
.code-card__bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bar-bg);
  font-size: 13px;
  color: var(--muted);
}
.gitlog {
  padding: 14px 18px 18px;
  font-size: 13.5px;
  line-height: 1.65;
}
.gitlog li {
  position: relative;
  padding: 5px 0 5px 22px;
  color: var(--text);
}
.gitlog li::before {
  content: "";
  position: absolute;
  left: 3px; top: 13px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  z-index: 1;
}
.gitlog li::after {
  content: "";
  position: absolute;
  left: 7px; top: 22px; bottom: -13px;
  width: 1px;
  background: var(--border-2);
}
.gitlog li:last-child::after { display: none; }
.gitlog li:first-child::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hash { color: var(--warn); }
.ref { color: var(--ok); }
.gitlog a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(196, 181, 253, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.gitlog a:hover { text-decoration-color: var(--accent-2); }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.glow { position: relative; isolation: isolate; }
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -40%), rgba(167, 139, 250, .16), transparent 45%);
  opacity: 0;
  transition: opacity .3s;
}
.glow:hover::before { opacity: 1; }

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover { border-color: rgba(167, 139, 250, .5); transform: translateY(-4px); box-shadow: var(--glow); }
.card h3 { font-size: 1.2rem; font-weight: 700; }
.card > p:not([class]) { color: var(--muted); font-size: .97rem; line-height: 1.55; }
.card__file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--dim);
}
.card__ext {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(124, 58, 237, .15);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.card__tag { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--accent); opacity: .85; }

/* ---------- Fit ---------- */
.fit {
  display: grid;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 940px) { .fit { grid-template-columns: 1.15fr .85fr; } }
.code-card--editor { margin: 0; }
.code {
  margin: 0;
  padding: 18px 0;
  font-size: 14px;
  line-height: 1.85;
  overflow-x: auto;
  counter-reset: ln;
  color: var(--text);
}
@media (max-width: 520px) { .code { font-size: 12px; } }
.code code { display: block; min-width: max-content; padding-right: 20px; }
.code .ln::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  width: 3.2em;
  padding-right: 1.2em;
  text-align: right;
  color: var(--ln);
  user-select: none;
}
.code .kw { color: var(--kw); }
.code .ty { color: var(--ty); }
.code .fn { color: var(--fn); }
.code .cm { color: var(--cm); font-style: italic; }

.fit__cards { display: grid; gap: 20px; }
.level {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  transition: border-color .25s, box-shadow .25s;
}
.level:first-child { border-color: rgba(167, 139, 250, .45); }
.level:hover { border-color: rgba(167, 139, 250, .6); box-shadow: var(--glow); }
.level p:not([class]) { color: var(--muted); }
.level__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.level__path { font-size: 1.25rem; font-weight: 700; }
.arrow { color: var(--accent); }
.badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(167, 139, 250, .45);
  color: var(--accent-2);
  font-size: 12px;
}

/* ---------- Stack ---------- */
.stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.stack__group {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}
.stack__name { margin-bottom: 14px; color: var(--accent); font-size: 14px; font-weight: 500; }
.stack__name::before { content: "▸ "; color: var(--dim); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 6px 11px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  transition: border-color .2s, color .2s, background .2s;
}
.tags li:hover { border-color: var(--accent); color: var(--accent-2); background: rgba(124, 58, 237, .1); }

/* ---------- Pipeline ---------- */
.pipeline {
  position: relative;
  display: grid;
  gap: 18px;
}
@media (min-width: 860px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .pipeline::before {
    content: "";
    position: absolute;
    top: 37px;
    left: 12%; right: 12%;
    height: 2px;
    background: var(--border-2);
  }
  .pipeline::after {
    content: "";
    position: absolute;
    top: 37px;
    left: 12%;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #7c3aed, #c4b5fd);
    box-shadow: 0 0 12px rgba(167, 139, 250, .8);
    transition: width 2.2s cubic-bezier(.4, 0, .2, 1);
  }
  .pipeline.is-run::after { width: 76%; }
}
.stage {
  position: relative;
  z-index: 1; /* кружки поверх линии пайплайна */
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  text-align: left;
}
@media (min-width: 860px) {
  .stage { padding-top: 0; border: 0; background: none; text-align: center; }
}
.stage__dot {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--bg-2);
  transition: border-color .35s, background .35s, box-shadow .35s;
}
@media (min-width: 860px) { .stage__dot { width: 40px; height: 40px; margin: 18px auto 18px; } }
.stage__dot svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .4s ease .15s;
}
.stage.is-done .stage__dot {
  border-color: var(--accent);
  background: #7c3aed;
  box-shadow: 0 0 0 6px color-mix(in srgb, #7c3aed 18%, var(--bg)), 0 0 24px rgba(139, 92, 246, .55);
}
.stage.is-done .stage__dot svg { stroke-dashoffset: 0; }
.stage__label { font-size: 12.5px; color: var(--accent); margin-bottom: 6px; }
.stage h3 { font-size: 1.2rem; margin-bottom: 8px; }
.stage p:not([class]) { color: var(--muted); font-size: .97rem; }

/* ---------- Pricing ---------- */
.pricing {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 880px) { .pricing { grid-template-columns: 1fr 1fr; } }

.price {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(167, 139, 250, .45);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124, 58, 237, .18), transparent 55%),
    linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--shadow);
}
@media (max-width: 480px) { .price { padding: 22px; } }
.price__label { color: var(--accent); font-size: 13.5px; }
.price__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 10px 0 24px; }
.price__amount { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.price__per { color: var(--muted); font-size: 15px; }
.checklist { display: grid; gap: 12px; margin-bottom: 30px; }
.checklist li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(124, 58, 237, .18);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 7px;
  width: 5px; height: 9px;
  border: solid var(--accent-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.price .btn { margin-top: auto; }


/* ---------- Final CTA ---------- */
.section--cta { padding-top: 0; }
.cta {
  position: relative;
  display: grid;
  gap: 28px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(167, 139, 250, .4);
  border-radius: 28px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(124, 58, 237, .26), transparent 55%),
    radial-gradient(60% 90% at 100% 100%, rgba(240, 171, 252, .16), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.cta__body { position: relative; align-self: center; }
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cta__photo {
  position: relative;
  justify-self: center;
  width: min(320px, 80%);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border-2);
  box-shadow: var(--photo-shadow);
}
.cta__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}
@media (min-width: 880px) {
  .cta { grid-template-columns: 1.3fr .7fr; align-items: center; }
  .cta__photo { width: 100%; }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 36px;
  font-size: 13.5px;
  color: var(--muted);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer__links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: var(--accent-2); }

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__track span:nth-child(n+17) { display: none; }
}

/* ---------- Contacts & platforms (final CTA) ---------- */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 24px;
  font-size: 13px;
}
.platforms a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.platforms a:hover { text-decoration-color: var(--accent-2); }
@media (max-width: 480px) {
  .contacts .btn { flex: 1 1 auto; }
}

/* ---------- Payment flow (index + pay page) ---------- */
.price__amd {
  margin: -14px 0 24px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
}
.paycta { display: flex; flex-direction: column; }
.paycta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
}
.paycta__body .flow { padding: 0; flex: 1; }

.flow { display: grid; gap: 18px; padding: 22px; }
.flow li { display: flex; gap: 14px; align-items: flex-start; }
.flow__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(124, 58, 237, .15);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
}
.flow__t { font-weight: 700; }
.flow__d { margin-top: 2px; color: var(--muted); font-size: .95rem; }
.flow__d a {
  color: var(--accent-2);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.cards-accepted {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cards-accepted li {
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* pay page */
.paypage { padding-top: clamp(40px, 6vw, 72px); }
.paypage__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.paygrid {
  display: grid;
  gap: 20px;
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
}
@media (min-width: 900px) { .paygrid { grid-template-columns: 1fr 1fr; } }
.paygrid__side { display: grid; gap: 20px; }

.order__name { margin-top: 8px; font-size: 1.15rem; font-weight: 600; }
.order__price { margin-top: 18px; }
.order .price__value { margin-bottom: 18px; }
.order .price__amd { margin: -8px 0 6px; font-size: 1.3rem; }
.order__note { color: var(--dim); font-size: .9rem; margin-bottom: 26px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .95rem;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: #7c3aed;
  cursor: pointer;
}
.consent a { color: var(--accent-2); text-underline-offset: 3px; }

.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.order__hint { margin: 12px 0 22px; font-size: 12.5px; color: var(--dim); text-align: center; }
.order__secure { margin-top: 12px; text-align: center; color: var(--dim); font-size: .85rem; }

.terms { padding: 22px; }
.section .terms__h { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.terms .checklist { margin-bottom: 18px; }
.terms .checklist li { font-size: .95rem; }
.terms__contact { color: var(--muted); font-size: .92rem; }
.terms__contact a { color: var(--accent-2); text-underline-offset: 3px; }

.merchant { max-width: 1040px; margin: 20px auto 0; }
.merchant__list { margin: 0; padding: 14px 18px 18px; display: grid; gap: 10px; }
.merchant__list > div { display: grid; gap: 2px 18px; }
@media (min-width: 640px) { .merchant__list > div { grid-template-columns: 200px 1fr; } }
.merchant__list dt { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.merchant__list dt::after { content: ":"; color: var(--dim); }
.merchant__list dd { margin: 0; overflow-wrap: anywhere; }
.merchant__list a { color: var(--accent-2); text-underline-offset: 3px; }

.footer__legal { margin-top: 6px; font-size: 12px; }
.footer__legal a { color: inherit; text-underline-offset: 3px; }