:root {
      --bg: #0C0A13;
      --text: #ffffff;

      /* Grid */
      --grid-cols:   8;
      --grid-margin: 12px;
      --grid-gutter: 8px;
      --grid-col-w:  calc((100vw - 2 * var(--grid-margin) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));

      /* Занимаемые колонки для текстовых блоков */
      --block-start: 1;
      --block-cols:  var(--grid-cols);

      /* Layout */
      --section-pad-y: 200px;
      --section-gap:   0px;

      /* Layout copy */
      --layout-title-cols: 6;
      --layout-copy-cols: 5;
      --layout-next-gap: 72px;
      --layout-copy-gap: 18px;

      /* Card padding */
      --card-pad: 12px;

      /* Button tokens */
      --btn-radius-pill:    100px;
      --btn-radius-rect:    12px;
      --btn-border-width:   1.5px;
      --btn-min-width:      120px;
      --btn-font-weight:    400;
      --btn-letter-spacing: 0.02em;

      --btn-l-font:  var(--t-p2-size);
      --btn-l-pad-y: 0.889em;
      --btn-l-pad-x: 1.778em;
      --btn-m-font:  14px;
      --btn-m-pad-y: 0.857em;
      --btn-m-pad-x: 1.571em;

      --btn-s-fill:         rgba(255,255,255, 0.10);
      --btn-s-text:         rgba(255,255,255, 0.70);
      --btn-s-rim-dark-rgb: 255, 255, 255;
      --btn-s-rim-hot-rgb:  255, 255, 255;
      --btn-s-rim-base-a:   0.16;
      --btn-s-rim-hot-a:    0.16;
      --btn-s-rim-dyn:      0.80;
      --btn-s-shadow-rgb:   255, 255, 255;
      --btn-s-shadow-max:   0.25;

      --btn-p-fill:         rgba(100, 50, 170, 0.60);
      --btn-p-text:         #EDBBFF;
      --btn-p-rim-dark-rgb: 155,  80, 230;
      --btn-p-rim-hot-rgb:  225, 175, 255;
      --btn-p-rim-base-a:   0.50;
      --btn-p-rim-hot-a:    0.65;
      --btn-p-rim-dyn:      0.35;
      --btn-p-shadow-rgb:   155,  80, 230;
      --btn-p-shadow-max:   0.75;
    }
    @media (min-width: 360px) { :root { --grid-margin: 16px; --grid-gutter: 12px; --card-pad: 16px; } }
    @media (min-width: 560px) { :root { --grid-margin: 32px; --grid-gutter: 20px; --card-pad: 24px; } }
    @media (min-width: 720px) { :root { --block-start: 2; --block-cols: 6; /* со второй по седьмую */ } }
    @media (min-width: 905px) { :root { --grid-cols: 12; --grid-margin: 40px; --grid-gutter: 24px; --block-start: 2; --block-cols: 10; --card-pad: 28px; } }
    @media (min-width: 1040px){ :root { --block-start: 3; --block-cols: 8; /* с 3 по 10 */ } }
    @media (min-width: 1240px){ :root { --grid-margin: 80px; --grid-gutter: 32px; --card-pad: 32px; } }

    /* Typography */
    :root {
      --t-h1-size:   clamp(28px, 7.78vw, 36px);
      --t-h1-lh:     clamp(32px, 8.89vw, 40px);
      --t-h1-weight: 500;

      --t-h2-size:   clamp(18px, 5vw, 24px);
      --t-h2-lh:     clamp(24px, 6.67vw, 30px);
      --t-h2-weight: 500;

      --t-p1-size:   clamp(15px, 4.17vw, 18px);
      --t-p1-lh:     clamp(22px, 6.11vw, 26px);
      --t-p1-weight: 150;

      --t-h3-size:   clamp(15px, 4.17vw, 18px);
      --t-h3-lh:     clamp(20px, 5.56vw, 24px);
      --t-h3-weight: 700;

      --t-p2-size:   clamp(13px, 3.61vw, 15px);
      --t-p2-lh:     clamp(18px, 5vw, 21px);
      --t-p2-weight: 300;
    }
    @media (min-width: 360px) { :root { --t-h1-size: 36px; --t-h1-lh: 40px; --t-h2-size: 24px; --t-h2-lh: 30px; --t-p1-size: 16px; --t-p1-lh: 24px; --t-h3-size: 18px; --t-h3-lh: 24px; --t-p2-size: 15px; --t-p2-lh: 21px; } }
    @media (min-width: 560px) { :root { --t-h1-size: 48px; --t-h1-lh: 54px; --t-h2-size: 30px; --t-h2-lh: 38px; --t-p1-size: 20px; --t-p1-lh: 28px; --t-h3-size: 20px; --t-h3-lh: 26px; --t-p2-size: 16px; --t-p2-lh: 22px; } }
    @media (min-width: 905px) { :root { --t-h1-size: 58px; --t-h1-lh: 64px; --t-h2-size: 36px; --t-h2-lh: 46px; --t-p1-size: 24px; --t-p1-lh: 32px; --t-h3-size: 24px; --t-h3-lh: 30px; --t-p2-size: 17px; --t-p2-lh: 23px; } }
    @media (min-width: 1240px){ :root { --t-h1-size: 72px; --t-h1-lh: 76px; --t-h2-size: 44px; --t-h2-lh: 56px; --t-p1-size: 24px; --t-p1-lh: 32px; --t-p1-weight: 150; --t-h3-size: 28px; --t-h3-lh: 32px; --t-p2-size: 18px; --t-p2-lh: 24px; } }

    .t-h1 { font-family: 'Geologica', sans-serif; font-size: var(--t-h1-size); line-height: var(--t-h1-lh); font-weight: var(--t-h1-weight); margin: 0; }
    .t-h2 { font-family: 'Geologica', sans-serif; font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: var(--t-h2-weight); margin: 0; }
    .t-p1 { font-family: 'Geologica', sans-serif; font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight); font-variation-settings: "wght" var(--t-p1-weight); margin: 0; color: rgba(255,255,255,0.7); }
    .t-h3 { font-family: 'Geologica', sans-serif; font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-weight); margin: 0; }
    .t-p2-b { font-family: 'Geologica', sans-serif; font-size: var(--t-p2-size); line-height: var(--t-p2-lh); font-weight: 700; margin: 0; }

    body, html {
      margin: 0; padding: 0;
      width: 100vw;
      background: var(--bg);
      color: var(--text);
      font-family: 'Geologica', sans-serif;
      overflow-x: clip; /* clip не создаёт scroll-контейнер → не ломает position:sticky */
    }

    section {
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      padding: var(--section-pad-y) var(--grid-margin);
      margin-bottom: var(--section-gap);
      box-sizing: border-box;
    }

    /* ── Hero image section ── */
    .hero-image-section {
      padding: 0;
      height: 100svh;
      min-height: 100svh;
      justify-content: center;
      align-items: stretch;
      overflow: hidden;
      background: none;
    }
    .hero-image-wrap {
      position: relative;
      width: calc(var(--grid-col-w) * var(--block-cols) + var(--grid-gutter) * (var(--block-cols) - 1));
      margin-left: calc(var(--grid-margin) + (var(--grid-col-w) + var(--grid-gutter)) * (var(--block-start) - 1));
      margin-right: auto;
      height: 100svh;
      min-height: 100svh;
      display: block;
      isolation: isolate;
      overflow: hidden;
    }
    .hero-image-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
    }
    .hero-cta-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: clamp(12px, 3vh, 28px);
    }
    .hero-cta-content {
      pointer-events: auto;
      width: 100%;
      max-width: calc(var(--grid-col-w) * var(--block-cols) + var(--grid-gutter) * (var(--block-cols) - 1));
      margin-left: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(14px, 2.2vh, 22px);
    }
    .hero-cta-title {
      margin: 0;
      max-width: 22ch;
      color: rgba(255,255,255,0.95);
      text-wrap: balance;
      letter-spacing: -0.03em;
      font-size: var(--t-h2-size);
      line-height: var(--t-h2-lh);
      font-weight: 600;
      text-align: left;
    }
    .hero-cta-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }
    .hero-cta-actions .btn-wrap {
      text-decoration: none;
    }
    .hero-image-picture {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-image {
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: contain;
      object-position: center top;
      display: block;
    }
    @media (max-width: 559px) {
      .hero-image-section,
      .hero-image-wrap {
        height: 80vh;
        min-height: 80vh;
      }
      .hero-cta-overlay {
        padding: 12px;
      }
      .hero-cta-content {
        margin-left: 0;
        max-width: 100%;
      }
      .hero-cta-title {
        max-width: none;
      }
      .hero-cta-actions {
        width: 100%;
      }
      .hero-cta-actions .btn-wrap {
        width: 100%;
        --btn-width: 100%;
      }
    }
    @media (min-width: 905px) and (max-width: 1239px) {
      .hero-cta-title {
        max-width: 20ch;
      }
    }
    @media (min-width: 560px) {
      .hero-cta-content {
        align-items: center;
      }
      .hero-cta-title {
        text-align: center;
        max-width: 24ch;
      }
      .hero-cta-actions {
        justify-content: center;
      }
    }
    @media (min-width: 1240px) {
      .hero-image { object-position: center center; }
    }

    /* ── About Section ── */
    .about-content {
      width: 100%;
      max-width: calc(var(--grid-col-w) * var(--block-cols) + var(--grid-gutter) * (var(--block-cols) - 1));
      margin-left: calc((var(--grid-col-w) + var(--grid-gutter)) * (var(--block-start) - 1));
      display: flex;
      flex-direction: column;
      gap: 32px;
      text-align: left;
      align-items: flex-start;
    }
    @media (min-width: 560px) {
      .about-content {
        text-align: center;
        align-items: center;
      }
    }

    /* ── Gear hero ── */
    .gear-hero-section {
      min-height: 145svh;
      height: auto;
      max-height: none;
      padding: 0;
    }
    .gear-hero-frame {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      min-height: 100svh;
      overflow: hidden;
      border-radius: 0;
      background: #0C0A13;
      box-shadow: 0 30px 80px rgba(4, 6, 12, 0.42);
      isolation: isolate;
      max-width: none; /* Растягивается во всю ширину */
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .gear-hero-scene {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0.98;
    }
    .gear-hero-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 900px 493px at 50% 50%, rgba(12,10,19,0.7) 20.6731%, #0C0A13 100%);
      z-index: 1;
    }
    .gear-hero-copy {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 40px var(--grid-margin); /* Держим ровно по левой сетке */
      box-sizing: border-box;
    }
    .gear-hero-copy::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 52%, rgba(12,10,19,0.14) 0%, rgba(12,10,19,0.24) 28%, rgba(12,10,19,0.46) 56%, rgba(12,10,19,0.72) 84%, #0C0A13 118%);
      z-index: 0;
    }
    .gear-hero-copy-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: calc(var(--grid-col-w) * var(--block-cols) + var(--grid-gutter) * (var(--block-cols) - 1));
      margin-left: calc((var(--grid-col-w) + var(--grid-gutter)) * (var(--block-start) - 1));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      text-align: left;
    }
    .gear-story-stack {
      position: relative;
      width: 100%;
      min-height: clamp(280px, 40vh, 460px);
    }
    .gear-story-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 18px;
      text-align: left;
      will-change: opacity, transform;
      transition: opacity 0.22s linear, transform 0.22s linear;
    }
    .gear-story-mission {
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
    }
    .preset-lockup-lines {
      text-wrap: initial;
      max-width: none;
    }
    .preset-lockup-line {
      display: block;
      white-space: nowrap;
    }
    .gear-hero-title {
      margin: 0;
      color: rgba(255,255,255,0.95);
    }
    .gear-hero-text {
      margin: 0;
      color: rgba(255,255,255,0.66);
    }
    .gear-hero-text:last-child {
      margin-top: 10px;
    }
    .gear-hero-gear .gear,
    .gear-hero-gear .hole {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      stroke: #BA81FF;
    }
    @media (max-width: 559px) {
      .gear-hero-section { min-height: 135svh; padding: 0; border: none; }
      .gear-hero-copy { padding: 18px var(--grid-margin) 24px; }
      .gear-story-stack { min-height: 320px; }
      .preset-lockup-line { white-space: normal; }
      /* На мобильных немного увеличим масштаб шестеренок, чтобы они смотрелись массивнее,
         как в изначальном clamp(...) варианте */
      .gear-hero-scene {
        width: 180%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    @media (min-width: 560px) {
      .gear-hero-copy-inner {
        align-items: center;
        text-align: center;
      }
      .gear-story-panel {
        align-items: center;
        text-align: center;
      }
      .preset-lockup-line { display: inline; white-space: normal; }
    }
    @media (min-width: 905px) {
      .gear-hero-copy-inner {
        gap: 22px;
      }
      .preset-lockup-line { display: block; white-space: nowrap; }
    }
    @media (prefers-reduced-motion: reduce) {
      .gear-hero-scene { opacity: 0.84; }
    }

    .mission-reveal-title {
      margin: 0;
      max-width: 100%;
      font-size: var(--t-h2-size);
      line-height: var(--t-h2-lh);
      letter-spacing: -0.035em;
      font-weight: var(--t-h2-weight);
      color: rgba(237,187,255,0.22);
      text-wrap: balance;
    }
    .mission-reveal-char {
      display: inline-block;
      color: #EDBBFF;
      opacity: 0.16;
      transition: opacity 0.18s linear, transform 0.18s linear;
      transform: translateY(0.18em);
      will-change: opacity, transform;
    }
    .mission-reveal-char.is-visible {
      transform: translateY(0);
    }
    .mission-reveal-word {
      display: inline-block;
      white-space: nowrap;
      margin-right: 0.3em;
    }
    .mission-reveal-word:last-child { margin-right: 0; }

    /* ── Layout copy block — margin-left math, no flex centering ──
       Position via --block-start / --block-cols (column grid math).
       Text: left on mobile, center on 560+. */
    .layout-copy-block {
      display: flex;
      flex-direction: column;
      gap: var(--layout-copy-gap);
      text-align: left;
      align-items: flex-start;
      width: 100%;
      max-width: calc(var(--grid-col-w) * var(--block-cols) + var(--grid-gutter) * (var(--block-cols) - 1));
      margin-left: calc((var(--grid-col-w) + var(--grid-gutter)) * (var(--block-start) - 1));
      margin-right: auto;
    }
    @media (min-width: 560px) {
      .layout-copy-block {
        text-align: center;
        align-items: center;
      }
    }
    .layout-copy-title {
      margin: 0;
      width: 100%;
    }
    .layout-copy-text {
      margin: 0;
      width: 100%;
    }

    /* ── Button wrap / card system ── */
    .btn-wrap {
      --_radius:      var(--btn-radius-pill);
      --_fill:        var(--btn-s-fill);
      --_text:        var(--btn-s-text);
      --_rim-dark-rgb: var(--btn-s-rim-dark-rgb);
      --_rim-hot-rgb:  var(--btn-s-rim-hot-rgb);
      --_rim-base-a:   var(--btn-s-rim-base-a);
      --_rim-hot-a:    var(--btn-s-rim-hot-a);
      --_rim-dyn:      var(--btn-s-rim-dyn);
      --_shadow-rgb:   var(--btn-s-shadow-rgb);
      --_shadow-max:   var(--btn-s-shadow-max);
      --_font:  var(--btn-l-font);
      --_pad-y: var(--btn-l-pad-y);
      --_pad-x: var(--btn-l-pad-x);
      --rim-angle: 90deg;
      --rim-i: 0;
      --btn-width: auto;
      position: relative;
      z-index: 1;
      display: inline-flex;
      width: var(--btn-width);
      min-width: var(--btn-min-width);
      background: transparent;
      text-decoration: none;
      border-radius: var(--_radius);
      transition:
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .btn-wrap.rect { --_radius: var(--btn-radius-rect); }
    .btn-wrap.pill { --_radius: var(--btn-radius-pill); }
    .btn-wrap.primary {
      --_fill:         var(--btn-p-fill);
      --_text:         var(--btn-p-text);
      --_rim-dark-rgb: var(--btn-p-rim-dark-rgb);
      --_rim-hot-rgb:  var(--btn-p-rim-hot-rgb);
      --_rim-base-a:   var(--btn-p-rim-base-a);
      --_rim-hot-a:    var(--btn-p-rim-hot-a);
      --_rim-dyn:      var(--btn-p-rim-dyn);
      --_shadow-rgb:   var(--btn-p-shadow-rgb);
      --_shadow-max:   var(--btn-p-shadow-max);
    }
    .btn-wrap.icon {
      --btn-min-width: 0;
      min-width: 0;
    }
    .btn-wrap.size-m {
      --_font:  var(--btn-m-font);
      --_pad-y: var(--btn-m-pad-y);
      --_pad-x: var(--btn-m-pad-x);
    }
    /* reset UA button styles so wrapper geometry matches rim/background */
    button.btn-wrap {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: inherit;
      text-align: inherit;
    }
    /* press: wrapper contains button OR wrapper IS button */
    .btn-wrap:has(button:active),
    button.btn-wrap:active { transform: scale(0.972) rotate3d(1, 0, 0, 18deg); }

    .btn-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: var(--btn-border-width);
      background: conic-gradient(
        from calc(var(--rim-angle) - 52deg),
        rgba(var(--_rim-dark-rgb), calc(var(--_rim-base-a) + var(--rim-i) * 0.04))   0%,
        rgba(var(--_rim-dark-rgb), calc(var(--_rim-base-a) + var(--rim-i) * 0.04))  24%,
        rgba(var(--_rim-hot-rgb),  calc(var(--_rim-hot-a)  + var(--rim-i) * var(--_rim-dyn))) 50%,
        rgba(var(--_rim-dark-rgb), calc(var(--_rim-base-a) + var(--rim-i) * 0.04))  76%,
        rgba(var(--_rim-dark-rgb), calc(var(--_rim-base-a) + var(--rim-i) * 0.04)) 100%
      );
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      pointer-events: none;
      z-index: 2;
    }

    .btn {
      --ix: 50%; --iy: 50%; --rim-i: 0; --shimmer-angle: -45deg;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--_pad-y) var(--_pad-x);
      border-radius: var(--_radius);
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--_font);
      font-weight: var(--btn-font-weight);
      letter-spacing: var(--btn-letter-spacing);
      color: var(--_text);
  text-decoration: none;
      overflow: hidden;
      background: var(--_fill);
      box-shadow:
        inset 0  1px 2px rgba(255,255,255,0.08),
        inset 0 -1px 2px rgba(0,0,0,0.30),
        inset 0  0   1px rgba(255,255,255,0.03);
      transition: transform 0.12s ease, box-shadow 0.25s cubic-bezier(0.25,1,0.5,1);
    }
    .btn.icon {
      padding: var(--_pad-y);
      aspect-ratio: 1;
      width: auto;
    }
    .btn.icon svg { display: block; flex-shrink: 0; }
    .btn:hover {
      box-shadow:
        inset 0  1px 2px rgba(255,255,255,0.12),
        inset 0 -1px 2px rgba(0,0,0,0.35),
        inset 0  0   1px rgba(255,255,255,0.06);
    }
    .btn:active {
      box-shadow:
        inset 0  2px 5px rgba(0,0,0,0.40),
        inset 0 -1px 1px rgba(255,255,255,0.04),
        inset 0  0   1px rgba(255,255,255,0.02);
    }
    .btn span {
      position: relative; z-index: 4;
      text-decoration: none;
      text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    }

    .btn-wrap.rect.glass-card {
      --_radius:      calc(var(--btn-radius-rect) + var(--card-pad));
      --card-surface-radius: var(--_radius);
      --card-surface-pad: var(--card-pad);
      --_rim-base-a:  0;
      --_rim-hot-a:   0;
      --_rim-dyn:     0.60;
    }
    .btn-wrap.glass-card:has(button:active),
    button.btn-wrap.glass-card:active { transform: none !important; }

    .glass-card {
      width: calc(var(--grid-col-w) * 4 + var(--grid-gutter) * 3);
      min-width: 240px;
      max-width: 360px;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: var(--card-surface-radius, var(--_radius));
    }
    .glass-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(
          ellipse 180% 160% at var(--vx, 50%) var(--vy, 50%),
          rgba(87, 41, 122, calc(0.33 * var(--rim-i, 0))) 0%,
          transparent 58%
        ),
        rgba(255, 255, 255, var(--card-fill-alpha, 0.02));
    }
    .card-inner {
      border-radius: inherit;
      padding: var(--card-surface-pad, var(--card-pad));
      display: flex;
      flex-direction: column;
      gap: calc(var(--card-surface-pad, var(--card-pad)) * 0.667);
      cursor: default;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
    }

    /* ═══════════════════════════════════════════════════════════
       BENTO STATS — responsive glass-card grid
    ═══════════════════════════════════════════════════════════ */
    .bento-section {
      --bento-content-scale: 1;
      --bento-card-scale: 1;
      --bento-gap: var(--grid-gutter);
      width: 100%;
      padding: 72px var(--grid-margin) 96px;
    }
    .bento-stage {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--layout-next-gap);
    }
    .bento-copy .t-h1 {
      color: rgba(255,255,255,0.95);
      font-size: calc(var(--t-h1-size) * var(--bento-content-scale));
      line-height: calc(var(--t-h1-lh) * var(--bento-content-scale));
    }
    .bento-copy-title-line { display: block; }
    .bento-copy .t-p1 {
      color: rgba(255,255,255,0.64);
      font-size: calc(var(--t-p1-size) * var(--bento-content-scale));
      line-height: calc(var(--t-p1-lh) * var(--bento-content-scale));
    }
    /* bento-copy inherits layout-copy-block centering */
    .bento-runtime { width: 100%; }

    .bento-layout {
      --bento-card-h: calc(238px * var(--bento-card-scale));
      --bento-tall-h: calc(238px * var(--bento-card-scale));
      --bento-short-h: calc(238px * var(--bento-card-scale));
      display: flex;
      flex-direction: column;
      gap: var(--bento-gap);
      align-items: stretch;
    }
    .bento-layout--s {
      --bento-card-h: calc(318px * var(--bento-card-scale));
      --bento-tall-h: calc(318px * var(--bento-card-scale));
      --bento-short-h: calc(318px * var(--bento-card-scale));
    }
    .bento-layout--m {
      --bento-card-h: calc(318px * var(--bento-card-scale));
      --bento-tall-h: calc(318px * var(--bento-card-scale));
      --bento-short-h: calc(318px * var(--bento-card-scale));
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bento-layout--xl {
      --bento-card-h: calc(214px * var(--bento-card-scale));
      --bento-tall-h: calc(321px * var(--bento-card-scale));
      --bento-short-h: calc(106px * var(--bento-card-scale));
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bento-group {
      display: flex;
      flex-direction: column;
      gap: var(--bento-gap);
      min-width: 0;
    }
    .bento-group-grid {
      display: grid;
      gap: var(--bento-gap);
      min-width: 0;
    }
    .bento-group-grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento-layout--m .bento-group--left  { grid-column: 1; }
    .bento-layout--m .bento-group--right { grid-column: 2 / span 2; }
    .bento-layout--xl .bento-group--left  { grid-column: 1 / span 2; }
    .bento-layout--xl .bento-group--right { grid-column: 3 / span 2; }

    .bento-col {
      display: flex;
      flex-direction: column;
      gap: var(--grid-gutter);
      min-width: 0;
    }
    .bento-footer {
      min-width: 0;
      width: 100%;
    }

    .bento-card {
      --card-surface-radius: calc(24px * var(--bento-content-scale));
      --card-surface-pad: calc(var(--card-pad) * var(--bento-content-scale));
      --_radius: var(--card-surface-radius);
      --_rim-dyn: 0.22;
      display: flex;
      width: 100%;
      min-width: 0;
      max-width: none;
      height: var(--bento-card-h);
    }
    .bento-card .card-inner {
      width: 100%;
      height: 100%;
      min-height: 100%;
      justify-content: space-between;
      gap: calc(16px * var(--bento-content-scale));
    }
    .bento-card.is-tall  { height: var(--bento-tall-h); }
    .bento-card.is-short { height: var(--bento-short-h); }

    .bento-card-stat {
      margin: 0;
      color: rgba(255,255,255,0.96);
      width: 100%;
      font-size: calc(var(--t-h2-size) * var(--bento-content-scale));
      line-height: calc((var(--t-h2-lh) - 4px) * var(--bento-content-scale));
      font-weight: var(--t-h2-weight);
      letter-spacing: -0.04em;
    }
    .bento-card-copy {
      margin: 0;
      color: rgba(255,255,255,0.82);
      width: 100%;
      max-width: none;
      font-size: calc(18px * var(--bento-content-scale));
      line-height: calc(22px * var(--bento-content-scale));
      font-weight: 300;
      letter-spacing: -0.36px;
    }

    .bento-card--tall { grid-row: span 2; }
    .bento-card--wide { grid-column: span 1; width: 100%; }
    .bento-card--body .card-inner { justify-content: flex-end; }
    .bento-card.is-short.bento-card--body .card-inner { justify-content: center; }
    .bento-card--body .bento-card-copy,
    .bento-card--wide .bento-card-copy { max-width: none; width: 100%; }

    .bento-card--split .card-inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: calc(16px * var(--bento-content-scale));
    }
    .bento-card--split .bento-card-stat,
    .bento-card--split .bento-card-copy { width: 100%; margin: 0; }

    .bento-card--compact .bento-card-stat {
      font-size: calc(clamp(34px, 3vw, 42px) * var(--bento-content-scale));
      line-height: 0.94;
    }

    @media (max-width: 1080px) {
      .bento-section {
        --bento-content-scale: 0.92;
        --bento-card-scale: 0.85;
      }
    }

    .bento-layout--xl .bento-card--split .card-inner {
      display: grid;
      grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.6fr);
      align-items: start;
      justify-content: normal;
      gap: 24px;
    }
    .bento-layout--xl .bento-card--split .bento-card-copy {
      align-self: center;
    }

    /* ═══════════════════════════════════════════════════════════
       SERVICES — sticky workshop cards
    ═══════════════════════════════════════════════════════════ */
    .services-section {
      width: 100%;
      padding: 72px var(--grid-margin) 96px;
    }
    .services-shell {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--layout-next-gap);
    }
    .services-copy .t-h1 { color: rgba(255,255,255,0.95); }
    .services-copy .t-p1 { color: rgba(255,255,255,0.60); }
    /* services-copy inherits layout-copy-block centering */
    .services-layout {
      display: flex;
      flex-direction: column;
      gap: var(--grid-gutter);
    }
    .services-primary,
    .services-stack { min-width: 0; }
    .services-stack {
      display: flex;
      flex-direction: column;
      gap: var(--grid-gutter);
    }
    .services-card {
      --card-surface-radius: calc(22px + var(--card-pad));
      --card-surface-pad: var(--card-pad);
      --_radius: var(--card-surface-radius);
      --_rim-dyn: 0.18;
      --card-fill-alpha: 0.045;
      width: 100%;
      min-width: 0;
      max-width: none;
      container-type: inline-size;
    }
    .services-card .card-inner {
      width: 100%;
      justify-content: flex-start;
      gap: calc(var(--card-pad) * 0.9);
      padding-bottom: calc(var(--card-surface-pad, var(--card-pad)) * 2);
    }
    .services-card-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px;
      align-items: start;
      gap: 18px;
      width: 100%;
    }
    .services-card-header > div:first-child { min-width: 0; }
    .services-card-tagline {
      margin: 0 0 8px;
      color: rgba(255,255,255,0.46);
    }
    .services-card-title {
      display: block;
      margin: 0;
      min-width: 0;
      max-width: 100%;
      color: rgba(255,255,255,0.96);
      font-size: calc(var(--t-h3-size) * 0.9);
      line-height: calc(var(--t-h3-lh) * 0.9);
      letter-spacing: -0.045em;
      font-weight: var(--t-h3-weight);
      text-wrap: balance;
      overflow-wrap: anywhere;
    }
    .services-card-icon {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: end;
      align-self: start;
      color: rgba(186,129,255,0.34);
    }
    .services-card-icon .material-symbols-outlined {
      font-size: 56px;
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
    }
    .services-card-text {
      margin: 0;
      color: rgba(255,255,255,0.82);
      font-size: clamp(18px, 2vw, 28px);
      line-height: 1.25;
      font-weight: 280;
      letter-spacing: -0.03em;
    }
    .services-card-list {
      margin: 0; padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: rgba(255,255,255,0.74);
    }
    @container (min-width: 520px) {
      .services-card-list { max-width: 75%; }
    }
    .services-card-list li {
      position: relative;
      padding-left: 16px;
      font-size: 15px;
      line-height: 1.35;
      font-weight: 280;
      letter-spacing: -0.02em;
    }
    .services-card-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 0.62em;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(186,129,255,0.62);
      box-shadow: 0 0 14px rgba(186,129,255,0.28);
    }
    .services-card--feature .card-inner { gap: calc(var(--card-pad) * 1.1); }
    .services-card--feature {
      --card-fill-alpha: 0.056;
      --_rim-dyn: 0.3;
    }
    .services-card--feature::before {
      background:
        radial-gradient(
          ellipse 150% 160% at 84% 82%,
          rgba(155, 80, 230, 0.238) 0%,
          rgba(155, 80, 230, 0.084) 38%,
          transparent 74%
        ),
        linear-gradient(
          315deg,
          rgba(124, 58, 196, 0.308) 0%,
          rgba(94, 44, 148, 0.14) 44%,
          rgba(28, 20, 44, 0.112) 100%
        ),
        rgba(255, 255, 255, var(--card-fill-alpha, 0.02));
    }
    .services-card--feature .services-card-title { max-width: none; }
    .services-card--feature .services-card-text { max-width: 18ch; }
    .services-card--secondary .services-card-title { max-width: none; }
    .services-card--secondary .services-card-icon { width: 52px; height: 52px; }
    .services-card--secondary .services-card-icon .material-symbols-outlined { font-size: 44px; }
    .services-card--secondary .services-card-text { font-size: clamp(16px, 1.8vw, 22px); line-height: 1.28; }
    @media (min-width: 905px) {
      .services-card--secondary .services-card-header {
        grid-template-columns: minmax(0, 1fr) 52px;
      }
      .services-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--grid-gutter);
        align-items: start;
      }
      .services-primary { position: sticky; top: 28px; }
      .services-card-list li { font-size: 16px; }
    }

    /* ═══════════════════════════════════════════════════════════
       CAROUSEL — 3D perspective ring (Reviews)
    ═══════════════════════════════════════════════════════════ */
    .carousel-section {
      width: 100%;
      padding: 80px 0 96px;
      display: flex;
      flex-direction: column;
      gap: var(--layout-next-gap);
      overflow: hidden;
    }
    .carousel-header .t-h1 { color: rgba(255,255,255,0.92); }
    .carousel-header .t-p1 { color: rgba(255,255,255,0.50); }
    .carousel-header {
      padding-inline: var(--grid-margin);
    }

    .carousel-viewport {
      position: relative;
      width: 100%;
      overflow: visible;
      padding: 40px 0 60px;
    }
    .carousel-stage {
      position: relative;
      width: 100%;
      height: var(--carousel-h, 320px);
      transform-style: preserve-3d;
    }
    .carousel-card {
      position: absolute;
      left: 50%;
      top: 0;
      width: var(--card-w, 320px);
      height: 100%;
      transform-style: preserve-3d;
      will-change: transform, opacity, filter;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      cursor: pointer;
    }
    .carousel-card .card-inner {
      width: 100%;
      height: 100%;
      border-radius: 24px;
      padding: var(--card-pad);
      display: flex;
      flex-direction: column;
      gap: calc(var(--card-pad) * 0.667);
      box-sizing: border-box;
      background:
        linear-gradient(135deg, rgba(155,80,230,0.12) 0%, rgba(155,80,230,0.03) 50%, rgba(80,40,140,0.08) 100%),
        rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      box-shadow: 0 2px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .carousel-card[data-active="true"] .card-inner {
      border-color: rgba(155,80,230,0.25);
      box-shadow: 0 4px 40px rgba(120,60,200,0.30), 0 2px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .carousel-card .card-inner .t-p2 {
      color: rgba(255,255,255,0.70);
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (min-width: 560px) {
      .carousel-card .card-inner .t-p2 { -webkit-line-clamp: 7; line-clamp: 7; }
    }
    @media (min-width: 905px) {
      .carousel-card .card-inner .t-p2 { -webkit-line-clamp: 9; line-clamp: 9; }
    }
    .carousel-card[data-active="true"] .card-inner .t-p2 { color: rgba(255,255,255,0.85); }
    .carousel-card .card-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }
    .carousel-card .card-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(155,80,230,0.25);
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 600;
      color: rgba(225,175,255,0.85);
    }
    .carousel-card .card-author-name { color: rgba(255,255,255,0.80); margin: 0; }
    .carousel-card .card-author-role { color: rgba(255,255,255,0.35); margin: 0; }

    .carousel-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
    }
    .carousel-nav.carousel-prev { left: var(--grid-margin); }
    .carousel-nav.carousel-next { right: var(--grid-margin); }
    @media (max-width: 559px) { .carousel-nav { display: none; } }

    /* ═══════════════════════════════════════════════════════════
       MEDIAHUB SECTION
    ═══════════════════════════════════════════════════════════ */
    .mediahub-section {
      width: 100%;
      padding: 80px 0 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
    .mediahub-header {
      width: 100%;
      padding-inline: var(--grid-margin);
      box-sizing: border-box;
    }
    .mediahub-header .layout-copy-block .t-h1 { color: rgba(255,255,255,0.92); }
    .mediahub-header .layout-copy-block .t-p1 { color: rgba(255,255,255,0.50); }

    /* ── Top row: media + telegram ── */
    .mh-top-row {
      width: 100%;
      padding-inline: var(--grid-margin);
      box-sizing: border-box;
      display: grid;
      gap: var(--grid-gutter);
      grid-template-columns: 1fr;
    }
    @media (min-width: 560px) {
      .mh-top-row { grid-template-columns: 1fr 1fr; }
    }

    /* ── Speaker rows ── */
    .mh-speaker-row {
      width: 100%;
      padding-inline: var(--grid-margin);
      box-sizing: border-box;
      display: grid;
      gap: var(--grid-gutter);
      grid-template-columns: 1fr;
    }
    @media (min-width: 560px) {
      .mh-speaker-row { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 905px) {
      .mh-speaker-row { grid-template-columns: 1fr 1fr 1fr; }
    }

    /* Extra row — hidden until expanded */
    .mh-extra-row {
      display: grid;
      gap: var(--grid-gutter);
      grid-template-columns: 1fr;
      width: 100%;
      padding-inline: var(--grid-margin);
      box-sizing: border-box;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.55s cubic-bezier(0.25,1,0.5,1), opacity 0.4s ease;
    }
    @media (min-width: 560px) { .mh-extra-row { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 905px) { .mh-extra-row { grid-template-columns: 1fr 1fr 1fr; } }
    .mh-extra-row.is-open {
      max-height: 800px;
      opacity: 1;
    }

    /* ── Glass card override for mediahub ── */
    .mh-glass-card {
      --card-surface-radius: 28px;
      --card-fill-alpha: 0.045;
      --_rim-dyn: 0.22;
      border-radius: 28px !important;
      overflow: hidden;
      position: relative;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }
    .mh-glass-card .card-inner {
      padding: var(--card-pad);
      gap: var(--card-pad);
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
      justify-content: flex-start;
    }

    /* ── Card-media content ── */
    .mh-card-eyebrow {
      margin: 0;
      color: rgba(255,255,255,0.96);
      font-size: calc(var(--t-h3-size) * 0.9);
      font-weight: var(--t-h3-weight, 800);
      line-height: calc(var(--t-h3-lh) * 0.9);
      letter-spacing: -0.04em;
    }
    .mh-card-subtitle {
      margin: 4px 0 0;
      color: rgba(255,255,255,0.46);
      font-size: 15px;
      font-weight: 280;
      letter-spacing: -0.02em;
      line-height: 1.35;
    }
    .mh-card-actions {
      display: flex;
      gap: var(--grid-gutter);
      margin-top: auto;
    }
    .mh-link-btn { flex: 1; }
    .mh-link-btn .btn { width: 100%; }
    @media (min-width: 560px) {
      .mh-card-actions .btn-wrap,
      .mh-tg-row + .btn-wrap,
      .mh-speak-btn,
      .mh-cta-row .btn-wrap {
        width: min(100%, 240px) !important;
        max-width: 240px;
      }
      .btn-fit {
        width: min(100%, var(--btn-fit-width, 240px)) !important;
        max-width: var(--btn-fit-width, 240px);
      }
      .btn-fit .btn > span { white-space: nowrap; }
      .mh-card-actions { justify-content: flex-start; }
    }

    /* ── Card-telegram content ── */
    .mh-tg-row {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    /* TG avatar — rectangular placeholder with rounded corners (Figma ref) */
    .mh-tg-avatar {
      width: 86px;
      height: 86px;
      border-radius: 16px;
      flex-shrink: 0;
      display: none;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 0 18px rgba(18,10,34,0.38);
    }
    .mh-tg-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    @media (min-width: 905px) { .mh-tg-avatar { display: flex; } }
    .mh-tg-avatar-inner {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(255,255,255,0.18);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      font-size: 10px;
      font-weight: 640;
      color: rgba(255,255,255,0.92);
      letter-spacing: -0.01em;
      line-height: 1;
      user-select: none;
      text-transform: uppercase;
    }
    .mh-tg-avatar-inner .line-1 { font-size: 12px; font-weight: 760; letter-spacing: -0.02em; }
    .mh-tg-avatar-inner .line-2 { font-size: 7px;  font-weight: 560; letter-spacing: 0.02em; }
    @media (min-width: 1240px) {
      .mh-tg-avatar {
        width: 160px;
        height: 160px;
        border-radius: 20px;
      }
      .mh-tg-avatar-inner {
        width: 72px;
        height: 72px;
        border-radius: 14px;
        font-size: 14px;
      }
      .mh-tg-avatar-inner .line-1 { font-size: 18px; }
      .mh-tg-avatar-inner .line-2 { font-size: 9px; }
    }
    @media (min-width: 905px) and (max-width: 1239px) {
      .mh-tg-avatar-inner .line-1 { font-size: 13px; }
      .mh-tg-avatar-inner .line-2 { font-size: 8px; }
    }
    .mh-tg-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .mh-card-title {
      margin: 0;
      color: rgba(255,255,255,0.96);
      font-size: calc(var(--t-h3-size) * 0.9);
      font-weight: var(--t-h3-weight, 800);
      line-height: calc(var(--t-h3-lh) * 0.9);
      letter-spacing: -0.04em;
    }
    .mh-card-desc {
      margin: 0;
      color: rgba(255,255,255,0.46);
      font-size: 15px;
      font-weight: 280;
      letter-spacing: -0.02em;
      line-height: 1.4;
    }

    /* ── Speaker card content ── */
    .mh-speak-img {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: calc(var(--btn-radius-rect) * 0.75);
      overflow: hidden;
      flex-shrink: 0;
      background:
        linear-gradient(160deg, rgba(237,187,255,0.18), rgba(97,44,156,0.24)),
        rgba(25,18,38,0.92);
      border: 1px solid rgba(155,80,230,0.18);
      position: relative;
      isolation: isolate;
    }
    .mh-speak-img::before,
    .mh-speak-img::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mh-speak-img::before {
      background:
        linear-gradient(160deg, rgba(237,187,255,0.40), rgba(140,74,209,0.52)),
        linear-gradient(180deg, rgba(12,10,19,0.10), rgba(12,10,19,0.34));
      mix-blend-mode: screen;
      opacity: 0.92;
    }
    .mh-speak-img::after {
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22), transparent 30%),
        linear-gradient(180deg, rgba(12,10,19,0.02), rgba(12,10,19,0.42));
      opacity: 0.72;
    }
    .mh-speak-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(1) saturate(0) brightness(0.54) contrast(1.06);
      transform: scale(1.035);
      transition:
        filter 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mh-glass-card:is(:hover, :focus-within) .mh-speak-photo,
    .mh-glass-card.is-touch-hover .mh-speak-photo {
      filter: grayscale(0) saturate(1) brightness(1) contrast(1);
      transform: scale(1.01);
    }
    .mh-glass-card:is(:hover, :focus-within) .mh-speak-img::before,
    .mh-glass-card.is-touch-hover .mh-speak-img::before {
      opacity: 0.14;
    }
    .mh-glass-card:is(:hover, :focus-within) .mh-speak-img::after,
    .mh-glass-card.is-touch-hover .mh-speak-img::after {
      opacity: 0.16;
    }
    @media (prefers-reduced-motion: reduce) {
      .mh-speak-photo,
      .mh-speak-img::before,
      .mh-speak-img::after {
        transition: none;
      }
    }
    .mh-speak-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
    .mh-speak-title {
      margin: 0;
      color: rgba(255,255,255,0.96);
      font-size: calc(var(--t-h3-size) * 0.9);
      font-weight: var(--t-h3-weight, 800);
      line-height: calc(var(--t-h3-lh) * 0.9);
      letter-spacing: -0.04em;
      text-wrap: balance;
    }
    .mh-speak-desc {
      margin: 0;
      color: rgba(255,255,255,0.46);
      font-size: 15px;
      font-weight: 280;
      letter-spacing: -0.02em;
      line-height: 1.35;
      flex: 1;
    }
    .mh-speak-btn { margin-top: auto; }
    .mh-speak-btn .btn { width: 100%; }

    /* ── CTA row ── */
    .mh-cta-row { display: flex; justify-content: center; }
    /* CTA pill — when no extra cards, show disabled state instead of hiding */
    #mh-cta-btn[data-exhausted] {
      opacity: 0.38;
      pointer-events: none;
      cursor: default;
    }

    /* ── Contacts form ── */
    #contacts {
      align-items: stretch;
    }
    .contacts-shell {
      gap: 20px;
    }
    .contacts-title {
      color: rgba(255,255,255,0.92);
      text-wrap: balance;
    }
    .contacts-subtitle {
      color: rgba(255,255,255,0.56);
      text-wrap: balance;
    }
    .contacts-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 8px;
    }
    .contacts-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .contacts-label {
      margin: 0;
      color: rgba(255,255,255,0.88);
      font-size: var(--t-p2-size);
      line-height: var(--t-p2-lh);
      font-weight: 420;
      letter-spacing: -0.01em;
    }
    .contacts-input,
    .contacts-textarea {
      width: 100%;
      border-radius: var(--btn-radius-rect);
      border: 1px solid rgba(155, 80, 230, 0.34);
      background:
        radial-gradient(120% 160% at 50% -20%, rgba(237,187,255,0.10), rgba(12,10,19,0.18) 40%),
        rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.94);
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      font-family: 'Geologica', sans-serif;
      font-size: var(--t-p2-size);
      line-height: var(--t-p2-lh);
      font-weight: 280;
      letter-spacing: -0.01em;
      resize: vertical;
    }
    .contacts-input {
      min-height: 56px;
      padding: 0 16px;
    }
    .contacts-textarea {
      min-height: 160px;
      padding: 14px 16px;
    }
    .contacts-input::placeholder,
    .contacts-textarea::placeholder {
      color: rgba(255,255,255,0.34);
    }
    .contacts-input:focus,
    .contacts-textarea:focus {
      border-color: rgba(225,175,255,0.72);
      box-shadow: 0 0 0 4px rgba(155,80,230,0.18);
      background-color: rgba(255,255,255,0.08);
    }
    .contacts-actions {
      display: flex;
      justify-content: flex-start;
      margin-top: 6px;
    }
    .contacts-note {
      margin: 0;
      color: rgba(255,255,255,0.48);
    }
    .contacts-consent {
      margin-top: 2px;
    }
    .contacts-consent-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0;
      cursor: pointer;
      user-select: none;
      color: rgba(255,255,255,0.70);
      font-size: var(--t-p2-size);
      line-height: var(--t-p2-lh);
      font-weight: 320;
      letter-spacing: -0.01em;
    }
    .contacts-consent-label input[type="checkbox"] {
      margin-top: 0.25em;
      width: 16px;
      height: 16px;
      accent-color: #B47BFF;
      flex: 0 0 auto;
    }
    .contacts-legal-link {
      color: rgba(237,187,255,0.94);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
    .contacts-legal-link:hover {
      color: rgba(245,213,255,1);
    }
    .contacts-status {
      margin: 4px 0 0;
      min-height: 1.4em;
      color: rgba(237,187,255,0.9);
      transition: color 0.2s ease;
    }
    .contacts-status[data-state="error"] {
      color: rgba(255,166,196,0.96);
    }
    .contacts-status[data-state="ok"] {
      color: rgba(196,255,214,0.94);
    }
    .contacts-actions .btn-wrap[disabled] {
      opacity: 0.72;
      pointer-events: none;
    }
    @media (min-width: 560px) {
      .contacts-shell {
        gap: 22px;
      }
      .contacts-actions {
        justify-content: center;
      }
    }

    /* ── Cookies snackbar ── */
    .cookie-snackbar {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translate(-50%, 20px);
      width: min(calc(100vw - 24px), 860px);
      z-index: 12000;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .cookie-snackbar.is-visible {
      transform: translate(-50%, 0);
      opacity: 1;
      pointer-events: auto;
    }
    .cookie-snackbar-inner {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      justify-content: space-between;
      border-radius: 14px;
      padding: 14px;
      border: 1px solid rgba(155,80,230,0.32);
      background:
        radial-gradient(120% 190% at 50% -30%, rgba(237,187,255,0.16), rgba(12,10,19,0.26) 42%),
        rgba(12,10,19,0.86);
      box-shadow: 0 18px 42px rgba(0,0,0,0.34);
      backdrop-filter: blur(8px);
    }
    .cookie-snackbar-text {
      margin: 0;
      color: rgba(255,255,255,0.84);
      font-size: var(--t-p2-size);
      line-height: var(--t-p2-lh);
      font-weight: 300;
    }
    .cookie-snackbar-text a {
      color: rgba(237,187,255,0.96);
      text-underline-offset: 0.2em;
    }
    .cookie-snackbar-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }
    .cookie-snackbar-actions .btn-wrap {
      min-width: 0;
      text-decoration: none;
    }
    @media (max-width: 559px) {
      .cookie-snackbar {
        width: calc(100vw - 16px);
        bottom: 10px;
      }
      .cookie-snackbar-inner {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
      }
      .cookie-snackbar-actions {
        width: 100%;
      }
      .cookie-snackbar-actions .btn-wrap {
        width: 100%;
        --btn-width: 100%;
      }
    }