@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
    @property --my { syntax: "<percentage>"; inherits: false; initial-value: 25%; }

    :root {
      --bg: #f4efe6;
      --bg-2: #fffaf1;
      --text: #11120f;
      --muted: #6a6255;
      --muted-2: #958976;
      --line: rgba(28, 24, 18, .12);
      --line-2: rgba(28, 24, 18, .08);
      --glass: rgba(255,255,255,.56);
      --glass-2: rgba(255,255,255,.78);
      --glass-3: rgba(255,255,255,.34);
      --gold: #d89437;
      --gold-2: #f1bf68;
      --copper: #a96731;
      --green: #27c47d;
      --blue: #556ff7;
      --violet: #9b5cff;
      --red: #ef6461;
      --shadow: 0 28px 100px rgba(51, 35, 12, .14);
      --shadow-2: 0 18px 60px rgba(51, 35, 12, .10);
      --radius-xl: 42px;
      --radius-lg: 30px;
      --radius-md: 22px;
      --radius-sm: 16px;
      --max: 1180px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    html[data-theme="dark"] {
      --bg: #0b0b10;
      --bg-2: #15131c;
      --text: #fff7eb;
      --muted: #b9ad9d;
      --muted-2: #8c8272;
      --line: rgba(255,255,255,.13);
      --line-2: rgba(255,255,255,.08);
      --glass: rgba(255,255,255,.06);
      --glass-2: rgba(255,255,255,.10);
      --glass-3: rgba(255,255,255,.045);
      --gold: #f4b65e;
      --gold-2: #ffe0a3;
      --copper: #ffca89;
      --shadow: 0 30px 120px rgba(0,0,0,.45);
      --shadow-2: 0 18px 70px rgba(0,0,0,.28);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      text-rendering: geometricPrecision;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: -20%;
      z-index: -3;
      pointer-events: none;
    }

    body::before {
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(241,191,104,.35), transparent 23rem),
        radial-gradient(circle at 12% 4%, rgba(155,92,255,.18), transparent 23rem),
        radial-gradient(circle at 87% 18%, rgba(85,111,247,.18), transparent 24rem),
        radial-gradient(circle at 72% 82%, rgba(39,196,125,.16), transparent 20rem),
        linear-gradient(180deg, var(--bg), var(--bg-2));
      transition: --mx .35s ease, --my .35s ease;
    }

    body::after {
      opacity: .42;
      background-image:
        linear-gradient(var(--line-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(circle at 50% 10%, black, transparent 70%);
    }

    html[data-theme="dark"] body::after { opacity: .25; }

    html[data-theme="dark"] body::before {
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(244,182,94,.20), transparent 24rem),
        radial-gradient(circle at 14% 6%, rgba(155,92,255,.20), transparent 25rem),
        radial-gradient(circle at 86% 16%, rgba(85,111,247,.20), transparent 26rem),
        radial-gradient(circle at 72% 82%, rgba(39,196,125,.14), transparent 22rem),
        linear-gradient(180deg, var(--bg), var(--bg-2));
    }


    /* v7: custom scrollbar with light/dark theme support */
    :root {
      --scrollbar-thumb: #b9ad9d;
      --scrollbar-thumb-hover: #8f8375;
      --scrollbar-track: transparent;
    }

    html[data-theme="dark"] {
      --scrollbar-thumb: #606060;
      --scrollbar-thumb-hover: #909090;
      --scrollbar-track: transparent;
    }

    body {
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    body::-webkit-scrollbar {
      width: 16px;
    }

    body::-webkit-scrollbar-track {
      background: var(--scrollbar-track);
    }

    body::-webkit-scrollbar-thumb {
      min-height: 56px;
      border-radius: 999px;
      border: 4px solid transparent;
      background-clip: content-box;
      background-color: var(--scrollbar-thumb);
    }

    body::-webkit-scrollbar-thumb:hover {
      background-color: var(--scrollbar-thumb-hover);
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    p { line-height: 1.72; }
    .wrap { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }

    .noise {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .08;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    html[data-theme="dark"] .noise { opacity: .13; mix-blend-mode: screen; }

    .skip {
      position: fixed;
      left: 16px;
      top: -120px;
      z-index: 1000;
      background: var(--text);
      color: var(--bg);
      padding: 12px 16px;
      border-radius: 14px;
      font-weight: 750;
      transition: top .2s ease;
    }
    .skip:focus { top: 16px; }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      z-index: 200;
      background: linear-gradient(90deg, var(--gold), var(--violet), var(--blue));
      transform-origin: left;
    }

    .topbar {
      position: sticky;
      top: 12px;
      z-index: 80;
      margin-top: 12px;
    }

    .nav-shell {
      width: min(calc(var(--max) + 24px), calc(100% - 24px));
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: color-mix(in srgb, var(--glass-2) 78%, transparent);
      backdrop-filter: blur(28px) saturate(160%);
      box-shadow: 0 18px 70px rgba(30, 22, 10, .09);
    }

    html[data-theme="dark"] .nav-shell { box-shadow: 0 18px 70px rgba(0,0,0,.26); }

    .nav {
      min-height: 66px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 8px 10px 8px 12px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      color: #12100c;
      /*background:
        radial-gradient(circle at 32% 22%, rgba(255,255,255,.94), transparent 28%),
        radial-gradient(circle at 70% 78%, rgba(85,111,247,.32), transparent 38%),
        linear-gradient(145deg, #ffe1a1, #d58d30 52%, #895222);*/
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 14px 34px rgba(169,103,49,.24);
      font-weight: 940;
      letter-spacing: -.1em;
      flex: 0 0 auto;
	  
	  background: url('/static/img/sadovnikov-2024-96-q96.webp') 0 0 no-repeat;
	  background-size: cover;
    }

    /*.avatar-mark::after {
      content: "";
      position: absolute;
      inset: 7px 9px auto;
      height: 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.42);
      transform: rotate(-12deg);
    }*/

    .avatar-glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.38), transparent 26%),
        radial-gradient(circle at 50% 74%, rgba(17,18,15,.18), transparent 34%);
    }

    .avatar-initials {
      position: relative;
      z-index: 1;
      font-size: 14px;
      transform: translateY(1px);
    }

    .brand-text {
      display: grid;
      gap: 1px;
      line-height: 1;
      min-width: 0;
    }

    .brand-text strong {
      font-size: 15px;
      letter-spacing: -.045em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-text span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: .05em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .nav-links {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 13px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 790;
      transition: background .18s ease, color .18s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      background: var(--glass-2);
      color: var(--text);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      justify-self: end;
      gap: 8px;
    }

    .lang-switcher {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--glass);
      padding: 4px;
      backdrop-filter: blur(18px);
    }

    .lang-switcher select {
      /*max-width: 150px;*/
      max-width: 96px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: -.02em;
      outline: none;
      padding: 0 24px 0 10px;
      appearance: none;
      -webkit-appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
      background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    html[dir="rtl"] .lang-switcher select {
      padding: 0 10px 0 24px;
      background-position: 13px 50%, 8px 50%;
    }

    .lang-switcher select option {
      color: #11120f;
      background: #fffaf1;
    }

    html[data-theme="dark"] .lang-switcher {
      background: rgba(255,255,255,.065);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    }

    html[data-theme="dark"] .lang-switcher select {
      color: var(--text);
      background-color: transparent;
      box-shadow: none;
    }

    html[data-theme="dark"] .lang-switcher select option,
    html[data-theme="dark"] select.field option {
      color: #11120f;
      background: #fffaf1;
    }

    html[data-theme="dark"] .field,
    html[data-theme="dark"] select.field {
      color: var(--text);
      background: rgba(255,255,255,.07);
    }

    html[data-theme="dark"] .field::placeholder {
      color: rgba(255,247,235,.58);
    }


    .icon-btn,
    .menu-btn {
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--glass);
      color: var(--text);
      cursor: pointer;
      display: inline-grid;
      place-items: center;
      backdrop-filter: blur(18px);
      transition: transform .18s ease, background .18s ease;
    }

    .icon-btn:hover,
    .menu-btn:hover {
      transform: translateY(-2px);
      background: var(--glass-2);
    }

    .menu-btn { display: none; }
    .menu-btn i,
    .menu-btn i::before,
    .menu-btn i::after {
      display: block;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 10px;
      content: "";
      position: relative;
    }
    .menu-btn i::before,
    .menu-btn i::after { position: absolute; left: 0; }
    .menu-btn i::before { top: -6px; }
    .menu-btn i::after { top: 6px; }

    .btn {
      --btn-bg: var(--glass);
      --btn-color: var(--text);
      --btn-border: var(--line);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid var(--btn-border);
      border-radius: 999px;
      background: var(--btn-bg);
      color: var(--btn-color);
      font-weight: 850;
      letter-spacing: -.03em;
      text-align: center;
      box-shadow: 0 12px 35px rgba(20, 15, 8, .06);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      will-change: transform;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 50px rgba(20, 15, 8, .12);
    }

    .btn-primary {
      --btn-bg: #11120f;
      --btn-color: #fff8ea;
      --btn-border: rgba(17,18,15,.18);
      box-shadow: 0 20px 45px rgba(17,18,15,.16);
    }

    html[data-theme="dark"] .btn-primary {
      --btn-bg: #fff8ea;
      --btn-color: #11120f;
      --btn-border: rgba(255,248,234,.16);
      box-shadow: 0 20px 48px rgba(255,248,234,.08);
    }

    .btn-gold {
      --btn-bg: linear-gradient(135deg, #ffe1a1, #d89437 56%, #9d5b21);
      --btn-color: #17110a;
      --btn-border: rgba(144,85,27,.18);
      box-shadow: 0 22px 50px rgba(216,148,55,.24);
    }

    .btn-ghost {
      --btn-bg: var(--glass);
      --btn-color: var(--text);
      --btn-border: var(--line);
    }

    main { position: relative; }

    .hero { padding: 94px 0 34px; }

    .hero-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
      gap: 28px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--glass);
      color: var(--muted);
      font-size: 13px;
      font-weight: 820;
      backdrop-filter: blur(20px);
      margin-bottom: 22px;
    }

    .pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(39,196,125,.48);
      animation: pulse 2.2s infinite;
    }

    @keyframes pulse {
      70% { box-shadow: 0 0 0 10px rgba(39,196,125,0); }
      100% { box-shadow: 0 0 0 0 rgba(39,196,125,0); }
    }

    h1, h2, h3 { text-wrap: balance; }

    h1 {
      margin: 0;
      font-size: clamp(50px, 8.3vw, 108px);
      line-height: .86;
      letter-spacing: -.105em;
      max-width: 900px;
    }

    .gradient-text {
      background: linear-gradient(112deg, var(--text), var(--copper), var(--blue), var(--text));
      background-size: 240% 100%;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradientMove 10s linear infinite;
	  padding-right: .08em;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      100% { background-position: 240% 50%; }
    }

    .hero-lead {
      margin: 28px 0 0;
      max-width: 730px;
      color: var(--muted);
      font-size: clamp(18px, 2.1vw, 23px);
      letter-spacing: -.035em;
      line-height: 1.55;
    }

    .hero-actions {
      margin-top: 34px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .signal-row {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 750px;
    }

    .signal {
      min-height: 94px;
      border: 1px solid var(--line);
      background: var(--glass);
      border-radius: 24px;
      padding: 16px;
      backdrop-filter: blur(20px);
    }

    .signal strong {
      display: block;
      font-size: 26px;
      letter-spacing: -.06em;
      line-height: 1;
    }

    .signal span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      font-weight: 660;
    }

    .hero-visual {
      position: relative;
      min-height: 650px;
      perspective: 1300px;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      pointer-events: none;
    }

    .orb.one {
      width: 220px;
      height: 220px;
      top: 12px;
      right: 8%;
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(241,191,104,.55), transparent 70%);
      opacity: .75;
      animation: float 8s ease-in-out infinite;
    }

    .orb.two {
      width: 150px;
      height: 150px;
      left: 8%;
      bottom: 70px;
      background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.9), rgba(85,111,247,.32), transparent 72%);
      opacity: .7;
      animation: float 10s ease-in-out infinite reverse;
    }

    @keyframes float {
      0%, 100% { transform: translate3d(0,0,0); }
      50% { transform: translate3d(0,-22px,0); }
    }

    .device-stack {
      position: absolute;
      inset: 48px 0 0;
      transform: rotateX(7deg) rotateY(-10deg) rotateZ(1deg);
      transform-style: preserve-3d;
    }

    .device {
      position: absolute;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, var(--glass-2), var(--glass)),
        radial-gradient(circle at 30% 0%, rgba(255,255,255,.5), transparent 40%);
      backdrop-filter: blur(30px) saturate(150%);
      border-radius: 36px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .device.main {
      width: min(470px, 92%);
      min-height: 548px;
      right: 0;
      top: 34px;
      padding: 18px;
    }

    .device.side {
      width: 255px;
      min-height: 270px;
      left: 0;
      top: 180px;
      padding: 16px;
      transform: translateZ(86px) rotateZ(-5deg);
    }

    .device.badge-card {
      width: 245px;
      min-height: 138px;
      right: 30px;
      bottom: 4px;
      padding: 18px;
      transform: translateZ(120px) rotateZ(4deg);
    }

    .window {
      border-radius: 27px;
      background: #11120f;
      color: #fff7eb;
      min-height: 512px;
      padding: 18px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
    }

    .dots { display: flex; gap: 7px; margin-bottom: 18px; }
    .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.28); }

    .window-hero {
      min-height: 170px;
      border-radius: 24px;
      padding: 18px;
      background:
        radial-gradient(circle at 82% 18%, rgba(255, 98, 98, .42), transparent 8rem),
        radial-gradient(circle at 18% 86%, rgba(39,196,125,.30), transparent 8rem),
        linear-gradient(135deg, rgba(255, 224, 163, .24), rgba(85,111,247,.18), rgba(155,92,255,.16));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 50px rgba(216,148,55,.10);
    }

    .window h2 {
      margin: 0;
      font-size: 42px;
      line-height: .9;
      letter-spacing: -.08em;
    }

    .window p {
      color: rgba(255,247,235,.68);
      margin: 14px 0 0;
      font-size: 13px;
      line-height: 1.55;
    }

    .window-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
      margin-top: 14px;
    }

    .mini {
      border-radius: 18px;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.08);
      padding: 13px;
      min-height: 104px;
    }

    .mini b {
      display: block;
      color: var(--gold-2);
      font-size: 22px;
      letter-spacing: -.055em;
    }

    .mini span {
      display: block;
      margin-top: 8px;
      color: rgba(255,247,235,.66);
      font-size: 12px;
      line-height: 1.38;
    }

    .chart {
      margin-top: 13px;
      height: 100px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, transparent 0 22%, rgba(255,255,255,.07) 22% 23%, transparent 23% 48%, rgba(255,255,255,.07) 48% 49%, transparent 49% 74%, rgba(255,255,255,.07) 74% 75%, transparent 75%),
        linear-gradient(135deg, rgba(241,191,104,.18), rgba(85,111,247,.13));
      border: 1px solid rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
    }

    .chart::before {
      content: "";
      position: absolute;
      left: -6%;
      bottom: 18px;
      width: 112%;
      height: 42px;
      background:
        linear-gradient(90deg, transparent, rgba(39,196,125,.88), rgba(241,191,104,.95), rgba(239,100,97,.78), rgba(85,111,247,.86), transparent);
      clip-path: polygon(0 70%, 16% 45%, 32% 62%, 48% 24%, 62% 36%, 78% 10%, 100% 30%, 100% 100%, 0 100%);
      opacity: .92;
    }

    .side .side-title {
      font-size: 12px;
      color: var(--muted);
      font-weight: 840;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 13px;
    }

    .task {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      border-radius: 18px;
      background: var(--glass-2);
      border: 1px solid var(--line-2);
      margin-top: 10px;
    }

    .check {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(39,196,125,.16);
      color: var(--green);
      font-weight: 920;
      font-size: 13px;
    }

    .task b { display: block; font-size: 13px; letter-spacing: -.02em; }
    .task span span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 3px; }

    .badge-card b {
      display: block;
      font-size: 42px;
      letter-spacing: -.08em;
      line-height: .92;
    }

    .badge-card span {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 680;
    }

    section { padding: 74px 0; }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 26px;
      margin-bottom: 30px;
    }

    .kicker {
      margin: 0 0 12px;
      color: var(--copper);
      text-transform: uppercase;
      letter-spacing: .18em;
      font-weight: 930;
      font-size: 12px;
    }

    h2 {
      margin: 0;
      max-width: 820px;
      font-size: clamp(36px, 5.6vw, 72px);
      line-height: .91;
      letter-spacing: -.09em;
    }

    .section-copy {
      margin: 0;
      max-width: 430px;
      color: var(--muted);
      font-size: 16px;
    }

    .bento {
      display: grid;
      grid-template-columns: 1.15fr .85fr .85fr;
      grid-auto-rows: minmax(218px, auto);
      gap: 14px;
    }

    .tile {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--glass);
      backdrop-filter: blur(24px) saturate(145%);
      box-shadow: var(--shadow-2);
      padding: 26px;
    }

    .tile::after {
      content: "";
      position: absolute;
      inset: auto -10% -40% auto;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(241,191,104,.24), transparent 72%);
      pointer-events: none;
    }

    .tile.large { grid-row: span 2; min-height: 460px; background: radial-gradient(circle at 78% 18%, rgba(85,111,247,.15), transparent 20rem), var(--glass); }
    .tile.wide { grid-column: span 2; }

    .tile h3 {
      margin: 0;
      font-size: clamp(26px, 3vw, 40px);
      line-height: .95;
      letter-spacing: -.075em;
      max-width: 560px;
    }

    .tile p {
      margin: 16px 0 0;
      color: var(--muted);
      max-width: 660px;
    }

    .tile-list {
      margin: 26px 0 0;
      padding: 0;
      display: grid;
      gap: 12px;
      list-style: none;
    }

    .tile-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
      font-weight: 650;
    }

    .tile-list li::before {
      content: "";
      margin-top: 5px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--violet));
      flex: 0 0 auto;
    }

    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 33px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--glass-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 830;
    }

    .chip-link {
      color: var(--text);
      background: color-mix(in srgb, var(--gold) 18%, var(--glass-2));
      transition: transform .18s ease, background .18s ease;
    }

    .chip-link:hover {
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--gold) 30%, var(--glass-2));
    }

    .product-card { display: grid; gap: 14px; }

    .product {
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--glass);
      padding: 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      backdrop-filter: blur(20px);
      transition: transform .18s ease, background .18s ease;
    }

    .product:hover { transform: translateY(-3px); background: var(--glass-2); }

    .product h3 {
      margin: 0;
      font-size: clamp(24px, 3.4vw, 44px);
      line-height: .95;
      letter-spacing: -.08em;
    }

    .product p {
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 670px;
      font-size: 15px;
    }

    .price {
      min-width: 148px;
      min-height: 58px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--glass-2);
      color: color-mix(in srgb, var(--text) 76%, var(--gold));
      font-weight: 960;
      letter-spacing: -.045em;
      white-space: nowrap;
      padding: 0 18px;
      text-align: center;
    }

    .crypto-note {
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: color-mix(in srgb, var(--glass-2) 74%, transparent);
      padding: 18px 20px;
      color: var(--muted);
      font-weight: 680;
      line-height: 1.55;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }

    .proof {
      min-height: 420px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--glass);
      backdrop-filter: blur(22px);
      padding: 24px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proof::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 78% 0%, rgba(241,191,104,.24), transparent 16rem);
      pointer-events: none;
    }

    .proof-img {
      width: 100%;
      height: 170px;
      object-fit: cover;
      border-radius: 24px;
      margin-bottom: 22px;
      border: 1px solid var(--line);
      background: var(--glass-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }

    .proof-shot {
      position: relative;
      min-height: 152px;
      border: 1px solid var(--line);
      border-radius: 24px;
      margin-bottom: 22px;
      background:
        radial-gradient(circle at 20% 22%, rgba(255,255,255,.85), transparent 18%),
        radial-gradient(circle at 78% 12%, rgba(85,111,247,.28), transparent 30%),
        radial-gradient(circle at 72% 88%, rgba(39,196,125,.20), transparent 32%),
        linear-gradient(135deg, rgba(241,191,104,.40), rgba(155,92,255,.16));
      overflow: hidden;
    }

    .proof-shot::before,
    .proof-shot::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.46);
    }

    .proof-shot::before {
      left: 18px;
      top: 18px;
      width: 44%;
      height: 12px;
    }

    .proof-shot::after {
      left: 18px;
      top: 42px;
      width: 68%;
      height: 12px;
      opacity: .62;
    }

    .proof-shot span {
      position: absolute;
      left: 18px;
      bottom: 16px;
      right: 18px;
      display: block;
      font-size: 28px;
      line-height: .9;
      letter-spacing: -.08em;
      font-weight: 940;
      color: #11120f;
    }

    html[dir="rtl"] .proof-shot span,
    html[dir="rtl"] .proof-shot::before,
    html[dir="rtl"] .proof-shot::after {
      left: auto;
      right: 18px;
    }

    .proof h3 {
      position: relative;
      margin: 0;
      font-size: clamp(30px, 4vw, 52px);
      line-height: .88;
      letter-spacing: -.09em;
    }

    .proof h3 a {
      text-decoration: none;
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 0% 2px;
      background-repeat: no-repeat;
      background-position: 0 100%;
      transition: background-size .22s ease;
    }
    .proof h3 a:hover { background-size: 100% 2px; }

    .proof p {
      position: relative;
      color: var(--muted);
      margin: 18px 0 0;
      font-size: 15px;
    }

    .proof-footer {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 26px;
    }

    .roadmap { display: grid; gap: 12px; counter-reset: road; }

    .road {
      counter-increment: road;
      display: grid;
      grid-template-columns: 76px 1fr auto;
      gap: 18px;
      align-items: center;
      min-height: 104px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: var(--glass);
      backdrop-filter: blur(20px);
      padding: 16px;
    }

    .road::before {
      content: counter(road, decimal-leading-zero);
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 21px;
      background: linear-gradient(135deg, rgba(241,191,104,.2), rgba(155,92,255,.12));
      border: 1px solid var(--line);
      color: var(--copper);
      font-weight: 940;
      letter-spacing: -.04em;
    }

    .road h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
    .road p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }

    .road span {
      color: var(--muted-2);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .cta { padding: 24px 0 94px; }

    .cta-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 52px;
      background:
        radial-gradient(circle at 16% 18%, rgba(241,191,104,.32), transparent 21rem),
        radial-gradient(circle at 86% 20%, rgba(85,111,247,.18), transparent 21rem),
        var(--glass);
      backdrop-filter: blur(28px) saturate(145%);
      box-shadow: var(--shadow);
      padding: clamp(28px, 5vw, 58px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
      gap: 34px;
      align-items: start;
    }

    .cta-panel h2 { max-width: 850px; font-size: clamp(42px, 6.6vw, 86px); }

    .cta-panel p {
      color: var(--muted);
      max-width: 760px;
      margin: 22px 0 0;
      font-size: 18px;
      letter-spacing: -.02em;
    }

    .quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .quick-links a {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--glass);
      font-weight: 850;
      transition: transform .18s ease, background .18s ease;
    }

    .quick-links a:hover {
      transform: translateY(-2px);
      background: var(--glass-2);
    }

    .quick-note {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      line-height: 1.45;
      font-size: 13px;
    }

    .sr-only-field {
      position: absolute !important;
      left: -9999px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(24px + env(safe-area-inset-bottom));
      z-index: 300;
      width: min(460px, calc(100% - 28px));
      transform: translate(-50%, 24px);
      opacity: 0;
      pointer-events: none;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: blur(24px) saturate(160%);
      box-shadow: var(--shadow);
      padding: 16px 18px;
      color: var(--text);
      transition: opacity .22s ease, transform .22s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
      pointer-events: auto;
    }

    .toast b {
      display: block;
      font-size: 15px;
      letter-spacing: -.02em;
      margin-bottom: 4px;
    }

    .toast span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    html[dir="rtl"] body {
      text-align: right;
    }

    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3 {
      letter-spacing: -.035em;
    }

    html[dir="rtl"] .brand,
    html[dir="rtl"] .eyebrow,
    html[dir="rtl"] .hero-actions,
    html[dir="rtl"] .quick-links,
    html[dir="rtl"] .chip-row,
    html[dir="rtl"] .task,
    html[dir="rtl"] .tile-list li {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .nav-actions {
      justify-self: start;
    }

    html[dir="rtl"] .tile-list li::before {
      margin-right: 0;
      margin-left: 0;
    }

    .lead-form {
      border: 1px solid var(--line);
      border-radius: 34px;
      background: color-mix(in srgb, var(--glass-2) 72%, transparent);
      padding: 18px;
      display: grid;
      gap: 12px;
      backdrop-filter: blur(20px);
    }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .field {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--glass);
      color: var(--text);
      padding: 0 15px;
      outline: none;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    textarea.field {
      min-height: 130px;
      padding-top: 14px;
      resize: vertical;
      line-height: 1.55;
    }

    .field:focus {
      border-color: color-mix(in srgb, var(--gold) 70%, var(--line));
      background: var(--glass-2);
      box-shadow: 0 0 0 4px rgba(216,148,55,.12);
    }

    .field::placeholder { color: var(--muted-2); }

    .form-status {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      min-height: 20px;
      margin: 0;
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 34px 0 48px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-links { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 760; }

    .mobile-menu {
      display: none;
      position: fixed;
      z-index: 90;
      top: 90px;
      left: 14px;
      right: 14px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      backdrop-filter: blur(28px) saturate(150%);
      box-shadow: var(--shadow);
      padding: 10px;
    }

    .mobile-menu.open { display: block; }

    .mobile-menu a {
      display: flex;
      align-items: center;
      min-height: 52px;
      border-radius: 20px;
      padding: 0 15px;
      font-weight: 850;
      letter-spacing: -.03em;
    }

    .mobile-menu a:hover { background: var(--glass); }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.in { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1; transform: none; }
    }



    /* v8: language-aware contact button order */
    .quick-links a { order: var(--contact-order, 10); }
    html[data-lang="ru"] .quick-links a[data-channel="telegram"] { --contact-order: 1; }
    html[data-lang="ru"] .quick-links a[data-channel="whatsapp"] { --contact-order: 2; }
    html[data-lang="ru"] .quick-links a[data-channel="email"] { --contact-order: 3; }
    html:not([data-lang="ru"]) .quick-links a[data-channel="whatsapp"] { --contact-order: 1; }
    html:not([data-lang="ru"]) .quick-links a[data-channel="telegram"] { --contact-order: 2; }
    html:not([data-lang="ru"]) .quick-links a[data-channel="email"] { --contact-order: 3; }

    .consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 650;
    }

    .consent input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      flex: 0 0 auto;
      accent-color: var(--gold);
    }

    .consent a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .signal strong br {
      display: block;
    }

    @media (max-width: 1140px) {
      .lang-switcher {
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 120;
        box-shadow: var(--shadow-2);
        background: color-mix(in srgb, var(--bg) 84%, transparent);
      }

      .lang-switcher select {
        width: min(260px, 72vw);
        max-width: none;
      }

      footer { padding-bottom: 96px; }

      .nav-links { display: none; }
      .menu-btn { display: inline-grid; }
      .hero-layout { grid-template-columns: 1fr; gap: 42px; }
      .hero-visual { min-height: 560px; order: 0; }
      .device-stack {
        max-width: 620px;
        left: 50%;
        transform: translateX(-50%) rotateX(5deg) rotateY(-7deg) rotateZ(1deg);
      }
      .section-head,
      .cta-panel { grid-template-columns: 1fr; display: grid; align-items: start; }
      .bento,
      .proof-grid { grid-template-columns: 1fr 1fr; }
      .tile.large,
      .tile.wide { grid-column: span 2; grid-row: auto; }
      .lead-form { max-width: 560px; }
    }

    @media (max-width: 780px) {
      .wrap { width: min(100% - 28px, var(--max)); }
      .topbar { top: 8px; margin-top: 8px; }
      .nav-shell { width: calc(100% - 16px); }
      .nav {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: space-between;
        min-height: 62px;
        padding: 7px 8px;
      }
      .brand { min-width: 0; }
      .brand-text span { display: none; }
      .nav-actions { justify-self: end; }
      .nav-actions .btn-primary { display: none; }
      .lang-switcher {
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 120;
        box-shadow: var(--shadow-2);
      }
      .lang-switcher select {
        width: min(78vw, 260px);
        max-width: min(78vw, 260px);
      }
      .hero { padding-top: 52px; }
      .hero-layout { gap: 36px; }
      .hero-copy { position: relative; z-index: 2; }
      h1 {
        font-size: clamp(46px, 14.6vw, 72px);
        letter-spacing: -.095em;
      }
      .hero-lead { font-size: 17px; }
      .hero-actions .btn,
      .quick-links a,
      .lead-form .btn { width: 100%; }
      .signal-row,
      .bento,
      .proof-grid { grid-template-columns: 1fr; }
      .tile.large,
      .tile.wide { grid-column: auto; }
      .hero-visual {
        min-height: 520px;
        margin: 8px 0 4px;
        overflow: hidden;
      }
      .device.main {
        width: min(96%, 430px);
        right: 50%;
        transform: translateX(50%);
        top: 22px;
        min-height: 458px;
        border-radius: 30px;
        padding: 13px;
      }
      .window { min-height: 438px; padding: 14px; }
      .window h2 { font-size: 35px; }
      .window-grid { gap: 8px; }
      .mini { min-height: 100px; padding: 11px; }
      .device.side { display: none; }
      .device.badge-card {
        width: 184px;
        min-height: 118px;
        right: 6px;
        bottom: 18px;
      }
      .badge-card b { font-size: 34px; }
      .product { grid-template-columns: 1fr; }
      .price { justify-self: start; min-width: 0; }
      .road { grid-template-columns: 1fr; }
      .road::before { width: 50px; height: 50px; }
      .road span { white-space: normal; }
      .cta-panel { border-radius: 34px; padding: 24px; }
      .form-row { grid-template-columns: 1fr; }
      section { padding: 58px 0; }
      footer { padding-bottom: 92px; }
    }

    @media (max-width: 460px) {
      .brand-mark { width: 42px; height: 42px; }
      .brand-text strong { max-width: 145px; }
      .hero-visual { min-height: 490px; }
      .device-stack { inset: 8px 0 0; }
      .device.main { width: min(98%, 420px); min-height: 452px; }
      .device.badge-card { width: 178px; min-height: 112px; right: 8px; bottom: 18px; }
      .hero-actions, .signal-row { gap: 9px; }
      .lang-switcher select { width: min(76vw, 240px); }
    }


    /* v5 polish: compact language selector, balanced dark mode, mobile dock, centered mockup */
    html[data-theme="dark"] {
      --bg: #0e0d12;
      --bg-2: #171420;
      --glass: rgba(255,255,255,.065);
      --glass-2: rgba(255,255,255,.115);
      --glass-3: rgba(255,255,255,.055);
      --shadow: 0 30px 120px rgba(0,0,0,.48);
      --shadow-2: 0 18px 70px rgba(0,0,0,.30);
    }

    html[data-theme="dark"] body::before {
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(244,182,94,.16), transparent 25rem),
        radial-gradient(circle at 13% 5%, rgba(155,92,255,.22), transparent 26rem),
        radial-gradient(circle at 88% 18%, rgba(85,111,247,.21), transparent 27rem),
        radial-gradient(circle at 72% 82%, rgba(39,196,125,.13), transparent 23rem),
        linear-gradient(180deg, var(--bg), var(--bg-2));
    }

    html[data-theme="dark"] .price {
      color: color-mix(in srgb, var(--gold-2) 72%, var(--text));
      background: rgba(255,255,255,.085);
    }

    .lang-switcher select {
      width: 118px;
      max-width: 118px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bottom-dock {
      display: none;
    }

    .bottom-dock a {
      min-width: 0;
      min-height: 54px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 2px;
      border-radius: 20px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.1;
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .bottom-dock a span {
      color: var(--text);
      font-size: 15px;
      line-height: 1;
    }

    .bottom-dock a b {
      font: inherit;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .bottom-dock a:hover,
    .bottom-dock a:focus-visible {
      color: var(--text);
      background: var(--glass-2);
      transform: translateY(-1px);
    }



    .consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 650;
    }

    .consent input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      flex: 0 0 auto;
      accent-color: var(--gold);
    }

    .consent a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .signal strong br {
      display: block;
    }

    @media (max-width: 1140px) {
      .lang-switcher {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        z-index: auto;
        box-shadow: none;
        background: var(--glass);
      }

      .lang-switcher select {
        width: 100px;
        max-width: 100px;
      }

      footer { padding-bottom: 48px; }
    }

    @media (max-width: 780px) {
      .lang-switcher {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        z-index: auto;
        box-shadow: none;
        padding: 3px;
      }

      .lang-switcher select {
        width: 84px;
        max-width: 84px;
        height: 36px;
        padding: 0 22px 0 8px;
      }

      html[dir="rtl"] .lang-switcher select {
        padding: 0 8px 0 22px;
      }

      .bottom-dock {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 115;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 28px;
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        backdrop-filter: blur(28px) saturate(160%);
        box-shadow: var(--shadow-2);
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
        transition: opacity .22s ease, transform .22s ease;
      }

      html.dock-visible .bottom-dock {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .hero-visual {
        min-height: 535px;
        overflow: visible;
        margin: 8px 0 4px;
      }

      .device-stack {
        position: relative;
        inset: auto;
        left: auto;
        width: min(100%, 448px);
        max-width: 448px;
        height: 520px;
        margin: 0 auto;
        transform: none;
      }

      .device.main {
        left: 50%;
        right: auto;
        top: 12px;
        width: min(100%, 426px);
        transform: translateX(-50%);
      }

      .device.badge-card {
        right: 8px;
        bottom: 18px;
        transform: rotate(3deg);
      }

      .toast {
        bottom: calc(92px + env(safe-area-inset-bottom));
      }

      footer { padding-bottom: 118px; }
    }

    @media (max-width: 560px) {
      .brand-text { display: none; }
      .nav { grid-template-columns: auto auto; }
      .nav-actions { gap: 6px; }
      .icon-btn,
      .menu-btn { width: 42px; height: 42px; }
      .lang-switcher select { width: 76px; max-width: 76px; padding-right: 21px; }
    }

    @media (max-width: 460px) {
      .hero-visual { min-height: 510px; }
      .device-stack { width: min(100%, 408px); height: 500px; }
      .device.main { width: min(100%, 396px); min-height: 452px; }
      .device.badge-card { width: 168px; min-height: 108px; right: 4px; bottom: 14px; }
      .bottom-dock { left: 10px; right: 10px; border-radius: 24px; }
      .bottom-dock a { min-height: 50px; border-radius: 17px; font-size: 10px; }
    }

    /* PHP v2: premium selling CTA button */
    .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff2c7 0%, #ffd98a 24%, #f0a33d 52%, #c86b32 76%, #8c63ff 118%);
      --btn-color: #17110a;
      --btn-border: rgba(255, 224, 163, .58);
      position: relative;
      overflow: hidden;
      background: var(--btn-bg);
      color: var(--btn-color);
      border-color: var(--btn-border);
      box-shadow:
        0 24px 58px rgba(216, 148, 55, .30),
        0 10px 30px rgba(155, 92, 255, .12),
        inset 0 1px 0 rgba(255,255,255,.58);
    }

    .btn-gold::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0) 52%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.45), transparent 34%);
      pointer-events: none;
      opacity: .78;
    }

    .btn-gold:hover {
      box-shadow:
        0 30px 70px rgba(216, 148, 55, .36),
        0 14px 38px rgba(155, 92, 255, .16),
        inset 0 1px 0 rgba(255,255,255,.64);
    }

    html[data-theme="dark"] .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff0bd 0%, #f6c367 28%, #dd8735 58%, #9b5cff 120%);
      --btn-border: rgba(255, 224, 163, .46);
      box-shadow:
        0 26px 64px rgba(244, 182, 94, .20),
        0 10px 36px rgba(155, 92, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.52);
    }

    /* PHP v2: stable bottom menu. Shows after a meaningful scroll and hides near top. */
    .bottom-dock {
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(100% + 24px));
      transition: opacity .22s ease, transform .22s ease;
    }

    html.dock-visible .bottom-dock {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    @media (min-width: 781px) {
      .bottom-dock { display: none !important; }
    }

    .form-status.is-error { color: var(--red); }
    .form-status.is-ok { color: var(--green); }

    /* Removed future knowledge/tutorials tile from server-rendered content. */

  

    /* PHP v3: mobile CTA/form fix */
    @media (max-width: 780px) {
      .cta { padding: 30px 0 80px; }
      .cta .wrap { width: calc(100% - 16px); }
      .cta-panel {
        grid-template-columns: 1fr;
        gap: 18px;
        border-radius: 28px;
        padding: 16px;
      }
      .lead-form {
        width: 100%;
        max-width: none;
        padding: 12px;
        border-radius: 24px;
      }
      .field {
        min-width: 0;
        min-height: 52px;
        border-radius: 16px;
      }
      textarea.field { min-height: 148px; }
      .form-row { grid-template-columns: 1fr; gap: 10px; }
      .consent { font-size: 11.5px; }
    }

    @media (max-width: 420px) {
      .cta .wrap { width: calc(100% - 10px); }
      .cta-panel { padding: 10px; border-radius: 24px; }
      .lead-form { padding: 10px; }
    }

    /* PHP v3: FAQ */
    .faq-grid { display: grid; gap: 12px; }
    .faq-item {
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--glass);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-2);
      overflow: hidden;
    }
    .faq-item summary {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 22px;
      cursor: pointer;
      color: var(--text);
      font-weight: 900;
      letter-spacing: -.04em;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--glass-2);
      color: var(--muted);
      font-size: 20px;
      line-height: 1;
      transition: transform .18s ease, color .18s ease;
    }
    .faq-item[open] summary::after {
      transform: rotate(45deg);
      color: var(--text);
    }
    .faq-item p {
      margin: 0;
      padding: 0 22px 20px;
      color: var(--muted);
      font-size: 15px;
    }

    /* PHP v3: footer legal */
    .footer-grid-v3 { align-items: flex-start; }
    .legal-note {
      display: block;
      max-width: 620px;
      margin-top: 8px;
      color: var(--muted-2);
      line-height: 1.45;
      font-size: 12px;
    }
    @media (max-width: 780px) {
      .footer-grid-v3 { display: grid; gap: 16px; }
      .footer-links { gap: 10px 14px; }
    }

  

    /* PHP v4: calmer premium CTA button */
    .btn-gold {
      --btn-bg: linear-gradient(135deg, #14110b 0%, #2b1f10 34%, #c5822e 100%);
      --btn-color: #fff8ea;
      --btn-border: rgba(255, 224, 163, .34);
      background: var(--btn-bg);
      color: var(--btn-color);
      border-color: var(--btn-border);
      text-shadow: 0 1px 0 rgba(0,0,0,.22);
      box-shadow: 0 22px 52px rgba(110,69,20,.20), 0 10px 28px rgba(17,18,15,.14), inset 0 1px 0 rgba(255,255,255,.24);
    }
    .btn-gold::before {
      opacity: .42;
      background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 52%), radial-gradient(circle at 20% 18%, rgba(255,255,255,.26), transparent 34%);
    }
    .btn-gold:hover {
      box-shadow: 0 28px 68px rgba(110,69,20,.26), 0 14px 36px rgba(17,18,15,.18), inset 0 1px 0 rgba(255,255,255,.28);
    }
    html[data-theme="dark"] .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff4c8 0%, #f2bf66 45%, #b8732a 100%);
      --btn-color: #14100a;
      --btn-border: rgba(255, 224, 163, .46);
      text-shadow: none;
      box-shadow: 0 24px 60px rgba(244,182,94,.18), 0 10px 34px rgba(155,92,255,.08), inset 0 1px 0 rgba(255,255,255,.48);
    }

    /* PHP v4: centered FAQ plus icons */
    .faq-item summary::after {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0 0 2px 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    /* PHP v4: cleaner checkbox accent */
    .consent input { accent-color: var(--green); }
    html[data-theme="dark"] .consent input { accent-color: var(--gold); }

    .lead-form textarea.field { min-height: 156px; }
    @media (max-width: 780px) {
      .lead-form textarea.field { min-height: 168px; }
    }

  
    /* PHP v5 polish */
    .lang-switcher select { font-size: 13px; }
    @media (max-width: 780px) { .lang-switcher select { font-size: 12px; } }

    html:not([dir="rtl"]) .gradient-text {
      /*display: inline-block;*/
      padding-right: .08em;
      padding-bottom: .06em;
    }
    html[dir="rtl"] .gradient-text {
      display: inline-block;
      padding-bottom: .06em;
	  padding-left: .08em;
    }
    h1 { padding-bottom: .05em; }

    .window-hero { min-height: 132px; }
    @media (max-width: 780px) { .window-hero { min-height: 124px; } }

    .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff0bd 0%, #f4bd5f 42%, #d88932 100%);
      --btn-color: #181008;
      --btn-border: rgba(160, 94, 24, .22);
      background: var(--btn-bg);
      color: var(--btn-color);
      border-color: var(--btn-border);
      text-shadow: none;
      box-shadow: 0 24px 56px rgba(216,137,50,.26), 0 10px 26px rgba(160,94,24,.12), inset 0 1px 0 rgba(255,255,255,.58);
    }
    .btn-gold::before {
      opacity: .58;
      background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 52%), radial-gradient(circle at 18% 20%, rgba(255,255,255,.42), transparent 34%);
    }
    .btn-gold:hover {
      box-shadow: 0 30px 72px rgba(216,137,50,.34), 0 14px 34px rgba(160,94,24,.15), inset 0 1px 0 rgba(255,255,255,.66);
    }
    html[data-theme="dark"] .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff2c7 0%, #f1bd62 44%, #ca7f2f 100%);
      --btn-color: #151009;
      --btn-border: rgba(255,224,163,.48);
      box-shadow: 0 26px 64px rgba(244,182,94,.22), 0 10px 32px rgba(155,92,255,.08), inset 0 1px 0 rgba(255,255,255,.56);
    }

    textarea.field {
      field-sizing: content;
      min-height: 156px;
    }
    @supports not (field-sizing: content) {
      textarea.field { overflow-y: hidden; }
    }

    .faq-item summary::after {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transform-origin: 50% 50%;
      font-size: 21px;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }

  
    /* PHP v5 fixed polish */
    .lang-switcher select { font-size: 13px; }
    @media (max-width: 780px) { .lang-switcher select { font-size: 12px; } }

    html:not([dir="rtl"]) .gradient-text {
      /*display: inline-block;*/
      padding-right: .08em;
      padding-bottom: .06em;
    }
    html[dir="rtl"] .gradient-text {
      display: inline-block;
      padding-bottom: .06em;
    }
    h1 { padding-bottom: .05em; }

    .window-hero { min-height: 132px; }
    @media (max-width: 780px) { .window-hero { min-height: 124px; } }

    .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff0bd 0%, #f4bd5f 42%, #d88932 100%);
      --btn-color: #181008;
      --btn-border: rgba(160, 94, 24, .22);
      background: var(--btn-bg);
      color: var(--btn-color);
      border-color: var(--btn-border);
      text-shadow: none;
      box-shadow: 0 24px 56px rgba(216,137,50,.26), 0 10px 26px rgba(160,94,24,.12), inset 0 1px 0 rgba(255,255,255,.58);
    }
    .btn-gold::before {
      opacity: .58;
      background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 52%), radial-gradient(circle at 18% 20%, rgba(255,255,255,.42), transparent 34%);
    }
    .btn-gold:hover {
      box-shadow: 0 30px 72px rgba(216,137,50,.34), 0 14px 34px rgba(160,94,24,.15), inset 0 1px 0 rgba(255,255,255,.66);
    }
    html[data-theme="dark"] .btn-gold {
      --btn-bg: linear-gradient(135deg, #fff2c7 0%, #f1bd62 44%, #ca7f2f 100%);
      --btn-color: #151009;
      --btn-border: rgba(255,224,163,.48);
      box-shadow: 0 26px 64px rgba(244,182,94,.22), 0 10px 32px rgba(155,92,255,.08), inset 0 1px 0 rgba(255,255,255,.56);
    }

    textarea.field {
      field-sizing: content;
      min-height: 156px;
    }
    @supports not (field-sizing: content) {
      textarea.field { overflow-y: hidden; }
    }

    .faq-item summary::after {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transform-origin: 50% 50%;
      font-size: 21px;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }

/* patch 2026-07-22 */
.lead-form button[type="submit"],
.lead-form .btn[type="submit"] {
  cursor: pointer;
}

.consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

html[dir="rtl"] .brand {
  direction: ltr;
}

html[dir="rtl"] .brand .brand-text {
  order: 1;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .brand .brand-mark {
  order: 2;
}

/* legal pages patch */
.legal-page {
  padding: 84px 0 70px;
}
.legal-shell {
  width: min(920px, calc(100% - 44px));
  margin: 0 auto;
}
.legal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--glass-2) 78%, transparent);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--shadow);
  padding: clamp(26px, 5vw, 58px);
}
.legal-card h1 {
  font-size: clamp(42px, 7vw, 82px);
  line-height: .92;
  letter-spacing: -.09em;
  margin: 0 0 18px;
}
.legal-lead {
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}
.legal-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.legal-content {
  display: grid;
  gap: 24px;
}
.legal-section {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.legal-section h2 {
  margin: 0 0 10px;
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: -.055em;
}
.legal-section p,
.legal-section li {
  color: var(--muted);
  line-height: 1.72;
  font-size: 15.5px;
}
.legal-section p {
  margin: 0 0 12px;
}
.legal-section ul {
  margin: 10px 0 0;
  padding-left: 22px;
}
html[dir="rtl"] .legal-section ul {
  padding-left: 0;
  padding-right: 22px;
}
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.legal-footer-note {
  margin: 28px 0 0;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 780px) {
  .legal-page { padding-top: 38px; }
  .legal-card { border-radius: 28px; }
}