/*
  ============================================================
  VAGAPOV STUDIO — STYLES
  ============================================================

  Раздел 1. Базовый сброс и глобальные параметры
  Раздел 2. Фон, затемнение и общие декоративные слои
  Раздел 3. Переменные темы, палитра и типографика
  Раздел 4. Hero, навигация, loader и верхнее меню
  Раздел 5. Секции: результат, услуги, проекты, этапы, образование
  Раздел 6. FAQ, форма контакта и кнопки действий
  Раздел 7. Медиазапросы и адаптивность интерфейса

  Все стили организованы по смысловым блокам, чтобы не смешивать
  базовые правила, декоративные элементы и составляющие отдельных секций.
  ============================================================
*/

/* ===== БАЗОВЫЙ СБРОС И ГЛОБАЛЬНЫЕ ПАРАМЕТРЫ ===== */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      :focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.82);
        outline-offset: 3px;
      }
      html,
      body {
        width: 100%;
        overflow-x: hidden;
        background: #000;
        background: var(--bg, #000);
        font-family:
          "Geist",
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
      }
      body.site-loading {
        overflow: hidden;
      }
      body {
        position: relative;
      }
      .site-loader {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: grid;
        place-items: center;
        background: #000;
        opacity: 1;
        visibility: visible;
        transition:
          opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
          visibility 0s linear 0.48s;
      }
      .site-loader.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .site-loader-inner {
        width: min(360px, calc(100vw - 64px));
        text-align: center;
      }
      .site-loader-title {
        white-space: nowrap;
        color: #fff;
        font:
          400 clamp(24px, 7vw, 48px) / 1 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -0.5px;
      }
      .site-loader-track {
        position: relative;
        height: 1px;
        margin-top: 28px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.12);
      }
      .site-loader-subtitle {
        margin: 18px 0 0;
        color: #8b8b91;
        font-size: 14px;
        line-height: 1.5;
      }
      .site-loader-track::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.78);
        transform: translateX(-100%);
        animation: loaderTrack 1.25s cubic-bezier(0.65, 0, 0.35, 1) forwards;
      }
      @keyframes loaderTrack {
        to {
          transform: translateX(0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .site-loader-track::after {
          animation: none;
        }
        .site-loader-track::after {
          transform: none;
        }
      }
      .ambient-background {
        /* Часть документа, а не fixed-холст: сетка движется строго вместе
           с блоками, без отдельной анимации и отставания. */
        position: absolute;
        top: var(--hero-bottom-edge,100vh);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse 94% 110% at 50% 44%,
            rgba(128, 128, 132, 0.124) 0%,
            rgba(57, 57, 61, 0.076) 56%,
            rgba(8, 8, 9, 0.024) 84%,
            transparent 100%
          ),
          radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.135) 0 1.25px, transparent 1.55px);
        background-size: 100% 100%, 36px 36px;
        background-position: center top, 0 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.12) 9%, #000 30%, #000 70%, rgba(0, 0, 0, 0.12) 91%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.12) 9%, #000 30%, #000 70%, rgba(0, 0, 0, 0.12) 91%, transparent 100%);
      }
      /* Точки под мышью усиливаются тем же CSS-паттерном. Псевдослой является
         частью документа, поэтому при прокрутке не создаёт отдельного движения. */
      .ambient-background::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.34) 0 1.35px, transparent 1.65px);
        background-size: 36px 36px;
        -webkit-mask-image: radial-gradient(176px circle at var(--ambient-pointer-x, -1000px) var(--ambient-pointer-y, -1000px), #000 0%, rgba(0, 0, 0, 0.76) 38%, transparent 74%);
        mask-image: radial-gradient(176px circle at var(--ambient-pointer-x, -1000px) var(--ambient-pointer-y, -1000px), #000 0%, rgba(0, 0, 0, 0.76) 38%, transparent 74%);
      }
      body:not(.light) .ambient-background {
        display: block;
      }
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 80;
        pointer-events: none;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.28) 0,
          rgba(0, 0, 0, 0.1) 54px,
          transparent 138px
        );
      }

      @media (max-width: 768px) {
        body::after {
          background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.21) 0,
            rgba(0, 0, 0, 0.065) 42px,
            transparent 106px
          );
        }
      }

      /* ===== ПЕРЕМЕННЫЕ ТЕМЫ И КОЛОРЫ ===== */
      :root {
        --bg: #000;
        --bg2: #000;
        --fg: #fff;
        --fg2: rgba(255, 255, 255, 0.5);
        --fg3: rgba(255, 255, 255, 0.25);
        --border: rgba(255, 255, 255, 0.08);
        --border2: rgba(255, 255, 255, 0.14);
        --card-bg: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.025)
        );
        --card-bg-hover: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.07),
          rgba(255, 255, 255, 0.035)
        );
        --card-bg-subtle: rgba(255, 255, 255, 0.04);
        --nav-bg: rgba(0, 0, 0, 0.85);
        --control-border: rgba(255, 255, 255, 0.055);
        --control-border-hover: rgba(255, 255, 255, 0.085);
        --surface-border: rgba(255, 255, 255, 0.055);
        --surface-border-hover: rgba(255, 255, 255, 0.085);
        --surface-border-active: rgba(255, 255, 255, 0.11);
        --divider-border: rgba(255, 255, 255, 0.055);
        --control-bg: rgba(255, 255, 255, 0.038);
        --control-bg-strong: rgba(255, 255, 255, 0.075);
        --control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      /* ===== 3D-ФОН И HERO-ЭЛЕМЕНТЫ ===== */
      #crt-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
      }
      #crt-frame canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none;
      }
      #crt-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse 68% 52% at 50% 47%,
            rgba(172, 181, 207, 0.16) 0%,
            rgba(111, 124, 158, 0.065) 48%,
            transparent 76%
          ),
          linear-gradient(
            to bottom,
            rgba(28, 34, 48, 0.075),
            transparent 38%,
            rgba(0, 0, 0, 0.14)
          );
      }

      /* ===== ОБЁРТКА ГЛАВНОГО ЭКРАНА ===== */
      .hero-wrapper {
        position: relative;
        /* Не создаёт собственный контекст слоёв: тогда поле точек ложится
           над чёрным 3D-фоном, а #hero-overlay (z-index: 10) остаётся выше. */
        z-index: auto;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      /* ===== СЛОЙ С ТЕКСТОМ ПОВЕРХ 3D-ФОНА ===== */
      #hero-overlay {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
        pointer-events: none;
        display: flex;
        flex-direction: column;
      }

      /* ===== ВЕРХНЕЕ МЕНЮ ===== */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 48px;
        pointer-events: auto;
        border: 1px solid transparent;
        border-radius: 0;
        transition:
          top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          left 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          right 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          padding 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.35s ease,
          border-color 0.35s ease,
          border-radius 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.35s ease;
      }
      .nav.scrolled {
        background: rgba(0, 0, 0, 0.94);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .nav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
      }
      .nav-brand-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #62e6a0;
        box-shadow:
          0 0 0 3px rgba(98, 230, 160, 0.09),
          0 0 14px rgba(98, 230, 160, 0.42);
        animation: pulse 2s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
          box-shadow:
            0 0 0 3px rgba(98, 230, 160, 0.09),
            0 0 14px rgba(98, 230, 160, 0.42);
        }
        50% {
          opacity: 0.58;
          transform: scale(0.82);
          box-shadow:
            0 0 0 5px rgba(98, 230, 160, 0.035),
            0 0 8px rgba(98, 230, 160, 0.22);
        }
      }
      .nav-brand-text {
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        letter-spacing: 2px;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .nav-brand-studio {
        display: none;
      }
      @media (min-width: 769px) {
        .nav.scrolled {
          top: 0;
          left: 0;
          right: 0;
          padding: 15px 48px;
          border: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 0;
          background: rgba(5, 5, 6, 0.84);
          /* Умеренное стекло выглядит так же, но заметно дешевле для браузера
           при прокрутке, чем прежнее размытие в 22px. */
          -webkit-backdrop-filter: blur(10px) saturate(104%);
          backdrop-filter: blur(10px) saturate(104%);
          box-shadow:
            0 14px 42px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);
        }
        .nav.scrolled .nav-brand-status {
          display: none;
        }
        .nav.scrolled .nav-brand-studio {
          display: inline;
        }
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 36px;
        flex-shrink: 0;
      }
      .nav-links a {
        flex-shrink: 0;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        letter-spacing: 0.5px;
        white-space: nowrap;
        transition: color 0.2s ease;
      }
      .nav-links a:hover {
        color: rgba(255, 255, 255, 0.9);
      }
      @media (min-width: 769px) and (max-width: 1200px) {
        .nav,
        .nav.scrolled {
          padding-inline: 24px;
        }
        .nav-links {
          gap: 18px;
        }
        .nav-links a {
          font-size: 12px;
          letter-spacing: 0.2px;
        }
        .nav-brand-text {
          font-size: 12px;
          letter-spacing: 1.5px;
        }
        .lang-toggle span {
          padding-inline: 8px;
        }
      }
      @media (min-width: 769px) and (max-width: 1040px) {
        .nav,
        .nav.scrolled {
          padding-inline: 18px;
        }
        .nav-links {
          gap: 16px;
        }
        .nav-links a {
          font-size: 11.5px;
        }
        .nav-brand {
          gap: 7px;
        }
        .nav-brand-dot {
          width: 7px;
          height: 7px;
        }
        .nav-brand-text {
          font-size: 11px;
          letter-spacing: 1.15px;
        }
        .lang-toggle {
          padding: 2px;
        }
        .lang-toggle span {
          padding: 3px 7px;
          font-size: 10px;
        }
      }

      /* ===== ВЫЕЗЖАЮЩЕЕ МЕНЮ НА ТЕЛЕФОНЕ ===== */
      .nav-hamburger {
        display: none;
        position: relative;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        pointer-events: auto;
        z-index: 102;
      }
      .nav-hamburger span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 1.5px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.8);
        transition:
          transform 0.3s ease,
          opacity 0.3s ease;
      }
      .nav-hamburger span:nth-child(1) {
        transform: translate(-50%, calc(-50% - 6px));
      }
      .nav-hamburger span:nth-child(2) {
        transform: translate(-50%, -50%);
      }
      .nav-hamburger span:nth-child(3) {
        transform: translate(-50%, calc(-50% + 6px));
      }
      .nav-hamburger.open span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .nav-hamburger.open span:nth-child(2) {
        opacity: 0;
      }
      .nav-hamburger.open span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(2, 2, 3, 0.95);
        z-index: 101;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
      }
      .mobile-menu.open {
        opacity: 1;
        pointer-events: auto;
      }
      .mobile-menu a {
        font-size: 28px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        letter-spacing: 0.5px;
        padding: 16px 0;
        transition: color 0.2s ease;
      }
      .mobile-menu a:hover {
        color: rgba(255, 255, 255, 0.95);
      }
      .mobile-menu .mobile-cta {
        margin-top: 24px;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        background: #fff;
        padding: 14px 36px;
        border-radius: 100px;
        text-decoration: none;
        letter-spacing: 0.3px;
      }
      .nav-cta {
        font-size: 13px;
        font-weight: 500;
        color: #000 !important;
        background: #fff;
        padding: 10px 24px;
        border-radius: 100px;
        text-decoration: none;
        letter-spacing: 0.3px;
        transition: opacity 0.25s ease;
        border: 1px solid rgba(255, 255, 255, 0.15);
        will-change: transform;
      }
      .webgl-fallback {
        padding: 24px;
        color: #fff;
        font-size: 15px;
        line-height: 1.4;
      }
      .nav-cta:hover {
        opacity: 0.85;
        color: #000 !important;
      }

      /* ===== НИЖНЕЕ ЗАТЕМНЕНИЕ ГЛАВНОГО ЭКРАНА ===== */
      .hero-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 68%;
        background: linear-gradient(
          to top,
          #000 0%,
          #000 12%,
          rgba(0, 0, 0, 0.96) 24%,
          rgba(0, 0, 0, 0.64) 52%,
          transparent 100%
        );
        z-index: 5;
        pointer-events: none !important;
      }

      /* ===== ВЕРХНЕЕ ЗАТЕМНЕНИЕ ГЛАВНОГО ЭКРАНА ===== */
      .hero-fade-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(
          to bottom,
          #000 0%,
          #000 5%,
          transparent 100%
        );
        z-index: 5;
        pointer-events: none !important;
      }

      /* ===== ТЕКСТ И КНОПКИ ГЛАВНОГО ЭКРАНА ===== */
      .hero-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 48px 14px;
        pointer-events: none;
      }
      .hero-mobile-copy {
        display: none;
      }

      .hero-h1 {
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: clamp(52px, 8.5vw, 126px);
        font-weight: 400;
        color: #fff;
        line-height: 0.93;
        letter-spacing: -3px;
        margin-bottom: 24px;
        width: 100%;
        text-shadow: none;
      }
      .hero-h1 .thin {
        color: rgba(255, 255, 255, 0.48);
      }

      /* Строка под заголовком: описание слева, кнопки справа */
      .hero-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        pointer-events: none;
      }
      .hero-highlights {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 18px;
        pointer-events: auto;
      }
      .hero-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: rgba(10, 11, 15, 0.66);
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 12px;
        letter-spacing: 0.4px;
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        backdrop-filter: blur(18px) saturate(125%);
        box-shadow:
          0 8px 26px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.045);
      }
      .hero-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(135deg, #fff, #a6b4ff);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
        flex-shrink: 0;
      }
      .hero-sub {
        font-size: clamp(18px, 1.35vw, 22px);
        font-weight: 300;
        color: rgba(255, 255, 255, 0.76);
        line-height: 1.7;
        max-width: 850px;
        text-shadow:
          0 2px 16px rgba(2, 2, 3, 1),
          0 4px 32px rgba(2, 2, 3, 1),
          0 0 60px rgba(2, 2, 3, 1);
      }
      .hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        pointer-events: auto;
      }
      .btn-primary {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 28px;
        background: var(--control-bg-strong);
        color: rgba(255, 255, 255, 0.94);
        font-family: "Geist", sans-serif;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        cursor: pointer;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        will-change: transform;
        isolation: isolate;
        box-shadow: var(--control-highlight);
        transition:
          transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.22s ease,
          border-color 0.22s ease,
          color 0.18s ease;
      }
      .btn-primary::before {
        display: none;
      }
      .btn-primary:hover {
        background: #f3f3f1;
        border-color: #f3f3f1;
        color: #09090b;
        transform: translateY(-1px);
      }
      .btn-primary svg {
        width: 13px;
        height: 13px;
      }
      .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 28px;
        background: var(--control-bg);
        color: rgba(255, 255, 255, 0.84);
        font-family: "Geist", sans-serif;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        cursor: pointer;
        letter-spacing: 0.2px;
        transition:
          transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.22s ease,
          border-color 0.22s ease,
          color 0.18s ease,
          box-shadow 0.22s ease;
        white-space: nowrap;
        will-change: transform;
        box-shadow:
          0 10px 28px rgba(0, 0, 0, 0.16),
          var(--control-highlight);
      }
      .btn-secondary svg {
        width: 13px;
        height: 13px;
        flex: none;
      }
      .btn-secondary:hover {
        background: #f3f3f1;
        border-color: #f3f3f1;
        color: #09090b;
        transform: translateY(-1px);
      }
      .btn-primary:active,
      .btn-secondary:active {
        transform: scale(0.985);
      }

      /* ===== ТРИ КОРОТКИХ ПРЕИМУЩЕСТВА ===== */
      .section-advantage {
        padding: 28px 0 0;
      }
      .advantage-panel {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 24px;
        align-items: start;
        padding: 32px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.07),
          rgba(255, 255, 255, 0.03)
        );
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }
      .advantage-copy h3 {
        font-size: clamp(22px, 2.4vw, 30px);
        font-weight: 500;
        color: #fff;
        line-height: 1.2;
        margin: 14px 0 12px;
        max-width: 560px;
      }
      .advantage-copy p {
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.6);
        max-width: 560px;
      }
      .advantage-grid {
        display: grid;
        gap: 12px;
      }
      .advantage-card {
        display: flex;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .advantage-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        flex-shrink: 0;
      }
      .advantage-card-title {
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        margin-bottom: 4px;
      }
      .advantage-card-text {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.6;
      }

      /* ===== НИЖНЯЯ СТРОКА ГЛАВНОГО ЭКРАНА ===== */
      .hero-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 10px 48px 52px;
        pointer-events: none;
      }
      .hero-bottom-copy {
        display: flex;
        flex: 0 1 1240px;
        flex-direction: column;
        gap: 24px;
        max-width: 1240px;
      }
      .hero-bottom .hero-sub {
        max-width: 1200px;
        margin: 0;
        font-size: clamp(15px, 1.15vw, 18px);
        line-height: 1.55;
      }
      .hero-stats {
        display: flex;
        gap: 48px;
      }
      .hero-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .hero-stat-val {
        font-size: 18px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: -0.5px;
      }
      .hero-stat-label {
        font-size: 11px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      .hero-scroll {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }

      /* ===== ПОДСКАЗКА О ПРОКРУТКЕ ===== */
      .scroll-cta {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      .scroll-cta-text {
        font-size: 10px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.25);
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .scroll-cta-line {
        width: 1px;
        height: 32px;
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
      }
      .scroll-cta-line::after {
        content: "";
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(255, 255, 255, 0.35),
          transparent
        );
        animation: scrollDrop 2s ease-in-out infinite;
      }
      @keyframes scrollDrop {
        0% {
          top: -100%;
        }
        50% {
          top: 100%;
        }
        100% {
          top: 100%;
        }
      }

      /* Появление подсказки о прокрутке */
      .scroll-cta {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 1.8s;
      }
      .scroll-cta.anim-in {
        opacity: 1;
      }
      /* ===== ФИКСИРОВАННАЯ КНОПКА ЗАКАЗА НА ТЕЛЕФОНЕ ===== */
      .mobile-sticky-cta {
        display: none;
      }
      .mobile-scroll-top {
        display: none;
      }
      @media (max-width: 768px) {
        .mobile-sticky-cta {
          display: flex;
          position: fixed;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 100;
          text-decoration: none;
          align-items: center;
          padding: 13px 32px;
          border-radius: 100px;
          background: rgba(28, 28, 32, 0.68);
          color: rgba(255, 255, 255, 0.78);
          border: 1px solid rgba(255, 255, 255, 0.075);
          backdrop-filter: blur(14px) saturate(120%);
          -webkit-backdrop-filter: blur(14px) saturate(120%);
          font-family: "Geist", sans-serif;
          font-size: 15px;
          font-weight: 500;
          letter-spacing: 0.1px;
          white-space: nowrap;
          box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
          transition:
            transform 0.2s ease,
            opacity 0.3s ease,
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
          pointer-events: auto;
          cursor: pointer;
        }
        .mobile-sticky-cta:active {
          transform: translateX(-50%) scale(0.97);
          background: #fff;
          color: #09090b;
          border-color: #fff;
        }
        .mobile-sticky-cta.hidden {
          opacity: 0;
          pointer-events: none;
          transform: translateX(-50%) translateY(10px);
        }
        .mobile-scroll-top {
          display: flex;
          position: fixed;
          bottom: 20px;
          right: 12px;
          z-index: 100;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(28, 28, 32, 0.68);
          border: 1px solid rgba(255, 255, 255, 0.075);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          align-items: center;
          justify-content: center;
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transform: translateY(10px);
          transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            background 0.2s ease;
        }
        .mobile-scroll-top.visible {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
        .mobile-scroll-top:active {
          transform: scale(0.93);
        }
        .mobile-scroll-top svg {
          width: 16px;
          height: 16px;
          stroke: rgba(255, 255, 255, 0.85);
          fill: none;
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      }
      /* ===== ОБЩИЕ СТИЛИ РАЗДЕЛОВ ===== */
      .section {
        position: relative;
        z-index: 10;
        background: transparent;
        /* Keep section heights stable for menu anchors and smooth scrolling. */
      }
      body:not(.light) .section {
        background: transparent;
      }
      body:not(.light) .section:nth-of-type(even) {
        background: transparent;
      }

      .section-inner {
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;
      }

      .section-whatwedo {
        padding: 120px 48px 96px;
      }
      .section-label {
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.25);
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 24px;
      }
      .section-heading {
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: clamp(38px, 5.4vw, 64px);
        font-weight: 400;
        color: #fff;
        line-height: 1.05;
        letter-spacing: -1.9px;
        max-width: 820px;
        margin-bottom: 52px;
      }
      .section-heading .thin {
        color: rgba(255, 255, 255, 0.58);
      }

      .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .feature-card {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.025)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 18px 18px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          background 0.25s ease;
        min-height: unset;
      }
      .feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.2);
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.09),
          rgba(255, 255, 255, 0.035)
        );
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
      }
      .feature-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .feature-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        transition:
          transform 0.25s ease,
          background 0.25s ease,
          border-color 0.25s ease;
      }
      .feature-card:hover .feature-icon {
        transform: scale(1.08);
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.22);
      }
      .feature-icon svg {
        width: 14px;
        height: 14px;
        stroke: rgba(255, 255, 255, 0.72);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .feature-title {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: -0.2px;
        flex: 1;
      }
      .feature-desc {
        font-size: 12px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.6;
      }

      /* ===== РАЗДЕЛ «ОБО МНЕ» И ДИПЛОМЫ ===== */
      .section-education {
        padding: 120px 48px;
      }
      .about-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
        gap: clamp(48px, 8vw, 120px);
        align-items: start;
      }
      .about-intro .section-heading {
        margin-bottom: 0;
      }
      .about-copy {
        max-width: 600px;
        padding-bottom: 6px;
      }
      .about-copy > p {
        margin: 0;
        color: rgba(255, 255, 255, 0.62);
        font-size: clamp(16px, 1.3vw, 19px);
        line-height: 1.72;
        font-weight: 300;
      }
      .about-points {
        display: grid;
        gap: 7px;
        margin-top: 24px;
      }
      .about-point {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 34px;
        padding: 3px 0;
        color: rgba(255, 255, 255, 0.56);
        font-size: clamp(16px, 1.3vw, 19px);
        font-weight: 300;
        line-height: 1.72;
      }
      .about-point::before {
        content: "";
        width: 5px;
        height: 5px;
        flex: 0 0 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.68);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
      }
      .section-education .about-numbers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 48px;
        max-width: 610px;
      }
      .about-numbers .number-card {
        min-height: 0;
        justify-content: flex-start;
        padding: 0 22px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        background: none;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .about-numbers .number-card:first-child {
        padding-left: 0;
        border-left: 0;
      }
      .about-numbers .number-card:hover {
        transform: translateY(-2px);
      }
      .about-numbers .number-val {
        font-size: clamp(38px, 3.8vw, 54px);
        letter-spacing: -1.5px;
      }
      .about-numbers .number-divider {
        width: 22px;
        margin: 6px 0;
      }
      .about-numbers .number-label {
        max-width: 130px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.46);
      }
      .credentials-head {
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 60px 0 24px;
        color: rgba(255, 255, 255, 0.4);
        font-size: 11px;
        line-height: 1;
        letter-spacing: 2.2px;
        text-transform: uppercase;
      }
      .credentials-head::after {
        content: "";
        height: 1px;
        flex: 1;
        background: rgba(255, 255, 255, 0.08);
      }
      .diplomas-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .diploma-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        min-width: 0;
        position: relative;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.04),
          rgba(255, 255, 255, 0.018)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 12px 58px 12px 12px;
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.4s ease,
          background 0.4s ease,
          box-shadow 0.5s ease;
      }
      .diploma-card:hover {
        transform: translateY(-3px) scale(1.008);
        border-color: rgba(255, 255, 255, 0.17);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
      }
      .diploma-thumb {
        flex-shrink: 0;
        width: 68px;
        aspect-ratio: 210 / 297;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .diploma-thumb-inner {
        position: absolute;
        inset: 0;
        border-radius: 8px;
        overflow: hidden;
      }
      .diploma-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        background: #f7f7f5;
        transition: transform 0.4s ease;
      }
      .diploma-card:hover .diploma-thumb img {
        transform: none;
      }
      .diploma-thumb-ph {
        color: rgba(255, 255, 255, 0.15);
      }
      .diploma-thumb-ph svg {
        width: 28px;
        height: 28px;
      }
      .diploma-thumb-btn {
        position: absolute;
        bottom: 11px;
        right: 12px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.11);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition:
          background 0.3s ease,
          border-color 0.3s ease,
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.3s ease;
        z-index: 2;
      }
      .diploma-thumb-btn:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
      }
      .diploma-thumb-btn:hover svg {
        stroke: #000;
      }
      .diploma-thumb-btn svg {
        width: 16px;
        height: 16px;
        stroke: rgba(255, 255, 255, 0.9);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
      }
      .diploma-thumb-btn span {
        display: none;
      }
      .diploma-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .diploma-meta {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 1.5px;
        text-transform: uppercase;
      }
      .diploma-meta-kind {
        display: none;
      }
      .diploma-title {
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: -0.3px;
        line-height: 1.3;
      }
      .diploma-sub {
        font-size: 12px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.4);
      }
      .diploma-view {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        margin-top: 8px;
        padding: 9px 18px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.14);
        font-family: "Geist", sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        transition:
          border-color 0.25s ease,
          background 0.25s ease,
          color 0.25s ease;
      }
      .diploma-view:hover {
        border-color: #fff;
        background: #fff;
        color: #000;
      }
      .diploma-view svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }

      @media (max-width: 768px) {
        .section-education {
          padding: 64px 20px !important;
        }
        .about-intro {
          grid-template-columns: 1fr;
          gap: 24px;
          align-items: start;
        }
        .about-copy {
          padding: 0;
        }
        .about-copy > p {
          font-size: 15px;
          line-height: 1.68;
        }
        .about-points {
          display: none;
        }
        .section-education .about-numbers {
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          margin-top: 32px;
          max-width: none;
        }
        .about-numbers .number-card {
          min-height: 0;
          align-items: center;
          justify-content: flex-start;
          padding: 0 8px;
          border-radius: 0;
          text-align: center;
        }
        .about-numbers .number-card:first-child {
          padding: 0 8px;
        }
        .about-numbers .number-val {
          font-size: clamp(32px, 9.5vw, 40px);
        }
        .about-numbers .number-divider {
          margin: 6px auto;
        }
        .about-numbers .number-label {
          max-width: 108px;
          margin: 0 auto;
          font-size: 11px;
          line-height: 1.35;
          text-align: center;
        }
        .credentials-head {
          margin: 52px 0 18px;
          font-size: 10px;
          letter-spacing: 1.7px;
        }
        .diplomas-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .diploma-card {
          gap: 14px;
          padding: 11px 56px 11px 11px;
          border-radius: 15px;
        }
        .diploma-thumb-btn {
          width: 36px;
          height: 36px;
          right: 11px;
          bottom: 10px;
          border-radius: 10px;
        }
        .diploma-thumb {
          width: 66px;
          aspect-ratio: 210 / 297;
          border-radius: 7px;
        }
        .diploma-thumb-inner {
          border-radius: 7px;
        }
        .diploma-meta {
          font-size: 9px;
          letter-spacing: 1px;
        }
        .diploma-title {
          font-size: 14px;
        }
        .diploma-sub {
          font-size: 11px;
          line-height: 1.4;
        }
      }

      .section-research {
        padding: 120px 48px 0;
      }
      .section-research .section-inner {
        display: flex;
        flex-direction: column;
      }
      .research-content {
        padding: 0 0 40px 0;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .research-list {
        display: flex;
        gap: 20px;
      }
      .research-item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        flex: 1;
        cursor: default;
        padding: 24px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.025)
        );
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          background 0.25s ease;
      }
      .research-item:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.2);
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.09),
          rgba(255, 255, 255, 0.04)
        );
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
      }
      .research-item.active .research-num {
        color: rgba(255, 255, 255, 0.5);
      }
      .research-item.active .research-item-title {
        color: rgba(255, 255, 255, 1);
      }
      .research-num {
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 28px;
        color: rgba(255, 255, 255, 0.16);
        line-height: 1;
        flex-shrink: 0;
        width: 36px;
        padding-top: 2px;
      }
      .research-item-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .research-item-title {
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
      }
      .research-item-desc {
        font-size: 13px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.65;
      }
      .research-canvas-wrap {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 360px;
        background: #000;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-top: 48px;
      }
      .research-canvas-wrap canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none;
        touch-action: auto;
        opacity: 0.35;
      }

      /* Блок с опытом и цифрами */
      .section-numbers {
        padding: 120px 48px;
        position: relative;
        overflow: hidden;
      }
      .section-numbers .section-inner {
        position: relative;
        z-index: 2;
      }
      .numbers-canvas-wrap {
        display: none;
      }
      .numbers-content {
        position: relative;
      }
      .numbers-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 48px;
        margin-top: 80px;
      }
      .number-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .number-val {
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: clamp(48px, 6vw, 80px);
        font-weight: 400;
        color: #fff;
        letter-spacing: -2px;
        line-height: 1;
      }
      .number-label {
        font-size: 13px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.35);
        line-height: 1.5;
      }
      .number-divider {
        width: 32px;
        height: 1px;
        background: rgba(28, 28, 32, 0.68);
        margin: 8px 0;
      }

      /* Финальный призыв к действию */
      .section-cta {
        padding: 120px 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .cta-heading {
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: clamp(40px, 6vw, 88px);
        font-weight: 400;
        color: #fff;
        line-height: 1.05;
        letter-spacing: -2px;
        max-width: 800px;
        margin-bottom: 24px;
      }
      .cta-heading .thin {
        color: rgba(255, 255, 255, 0.3);
      }
      .cta-sub {
        font-size: 14px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.35);
        line-height: 1.7;
        max-width: 480px;
        margin-bottom: 48px;
      }
      .cta-actions {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      /* Подвал сайта */
      .footer {
        position: relative;
        z-index: 10;
        background: transparent;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 28px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        transform: translateY(-3px);
      }
      .footer-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .footer-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
      }
      .footer-brand {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .footer-right {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.2);
        letter-spacing: 0.3px;
      }

      /* Плавное появление элементов при прокрутке */
      .reveal {
        opacity: 0;
        translate: 0 10px;
        transition:
          opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
          translate 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal.visible {
        opacity: 1;
        translate: 0 0;
      }
      .reveal-delay-1 {
        transition-delay: 0.06s;
      }
      .reveal-delay-2 {
        transition-delay: 0.12s;
      }
      .reveal-delay-3 {
        transition-delay: 0.18s;
      }
      .reveal-delay-4 {
        transition-delay: 0.24s;
      }
      .reveal-delay-5 {
        transition-delay: 0.3s;
      }
      .reveal-delay-6 {
        transition-delay: 0.36s;
      }

      .hero-scroll .status-dot {
        width: 6px;
        height: 6px;
        background: rgba(100, 255, 160, 0.8);
        border-radius: 50%;
        animation: statusPulse 2s ease-in-out infinite;
      }
      @keyframes statusPulse {
        0%,
        100% {
          opacity: 1;
          box-shadow: 0 0 4px rgba(100, 255, 160, 0.4);
        }
        50% {
          opacity: 0.4;
          box-shadow: 0 0 2px rgba(100, 255, 160, 0.1);
        }
      }

      /* ===== АДАПТИВНАЯ ВЕРСИЯ ===== */
      @media (max-width: 768px) {
        /* Верхнее меню */
        .nav {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          padding: calc(22px + env(safe-area-inset-top)) 22px 16px;
        }
        .nav.scrolled {
          background: transparent;
          border-bottom: 0;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        .nav-brand {
          gap: 9px;
        }
        .nav-brand-dot {
          width: 7px;
          height: 7px;
        }
        .nav-brand-status {
          display: inline;
          font-size: 12px;
          letter-spacing: 2.2px;
        }
        .nav-brand-studio {
          display: none;
        }
        .nav-links {
          display: none;
        }
        .nav-hamburger {
          display: flex;
        }
        .nav-hamburger {
          width: 38px;
          height: 34px;
          gap: 6px;
        }
        .nav-hamburger span {
          height: 1.5px;
        }
        .mobile-menu {
          display: flex;
        }
        .mobile-menu a {
          font-size: 28px;
          padding: 12px 0;
        }
        .mobile-menu .mobile-cta {
          display: none;
        }

        /* Главный экран */
        .hero-wrapper {
          width: 100%;
          height: 100svh;
          min-height: 700px;
          margin: 0;
          border: 0;
          border-radius: 0;
          background: rgb(3, 3, 5);
          box-shadow: none;
        }
        #hero-overlay::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          background:
            linear-gradient(
              to bottom,
              rgba(2, 2, 3, 0.08) 0%,
              transparent 20%,
              rgba(2, 2, 3, 0.04) 40%,
              rgba(2, 2, 3, 0.72) 73%,
              rgb(2, 2, 3) 100%
            ),
            radial-gradient(
              ellipse 90% 42% at 50% 48%,
              rgba(111, 126, 158, 0.07),
              transparent 72%
            );
        }
        .hero-content {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 1;
          justify-content: flex-end;
          padding: 0 30px calc(44px + env(safe-area-inset-bottom));
        }
        .hero-h1 {
          position: static;
          width: 100%;
          font-size: clamp(56px, 15.6vw, 70px);
          line-height: 0.92;
          letter-spacing: -1.2px;
          margin: 0;
        }
        .hero-h1 .thin {
          display: block;
          margin-top: 7px;
          font-size: 0.7em;
          line-height: 0.98;
          letter-spacing: -0.4px;
        }
        .hero-mobile-copy {
          display: block;
          margin-top: 34px;
          pointer-events: auto;
        }
        .hero-mobile-copy .hero-sub {
          margin: 0;
          font-size: 15px;
          line-height: 1.58;
          color: rgba(255, 255, 255, 0.66);
        }
        .hero-mobile-copy .hero-actions {
          margin-top: 30px;
        }
        .hero-highlights {
          position: absolute;
          top: calc(88px + env(safe-area-inset-top));
          left: 30px;
          right: 30px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 7px;
          margin: 0;
          pointer-events: none;
        }
        .hero-pill {
          min-width: 0;
          display: inline-flex;
          padding: 7px 11px;
          border: 1px solid rgba(255, 255, 255, 0.14);
          border-radius: 999px;
          background: rgba(9, 10, 14, 0.76);
          color: rgba(255, 255, 255, 0.9);
          font-size: 9.75px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.55px;
          text-transform: uppercase;
          -webkit-backdrop-filter: blur(20px) saturate(125%);
          backdrop-filter: blur(20px) saturate(125%);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.075),
            0 8px 26px rgba(0, 0, 0, 0.26);
        }
        .hero-pill::before {
          display: block;
          width: 5px;
          height: 5px;
          margin: 0;
          background: rgba(255, 255, 255, 0.82);
          box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        }
        .hero-pill:first-child::before {
          background: rgba(255, 255, 255, 0.82);
          box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        }
        .hero-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 14px;
        }
        .hero-sub {
          font-size: 14px;
          max-width: 100%;
          line-height: 1.55;
          color: rgba(255, 255, 255, 0.64);
        }
        .hero-actions {
          width: 100%;
          display: grid;
          grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
          gap: 8px;
          margin-top: 17px;
        }
        .hero-actions .btn-primary,
        .hero-actions .btn-secondary {
          width: 100%;
          min-width: 0;
          min-height: 50px;
          justify-content: center;
          padding: 12px 11px;
          font-size: 13px;
          font-weight: 550;
        }
        .hero-actions .btn-primary {
          background: rgba(255, 255, 255, 0.09);
          border-color: rgba(255, 255, 255, 0.055);
        }
        .hero-actions .btn-secondary {
          background: rgba(255, 255, 255, 0.038);
          color: rgba(255, 255, 255, 0.86);
          border-color: var(--control-border);
        }
        .hero-actions .btn-primary:hover,
        .hero-actions .btn-secondary:hover,
        .hero-actions .btn-primary:active,
        .hero-actions .btn-secondary:active {
          background: #f3f3f1;
          border-color: #f3f3f1;
          color: #09090b;
        }
        .hero-scroll {
          display: none;
        }
        .hero-bottom {
          display: none;
        }
        .hero-bottom .hero-sub {
          max-width: 100%;
          margin: 0;
        }
        @media (max-height: 740px) {
          .hero-wrapper {
            min-height: 680px;
          }
          .hero-content {
            padding: 0 26px calc(30px + env(safe-area-inset-bottom));
          }
          .hero-h1 {
            font-size: 50px;
          }
          .hero-h1 .thin {
            font-size: 0.66em;
          }
          .hero-mobile-copy {
            margin-top: 22px;
          }
          .hero-mobile-copy .hero-sub {
            font-size: 13.5px;
            line-height: 1.46;
          }
          .hero-mobile-copy .hero-actions {
            margin-top: 24px;
          }
          .hero-actions .btn-primary,
          .hero-actions .btn-secondary {
            min-height: 46px;
            font-size: 12px;
          }
        }
        @media (max-width: 360px) and (min-height: 741px) {
          .hero-content {
            padding-inline: 26px;
            padding-bottom: 36px;
          }
          .hero-h1 {
            font-size: 50px;
          }
          .hero-h1 .thin {
            font-size: 0.67em;
          }
          .hero-mobile-copy {
            margin-top: 28px;
          }
          .hero-mobile-copy .hero-sub {
            font-size: 13.5px;
          }
          .hero-mobile-copy .hero-actions {
            margin-top: 26px;
          }
          .hero-actions .btn-primary,
          .hero-actions .btn-secondary {
            font-size: 12px;
            padding-inline: 8px;
          }
        }
        .hero-stats {
          gap: 20px;
        }
        .hero-stat-val {
          font-size: 17px;
        }
        .hero-stat-label {
          font-size: 11px;
        }

        /* Короткие преимущества */
        .advantage-panel {
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 20px;
          border-radius: 18px;
        }
        .advantage-copy h3 {
          font-size: 22px;
          margin: 8px 0 8px;
        }
        .advantage-copy p {
          font-size: 16px;
          line-height: 1.65;
        }
        .advantage-card {
          padding: 13px 14px;
          border-radius: 13px;
        }
        .advantage-card-icon {
          width: 34px;
          height: 34px;
        }

        /* Общие настройки разделов */
        .section-label {
          font-size: 11px;
          letter-spacing: 2.4px;
          margin-bottom: 16px;
        }
        .section-heading {
          font-size: clamp(36px, 10.5vw, 50px);
          letter-spacing: -1.15px;
          margin-bottom: 28px;
        }

        /* Услуги */
        .section-whatwedo {
          padding: 64px 20px 0 !important;
        }
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
        }
        .feature-card {
          padding: 14px 14px 12px;
          gap: 8px;
          border-radius: 14px;
        }
        .feature-card-top {
          gap: 8px;
        }
        .feature-icon {
          width: 30px;
          height: 30px;
          border-radius: 8px;
        }
        .feature-icon svg {
          width: 14px;
          height: 14px;
        }
        .feature-title {
          font-size: 15px;
        }
        .feature-desc {
          font-size: 14px;
          line-height: 1.55;
        }

        /* Технологии и декоративная графика */
        .section-research {
          padding: 64px 20px 0 !important;
        }
        .research-list {
          flex-direction: column;
          gap: 10px;
        }
        .research-item {
          padding: 16px;
          border-radius: 16px;
          gap: 12px;
        }
        .research-num {
          font-size: 28px;
          width: 34px;
        }
        .research-item-title {
          font-size: 18px;
        }
        .research-item-desc {
          font-size: 15px;
          line-height: 1.6;
        }
        .research-canvas-wrap {
          height: 220px;
          margin-top: 32px;
        }

        /* Блок с цифрами */
        .section-numbers {
          padding: 64px 20px !important;
        }
        .numbers-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
          margin-top: 48px;
        }
        .number-val {
          font-size: clamp(42px, 12vw, 64px);
          letter-spacing: -1px;
        }
        .number-label {
          font-size: 15px;
        }

        /* Призыв к действию */
        .section-cta {
          padding: 64px 20px !important;
        }
        .cta-heading {
          font-size: clamp(36px, 11vw, 60px);
          letter-spacing: -1.5px;
          margin-bottom: 16px;
        }
        .cta-sub {
          font-size: 17px;
          margin-bottom: 32px;
        }
        .cta-actions {
          flex-direction: column;
          gap: 10px;
          width: 100%;
        }
        .cta-actions .btn-primary,
        .cta-actions .btn-secondary {
          width: 100%;
          justify-content: center;
        }

        /* Контакты */
        .section-contact {
          padding: 72px 20px 64px !important;
        }
        .contact-wrap {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .contact-info {
          padding-top: 0;
        }
        .contact-info .section-heading {
          max-width: 350px;
          font-size: clamp(38px, 11vw, 48px);
          margin-bottom: 20px;
        }
        .contact-lead {
          max-width: 100%;
          font-size: 15px;
          line-height: 1.65;
        }
        .contact-direct-label {
          margin-top: 28px;
        }
        .contact-methods {
          grid-template-columns: 1fr 1fr;
          margin-top: 12px;
          gap: 8px;
        }
        .contact-method {
          min-width: 0;
          min-height: 56px;
          padding: 9px;
          gap: 10px;
        }
        .contact-method-icon {
          width: 36px;
          height: 36px;
          border-radius: 9px;
        }
        .contact-method-icon svg {
          width: 15px;
          height: 15px;
        }
        .contact-method-label {
          font-size: 8px;
        }
        .contact-method-val {
          max-width: 105px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 11px;
          white-space: nowrap;
        }
        .contact-form {
          width: 100%;
          gap: 14px;
          padding: 22px 18px 20px;
          border-radius: 20px;
        }
        .contact-form-intro {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .form-label {
          font-size: 11px;
        }
        .form-input,
        .form-textarea {
          padding: 13px 14px;
          font-size: 16px;
        }
        .form-textarea {
          min-height: 120px;
        }
        .contact-form .btn-primary {
          justify-content: center;
          width: 100%;
        }
        .contact-form-title {
          font-size: 22px;
        }
        .contact-form-sub {
          font-size: 14px;
        }

        /* Дипломы */
        .diploma-thumb {
          display: none;
        }
        .diploma-card {
          min-height: 88px;
          gap: 0;
          padding: 13px 76px 13px 15px;
        }
        .diploma-info {
          gap: 5px;
        }
        .diploma-meta {
          font-size: 9px;
          letter-spacing: 1px;
        }
        .diploma-meta-kind {
          display: inline;
        }
        .diploma-title {
          font-size: 14px;
          line-height: 1.35;
        }
        .diploma-sub {
          display: none;
        }
        .diploma-thumb-btn {
          top: 50%;
          right: 10px;
          bottom: auto;
          width: 52px;
          min-width: 0;
          height: 58px;
          padding: 0 0 0 12px;
          gap: 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          transform: translateY(-50%);
        }
        .diploma-thumb-btn::before {
          content: "";
          position: absolute;
          top: 9px;
          bottom: 9px;
          left: 0;
          width: 1px;
          background: rgba(255, 255, 255, 0.11);
        }
        .diploma-thumb-btn:hover {
          border: 0;
          background: transparent;
          box-shadow: none;
          transform: translateY(-50%) scale(1.04);
        }
        .diploma-thumb-btn svg {
          width: 18px;
          height: 18px;
          stroke: rgba(255, 255, 255, 0.72);
        }
        .diploma-thumb-btn:hover svg {
          stroke: #fff;
        }
        .diploma-thumb-btn span {
          display: none;
        }

        /* Подвал */
        .footer {
          padding: 24px 20px;
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
        .footer-brand {
          font-size: 14px;
        }
        .footer-right {
          font-size: 13px;
        }

        /* Подсказка о прокрутке */
        .scroll-cta {
          bottom: 60px;
        }

        /* Окно предпросмотра */
        .demo-modal {
          padding: 12px;
        }
        .demo-window {
          height: 84vh;
          border-radius: 12px;
        }
        .demo-newtab span {
          display: none;
        }
      }

      /* Дополнительное уплотнение для очень маленьких экранов */
      @media (max-width: 390px) {
        .hero-h1 {
          font-size: clamp(38px, 12vw, 56px);
        }
        .numbers-grid {
          gap: 18px;
        }
        .number-val {
          font-size: clamp(34px, 10vw, 48px);
        }
      }

      /* ===== АНИМАЦИИ ПЕРВОГО ПОЯВЛЕНИЯ ===== */
      #crt-frame {
        opacity: 0;
        transition: opacity 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 0.8s;
      }
      #crt-frame.visible {
        opacity: 1;
      }

      .nav-brand,
      .nav-links a,
      .nav-links .nav-cta,
      .nav-links .lang-toggle,
      .nav-hamburger {
        opacity: 0;
        transform: translateY(-12px);
        transition:
          opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
          transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      .nav-brand.anim-in,
      .nav-links a.anim-in,
      .nav-links .nav-cta.anim-in,
      .nav-links .lang-toggle.anim-in.anim-in,
      .nav-hamburger.anim-in {
        opacity: 1;
        transform: translateY(0);
      }
      /* Небольшая задержка между пунктами меню */
      .nav-brand {
        transition-delay: 0.3s;
      }
      .nav-links a:nth-child(1) {
        transition-delay: 0.4s;
      }
      .nav-links a:nth-child(2) {
        transition-delay: 0.48s;
      }
      .nav-links a:nth-child(3) {
        transition-delay: 0.56s;
      }
      .nav-links a:nth-child(4) {
        transition-delay: 0.64s;
      }
      .nav-links a:nth-child(5) {
        transition-delay: 0.72s;
      }
      .nav-links a:nth-child(6) {
        transition-delay: 0.8s;
      }
      .nav-links a:nth-child(7) {
        transition-delay: 0.88s;
      }
      .nav-links .nav-cta {
        transition-delay: 0.94s;
      }
      .nav-links .lang-toggle {
        transition-delay: 1s;
      }
      .nav-hamburger {
        transition-delay: 0.4s;
      }

      .hero-h1 {
        opacity: 0;
        transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 0.6s;
        will-change: transform, opacity;
      }
      .hero-h1.anim-in {
        opacity: 1;
      }

      .hero-highlights {
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 0.84s;
        will-change: transform, opacity;
      }
      .hero-highlights.anim-in {
        opacity: 1;
      }

      .hero-sub {
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 0.9s;
        will-change: transform, opacity;
      }
      .hero-sub.anim-in {
        opacity: 1;
      }

      .hero-actions {
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 1.05s;
        will-change: transform, opacity;
      }
      .hero-actions.anim-in {
        opacity: 1;
      }

      .hero-stat {
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      .hero-stat:nth-child(1) {
        transition-delay: 1.2s;
      }
      .hero-stat:nth-child(2) {
        transition-delay: 1.32s;
      }
      .hero-stat:nth-child(3) {
        transition-delay: 1.44s;
      }
      .hero-stat.anim-in {
        opacity: 1;
      }

      .hero-scroll {
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 1.5s;
        gap: 10px;
      }
      .hero-scroll.anim-in {
        opacity: 1;
      }

      .advantage-panel {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
          transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 0.2s;
      }
      .advantage-panel.anim-in {
        opacity: 1;
        transform: translateY(0);
      }

      .hero-bottom {
        will-change: transform;
      }

      .hero-fade,
      .hero-fade-top {
        opacity: 0;
        transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition-delay: 1s;
      }
      .hero-fade.anim-in,
      .hero-fade-top.anim-in {
        opacity: 1;
      }
      /* The section seam must stay covered, including during initial loading. */
      .hero-fade{opacity:1;transition:none}

      /* В отдельный графический слой вынесены только затемнения. Если применить
       transform ко всему экрану, фиксированное верхнее меню перестанет работать. */
      .hero-fade,
      .hero-fade-top {
        will-change: auto;
        transform: translateZ(0);
      }

      /* Случайное выделение текста не должно перерисовывать весь 3D-экран */
      #hero-overlay,
      #hero-overlay * {
        -webkit-user-select: none;
        user-select: none;
      }
      /* При этом основной текст по-прежнему можно выделить вручную */
      .hero-h1,
      .hero-sub,
      .hero-stat-val,
      .hero-stat-label {
        -webkit-user-select: text;
        user-select: text;
      }

      /* ===== ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ===== */
      .lang-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.03);
        cursor: pointer;
        isolation: isolate;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
      }
      .lang-toggle::before {
        content: "";
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 3px;
        width: calc((100% - 6px) / 2);
        border-radius: 999px;
        background: #f2f2f0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transform: translateX(0);
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: -1;
      }
      .lang-toggle[data-active="en"]::before {
        transform: translateX(100%);
      }
      .lang-toggle span {
        display: grid;
        place-items: center;
        min-width: 34px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.4);
        padding: 4px 11px;
        border-radius: 100px;
        cursor: pointer;
        transition: color 0.28s ease;
      }
      .lang-toggle span.active {
        color: #08090b;
        background: transparent;
      }
      .lang-toggle span:not(.active):hover {
        color: rgba(255, 255, 255, 0.85);
      }

      /* ===== ПЕРЕКЛЮЧАТЕЛЬ ВИДА ПРОЕКТОВ ===== */
      .projects-heading-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 0;
      }
      .projects-heading-row .section-heading {
        margin-bottom: 28px;
      }
      .projects-view-toggle {
        display: none;
        flex-shrink: 0;
        position: relative;
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.045);
        cursor: pointer;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 30px;
        font:
          500 12px/1 "Geist",
          sans-serif;
        white-space: nowrap;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
        transition:
          background 0.25s ease,
          border-color 0.25s ease,
          color 0.25s ease,
          transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .projects-view-toggle:hover {
        background: rgba(255, 255, 255, 0.075);
        border-color: rgba(255, 255, 255, 0.065);
        color: rgba(255, 255, 255, 0.96);
      }
      .projects-view-toggle:active {
        background: rgba(255, 255, 255, 0.12);
        transform: scale(0.96);
      }
      .projects-view-toggle [data-projects-toggle-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .projects-view-toggle-icon {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
      }
      .projects-view-toggle svg {
        position: absolute;
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.3;
        stroke-linejoin: round;
        transition:
          opacity 0.3s ease,
          transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .projects-view-toggle .icon-vertical {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
      .projects-view-toggle .icon-horizontal {
        opacity: 0;
        transform: scale(0.72) rotate(-20deg);
      }
      .projects-view-toggle[aria-expanded="true"] .icon-vertical {
        opacity: 0;
        transform: scale(0.72) rotate(20deg);
      }
      .projects-view-toggle[aria-expanded="true"] .icon-horizontal {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
      @media (max-width: 768px) {
        .project-demo svg {
          display: none !important;
        }
        .projects-view-toggle {
          display: flex;
        }
      }

      .project-bottom {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: auto;
      }
      .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        min-width: 0;
        align-content: flex-start;
      }

      /* ===== КАРТОЧКИ ПРОЕКТОВ ===== */
      .section-projects {
        padding: 120px 48px;
        overflow: hidden;
      }
      .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        width: 100%;
        box-sizing: border-box;
      }
      .project-card {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.018)
        );
        border: 1px solid rgba(255, 255, 255, 0.095);
        border-radius: 24px;
        padding: 0 22px 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        isolation: isolate;
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.4s ease,
          background 0.4s ease,
          box-shadow 0.5s ease;
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
      }
      .project-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
          620px circle at 50% 0%,
          rgba(255, 255, 255, 0.045) 0%,
          rgba(255, 255, 255, 0.022) 28%,
          rgba(255, 255, 255, 0.007) 54%,
          transparent 82%
        );
        transition: opacity 0.45s ease;
      }
      .project-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.25);
      }
      .project-card:hover::after {
        opacity: 1;
      }
      .project-title {
        padding-top: 22px;
        color: #fff;
        font:
          400 32px/1.04 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -0.65px;
      }
      html[lang="ru"] .project-title {
        font-family: "Oranienbaum", Georgia, serif;
        letter-spacing: -0.85px;
      }
      .project-desc {
        min-height: 74px;
        padding-top: 10px;
        font-size: 14px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.52);
        line-height: 1.62;
      }
      .project-tag {
        display: inline-flex;
        align-items: center;
        min-height: 27px;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.028);
        color: rgba(255, 255, 255, 0.56);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.25px;
        transition:
          color 0.25s ease,
          border-color 0.25s ease,
          background 0.25s ease;
      }
      .project-tag:hover {
        color: rgba(255, 255, 255, 0.78);
        border-color: rgba(255, 255, 255, 0.095);
        background: rgba(255, 255, 255, 0.05);
      }
      .project-demo {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 20px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.14);
        font-family: "Geist", sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0.2px;
        cursor: pointer;
        transition:
          border-color 0.25s ease,
          background 0.25s ease,
          color 0.25s ease;
        flex-shrink: 0;
      }
      .project-demo:hover {
        border-color: #fff;
        background: #fff;
        color: #000;
      }
      .project-demo svg {
        width: 13px;
        height: 13px;
      }
      .project-thumb {
        position: relative;
        margin: 0 -22px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.01)
        );
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        cursor: pointer;
        border-radius: 23px 23px 0 0;
      }
      .project-thumb::after {
        content: "";
        position: absolute;
        inset: 48% 0 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(5, 5, 8, 0.22)
        );
      }
      .project-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      .project-kind {
        position: absolute;
        top: 14px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 11px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(8, 8, 12, 0.58);
        color: rgba(255, 255, 255, 0.88);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .project-kind {
        right: 14px;
      }
      .project-card:hover .project-thumb img {
        transform: scale(1.04);
      }
      .project-thumb-ph {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.13);
      }
      .project-thumb-ph svg {
        width: 38px;
        height: 38px;
      }
      .project-status {
        color: rgba(255, 255, 255, 0.42);
        font-size: 11px;
        white-space: nowrap;
      }
      .project-thumb--planner {
        display: grid;
        place-items: center;
        cursor: default;
        background: radial-gradient(circle at 50% 45%, #2d2c35 0%, #111116 68%);
        overflow: hidden;
      }
      @media (max-width: 768px) {
        .projects-heading-row {
          display: flex;
          align-items: flex-end;
          gap: 14px;
        }
        .projects-heading-row .section-heading {
          margin-bottom: 24px;
        }
        .projects-view-toggle {
          display: flex !important;
          margin-bottom: 27px;
        }
        .section-projects {
          padding: 72px 20px !important;
        }
        .projects-grid {
          display: flex !important;
          width: auto;
          margin: 0 -20px;
          padding: 24px calc((100vw - min(82vw, 360px)) / 2) 20px;
          gap: 2px !important;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-padding-inline: calc((100vw - min(82vw, 360px)) / 2);
          overscroll-behavior-x: contain;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }
        .projects-grid::-webkit-scrollbar {
          display: none;
        }
        .projects-grid.is-expanded {
          display: grid !important;
          grid-template-columns: 1fr !important;
          width: 100%;
          margin: 0;
          padding: 0;
          gap: 24px !important;
          overflow: visible;
          scroll-snap-type: none;
        }
        .project-card {
          width: auto;
          min-width: 0;
          flex: 0 0 min(82vw, 360px);
          padding: 0 18px 18px;
          scroll-snap-align: center;
          container-type: inline-size;
        }
        .projects-grid:not(.is-expanded) .project-card {
          opacity: var(--carousel-opacity, 0.54);
          transform: scale(var(--carousel-scale, 0.93));
          transform-origin: center;
          transition:
            transform 0.1s linear,
            opacity 0.1s linear,
            border-color 0.28s ease,
            background 0.28s ease,
            box-shadow 0.34s ease;
        }
        .projects-grid:not(.is-expanded) .project-card.is-carousel-active {
          border-color: rgba(255, 255, 255, 0.16);
          background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.022)
          );
          box-shadow: 0 24px 58px rgba(0, 0, 0, 0.24);
        }
        .projects-grid.is-expanded .project-card {
          width: 100%;
          flex-basis: auto;
        }
        .project-card:hover {
          transform: none;
        }
        .project-thumb {
          margin: 0 -18px;
          aspect-ratio: 16 / 9;
          border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        .project-card:hover .project-thumb img {
          transform: none;
        }
        .project-title {
          padding-top: 19px;
          font-size: 28px;
          line-height: 1.04;
          letter-spacing: -0.6px;
        }
        .project-desc {
          min-height: 0;
          padding-top: 9px;
          font-size: 13.5px;
          line-height: 1.62;
          color: rgba(255, 255, 255, 0.5);
        }
        .project-bottom {
          width: 100%;
          padding-top: 13px;
          gap: 16px;
        }
        .project-tags {
          width: 100%;
          gap: 6px;
        }
        .project-tag {
          min-height: 26px;
          padding: 0 9px;
          font-size: 11px;
        }
        body.light .project-card {
          background: var(--card);
          border-color: var(--border);
        }
        body.light .project-title {
          color: var(--fg);
        }
        body.light .project-desc {
          color: var(--fg2);
        }
        body.light .project-tag {
          background: rgba(0, 0, 0, 0.025);
          border-color: rgba(0, 0, 0, 0.08);
          color: rgba(0, 0, 0, 0.56);
        }
      }
      .planner-preview {
        width: 44%;
        min-width: 170px;
        height: 82%;
        padding: 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 20px 50px rgba(19, 12, 35, 0.32);
        color: #33284b;
        transform: rotate(-4deg);
      }
      .planner-preview-date {
        display: block;
        color: #8d7baa;
        font-size: 9px;
        margin-bottom: 5px;
      }
      .planner-preview strong {
        display: block;
        font-size: 15px;
        margin-bottom: 12px;
      }
      .planner-preview i {
        display: block;
        height: 7px;
        margin: 7px 0;
        border-radius: 99px;
        background: linear-gradient(90deg, #b5a4dc 0 62%, #eee9f5 62%);
      }
      .planner-preview i:nth-of-type(2) {
        background: linear-gradient(90deg, #e5a2ba 0 42%, #eee9f5 42%);
      }
      .planner-preview i:nth-of-type(3) {
        background: linear-gradient(90deg, #80c9bc 0 77%, #eee9f5 77%);
      }
      .planner-preview-add {
        width: 24px;
        height: 24px;
        margin: 10px 0 0 auto;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #6f5ca1;
        color: #fff;
        font-size: 18px;
      }

      /* ===== ОКНО ПРОСМОТРА САЙТА И ДИПЛОМОВ ===== */
      .demo-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        background: rgba(5, 7, 8, 0.58);
        -webkit-backdrop-filter: blur(18px) saturate(72%);
        backdrop-filter: blur(18px) saturate(72%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      .demo-modal.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .demo-window {
        width: 100%;
        max-width: 1100px;
        height: 78vh;
        max-height: 760px;
        background: rgb(8, 8, 12);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
        transform: scale(0.96) translateY(10px);
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      .demo-modal.open .demo-window {
        transform: scale(1) translateY(0);
      }
      .demo-bar {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(18, 18, 22, 0.78);
        -webkit-backdrop-filter: blur(18px) saturate(115%);
        backdrop-filter: blur(18px) saturate(115%);
      }
      .demo-url {
        position: absolute;
        left: 50%;
        max-width: min(34vw, 420px);
        transform: translateX(-50%);
        min-width: 0;
        padding: 7px 12px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .demo-newtab {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 100px;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      .demo-newtab:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
      }
      .demo-newtab svg {
        width: 16px;
        height: 16px;
      }
      .demo-newtab span {
        display: none;
      }
      .demo-left-actions {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .demo-refresh {
        display: none;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.035);
        color: rgba(255, 255, 255, 0.64);
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      }
      .demo-refresh.visible { display: inline-flex; }
      .demo-refresh:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.07);
      }
      .demo-refresh:active svg { transform: rotate(-24deg); }
      .demo-refresh svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .demo-newtab-short {
        display: none;
      }
      .demo-close {
        justify-self: end;
        flex-shrink: 0;
        margin-right: -8px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition:
          color 0.2s ease,
          border-color 0.2s ease,
          background-color 0.2s ease;
      }
      .demo-close:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.06);
      }
      .demo-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 1.7;
        fill: none;
      }
      .demo-bar-actions {
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 8px;
      }
      .demo-viewport-controls {
        display: none;
        position: relative;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        width: 188px;
        height: 38px;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
      }
      .demo-viewport-controls.visible {
        display: grid;
      }
      .demo-viewport-controls::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: calc(50% - 3px);
        height: 30px;
        border-radius: 999px;
        background: #f3f3f0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
        transform: translateX(0);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
      }
      .demo-viewport-controls.mode-mobile::before {
        transform: translateX(100%);
      }
      .demo-viewport-button {
        position: relative;
        z-index: 1;
        min-width: 0;
        height: 30px;
        padding: 0 10px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, 0.62);
        font: 600 12px/1 inherit;
        cursor: pointer;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;
      }
      .demo-viewport-button[aria-pressed="true"] {
        color: #090a0b;
      }
      .demo-zoom-controls {
        display: none;
        position: static;
        align-items: center;
        height: 38px;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
      }
      .demo-zoom-controls.visible {
        display: flex;
      }
      .demo-zoom-button {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, 0.68);
        font: 500 17px/1 inherit;
        cursor: pointer;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;
      }
      .demo-zoom-button:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
      }
      .demo-zoom-value {
        min-width: 48px;
        color: rgba(255, 255, 255, 0.78);
        font: 600 11px/1 inherit;
        text-align: center;
        font-variant-numeric: tabular-nums;
      }
      .demo-frame-wrap {
        flex: 1;
        position: relative;
        min-height: 0;
        background: #070809;
      }
      .demo-frame-wrap iframe {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: #070809;
      }
      .diploma-pages {
        --diploma-zoom: 1;
        position: absolute;
        inset: 0;
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 24px;
        background: #181818;
        gap: 20px;
      }
      .diploma-pages.open {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .diploma-pages img {
        display: block;
        width: min(100%, 900px);
        height: auto;
        aspect-ratio: 1520 / 1075;
        flex: none;
        background: #fff;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
        zoom: var(--diploma-zoom);
      }
      @media (max-width: 768px) {
        .diploma-pages {
          padding: 0;
          gap: 1px;
          align-items: stretch;
          touch-action: pan-y;
        }
        .diploma-pages img {
          width: 100%;
          max-width: none;
          box-shadow: none;
          transform: scale(1);
          transform-origin: center;
          will-change: transform;
        }
        .diploma-pages img.is-zooming {
          position: relative;
          z-index: 2;
          transition: none;
        }
        .diploma-pages img.is-resetting {
          position: relative;
          z-index: 2;
          transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        }
      }
      @media (min-width: 769px) and (max-width: 1040px) {
        .diplomas-list {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .diploma-card {
          min-height: 92px;
          padding: 10px 76px 10px 10px;
        }
        .diploma-thumb {
          width: 52px;
          border-radius: 7px;
        }
        .diploma-thumb-inner {
          border-radius: 7px;
        }
        .diploma-info {
          gap: 4px;
        }
        .diploma-meta {
          font-size: 10px;
        }
        .diploma-title {
          font-size: 14px;
        }
        .diploma-sub {
          font-size: 11px;
        }
        .diploma-thumb-btn {
          top: 50%;
          right: 14px;
          bottom: auto;
          width: 52px;
          min-width: 0;
          height: 58px;
          padding: 0 0 0 12px;
          gap: 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          transform: translateY(-50%);
        }
        .diploma-thumb-btn::before {
          content: "";
          position: absolute;
          top: 9px;
          bottom: 9px;
          left: 0;
          width: 1px;
          background: rgba(255, 255, 255, 0.11);
        }
        .diploma-thumb-btn:hover {
          border: 0;
          background: transparent;
          box-shadow: none;
          transform: translateY(-50%) scale(1.04);
        }
        .diploma-thumb-btn svg {
          width: 18px;
          height: 18px;
          stroke: rgba(255, 255, 255, 0.72);
          transform: translateX(4px);
        }
        .diploma-thumb-btn:hover svg {
          stroke: #fff;
        }
      }
      @media (min-width: 769px) {
        .demo-window {
          /* Предпросмотр занимает почти весь монитор. Ширину ограничивает либо
           край экрана, либо доступная высота — поэтому 16:9 сохраняется и на 4K. */
          width: min(calc(100vw - 48px), calc(177.7778svh - 199.111px));
          max-width: none;
          height: auto;
          max-height: none;
        }
        .demo-frame-wrap {
          flex: none;
          aspect-ratio: 16 / 9;
        }
      }
      @media (max-width: 768px) {
        .demo-modal {
          padding: 0;
          align-items: stretch;
          justify-content: stretch;
        }
        .demo-window {
          width: 100%;
          height: 100svh;
          max-height: none;
          border: 0;
          border-radius: 0;
        }
        .demo-bar {
          grid-template-columns: auto minmax(0, 1fr) auto;
          gap: 8px;
          min-height: calc(52px + env(safe-area-inset-top));
          padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
        }
        .demo-url {
          padding-inline: 6px;
          font-size: 13px;
        }
        .demo-newtab {
          width: 40px;
          height: 40px;
          padding: 0;
        }
        .demo-refresh { display: none !important; }
        .demo-frame-wrap {
          flex: 1;
          min-height: 0;
          aspect-ratio: auto;
        }
        .demo-frame-wrap iframe {
          display: block;
        }
        .demo-newtab span {
          display: none;
        }
        .demo-newtab .demo-newtab-short {
          display: none;
        }
        .demo-viewport-button {
          min-width: 44px;
          padding-inline: 9px;
        }
        .demo-url {
          display: none;
        }
        .demo-viewport-controls,
        .demo-zoom-controls {
          display: none !important;
        }
        .demo-close {
          width: 40px;
          height: 40px;
          margin-right: -4px;
        }
      }
      .demo-loading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        background: rgb(8, 8, 12);
        z-index: 1;
      }
      .demo-loading {
        background:radial-gradient(ellipse at 50% 42%,#202023 0%,#0b0b0d 65%);
        opacity:1;transition:opacity .3s ease;
      }
      .demo-loading.is-ready{opacity:0;pointer-events:none}
      .preview-loading-inner{width:min(340px,calc(100% - 48px));text-align:center}
      .preview-loading-brand{font:400 clamp(28px,6vw,48px)/1.15 "Instrument Serif",Georgia,serif;white-space:nowrap;color:#f3f3f1}
      .preview-loading-label{margin:22px 0 14px;color:#b5b5ba;font-size:14px;line-height:1.5}
      .preview-loading-track{height:3px;border-radius:4px;background:#353538;overflow:hidden}
      .preview-loading-track span{display:block;height:100%;background:#ededed;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
      .is-waiting .preview-loading-track span{animation:preview-loading-sweep 1.4s ease-in-out infinite}
      .preview-loading-note{margin:14px 0 0;font-size:12px;color:#909098;line-height:1.5}
      .preview-loading-retry{margin-top:20px;padding:12px 18px;border:1px solid #49494e;border-radius:14px;background:#242426;color:#eee;cursor:pointer}
      .preview-loading-retry[hidden]{display:none}
      @keyframes preview-loading-sweep{from{transform:translateX(-40%) scaleX(.4)}to{transform:translateX(100%) scaleX(.4)}}
      @media(prefers-reduced-motion:reduce){
        .demo-loading,.preview-loading-track span{transition:none}
        .is-waiting .preview-loading-track span{animation:none;transform:scaleX(.25)}
      }

      /* ===== ГАЛЕРЕЯ ЭКРАНОВ ПЛАНИРОВЩИКА ===== */
      .gallery-modal {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(12px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.25s ease;
      }
      .gallery-modal.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .gallery-window {
        width: min(1180px, 100%);
        height: min(820px, 90vh);
        display: grid;
        grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.85fr);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 18px;
        background: #121216;
        box-shadow: 0 28px 100px rgba(0, 0, 0, 0.55);
        transform: scale(0.97) translateY(8px);
        transition: transform 0.25s ease;
      }
      .gallery-modal.open .gallery-window {
        transform: scale(1) translateY(0);
      }
      .gallery-stage {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
        background: radial-gradient(circle at 50% 20%, #292337, #0c0c0f 65%);
      }
      .gallery-stage img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 14px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.48);
        object-fit: contain;
      }
      .gallery-sidebar {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
      }
      .gallery-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      }
      .gallery-title {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
      }
      .gallery-count {
        display: block;
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.42);
        font-size: 11px;
      }
      .gallery-close {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        color: rgba(255, 255, 255, 0.65);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        cursor: pointer;
      }
      .gallery-close:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.45);
      }
      .gallery-close svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
      }
      .gallery-thumbs {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
        align-content: start;
      }
      .gallery-thumb {
        height: 260px;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background: #202025;
        cursor: pointer;
        opacity: 1;
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }
      .gallery-thumb:hover {
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
      }
      .gallery-thumb.active {
        border-color: #fff;
        box-shadow: 0 0 0 1px #fff;
      }
      .gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      @media (max-width: 700px) {
        .gallery-modal {
          padding: 12px;
        }
        .gallery-window {
          height: 92vh;
          grid-template-columns: 1fr;
          grid-template-rows: minmax(0, 1fr) 40%;
        }
        .gallery-sidebar {
          border-left: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.09);
        }
        .gallery-stage {
          padding: 16px;
        }
        .gallery-thumbs {
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
          padding: 12px;
        }
        .gallery-thumb {
          height: 150px;
        }
        .gallery-bar {
          padding: 10px 14px;
        }
      }

      /* ===== КОНТАКТЫ И ФОРМА ЗАЯВКИ ===== */
      .section-contact {
        min-height: calc(100svh - 64px);
        display: flex;
        align-items: center;
        padding: clamp(96px, 10vh, 150px) 48px clamp(80px, 9vh, 140px);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .section-contact > .section-inner {
        width: 100%;
      }
      .contact-wrap {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
        gap: 80px;
        align-items: stretch;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
      }
      .contact-info {
        display: flex;
        min-width: 0;
        padding-top: 10px;
        flex-direction: column;
      }
      .contact-info .section-heading {
        max-width: 520px;
        margin-bottom: 26px;
      }
      .contact-lead {
        max-width: 500px;
        font-size: 16px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.52);
        line-height: 1.7;
      }
      .contact-direct-label {
        margin-top: 38px;
        color: rgba(255, 255, 255, 0.3);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 1.3px;
        text-transform: uppercase;
      }
      .contact-methods {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, minmax(56px, 1fr));
        flex: 1;
        gap: 0;
        margin-top: 14px;
      }
      .contact-method {
        display: flex;
        align-items: center;
        gap: 13px;
        min-height: 56px;
        padding: 10px 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-decoration: none;
        transition:
          color 0.3s ease,
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .contact-method + .contact-method {
        border-top: 1px solid rgba(255, 255, 255, 0.075);
      }
      .contact-method:hover {
        background: transparent;
        transform: translateX(4px);
      }
      .contact-method-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        color: rgba(255, 255, 255, 0.58);
        border: 0;
        border-radius: 0;
        background: transparent;
        transition: color 0.25s ease;
      }
      .contact-method:hover .contact-method-icon {
        color: rgba(255, 255, 255, 0.88);
        border-color: transparent;
      }
      .contact-method-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none !important;
        stroke-width: 1.85;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .contact-method--max .contact-method-icon svg {
        width: 18px;
        height: 18px;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .contact-method-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .contact-method-label {
        font-size: 9px;
        font-weight: 500;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 1.3px;
        text-transform: uppercase;
      }
      .contact-method-val {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        transition: color 0.2s ease;
      }
      .contact-method:hover .contact-method-val {
        color: #fff;
      }
      @media (min-width: 769px) {
        .contact-method {
          min-height: 60px;
          gap: 15px;
        }
        .contact-method-icon {
          width: 38px;
          height: 38px;
        }
        .contact-method-icon svg,
        .contact-method--max .contact-method-icon svg {
          width: 20px;
          height: 20px;
        }
        .contact-method-label {
          font-size: 10px;
        }
        .contact-method-val {
          font-size: 15px;
        }
      }
      .contact-form {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 30px 30px 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.038),
          rgba(255, 255, 255, 0.012)
        );
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
      }
      .contact-form-intro {
        display: block;
        margin-bottom: 12px;
      }
      .contact-form-title {
        margin-bottom: 12px;
        color: #fff;
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 29px;
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.35px;
      }
      html[lang="ru"] .contact-form-title {
        font-family: "Oranienbaum", Georgia, serif;
        letter-spacing: -0.45px;
      }
      .contact-form-sub {
        max-width: 390px;
        font-size: 14px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.6;
      }
      .form-field {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .contact-form .form-field--message {
        flex: 1;
      }
      .form-label {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 1.3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.42);
      }
      .form-input,
      .form-textarea {
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 13px;
        min-height: 52px;
        padding: 14px 16px;
        color: #fff;
        font-family: "Geist", sans-serif;
        font-size: 15px;
        transition:
          border-color 0.25s ease,
          background 0.25s ease;
      }
      .form-input::placeholder,
      .form-textarea::placeholder {
        color: rgba(255, 255, 255, 0.25);
      }
      .form-input:focus,
      .form-textarea:focus {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }
      .form-input.is-invalid,
      .form-textarea.is-invalid {
        border-color: rgba(218, 119, 119, 0.38);
        background: rgba(218, 119, 119, 0.055);
        box-shadow: none;
      }
      .form-field-error {
        position: absolute;
        top: 20px;
        right: 12px;
        z-index: 4;
        max-width: calc(100% - 24px);
        padding: 7px 10px;
        border: 1px solid rgba(218, 119, 119, 0.24);
        border-radius: 8px;
        background: rgba(24, 19, 21, 0.94);
        color: rgba(239, 181, 181, 0.9);
        box-shadow:
          0 9px 24px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.035);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        font-size: 10.5px;
        line-height: 1.3;
        letter-spacing: 0.01em;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-48%) scale(0.97);
        transform-origin: right center;
        transition:
          opacity 0.18s ease,
          transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
          visibility 0s linear 0.28s;
      }
      .form-field-error::after {
        content: "";
        position: absolute;
        right: 12px;
        bottom: -4px;
        width: 7px;
        height: 7px;
        border-right: 1px solid rgba(218, 119, 119, 0.2);
        border-bottom: 1px solid rgba(218, 119, 119, 0.2);
        background: rgba(24, 19, 21, 0.94);
        transform: rotate(45deg);
      }
      .form-field-error.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(-52%) scale(1);
        transition-delay: 0s;
      }
      .form-textarea {
        flex: 1;
        resize: none;
        min-height: 140px;
        line-height: 1.6;
      }
      .form-files {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .form-file-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 14px;
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid var(--control-border);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.025);
        box-shadow: var(--control-highlight);
        font-size: 12px;
        font-weight: 550;
        cursor: pointer;
        transition:
          color 0.22s ease,
          border-color 0.22s ease,
          background 0.22s ease;
      }
      .form-file-trigger:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.065);
      }
      .form-file-trigger svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .form-file-trigger {
        width: 42px;
        min-width: 42px;
        padding: 0;
        border-radius: 11px;
      }
      .form-file-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
      }
      .form-file-copy .form-label {
        color: rgba(255, 255, 255, 0.58);
        font-size: 10px;
      }
      .form-file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .form-file-summary {
        min-width: 0;
        color: rgba(255, 255, 255, 0.34);
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .form-file-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .form-file-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        max-width: 100%;
        min-height: 27px;
        padding: 4px 7px 4px 9px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        color: rgba(255, 255, 255, 0.6);
        font-size: 10.5px;
      }
      .form-file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .form-file-remove {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        padding: 0;
        color: rgba(255, 255, 255, 0.4);
        border: 0;
        border-radius: 5px;
        background: transparent;
        cursor: pointer;
        font-size: 15px;
        line-height: 1;
      }
      .form-file-remove:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }
      .form-file-error {
        min-height: 0;
        color: #da7777;
        font-size: 10.5px;
        line-height: 1.35;
      }
      .contact-form .btn-primary {
        width: 100%;
        min-height: 50px;
        justify-content: center;
        margin-top: 4px;
      }
      .contact-form .btn-primary.is-success,
      .contact-form .btn-primary.is-success:hover {
        color: #09090b;
        border-color: #f3f3f1;
        background: #f3f3f1;
        transform: none;
      }
      .contact-form .btn-primary.is-error,
      .contact-form .btn-primary.is-error:hover {
        color: #e6b0b0;
        border-color: rgba(218, 119, 119, 0.34);
        background: rgba(218, 119, 119, 0.08);
        transform: none;
      }
      .contact-form .btn-primary:disabled {
        cursor: default;
        opacity: 1;
      }
      .contact-form-note {
        margin-top: -8px;
        color: rgba(255, 255, 255, 0.3);
        font-size: 11px;
        line-height: 1.45;
        text-align: center;
      }
      @media (min-width: 769px) and (max-width: 860px) {
        .section-projects {
          padding: 100px 28px 80px;
        }
        .projects-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .project-card {
          padding: 20px;
        }
        .project-thumb {
          margin: -20px -20px 6px;
          border-radius: 16px 16px 0 0;
        }
        .section-contact {
          padding: 100px 28px;
        }
        .advantage-panel {
          grid-template-columns: 1fr;
          padding: 24px;
        }
      }

      /* ===== КОММЕРЧЕСКИЕ РАЗДЕЛЫ: РЕЗУЛЬТАТ, ТАРИФЫ И ЭТАПЫ ===== */
      .section-outcome {
        padding: 120px 48px 32px;
        overflow: hidden;
      }
      .section-outcome::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 240px;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          #000 0,
          rgba(0, 0, 0, 0.82) 24%,
          rgba(0, 0, 0, 0.36) 62%,
          transparent 100%
        );
      }
      .section-outcome + .section-whatwedo {
        padding-top: 56px;
      }
      .section-outcome .section-inner {
        position: relative;
      }
      body:not(.light) .section-outcome {
        background: transparent;
      }
      .outcome-heading {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
        align-items: end;
        gap: 56px;
      }
      .outcome-heading .section-heading {
        margin-bottom: 0;
      }
      .outcome-lead {
        max-width: 520px;
        padding-bottom: 4px;
        color: rgba(255, 255, 255, 0.52);
        font-size: 15px;
        line-height: 1.7;
      }
      .outcome-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 46px;
      }
      .outcome-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        min-height: 108px;
        column-gap: 16px;
        padding: 17px 18px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 20px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.052),
          rgba(255, 255, 255, 0.016)
        );
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.4s ease,
          background 0.4s ease,
          box-shadow 0.5s ease;
      }
      .outcome-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.17);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
      }
      .outcome-card.active {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.2);
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.08),
          rgba(255, 255, 255, 0.026)
        );
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
      }
      .outcome-card > div {
        min-width: 0;
      }
      .outcome-icon {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex: none;
        color: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.025);
      }
      .outcome-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .outcome-card h3 {
        color: #fff;
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.25px;
      }
      html[lang="ru"] .outcome-card h3 {
        font-family: "Oranienbaum", Georgia, serif;
        letter-spacing: -0.35px;
      }
      .outcome-card p {
        display: block;
        max-width: 360px;
        height: auto;
        margin-top: 7px;
        overflow: visible;
        color: rgba(255, 255, 255, 0.52);
        font-size: 14px;
        line-height: 1.55;
      }
      .outcome-visual {
        position: relative;
        z-index: 0;
        width: calc(100% + 96px);
        height: 360px;
        margin: 12px -48px -18px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(
          ellipse 78% 88% at 50% 48%,
          #000 38%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 78% 88% at 50% 48%,
          #000 38%,
          transparent 100%
        );
      }
      .outcome-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        background: radial-gradient(ellipse 72% 74% at 50% 52%, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.08) 76%, transparent 100%);
        pointer-events: none;
      }
      .outcome-visual canvas {
        position: relative;
        z-index: 1;
        display: block;
        width: 100% !important;
        height: 100% !important;
        opacity: 0.32;
        pointer-events: none;
        mix-blend-mode: normal;
        transition: opacity 0.5s ease;
      }
      .outcome-grid:has(.outcome-card:hover) + .outcome-visual canvas {
        opacity: 0.46;
      }
      .hero-h1 .thin {
        display: block;
        max-width: 1080px;
        margin-top: 0.14em;
        font-size: 0.58em;
        line-height: 1;
        letter-spacing: -1.8px;
      }
      .sales-heading-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 32px;
        margin-bottom: 52px;
      }
      .sales-heading-row .section-heading {
        margin-bottom: 0;
      }
      .sales-packages {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .sales-package-reveal {
        display: flex;
        min-width: 0;
      }
      .sales-package {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 26px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 22px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.018)
        );
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
        width: 100%;
        transition:
          transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.45s ease,
          background 0.45s ease,
          box-shadow 0.55s ease;
      }
      .sales-package--featured {
        border-color: rgba(255, 255, 255, 0.2);
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.095),
          rgba(255, 255, 255, 0.028)
        );
      }
      .sales-package:hover {
        transform: translateY(-3px) scale(1.007);
        border-color: rgba(255, 255, 255, 0.17);
        box-shadow: 0 23px 60px rgba(0, 0, 0, 0.25);
        z-index: 2;
      }
      .sales-package--featured::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.72),
          transparent
        );
      }
      .sales-package-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 36px;
      }
      .sales-package-kicker {
        font-size: 11px;
        letter-spacing: 1.7px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.48);
      }
      .sales-package-time {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.64);
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
      }
      .sales-package h3 {
        color: #fff;
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 34px;
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.8px;
      }
      .sales-package > p {
        min-height: 68px;
        margin-top: 14px;
        color: rgba(255, 255, 255, 0.54);
        font-size: 14px;
        line-height: 1.65;
      }
      .sales-package ul {
        display: grid;
        gap: 0;
        margin: 24px 0 30px;
        list-style: none;
      }
      .sales-package li {
        position: relative;
        min-height: 36px;
        display: flex;
        align-items: center;
        padding: 8px 0 8px 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        line-height: 1.45;
      }
      .sales-package li:last-child {
        border-bottom: 0;
      }
      .sales-package li::before {
        position: absolute;
        left: 1px;
        top: 50%;
        width: 15px;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-align: center;
      }
      .sales-package li.is-included::before {
        content: "✓";
        color: rgba(99, 217, 154, 0.9);
      }
      .sales-package li.is-excluded {
        color: rgba(255, 255, 255, 0.4);
      }
      .sales-package li.is-excluded::before {
        content: "×";
        color: rgba(214, 108, 116, 0.82);
        font-size: 15px;
        font-weight: 500;
      }
      .sales-package-price {
        margin-top: 0;
        flex: 1;
        color: #fff;
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 34px;
        font-weight: 400;
        letter-spacing: -0.7px;
      }
      .sales-package-price span {
        color: rgba(255, 255, 255, 0.38);
        font-family: "Geist", sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .sales-package button {
        width: 100%;
        margin-top: 18px;
        padding: 14px 18px;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: var(--control-highlight);
        font:
          500 13px "Geist",
          sans-serif;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.3s ease,
          border-color 0.3s ease,
          color 0.3s ease;
      }
      .sales-package button:hover {
        background: #f3f3f1;
        color: #09090b;
        border-color: #f3f3f1;
        transform: translateY(-1px);
      }
      .sales-package button:active {
        transform: scale(0.985);
      }

      .sales-addon {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr;
        align-items: flex-start;
        gap: 0 18px;
        min-height: 154px;
        margin: 22px 0 0;
        padding: 26px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 20px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.018)
        );
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.4s ease,
          background 0.4s ease,
          box-shadow 0.5s ease;
      }
      .sales-addon:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.17);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
      }
      .sales-addon-header-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 0;
        grid-column: 1 / -1;
      }
      .sales-addon-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        flex: none;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 13px;
        overflow: hidden;
        background: #090a0d;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .sales-addon-icon.desktop-fixed {
        position: absolute;
        top: 26px;
        right: 26px;
      }
      .sales-addon-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        filter: grayscale(1) contrast(1.7) brightness(0.82);
      }
      .sales-addon-body {
        min-width: 0;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        align-self: start;
        margin-top: 17px;
        padding-right: 34px;
      }
      .sales-addon-badge {
        display: inline-block;
        padding: 0;
        border: none;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.48);
        font-size: 11px;
        letter-spacing: 1.7px;
        text-transform: uppercase;
        white-space: nowrap;
        background: transparent;
        margin: 4px 0 2px 0;
      }
      .sales-addon h3 {
        color: #fff;
        font:
          400 26px/1.08 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -0.55px;
        margin: 0 0 12px;
      }
      html[lang="ru"] .sales-addon h3 {
        font-family: "Oranienbaum", Georgia, serif;
        letter-spacing: -0.65px;
      }
      .sales-addon p {
        max-width: 650px;
        margin: 0;
        color: rgba(255, 255, 255, 0.54);
        font-size: 14px;
        line-height: 1.7;
      }
      .sales-addon-action {
        display: flex;
        align-items: stretch;
        gap: 8px;
        flex: none;
        min-width: 390px;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: end;
        margin-top: 17px;
      }
      .sales-addon-price-toggle {
        display: inline-flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 12px 18px;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: var(--control-highlight);
        font:
          500 13px "Geist",
          sans-serif;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.25s ease,
          border-color 0.25s ease,
          color 0.25s ease;
      }
      .sales-addon-toggle-icon {
        position: relative;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        transform: translateY(1px);
        transition:
          top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .sales-addon-toggle-icon::before,
      .sales-addon-toggle-icon::after {
        content: "";
        position: absolute;
        top: 9px;
        width: 8px;
        height: 1.4px;
        border-radius: 2px;
        background: currentColor;
        transition:
          top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .sales-addon-toggle-icon::before {
        left: 1px;
        transform: rotate(40deg);
        transform-origin: right center;
      }
      .sales-addon-toggle-icon::after {
        right: 1px;
        transform: rotate(-40deg);
        transform-origin: left center;
      }
      .sales-addon.price-open .sales-addon-toggle-icon {
        transform: translateY(-1px);
      }
      .sales-addon.price-open .sales-addon-toggle-icon::before {
        top: 5px;
        transform: rotate(-40deg);
      }
      .sales-addon.price-open .sales-addon-toggle-icon::after {
        top: 5px;
        transform: rotate(40deg);
      }
      .sales-addon-price-toggle:hover {
        background: #f3f3f1;
        color: #09090b;
        border-color: #f3f3f1;
        transform: translateY(-1px);
      }
      .sales-addon-cta {
        min-height: 46px;
        padding: 12px 18px;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: var(--control-highlight);
        font:
          500 13px "Geist",
          sans-serif;
        white-space: nowrap;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.3s ease,
          border-color 0.3s ease,
          color 0.3s ease;
      }
      .sales-addon-cta {
        flex: 1;
      }
      .sales-addon-cta:hover {
        background: #f3f3f1;
        color: #09090b;
        border-color: #f3f3f1;
        transform: translateY(-1px);
      }
      .sales-addon-cta:active {
        transform: scale(0.985);
      }
      .sales-addon-price-details {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        opacity: 0;
        transition:
          grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          margin-top 0.4s ease,
          opacity 0.3s ease;
      }
      .sales-addon.price-open .sales-addon-price-details {
        grid-template-rows: 1fr;
        margin-top: 7px;
        opacity: 1;
      }
      .sales-addon-price-inner {
        overflow: hidden;
      }
      .sales-addon-details-grid {
        display: grid;
        grid-template-columns: 1.35fr 0.65fr;
        gap: 36px;
        padding-top: 20px;
        border-top: 0;
      }
      .sales-addon-details-label {
        display: block;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.42);
        font-size: 10px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
      }
      .sales-addon-details-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(32px, auto));
        gap: 0 18px;
        list-style: none;
      }
      .sales-addon-details-list li {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 32px;
        padding: 6px 0 6px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.63);
        font-size: 12.5px;
        line-height: 1.45;
      }
      .sales-addon-details-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: rgba(99, 217, 154, 0.85);
      }
      .sales-addon-price-list {
        display: grid;
        grid-template-rows: repeat(3, minmax(32px, auto));
      }
      .sales-addon-price-list div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 32px;
        gap: 16px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.63);
        font-size: 12.5px;
        line-height: 1.45;
      }
      .sales-addon-price-list strong {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        white-space: nowrap;
      }
      .sales-addon-price-list .sales-addon-budget-note {
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.63) !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
      }
      .sales-addon-price-list .sales-addon-budget-note strong {
        color: rgba(255, 255, 255, 0.58);
      }
      .sales-addon-details-list li:nth-last-child(-n + 2),
      .sales-addon-price-list div:last-child {
        border-bottom: 0;
      }

      .sales-price-note {
        width: 100%;
        max-width: none;
        margin: 28px auto 0;
        color: rgba(255, 255, 255, 0.46);
        font-size: 13px;
        line-height: 1.6;
        text-align: center;
        white-space: nowrap;
      }

      .sales-process-section {
        padding: 140px 48px;
      }
      .sales-process-section .section-inner {
        display: block;
      }
      .sales-process-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        background: transparent;
      }
      .sales-process-step {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 26px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 20px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.018)
        );
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.4s ease,
          background 0.4s ease,
          box-shadow 0.5s ease;
      }
      .sales-process-step:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.17);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
      }
      .sales-process-step > span:not(.lumina-layer) {
        min-width: 48px;
        color: rgba(255, 255, 255, 0.22);
        font:
          400 44px/0.86 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -1.5px;
      }
      .sales-process-step .process-time {
        display:inline-block;
        margin-top:12px;
        padding:5px 9px;
        border:1px solid rgba(255,255,255,.09);
        border-radius:8px;
        color:var(--type-gray);
        background:rgba(255,255,255,.035);
        font:400 12px/1.4 var(--font-interface);
      }
      .sales-process-step h3 {
        color: #fff;
        font-family: "Instrument Serif", "Oranienbaum", Georgia, serif;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.5px;
        margin: 0;
      }
      .sales-process-step p {
        max-width: none;
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.52);
        font-size: 14px;
        line-height: 1.65;
      }

      .project-meta-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
      }
      .project-estimate {
        flex: none;
        text-align: right;
        line-height: 1.15;
        transform: translateY(-3px);
      }
      .project-estimate span {
        display: block;
        color: rgba(255, 255, 255, 0.4);
        font-size: 11px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
      }
      .project-estimate strong {
        display: block;
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
      }
      .project-duration {
        display: none;
      }

      .project-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
      }
      .project-actions .project-demo,
      .project-details {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 12px;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        font:
          500 12px/1.2 "Geist",
          sans-serif;
        letter-spacing: 0;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: var(--control-highlight);
        transition:
          transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.25s ease,
          border-color 0.25s ease,
          color 0.25s ease;
      }
      .project-details {
        background: rgba(255, 255, 255, 0.02);
        color: rgba(255, 255, 255, 0.66);
      }
      .project-actions .project-demo {
        padding: 9px 12px;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.05);
      }
      .project-actions button svg {
        width: 15px;
        height: 15px;
        flex: none;
      }
      .project-details svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .project-details:hover,
      .project-actions .project-demo:hover {
        background: #f3f3f1;
        border-color: #f3f3f1;
        color: #09090b;
        transform: translateY(-1px);
      }
      .project-actions button:active {
        transform: scale(0.985);
      }
      body.light .project-details {
        background: rgba(0, 0, 0, 0.025);
        border-color: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.62);
      }
      body.light .project-actions .project-demo {
        background: rgba(0, 0, 0, 0.82);
        border-color: rgba(0, 0, 0, 0.82);
        color: #fff;
      }
      .case-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(2, 2, 3, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .case-modal.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .case-modal.closing {
        opacity: 0;
        pointer-events: none;
        transition-duration: 0.38s;
      }
      .case-modal-window {
        position: relative;
        display: grid;
        grid-template-rows: minmax(160px, 260px) auto;
        width: min(880px, 100%);
        height: auto;
        max-height: calc(100svh - 72px);
        overflow: hidden;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 26px;
        background: linear-gradient(145deg, #111115, #08080b);
        box-shadow: 0 38px 120px rgba(0, 0, 0, 0.55);
        transform: translateY(18px) scale(0.985);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .case-modal.open .case-modal-window {
        transform: none;
      }
      .case-modal-close {
        position: absolute;
        z-index: 2;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        background: rgba(8, 8, 11, 0.48);
        color: #fff;
        cursor: pointer;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .case-modal-close svg {
        width: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
      }
      .case-modal-content {
        min-height: 0;
        padding: 30px 36px 34px;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
        grid-template-areas: "kicker facts" "title facts" "lead tech" "story actions";
        grid-template-rows: auto auto auto auto;
        column-gap: 32px;
        align-content: start;
      }
      .case-modal-kicker {
        color: rgba(255, 255, 255, 0.42);
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .case-modal-kicker {
        grid-area: kicker;
      }
      .case-modal h2 {
        grid-area: title;
        max-width: 620px;
        margin-top: 12px;
        color: #fff;
        font:
          400 clamp(38px, 5vw, 58px) / 0.98 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -1px;
      }
      .case-modal-media {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        background: #111116;
      }
      .case-modal-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .case-modal-lead {
        grid-area: lead;
        max-width: 650px;
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 16px;
        line-height: 1.62;
      }
      .case-modal-facts {
        grid-area: facts;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        align-self: start;
      }
      .case-modal-facts .case-fact:nth-child(3) {
        display: none;
      }
      .case-fact {
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.035);
      }
      .case-fact span {
        display: block;
        color: rgba(255, 255, 255, 0.43);
        font-size: 10px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
      }
      .case-fact strong {
        display: block;
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.38;
        overflow-wrap: normal;
        word-break: normal;
      }
      .case-fact--time strong {
        display: flex;
        align-items: baseline;
        gap: 7px;
      }
      .case-fact .case-time-number {
        color: #fff;
        font:
          400 30px/1 "Instrument Serif",
          "Oranienbaum",
          Georgia,
          serif;
        letter-spacing: -0.4px;
        text-transform: none;
      }
      .case-fact .case-time-unit {
        color: rgba(255, 255, 255, 0.62);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
      }
      .case-modal-tech {
        grid-area: tech;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-top: 20px;
      }
      .case-modal-tech-label {
        flex: none;
        color: rgba(255, 255, 255, 0.43);
        font-size: 10px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
      }
      .case-modal-tech-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .case-modal-tech-list span {
        padding: 8px 11px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.78);
        font-size: 12.5px;
        line-height: 1;
      }
      .case-modal-estimate {
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-top: 12px;
      }
      .case-modal-estimate span {
        color: rgba(255, 255, 255, 0.43);
        font-size: 10px;
        line-height: 1.25;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .case-modal-estimate strong {
        flex: none;
        color: rgba(255, 255, 255, 0.9);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
      }
      .case-modal-story {
        grid-area: story;
        min-height: 0;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
      }
      .case-modal-story h3 {
        color: #fff;
        font-size: 15.5px;
        font-weight: 500;
      }
      .case-modal-story p {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 15px;
        line-height: 1.62;
      }
      .case-modal-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        gap: 8px;
        margin-top: auto;
        padding-top: 0;
        border: 0;
      }
      .case-modal-action {
        min-width: 190px;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 20px;
        border: 1px solid var(--control-border);
        border-radius: 13px;
        background: #f3f3f1;
        color: #09090b;
        font:
          500 15px "Geist",
          sans-serif;
        cursor: pointer;
        box-shadow: var(--control-highlight);
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.3s ease,
          border-color 0.3s ease;
      }
      .case-modal-action:hover {
        transform: translateY(-1px);
        background: #fff;
        border-color: #fff;
      }
      .case-modal-action:active {
        transform: scale(0.985);
      }
      .case-modal-action svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .case-modal-design-action {
        min-width: 170px;
        background: rgba(255, 255, 255, 0.045);
        border-color: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.78);
      }
      .case-modal-design-action:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.1);
        color: #fff;
      }

      @media (min-width: 769px) and (max-height: 840px) {
        .case-modal-window {
          grid-template-rows: 200px auto;
          width: min(880px, 100%);
        }
        .case-modal-content {
          padding: 20px 28px 22px;
          grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
          column-gap: 26px;
        }
        .case-modal-kicker {
          font-size: 10px;
        }
        .case-modal h2 {
          margin-top: 9px;
          font-size: 52px;
        }
        .case-modal-lead {
          margin-top: 10px;
          font-size: 14.5px;
          line-height: 1.5;
        }
        .case-fact {
          padding: 12px;
        }
        .case-fact span {
          font-size: 9.5px;
        }
        .case-fact strong {
          margin-top: 6px;
          font-size: 12.5px;
        }
        .case-modal-tech {
          margin-top: 15px;
          gap: 7px;
        }
        .case-modal-tech-label {
          font-size: 9.5px;
        }
        .case-modal-tech-list {
          gap: 6px;
        }
        .case-modal-tech-list span {
          padding: 7px 10px;
          font-size: 12px;
        }
        .case-modal-estimate {
          margin-top: 9px;
        }
        .case-modal-estimate span {
          font-size: 9.5px;
        }
        .case-modal-estimate strong {
          font-size: 14px;
        }
        .case-modal-story {
          margin-top: 11px;
          padding-top: 11px;
        }
        .case-modal-story h3 {
          font-size: 14px;
        }
        .case-modal-story p {
          margin-top: 6px;
          font-size: 13.2px;
          line-height: 1.48;
        }
        .case-modal-actions {
          justify-content: flex-end;
          margin-top: auto;
        }
        .case-modal-action {
          min-height: 52px;
          padding: 12px 18px;
          font-size: 14px;
        }
      }

      .sales-faq-section {
        padding: 140px 48px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .sales-faq-list {
        width: 100%;
        margin: 0;
        padding: 0 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .sales-faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .sales-faq-item > button {
        width: 100%;
        min-height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 20px 4px;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.88);
        font:
          400 17px "Geist",
          sans-serif;
        text-align: left;
        cursor: pointer;
      }
      .sales-faq-item > button i {
        position: relative;
        width: 30px;
        height: 30px;
        flex: none;
        color: rgba(255, 255, 255, 0.58);
        transition: color 0.25s ease;
      }
      .sales-faq-item > button:hover i {
        color: rgba(255, 255, 255, 0.9);
      }
      .sales-faq-item > button i::before,
      .sales-faq-item > button i::after {
        content: "";
        position: absolute;
        top: 16px;
        width: 10px;
        height: 1.4px;
        border-radius: 2px;
        background: currentColor;
        transition:
          top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .sales-faq-item > button i::before {
        left: 6px;
        transform: rotate(40deg);
        transform-origin: right center;
      }
      .sales-faq-item > button i::after {
        right: 6px;
        transform: rotate(-40deg);
        transform-origin: left center;
      }
      .sales-faq-item.open > button i::before {
        top: 11px;
        transform: rotate(-40deg);
      }
      .sales-faq-item.open > button i::after {
        top: 11px;
        transform: rotate(40deg);
      }
      .sales-faq-panel {
        height: 0;
        overflow: hidden;
        transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .sales-faq-panel p {
        max-width: 900px;
        padding: 0 52px 24px 4px;
        color: rgba(255, 255, 255, 0.55);
        font-size: 14px;
        line-height: 1.65;
        opacity: 0;
        transform: translateY(-6px);
        transition:
          opacity 0.35s ease,
          transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .sales-faq-item.open .sales-faq-panel p {
        opacity: 1;
        transform: none;
      }

      body.light .sales-package {
        background: var(--card);
        border-color: var(--border);
      }
      body.light .outcome-card {
        background: var(--card);
        border-color: var(--border);
      }
      body.light .outcome-card h3 {
        color: var(--fg);
      }
      body.light .outcome-card p,
      body.light .outcome-lead {
        color: var(--fg2);
      }
      body.light .outcome-visual {
        background: transparent;
      }
      body.light .outcome-visual canvas {
        filter: invert(1);
        mix-blend-mode: multiply;
        opacity: 0.18;
      }
      body.light .outcome-visual::after {
        background:
          linear-gradient(
            to right,
            var(--bg) 0,
            rgba(247, 247, 245, 0.82) 5%,
            transparent 19%,
            transparent 81%,
            rgba(247, 247, 245, 0.82) 95%,
            var(--bg) 100%
          ),
          linear-gradient(
            to bottom,
            rgba(247, 247, 245, 0.72) 0,
            transparent 20%,
            transparent 74%,
            rgba(247, 247, 245, 0.78) 100%
          );
      }
      body.light .outcome-icon {
        color: var(--fg2);
        border-color: var(--border2);
        background: rgba(0, 0, 0, 0.015);
      }
      body.light .sales-package h3,
      body.light .sales-package-price,
      body.light .sales-process-step h3,
      body.light .sales-faq-item > button {
        color: var(--fg);
      }
      body.light .sales-package > p,
      body.light .sales-package li,
      body.light .sales-price-note,
      body.light .sales-process-step p,
      body.light .sales-faq-list p {
        color: var(--fg2);
      }
      body.light .sales-package li {
        border-bottom-color: rgba(23, 33, 43, 0.08);
      }
      body.light .sales-package li.is-excluded {
        color: rgba(23, 33, 43, 0.32);
      }
      body.light .sales-package li.is-included::before {
        color: #24935d;
      }
      body.light .sales-package li.is-excluded::before {
        color: #b94f58;
      }
      body.light .sales-process-step {
        background: #f5f5f2;
      }

      @media (max-width: 768px) {
        .section-outcome {
          padding: 76px 20px 38px !important;
        }
        .section-outcome + .section-whatwedo {
          padding-top: 44px !important;
        }
        .outcome-heading {
          grid-template-columns: 1fr;
          gap: 18px;
        }
        .outcome-heading .section-heading {
          margin-bottom: 0;
        }
        .outcome-lead {
          padding: 0;
          font-size: 14px;
          line-height: 1.62;
        }
        .outcome-grid {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 32px;
        }
        .outcome-card {
          min-height: 98px;
          padding: 15px 16px;
          column-gap: 12px;
          border-radius: 18px;
        }
        .outcome-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
        }
        .outcome-icon svg {
          width: 19px;
          height: 19px;
        }
        .outcome-card h3 {
          font-size: 20px;
        }
        .outcome-card p {
          height: auto;
          margin-top: 5px;
          overflow: visible;
          font-size: 13.5px;
          line-height: 1.55;
        }
        .outcome-visual {
          display: none;
        }
        .hero-h1 .thin {
          font-size: 0.64em;
          line-height: 1.04;
          letter-spacing: -0.35px;
        }
        .sales-heading-row {
          align-items: flex-start;
          flex-direction: column;
          gap: 18px;
          margin-bottom: 32px;
        }
        .sales-packages {
          grid-template-columns: 1fr;
          gap: 14px;
        }
        .sales-package,
        .sales-package--featured {
          min-height: 0;
          padding: 21px;
          border-radius: 18px;
        }
        .sales-package:hover,
        .sales-package--featured:hover {
          transform: none;
        }
        .sales-package-top {
          margin-bottom: 26px;
        }
        .sales-package h3 {
          font-size: 30px;
        }
        .sales-package > p {
          min-height: 0;
        }
        .sales-package-price {
          font-size: 31px;
        }
        .sales-package button {
          min-height: 48px;
        }
        .sales-addon {
          display: flex;
          flex-direction: column;
          gap: 0;
          min-height: 0;
          padding: 18px;
          border-radius: 18px;
        }
        .sales-addon:hover {
          transform: none;
        }
        .sales-addon-icon {
          width: 42px;
          height: 42px;
        }
        .sales-addon-header-row {
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 10px;
          margin-bottom: 3px;
        }
        .sales-addon h3 {
          font-size: 28px;
        }
        .sales-addon-body {
          margin-top: 13px;
          padding-right: 0;
        }
        .sales-addon p {
          max-width: 100%;
          margin-top: 8px;
          font-size: 14px;
          line-height: 1.65;
        }
        .sales-addon-action {
          width: 100%;
          min-width: 0;
          margin-top: 16px;
        }
        .sales-addon-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 6px 12px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 999px;
          color: rgba(255, 255, 255, 0.68);
          font-size: 12px;
          text-transform: uppercase;
          white-space: nowrap;
          background: rgba(255, 255, 255, 0.05);
          margin: 0;
        }
        .sales-addon-icon {
          position: static;
        }
        .sales-addon-cta {
          min-height: 48px;
          padding: 12px 16px;
        }
        .sales-addon-price-toggle {
          min-height: 48px;
          flex: 1;
        }
        .sales-addon-price-details {
          width: 100%;
        }
        .sales-addon-details-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .sales-addon-details-grid {
          border-top: 0;
        }
        .sales-addon-details-list {
          grid-template-columns: 1fr;
          grid-template-rows: none;
          gap: 7px;
        }
        .sales-addon-details-list li {
          min-height: 0;
          padding: 0 0 0 14px;
          border: 0;
          font-size: 12.5px;
          line-height: 1.42;
        }
        .sales-addon-details-list li::before {
          display: block;
          content: "";
          top: 0.58em;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.48);
        }
        .sales-addon-price-list {
          gap: 7px;
        }
        .sales-addon-price-list div {
          min-height: 0;
          padding: 0;
          border: 0;
        }
        .sales-price-note {
          max-width: 680px;
          font-size: 13px;
          white-space: normal;
        }
        .sales-process-section,
        .sales-faq-section {
          padding: 72px 20px !important;
        }
        .sales-process-grid {
          grid-template-columns: 1fr;
          border-radius: 18px;
        }
        .sales-process-grid {
          gap: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 0;
        }
        .sales-process-step {
          min-height: 0;
          padding: 20px 2px;
          gap: 10px;
          border: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }
        .sales-process-step:last-child {
          border-bottom: 0;
        }
        .sales-process-step:hover {
          transform: none;
          border-color: rgba(255, 255, 255, 0.08);
          background: transparent;
          box-shadow: none;
        }
        .sales-process-step > span:not(.lumina-layer) {
          width: 44px;
          min-width: 44px;
          flex: 0 0 44px;
          font-size: 40px;
          line-height: 0.9;
          letter-spacing: -1px;
        }
        .sales-process-step h3 {
          font-size: 20px;
        }
        .sales-process-step p {
          margin-top: 8px;
          font-size: 13.5px;
          line-height: 1.6;
        }
        .project-actions {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
        }
        .project-actions .project-demo,
        .project-details {
          min-height: 44px;
          padding: 8px 10px;
          border-radius: 13px;
          font-size: 12.5px;
        }
        .case-modal {
          padding: 32px 16px;
        }
        .case-modal-window {
          width: 100%;
          height: auto;
          max-height: calc(100svh - 64px);
          grid-template-rows: clamp(120px, 26svh, 220px) auto;
          padding: 0;
          border-radius: 20px;
        }
        .case-modal.open .case-modal-window {
          touch-action: none;
          will-change: transform, opacity;
        }
        .case-modal.open .case-modal-window.case-swipe-dismiss {
          pointer-events: none;
        }
        .case-modal.open .case-modal-window.case-entering {
          animation: case-card-enter 0.72s cubic-bezier(0.2, 0.82, 0.24, 1) both;
        }
        @keyframes case-card-enter {
          0% {
            opacity: 0;
            transform: translate3d(0, 24px, 0) scale(0.94) rotate(-1.15deg);
          }
          44% {
            opacity: 1;
            transform: translate3d(0, -5px, 0) scale(1.012) rotate(0.42deg);
          }
          68% {
            transform: translate3d(0, 2px, 0) scale(0.997) rotate(-0.2deg);
          }
          84% {
            transform: translate3d(0, -1px, 0) scale(1.002) rotate(0.08deg);
          }
          100% {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1) rotate(0);
          }
        }
        .case-modal-close {
          top: 16px;
          right: 16px;
          width: 36px;
          height: 36px;
        }
        .case-modal-content {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          min-height: 0;
          padding: 16px 16px 15px;
          overflow: hidden;
        }
        .case-modal-kicker {
          padding-right: 0;
          font-size: 9px;
          line-height: 1.2;
          letter-spacing: 1.35px;
        }
        .case-modal h2 {
          margin-top: 9px;
          padding-right: 0;
          font-size: 32px;
          line-height: 0.96;
        }
        .case-modal-media {
          border: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 0;
        }
        .case-modal-lead {
          display: block;
          margin-top: 12px;
          overflow: visible;
          font-size: 14.5px;
          line-height: 1.48;
        }
        .case-modal-facts {
          align-self: stretch;
          display: grid;
          grid-template-columns: 1fr;
          gap: 0;
          margin-top: 12px;
          padding: 3px 0;
          border-top: 1px solid rgba(255, 255, 255, 0.075);
          border-bottom: 1px solid rgba(255, 255, 255, 0.075);
        }
        .case-fact {
          min-width: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          padding: 7px 0;
          border: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 0;
          background: transparent;
        }
        .case-modal-facts .case-fact:nth-child(3) {
          display: flex;
        }
        .case-fact:first-child {
          padding-left: 0;
          border-left: 0;
        }
        .case-fact:last-child {
          padding-right: 0;
          border-bottom: 0;
        }
        .case-fact span {
          flex: 0 0 auto;
          font-size: 10px;
          line-height: 1.2;
          letter-spacing: 0.65px;
        }
        .case-fact strong {
          margin-top: 0;
          max-width: 62%;
          font-size: 14px;
          line-height: 1.25;
          text-align: right;
          overflow-wrap: anywhere;
        }
        .case-fact--time strong {
          justify-content: flex-end;
          gap: 4px;
        }
        .case-fact .case-time-number {
          font: inherit;
          letter-spacing: 0;
        }
        .case-fact .case-time-unit {
          color: inherit;
          font: inherit;
        }
        .case-modal-tech {
          flex: none;
          align-items: center;
          flex-direction: row;
          gap: 8px;
          margin-top: 10px;
        }
        .case-modal-tech-label {
          font-size: 8px;
          letter-spacing: 0.85px;
        }
        .case-modal-tech-list {
          gap: 5px;
        }
        .case-modal-tech-list span {
          padding: 5px 7px;
          font-size: 10.5px;
        }
        .case-modal-estimate {
          display: none;
        }
        .case-modal-story {
          flex: 0 0 auto;
          min-height: 0;
          margin-top: 10px;
          padding-top: 10px;
        }
        .case-modal-story h3 {
          display: block;
          font-size: 12px;
        }
        .case-modal-story p {
          margin-top: 6px;
          font-size: 13px;
          line-height: 1.47;
        }
        .case-modal-actions {
          flex: none;
          flex-direction: row;
          justify-content: flex-start;
          margin-top: 12px;
          padding-top: 0;
          border: 0;
        }
        .case-modal-action {
          flex: 1 1 0;
          width: auto;
          min-width: 0;
          min-height: 42px;
          padding: 9px 8px;
          gap: 6px;
          font-size: 11px;
        }
        .case-modal-design-action {
          min-width: 0;
        }
        @media (max-height: 880px) {
          .case-modal-window {
            grid-template-rows: 208px auto;
          }
        }
        @media (max-height: 720px) {
          .case-modal {
            padding: 24px 14px;
          }
          .case-modal-window {
            height: auto;
            max-height: calc(100svh - 48px);
            grid-template-rows: 160px auto;
          }
          .case-modal-close {
            top: 14px;
          }
          .case-modal-content {
            padding: 10px 14px 11px;
          }
          .case-modal-kicker {
            font-size: 8px;
          }
          .case-modal h2 {
            margin-top: 7px;
            font-size: 29px;
          }
          .case-modal-lead {
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.35;
          }
          .case-modal-facts {
            margin-top: 6px;
            padding: 2px 0;
          }
          .case-fact {
            padding: 4px 0;
          }
          .case-fact span {
            font-size: 6.8px;
          }
          .case-fact strong {
            font-size: 10px;
          }
          .case-modal-tech {
            margin-top: 6px;
          }
          .case-modal-tech-list span {
            padding: 4px 6px;
            font-size: 9px;
          }
          .case-modal-story {
            margin-top: 6px;
            padding-top: 6px;
          }
          .case-modal-story h3 {
            font-size: 11px;
          }
          .case-modal-story p {
            margin-top: 4px;
            font-size: 10.5px;
            line-height: 1.34;
          }
          .case-modal-actions {
            margin-top: 8px;
          }
          .case-modal-action {
            min-height: 38px;
          }
        }
        @media (max-height: 620px) {
          .case-modal {
            padding: 16px 10px;
          }
          .case-modal-window {
            height: auto;
            max-height: calc(100svh - 32px);
            grid-template-rows: 120px auto;
          }
          .case-modal-close {
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
          }
          .case-modal-content {
            padding: 7px 11px 8px;
          }
          .case-modal-kicker {
            font-size: 7px;
          }
          .case-modal h2 {
            margin-top: 5px;
            font-size: 25px;
          }
          .case-modal-lead {
            margin-top: 6px;
            font-size: 10.5px;
            line-height: 1.27;
          }
          .case-modal-facts {
            margin-top: 4px;
            padding: 1px 0;
          }
          .case-fact {
            padding: 3px 0;
          }
          .case-fact span {
            font-size: 6px;
          }
          .case-fact strong {
            font-size: 9px;
          }
          .case-modal-tech {
            margin-top: 4px;
            gap: 5px;
          }
          .case-modal-tech-label {
            font-size: 6px;
          }
          .case-modal-tech-list {
            gap: 3px;
          }
          .case-modal-tech-list span {
            padding: 3px 5px;
            font-size: 8px;
          }
          .case-modal-story {
            margin-top: 4px;
            padding-top: 4px;
          }
          .case-modal-story h3 {
            font-size: 9.5px;
          }
          .case-modal-story p {
            margin-top: 3px;
            font-size: 9.2px;
            line-height: 1.22;
          }
          .case-modal-actions {
            margin-top: 6px;
            padding-top: 0;
            gap: 5px;
          }
          .case-modal-action {
            min-height: 34px;
            padding: 6px 5px;
            font-size: 9px;
          }
        }
        .sales-faq-list {
          padding: 0 12px;
        }
        .sales-faq-item > button {
          min-height: 70px;
          padding: 18px 2px;
          font-size: 16px;
          line-height: 1.45;
        }
        .sales-faq-panel p {
          padding: 0 36px 22px 2px;
          font-size: 14px;
          line-height: 1.65;
        }

        .section-contact {
          padding: 72px 20px 64px !important;
        }
        .contact-wrap {
          grid-template-columns: minmax(0, 1fr);
          gap: 30px;
          max-width: 100%;
        }
        .contact-info {
          min-width: 0;
          padding-top: 0;
        }
        .contact-info .section-heading {
          max-width: 350px;
          margin-bottom: 20px;
          font-size: clamp(38px, 11vw, 48px);
        }
        .contact-lead {
          max-width: 100%;
          font-size: 15px;
          line-height: 1.65;
        }
        .contact-direct-label {
          margin-top: 28px;
        }
        .contact-methods {
          grid-template-columns: 1fr;
          margin-top: 12px;
          gap: 0;
        }
        .contact-method {
          min-width: 0;
          min-height: 60px;
          padding: 9px 8px;
          gap: 10px;
        }
        .contact-method-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
        }
        .contact-method-icon svg {
          width: 18px;
          height: 18px;
        }
        .contact-method-label {
          font-size: 11px;
        }
        .contact-method-val {
          display: block;
          max-width: none;
          overflow: visible;
          text-overflow: clip;
          font-size: 16px;
          line-height: 1.25;
          white-space: normal;
        }
        .contact-form {
          width: 100%;
          min-width: 0;
          gap: 14px;
          padding: 22px 18px 20px;
          border-radius: 20px;
        }
        .contact-form-intro {
          display: block;
        }
        .contact-form-title {
          font-size: 27px;
        }
        .contact-form-sub {
          font-size: 14px;
        }
        .contact-direct-label,
        .contact-method-label,
        .form-label {
          font-size: 10px;
          letter-spacing: 1.25px;
        }
        .form-input,
        .form-textarea {
          width: 100%;
          padding: 13px 14px;
        }
        .form-textarea {
          min-height: 120px;
        }
      }
      @media (max-width: 768px) {
        .projects-grid:not(.is-expanded) {
          align-items: flex-start;
        }
        .project-desc {
          display: -webkit-box;
          min-height: 0;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .project-bottom {
          display: grid;
          grid-template-columns: auto minmax(0, 1fr);
          align-items: end;
          margin-top: 0;
          gap: 16px;
        }
        .project-tags {
          display: none;
        }
        .project-meta-row {
          display: block;
          width: auto;
          padding: 0;
          border: 0;
        }
        .project-duration {
          display: none;
        }
        .project-estimate span {
          color: rgba(255, 255, 255, 0.38);
          font-size: 8.5px;
          letter-spacing: 0.85px;
          text-transform: uppercase;
        }
        .project-estimate strong {
          margin: 0;
          color: rgba(255, 255, 255, 0.9);
          font-size: 15px;
          font-weight: 500;
          line-height: 1.1;
        }
        .project-estimate {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 6px;
          min-width: 0;
          padding: 0;
          text-align: left;
          transform: none;
        }
        .project-actions {
          display: block;
          width: 100%;
        }
        .project-actions .project-demo {
          position: absolute;
          z-index: 4;
          /* Реальную высоту обложки подставляет JS, поэтому центр кнопки
             совпадает с границей фото в любом браузере. */
          top: calc(var(--project-thumb-height, 220px) - 23px);
          right: 14px;
          width: 46px;
          min-width: 46px;
          min-height: 46px;
          padding: 0;
          border-radius: 50%;
          background: rgba(12, 12, 15, 0.78);
          border-color: rgba(255, 255, 255, 0.17);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
        .project-actions .project-demo svg {
          display: block !important;
          width: 17px;
          height: 17px;
        }
        .project-actions .project-demo > span {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        .project-details {
          width: 100%;
          min-height: 46px;
        }
      }
      @media (max-width: 360px) {
        .project-estimate strong {
          font-size: 13px;
        }
      }
      @media (min-width: 769px) and (max-width: 1100px) {
        .sales-price-note {
          max-width: 760px;
          white-space: normal;
        }
      }

      /* ===== ФИНАЛЬНЫЕ НАСТРОЙКИ МОБИЛЬНОЙ ВЕРСИИ ===== */
      .diploma-thumb-btn {
        right: 10px;
        bottom: 10px;
      }
      .contact-methods {
        grid-template-columns: 1fr;
      }
      .contact-method--email {
        grid-column: auto;
      }
      .contact-method--email .contact-method-val {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
      }
      .contact-form {
        scroll-margin-top: 90px;
      }
      .mobile-menu-backdrop {
        display: none;
      }
      .sales-package-toggle {
        display: none !important;
      }
      .sales-package-details,
      .sales-package-details-inner {
        display: contents;
      }
      .sales-package-mobile-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: auto;
      }
      .sales-package-action-row {
        display: block;
      }
      .package-cta-short {
        display: none;
      }
      .contact-heading-mobile,
      .contact-lead-mobile {
        display: none;
      }

      @media (max-width: 768px) {
        body.mobile-menu-open {
          overflow: hidden;
        }
        .nav-brand {
          display: flex;
        }
        .nav,
        .nav.scrolled {
          background: transparent;
          border-color: transparent;
          box-shadow: none;
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
        .nav-hamburger {
          position: fixed;
          top: calc(12px + env(safe-area-inset-top));
          right: 12px;
          z-index: 102;
          width: 48px;
          height: 48px;
          padding: 14px;
          gap: 5px;
          border: 1px solid rgba(255, 255, 255, 0.055);
          border-radius: 50%;
          background: rgba(13, 13, 16, 0.72);
          box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
          -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
          transition:
            top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            right 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
        }
        .nav-hamburger span {
          width: 20px;
          transform-origin: center;
        }
        .nav-hamburger.open {
          top: calc(20px + env(safe-area-inset-top));
          right: 20px;
          width: 36px;
          height: 36px;
          padding: 8px;
          background: transparent;
          border-color: transparent;
          box-shadow: none;
        }
        .nav-hamburger,
        .nav-hamburger.anim-in,
        .nav-hamburger.anim-in.floating-visible,
        .nav-hamburger.anim-in.open {
          opacity: 1;
          pointer-events: auto;
          transform: none;
        }
        .mobile-menu-backdrop {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 89;
          border: 0;
          background: rgba(0, 0, 0, 0.42);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.35s ease;
        }
        .mobile-menu-backdrop.open {
          opacity: 1;
          pointer-events: auto;
        }
        .mobile-menu {
          display: flex;
          top: calc(12px + env(safe-area-inset-top));
          right: 12px;
          bottom: auto;
          left: auto;
          width: min(248px, calc(100vw - 24px));
          height: auto;
          padding: 12px;
          align-items: stretch;
          justify-content: flex-start;
          gap: 3px;
          border: 1px solid rgba(255, 255, 255, 0.055);
          border-radius: 19px;
          background: rgba(11, 11, 14, 0.92);
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
          opacity: 0;
          transform: scale(0.16, 0.11);
          transform-origin: top right;
          transition:
            transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.22s ease;
          -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
          overflow: hidden;
          z-index: 90;
        }
        .mobile-menu.open {
          opacity: 1;
          transform: scale(1);
          pointer-events: auto;
        }
        .mobile-menu-head {
          display: flex;
          align-items: center;
          min-height: 42px;
          padding: 0 46px 0 8px;
          margin-bottom: 4px;
        }
        .mobile-menu a {
          width: 100%;
          padding: 12px 14px;
          border-radius: 11px;
          color: rgba(255, 255, 255, 0.68);
          font-size: 17px;
          font-weight: 400;
          text-align: left;
          opacity: 0;
          transform: translateY(-7px);
          transition:
            color 0.2s ease,
            background 0.2s ease,
            opacity 0.28s ease,
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .mobile-menu.open a {
          opacity: 1;
          transform: none;
        }
        .mobile-menu.open a:nth-of-type(1) {
          transition-delay: 0.08s;
        }
        .mobile-menu.open a:nth-of-type(2) {
          transition-delay: 0.11s;
        }
        .mobile-menu.open a:nth-of-type(3) {
          transition-delay: 0.14s;
        }
        .mobile-menu.open a:nth-of-type(4) {
          transition-delay: 0.17s;
        }
        .mobile-menu.open a:nth-of-type(5) {
          transition-delay: 0.2s;
        }
        .mobile-menu.open a:nth-of-type(6) {
          transition-delay: 0.23s;
        }
        .mobile-menu.open a:nth-of-type(7) {
          transition-delay: 0.26s;
        }
        .mobile-menu a:hover,
        .mobile-menu a:focus-visible {
          color: #fff;
          background: rgba(255, 255, 255, 0.07);
        }
        .mobile-menu .mobile-cta {
          display: none;
        }
        .mobile-menu .lang-toggle {
          align-self: auto;
          margin: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease 0.1s;
        }
        .mobile-menu.open .lang-toggle {
          opacity: 1;
        }

        .sales-package,
        .sales-package--featured {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          column-gap: 12px;
          padding: 19px 16px 16px;
          border-radius: 17px;
        }
        .sales-package-top {
          display: contents;
        }
        .sales-package-kicker {
          display: none;
        }
        .sales-package-time {
          grid-column: 2;
          grid-row: 1;
          align-self: center;
          padding: 5px 9px;
          font-size: 11px;
        }
        .sales-package h3 {
          grid-column: 1;
          grid-row: 1;
          align-self: center;
          font-size: 24px;
        }
        .sales-package > p {
          display: -webkit-box;
          grid-column: 1 / -1;
          grid-row: 2;
          margin-top: 10px;
          overflow: hidden;
          font-size: 13px;
          line-height: 1.5;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .sales-package-mobile-row {
          display: grid;
          grid-column: 1 / -1;
          grid-row: 3;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: end;
          gap: 12px;
          margin-top: 17px;
        }
        .sales-package-toggle {
          position: relative;
          display: flex !important;
          align-items: center;
          justify-content: flex-start;
          width: 96px !important;
          min-width: 96px;
          min-height: 36px !important;
          margin: 0 !important;
          padding: 8px 32px 8px 8px !important;
          border-color: rgba(255, 255, 255, 0.085) !important;
          border-radius: 10px !important;
          background: rgba(255, 255, 255, 0.012) !important;
          color: rgba(255, 255, 255, 0.48) !important;
          font-size: 11.5px !important;
        }
        .sales-package-toggle span {
          width: 48px;
          text-align: right;
          white-space: nowrap;
        }
        .sales-package-toggle:hover {
          border-color: rgba(255, 255, 255, 0.11) !important;
          background: rgba(255, 255, 255, 0.025) !important;
          color: rgba(255, 255, 255, 0.62) !important;
          transform: none !important;
        }
        .sales-package-toggle i {
          position: absolute;
          top: 50%;
          right: 9px;
          width: 16px;
          height: 16px;
          transform: translateY(-50%);
        }
        .sales-package-toggle i::before,
        .sales-package-toggle i::after {
          content: "";
          position: absolute;
          top: 10px;
          width: 8px;
          height: 1.4px;
          border-radius: 2px;
          background: currentColor;
          transition:
            top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .sales-package-toggle i::before {
          left: 1px;
          transform: rotate(40deg);
          transform-origin: right center;
        }
        .sales-package-toggle i::after {
          right: 1px;
          transform: rotate(-40deg);
          transform-origin: left center;
        }
        .sales-package.details-open .sales-package-toggle i::before {
          top: 5px;
          transform: rotate(-40deg);
        }
        .sales-package.details-open .sales-package-toggle i::after {
          top: 5px;
          transform: rotate(40deg);
        }
        .sales-package-details {
          display: grid;
          grid-column: 1 / -1;
          grid-row: 4;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .sales-package.details-open .sales-package-details {
          grid-template-rows: 1fr;
        }
        .sales-package-details-inner {
          display: block;
          min-height: 0;
          overflow: hidden;
        }
        .sales-package ul {
          gap: 6px;
          margin: 14px 0 2px;
        }
        .sales-package li {
          font-size: 12.5px;
        }
        .sales-package-price {
          margin-top: 0;
          font-size: 28px;
        }
        .sales-package-action-row {
          display: none;
        }
        .sales-package .sales-package-cta {
          display: none;
        }
        .package-cta-long {
          display: none;
        }
        .package-cta-short {
          display: inline;
        }

        .section-contact {
          padding: 64px 20px 36px !important;
        }
        .contact-wrap {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        .contact-info {
          display: contents;
        }
        .contact-info .section-label {
          order: 1;
          margin-bottom: 18px;
        }
        .contact-info .section-heading {
          order: 2;
          max-width: 100%;
          margin-bottom: 16px;
          font-size: clamp(38px, 11vw, 48px);
        }
        .contact-heading-desktop {
          display: none;
        }
        .contact-heading-mobile {
          display: inline;
          color: #fff;
        }
        .contact-lead {
          order: 3;
        }
        .contact-lead-desktop {
          display: none;
        }
        .contact-lead-mobile {
          display: inline;
        }
        .contact-form {
          order: 4;
          height: auto;
          gap: 12px;
          margin-top: 22px;
          padding: 18px;
          scroll-margin-top: calc(70px + env(safe-area-inset-top));
        }
        .contact-form .form-field--message {
          flex: none;
        }
        .contact-form-intro {
          display: none;
        }
        .contact-direct-label {
          order: 5;
          margin-top: 30px;
        }
        .contact-methods {
          order: 6;
        }
        .contact-form-intro {
          gap: 8px;
          margin-bottom: 2px;
        }
        .contact-form-title {
          margin-bottom: 6px;
        }
        .form-textarea {
          min-height: 96px;
        }
        .form-files {
          gap: 8px;
        }
        .form-file-trigger {
          min-height: 40px;
          padding: 0 12px;
        }
        .form-file-summary {
          font-size: 10px;
        }
        .contact-form {
          padding-bottom: 12px;
        }
        .contact-form-note {
          margin-top: -7px;
          line-height: 1.4;
        }
        .contact-method-val {
          max-width: none;
          font-size: 18px;
          line-height: 1.2;
        }
        .contact-methods {
          width: 100%;
          gap: 0;
          overflow: visible;
          border: 0;
          border-radius: 0;
          background: transparent;
        }
        .contact-method {
          min-height: 64px;
          padding: 10px 8px;
          border: 0;
          border-radius: 0;
          background: transparent;
        }
        .contact-method + .contact-method {
          border-top: 1px solid rgba(255, 255, 255, 0.075);
        }
        .contact-method:hover {
          background: transparent;
        }
      }

      @media (max-width: 360px) {
        .contact-methods {
          grid-template-columns: 1fr;
        }
        .contact-method + .contact-method {
          border-top: 1px solid rgba(255, 255, 255, 0.075);
        }
      }

      @media (max-width: 768px) {
        /* В карусели масштаб должен следовать за пальцем без запаздывания.
         Плавность самого свайпа и остановку по центру обеспечивает scroll-snap. */
        .section-projects .projects-grid:not(.is-expanded) .project-card {
          transition-property:
            opacity, translate, transform, border-color, background, box-shadow;
          transition-duration: 0.62s, 0.62s, 0.38s, 0.24s, 0.24s, 0.28s;
          transition-timing-function:
            cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1),
            cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease;
        }

        .contact-direct-label {
          margin-top: 26px;
        }
        .contact-methods,
        body.light .contact-methods {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-template-rows: auto;
          gap: 0;
          margin-top: 12px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 18px;
          background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.018)
          );
          box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16);
        }
        .contact-method {
          min-height: 54px;
          padding: 8px 9px;
          gap: 8px;
          border: 0 !important;
          background: transparent;
        }
        .contact-method--email {
          grid-column: 1 / -1;
          border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
        }
        .contact-method--telegram,
        .contact-method--github {
          border-right: 1px solid rgba(255, 255, 255, 0.075) !important;
        }
        .contact-method--telegram,
        .contact-method--max {
          border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
        }
        .contact-method-icon {
          width: 30px;
          height: 30px;
          border-radius: 7px;
        }
        .contact-method-icon svg,
        .contact-method--max .contact-method-icon svg {
          width: 16px;
          height: 16px;
        }
        .contact-method-text {
          min-width: 0;
          gap: 3px;
        }
        .contact-method-label {
          font-size: 9px;
          letter-spacing: 0.8px;
        }
        .contact-method-val,
        .contact-method--email .contact-method-val {
          display: block;
          max-width: 100%;
          overflow: visible;
          text-overflow: clip;
          overflow-wrap: anywhere;
          white-space: normal;
          font-size: 13px;
          line-height: 1.25;
        }
        .contact-method:hover {
          transform: none;
          background: rgba(255, 255, 255, 0.035);
        }
        .diploma-thumb-btn {
          padding: 0;
          justify-content: center;
        }
        .diploma-thumb-btn svg {
          transform: translateX(4px);
        }
        .form-file-trigger {
          width: 40px;
          min-width: 40px;
          padding: 0;
          border-radius: 10px;
        }
        body.light .contact-methods {
          border-color: rgba(0, 0, 0, 0.1);
          background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0.4)
          );
        }
        body.light .contact-method--email,
        body.light .contact-method--telegram,
        body.light .contact-method--max,
        body.light .contact-method--github {
          border-color: rgba(0, 0, 0, 0.08) !important;
        }
      }

      .package-compare-open,
      .package-compare-modal {
        display: none;
      }

      @media (max-width: 768px) {
        .package-compare-open {
          width: 100%;
          min-height: 50px;
          margin-top: 18px;
          padding: 12px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border: 1px solid rgba(255, 255, 255, 0.14);
          border-radius: 14px;
          background: rgba(255, 255, 255, 0.055);
          color: rgba(255, 255, 255, 0.86);
          font:
            500 13px "Geist",
            sans-serif;
          cursor: pointer;
          transition:
            opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
            background 0.3s ease,
            border-color 0.3s ease,
            color 0.3s ease;
        }
        .package-compare-open:active {
          transform: scale(0.99);
          background: rgba(255, 255, 255, 0.075);
          border-color: rgba(255, 255, 255, 0.17);
          color: #fff;
        }
        .package-compare-open svg {
          width: 17px;
          height: 17px;
        }
        .package-compare-modal {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 1300;
          opacity: 0;
          pointer-events: none;
          overscroll-behavior: contain;
          transition: opacity 0.3s ease;
        }
        .package-compare-modal.open {
          opacity: 1;
          pointer-events: auto;
        }
        .package-compare-backdrop {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          padding: 0;
          border: 0;
          border-radius: 0;
          appearance: none;
          -webkit-appearance: none;
          background: rgba(0, 0, 0, 0.76);
          color: transparent;
          touch-action: none;
        }
        .package-compare-sheet {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% - 24px);
          max-width: 430px;
          max-height: calc(100svh - 28px);
          overflow: auto;
          overscroll-behavior: contain;
          touch-action: pan-y;
          padding: 24px 18px 18px;
          border: 1px solid rgba(255, 255, 255, 0.13);
          border-radius: 26px;
          background:
            radial-gradient(
              circle at 85% 0%,
              rgba(126, 139, 176, 0.1),
              transparent 34%
            ),
            linear-gradient(150deg, #131318, #08080b);
          box-shadow:
            0 34px 110px rgba(0, 0, 0, 0.64),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
          transform: translate(-50%, -46%) scale(0.98);
          transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
          scrollbar-width: thin;
          scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
        }
        .package-compare-modal.open .package-compare-sheet {
          transform: translate(-50%, -50%) scale(1);
        }
        .package-compare-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16px;
        }
        .package-compare-header .section-label {
          margin-bottom: 8px;
        }
        .package-compare-header h2 {
          max-width: 280px;
          color: #fff;
          font:
            400 36px/0.98 "Instrument Serif",
            "Oranienbaum",
            Georgia,
            serif;
          letter-spacing: -0.75px;
        }
        .package-compare-close {
          position: relative;
          z-index: 5;
          width: 38px;
          height: 38px;
          flex: none;
          display: grid;
          place-items: center;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.04);
          color: #fff;
          cursor: pointer;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        .package-compare-close svg {
          width: 15px;
          height: 15px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.6;
          stroke-linecap: round;
        }
        .package-compare-sub {
          max-width: 300px;
          margin-top: 10px;
          color: rgba(255, 255, 255, 0.52);
          font-size: 14px;
          line-height: 1.55;
        }
        .package-compare-table {
          margin-top: 20px;
          padding: 6px;
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 19px;
          background: rgba(255, 255, 255, 0.012);
          overflow: hidden;
        }
        .package-compare-row {
          min-height: 48px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) 52px 52px 52px;
          align-items: stretch;
          border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        }
        .package-compare-row:last-child {
          border-bottom: 0;
        }
        .package-compare-row > * {
          min-width: 0;
        }
        .package-compare-row > span {
          display: flex;
          align-items: center;
          padding: 10px;
          color: rgba(255, 255, 255, 0.75);
          font-size: 12.75px;
          line-height: 1.38;
        }
        .package-compare-row > strong {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.82);
          font-size: 11.5px;
          font-weight: 500;
          line-height: 1.15;
          text-align: center;
        }
        .package-compare-row > i {
          height: 100%;
          display: grid;
          place-items: center;
          font-style: normal;
          font-size: 16px;
        }
        .package-compare-row > *:nth-child(3) {
          background: rgba(255, 255, 255, 0.018);
        }
        .package-compare-row > i.yes {
          color: rgba(99, 217, 154, 0.92);
        }
        .package-compare-row > i.no {
          color: rgba(214, 108, 116, 0.84);
          font-size: 18px;
        }
        .package-compare-row--head {
          position: sticky;
          top: -18px;
          z-index: 2;
          min-height: 56px;
          margin-bottom: 2px;
          border: 0;
          border-radius: 13px;
          background: rgba(30, 30, 36, 0.97);
          box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
          -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
        }
        .package-compare-row--head > span {
          color: rgba(255, 255, 255, 0.4);
          font-size: 9.5px;
          letter-spacing: 0.65px;
          text-transform: uppercase;
        }
      }

      body.mobile-menu-open {
        overflow: hidden;
      }

      @media (min-width: 769px) {
        .mobile-menu .mobile-cta {
          display: none;
        }
        .nav-links {
          transition:
            opacity 0.35s ease,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        body.desktop-compact-nav .nav-links {
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
        }
        body.desktop-compact-nav .nav-brand {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transform: translateY(-8px);
        }
        body.desktop-compact-nav .nav,
        body.desktop-compact-nav .nav.scrolled {
          background: transparent;
          border-color: transparent;
          box-shadow: none;
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
        .nav-hamburger {
          display: flex;
          position: fixed;
          top: 20px;
          right: 24px;
          z-index: 102;
          width: 48px;
          height: 48px;
          padding: 14px;
          gap: 5px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 50%;
          background: rgba(13, 13, 16, 0.72);
          box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
          -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
          opacity: 0;
          pointer-events: none;
          transform: translateY(-10px) scale(0.94);
          transition:
            opacity 0.35s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
        }
        .nav-hamburger span {
          width: 20px;
          transform-origin: center;
        }
        .nav-hamburger.anim-in {
          opacity: 0;
          pointer-events: none;
          transform: translateY(-10px) scale(0.94);
        }
        .nav-hamburger.anim-in.floating-visible,
        .nav-hamburger.anim-in.open {
          opacity: 1;
          pointer-events: auto;
          transform: none;
        }
        .nav-hamburger.open {
          top: 28px;
          right: 32px;
          width: 36px;
          height: 36px;
          padding: 8px;
          background: transparent;
          border-color: transparent;
          box-shadow: none;
        }
        .mobile-menu-backdrop {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 89;
          border: 0;
          background: rgba(0, 0, 0, 0.38);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.35s ease;
        }
        .mobile-menu-backdrop.open {
          opacity: 1;
          pointer-events: auto;
        }
        .mobile-menu {
          display: flex;
          top: 20px;
          right: 24px;
          bottom: auto;
          left: auto;
          width: 260px;
          height: auto;
          padding: 12px;
          align-items: stretch;
          justify-content: flex-start;
          gap: 3px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 19px;
          background: rgba(11, 11, 14, 0.92);
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
          opacity: 0;
          transform: scale(0.16, 0.11);
          transform-origin: top right;
          transition:
            transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.22s ease;
          -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
          overflow: hidden;
          z-index: 90;
        }
        .mobile-menu.open {
          opacity: 1;
          transform: scale(1);
          pointer-events: auto;
        }
        .mobile-menu-head {
          display: flex;
          align-items: center;
          min-height: 42px;
          padding: 0 46px 0 8px;
          margin-bottom: 4px;
        }
        .mobile-menu a {
          width: 100%;
          padding: 12px 14px;
          border-radius: 11px;
          color: rgba(255, 255, 255, 0.68);
          font-size: 17px;
          font-weight: 400;
          text-align: left;
          opacity: 0;
          transform: translateY(-7px);
          transition:
            color 0.2s ease,
            background 0.2s ease,
            opacity 0.28s ease,
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .mobile-menu.open a {
          opacity: 1;
          transform: none;
        }
        .mobile-menu.open a:nth-of-type(1) {
          transition-delay: 0.08s;
        }
        .mobile-menu.open a:nth-of-type(2) {
          transition-delay: 0.11s;
        }
        .mobile-menu.open a:nth-of-type(3) {
          transition-delay: 0.14s;
        }
        .mobile-menu.open a:nth-of-type(4) {
          transition-delay: 0.17s;
        }
        .mobile-menu.open a:nth-of-type(5) {
          transition-delay: 0.2s;
        }
        .mobile-menu.open a:nth-of-type(6) {
          transition-delay: 0.23s;
        }
        .mobile-menu.open a:nth-of-type(7) {
          transition-delay: 0.26s;
        }
        .mobile-menu a:hover,
        .mobile-menu a:focus-visible {
          color: #fff;
          background: rgba(255, 255, 255, 0.07);
        }
        .mobile-menu .lang-toggle {
          align-self: auto;
          margin: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease 0.1s;
        }
        .mobile-menu.open .lang-toggle {
          opacity: 1;
        }
        .mobile-sticky-cta {
          display: flex;
          position: fixed;
          bottom: 24px;
          left: 50%;
          z-index: 100;
          align-items: center;
          padding: 13px 30px;
          border: 1px solid rgba(255, 255, 255, 0.075);
          border-radius: 100px;
          background: rgba(28, 28, 32, 0.7);
          color: rgba(255, 255, 255, 0.82);
          box-shadow:
            0 10px 34px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
          -webkit-backdrop-filter: blur(16px) saturate(120%);
          backdrop-filter: blur(16px) saturate(120%);
          font:
            500 14px "Geist",
            sans-serif;
          text-decoration: none;
          white-space: nowrap;
          transform: translateX(-50%);
          transition:
            opacity 0.35s ease,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease;
        }
        .mobile-sticky-cta:hover {
          background: #f3f3f1;
          border-color: #f3f3f1;
          color: #09090b;
          transform: translateX(-50%) translateY(-2px);
        }
        .mobile-sticky-cta.hidden {
          opacity: 0;
          pointer-events: none;
          transform: translateX(-50%) translateY(10px);
        }
        .mobile-scroll-top {
          display: flex;
          position: fixed;
          right: 24px;
          bottom: 24px;
          z-index: 100;
          width: 48px;
          height: 48px;
          align-items: center;
          justify-content: center;
          border: 1px solid rgba(255, 255, 255, 0.075);
          border-radius: 50%;
          background: rgba(28, 28, 32, 0.7);
          box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
          -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transform: translateY(10px);
          transition:
            opacity 0.35s ease,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.3s ease,
            border-color 0.3s ease;
        }
        .mobile-scroll-top.visible {
          opacity: 1;
          pointer-events: auto;
          transform: none;
        }
        .mobile-scroll-top:hover {
          background: rgba(255, 255, 255, 0.15);
          border-color: rgba(255, 255, 255, 0.24);
          transform: translateY(-2px);
        }
        .mobile-scroll-top svg {
          width: 16px;
          height: 16px;
          stroke: rgba(255, 255, 255, 0.85);
          fill: none;
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      }

      body.light .nav-hamburger {
        background: rgba(245, 245, 242, 0.8);
        border-color: rgba(0, 0, 0, 0.1);
      }

      body.light .nav-hamburger.open {
        background: transparent;
        border-color: transparent;
      }
      body.light .mobile-menu {
        background: rgba(247, 247, 244, 0.94);
        border-color: rgba(0, 0, 0, 0.1);
      }
      body.light .mobile-menu a:hover,
      body.light .mobile-menu a:focus-visible {
        background: rgba(0, 0, 0, 0.05);
      }
      @media (max-width: 768px) {
        body.light .contact-methods {
          border-color: transparent;
          background: transparent;
        }
        body.light .contact-method + .contact-method {
          border-top-color: rgba(0, 0, 0, 0.08);
        }
      }

      /* Итоговая компоновка главного экрана */
      @media (min-width: 769px) {
        .hero-content {
          padding-bottom: 4px;
        }
        .hero-highlights {
          margin-bottom: 6px;
        }
        .hero-bottom {
          padding-top: 4px;
          padding-bottom: 56px;
        }
      }
      @media (min-width: 769px) and (max-width: 1040px) {
        .hero-wrapper {
          min-height: 760px;
        }
        .hero-content,
        .hero-bottom {
          padding-inline: 28px;
        }
        .hero-bottom-copy {
          gap: 14px;
          margin-right: 20px;
        }
        .hero-bottom .hero-sub {
          font-size: 14.5px;
        }
        .hero-bottom .hero-actions button {
          padding-inline: 18px;
        }
        .diploma-thumb-btn {
          top: 50%;
          right: 14px;
          bottom: auto;
          padding: 0;
          justify-content: center;
          transform: translateY(-50%);
        }
        .diploma-thumb-btn:hover {
          transform: translateY(-50%) scale(1.03);
        }
      }

      /* Иконки действий: внешняя ссылка направлена вверх-вправо, а обычное
       «Подробнее» остаётся текстовым — без декоративного символа. */
      .project-details svg {
        display: none;
      }
      .project-demo:not(.project-gallery-open) svg,
      #case-modal-action svg {
        transform: rotate(-45deg);
      }

      /* На первом экране «Портфолио» служит светлой визуальной опорой. */
      .hero-actions .btn-secondary {
        background: #f3f3f1;
        border-color: #f3f3f1;
        color: #09090b;
        box-shadow:
          0 12px 34px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }
      .hero-actions .btn-secondary:hover {
        background: #fff;
        border-color: #fff;
        color: #09090b;
      }

      /* У контурных кнопок рамка остаётся только лёгкой подсказкой формы. */
      :is(
        .projects-view-toggle,
        .project-details,
        .sales-addon-price-toggle,
        .package-compare-open,
        .form-file-trigger,
        .case-modal-design-action
      ) {
        border-color: var(--control-border);
      }
      :is(
        .projects-view-toggle,
        .sales-addon-price-toggle,
        .package-compare-open,
        .form-file-trigger,
        .case-modal-design-action
      ):hover {
        border-color: var(--control-border-hover);
      }

      /* Тихие контуры: карточки отделяются тоном и глубиной, а не яркой рамкой. */
      :is(
        .outcome-card,
        .sales-package,
        .sales-addon,
        .sales-process-step,
        .project-card,
        .diploma-card,
        .contact-form,
        .case-modal-window
      ) {
        border-color: var(--surface-border);
      }
      .sales-package--featured {
        border-color: var(--surface-border-hover);
      }
      :is(
        .outcome-card,
        .sales-package,
        .sales-addon,
        .sales-process-step,
        .project-card,
        .diploma-card,
        .contact-form,
        .case-modal-window
      ):hover {
        border-color: var(--surface-border-hover);
      }
      .outcome-card.active {
        border-color: var(--surface-border-active);
      }

      /* Одна система рамок для мелких элементов, иконок и окна кейса.
       Основной контур спокойный, hover чуть заметнее, разделители ещё тише. */
      :is(
        .project-tag,
        .case-modal-tech-list span,
        .case-fact,
        .outcome-icon,
        .sales-addon-icon,
        .diploma-thumb,
        .diploma-thumb-btn,
        .diploma-view,
        .project-demo,
        .gallery-close,
        .gallery-thumb,
        .form-file-item,
        .sales-addon-badge,
        .package-compare-sheet,
        .package-compare-close,
        .package-compare-table
      ) {
        border-color: var(--surface-border);
      }
      :is(
        .project-tag,
        .case-modal-tech-list span,
        .case-fact,
        .outcome-icon,
        .sales-addon-icon,
        .diploma-thumb,
        .diploma-thumb-btn,
        .diploma-view,
        .gallery-close,
        .gallery-thumb,
        .form-file-item,
        .sales-addon-badge,
        .package-compare-close
      ):hover {
        border-color: var(--surface-border-hover);
      }
      .diploma-thumb-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.085);
        border-color: var(--surface-border-hover);
      }
      .diploma-thumb-btn:hover svg {
        stroke: #fff;
      }
      @media (max-width: 1040px) {
        .diploma-thumb-btn:hover {
          background: transparent;
          border-color: transparent;
        }
      }
      .case-modal-close {
        border-color: var(--surface-border);
        transition:
          border-color 0.25s ease,
          background 0.25s ease,
          transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .case-modal-close:hover {
        border-color: var(--surface-border-hover);
        background: rgba(255, 255, 255, 0.075);
        transform: scale(1.035);
      }
      :is(
        .credentials-head::after,
        .case-modal-media,
        .case-modal-story,
        .case-modal-facts,
        .case-fact,
        .gallery-sidebar,
        .gallery-bar,
        .contact-method + .contact-method,
        .package-compare-row
      ) {
        border-color: var(--divider-border);
      }
      .diploma-thumb-btn::before {
        background: var(--divider-border);
      }

      /* Единая motion-система для всех блоков страницы. Компоненты могут иметь
       собственный hover, но появление всегда использует один ритм и easing. */
      body .reveal {
        opacity: 0;
        /* Блок поднимается из нижнего затемнения, не меняя собственную
           геометрию: только opacity и compositor-friendly translate. */
        translate: 0 26px;
        transition-property:
          opacity, translate;
        transition-duration: 1.25s, 1.25s;
        transition-timing-function:
          cubic-bezier(0.22, 0.68, 0.3, 1);
      }
      body .reveal.visible {
        opacity: 1;
        translate: 0 0;
      }
      @media (prefers-reduced-motion: reduce) {
        body .reveal {
          opacity: 1;
          translate: none;
          transition: none;
        }
      }
    
  
@media(min-width:769px){
.project-demo svg{
          display: none !important;
        }
.projects-view-toggle{
          display: flex;
        }
.projects-heading-row{
          display: flex;
          align-items: flex-end;
          gap: 14px;
        }
.projects-heading-row .section-heading{
          margin-bottom: 24px;
        }
.projects-view-toggle{
          display: flex !important;
          margin-bottom: 27px;
        }
.section-projects{
          padding: 72px 20px !important;
        }
.projects-grid{
          display: flex !important;
          width: auto;
          margin: 0 -20px;
          padding: 24px calc((100vw - min(82vw, 360px)) / 2) 20px;
          gap: 2px !important;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-padding-inline: calc((100vw - min(82vw, 360px)) / 2);
          overscroll-behavior-x: contain;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }
.projects-grid::-webkit-scrollbar{
          display: none;
        }
.projects-grid.is-expanded{
          display: grid !important;
          grid-template-columns: 1fr !important;
          width: 100%;
          margin: 0;
          padding: 0;
          gap: 24px !important;
          overflow: visible;
          scroll-snap-type: none;
        }
.project-card{
          width: auto;
          min-width: 0;
          flex: 0 0 min(82vw, 360px);
          padding: 0 18px 18px;
          scroll-snap-align: center;
          container-type: inline-size;
        }
.projects-grid:not(.is-expanded) .project-card{
          opacity: var(--carousel-opacity, 0.54);
          transform: scale(var(--carousel-scale, 0.93));
          transform-origin: center;
          transition:
            transform 0.1s linear,
            opacity 0.1s linear,
            border-color 0.28s ease,
            background 0.28s ease,
            box-shadow 0.34s ease;
        }
.projects-grid:not(.is-expanded) .project-card.is-carousel-active{
          border-color: rgba(255, 255, 255, 0.16);
          background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.022)
          );
          box-shadow: 0 24px 58px rgba(0, 0, 0, 0.24);
        }
.projects-grid.is-expanded .project-card{
          width: 100%;
          flex-basis: auto;
        }
.project-card:hover{
          transform: none;
        }
.project-thumb{
          margin: 0 -18px;
          aspect-ratio: 16 / 9;
          border-bottom-color: rgba(255, 255, 255, 0.08);
        }
.project-card:hover .project-thumb img{
          transform: none;
        }
.project-title{
          padding-top: 19px;
          font-size: 28px;
          line-height: 1.04;
          letter-spacing: -0.6px;
        }
.project-desc{
          min-height: 0;
          padding-top: 9px;
          font-size: 13.5px;
          line-height: 1.62;
          color: rgba(255, 255, 255, 0.5);
        }
.project-bottom{
          width: 100%;
          padding-top: 13px;
          gap: 16px;
        }
.project-tags{
          width: 100%;
          gap: 6px;
        }
.project-tag{
          min-height: 26px;
          padding: 0 9px;
          font-size: 11px;
        }
body.light .project-card{
          background: var(--card);
          border-color: var(--border);
        }
body.light .project-title{
          color: var(--fg);
        }
body.light .project-desc{
          color: var(--fg2);
        }
body.light .project-tag{
          background: rgba(0, 0, 0, 0.025);
          border-color: rgba(0, 0, 0, 0.08);
          color: rgba(0, 0, 0, 0.56);
        }
.project-actions{
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
        }
.project-actions .project-demo,
        .project-details{
          min-height: 44px;
          padding: 8px 10px;
          border-radius: 13px;
          font-size: 12.5px;
        }
.projects-grid:not(.is-expanded){
          align-items: flex-start;
        }
.project-desc{
          display: -webkit-box;
          min-height: 0;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
.project-bottom{
          display: grid;
          grid-template-columns: auto minmax(0, 1fr);
          align-items: end;
          margin-top: 0;
          gap: 16px;
        }
.project-tags{
          display: none;
        }
.project-meta-row{
          display: block;
          width: auto;
          padding: 0;
          border: 0;
        }
.project-duration{
          display: none;
        }
.project-estimate span{
          color: rgba(255, 255, 255, 0.38);
          font-size: 8.5px;
          letter-spacing: 0.85px;
          text-transform: uppercase;
        }
.project-estimate strong{
          margin: 0;
          color: rgba(255, 255, 255, 0.9);
          font-size: 15px;
          font-weight: 500;
          line-height: 1.1;
        }
.project-estimate{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 6px;
          min-width: 0;
          padding: 0;
          text-align: left;
          transform: none;
        }
.project-actions{
          display: block;
          width: 100%;
        }
.project-actions .project-demo{
          position: absolute;
          z-index: 4;
          /* Реальную высоту обложки подставляет JS, поэтому центр кнопки
             совпадает с границей фото в любом браузере. */
          top: calc(var(--project-thumb-height, 220px) - 23px);
          right: 14px;
          width: 46px;
          min-width: 46px;
          min-height: 46px;
          padding: 0;
          border-radius: 50%;
          background: rgba(12, 12, 15, 0.78);
          border-color: rgba(255, 255, 255, 0.17);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
.project-actions .project-demo svg{
          display: block !important;
          width: 17px;
          height: 17px;
        }
.project-actions .project-demo > span{
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
.project-details{
          width: 100%;
          min-height: 46px;
        }
.section-projects .projects-grid:not(.is-expanded) .project-card{
          transition-property:
            opacity, translate, transform, border-color, background, box-shadow;
          transition-duration: 0.62s, 0.62s, 0.38s, 0.24s, 0.24s, 0.28s;
          transition-timing-function:
            cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1),
            cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease;
        }

.section-projects .projects-grid{position:relative;gap:20px!important;padding:30px calc((100% - min(42vw,520px))/2) 36px;margin:0;scroll-padding-inline:calc((100% - min(42vw,520px))/2)}
.section-projects .project-card{flex:0 0 min(42vw,520px);padding:0 24px 24px}.section-projects .project-thumb{margin:0 -24px}.section-projects .project-title{font-size:32px}.section-projects .project-desc{font-size:15px;min-height:72px}.section-projects .project-tags{display:flex;flex-wrap:wrap;margin-bottom:14px}.section-projects .project-bottom{grid-template-columns:1fr}.section-projects .project-meta-row{display:flex;justify-content:space-between;gap:16px}.section-projects .project-tags{width:auto}.section-projects .projects-grid.is-expanded{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0;gap:28px!important}.projects-heading-row{justify-content:space-between}
}


/* Full-bleed project carousel; fades remain outside the centered cover. */
.section-projects{overflow:visible}
.section-projects .projects-grid:not(.is-expanded){position:relative;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);--project-edge:min(12vw,calc((100vw - min(42vw,520px)*1.04)/2));-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.12) calc(var(--project-edge)*.3),#000 var(--project-edge),#000 calc(100% - var(--project-edge)),rgba(0,0,0,.12) calc(100% - var(--project-edge)*.3),transparent);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.12) calc(var(--project-edge)*.3),#000 var(--project-edge),#000 calc(100% - var(--project-edge)),rgba(0,0,0,.12) calc(100% - var(--project-edge)*.3),transparent)}
.section-projects .project-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 20px}
.section-projects .project-meta-row{display:contents}
.section-projects .project-tags{display:flex;flex-wrap:wrap;grid-column:1;grid-row:1;gap:6px;margin:0;width:auto}
.section-projects .project-estimate{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;text-align:right;gap:8px}
.section-projects .project-estimate>span:not(.project-build-time){display:none}
.section-projects .project-estimate .project-build-time{display:block;font-size:13px;line-height:1.4;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55)}
.section-projects .project-actions{grid-column:1;grid-row:2;width:auto;justify-self:start}
.section-projects .project-details{width:auto;min-width:110px;min-height:44px;padding:0 22px}
.section-projects .project-actions .project-demo{width:58px;min-width:58px;height:58px;min-height:58px;top:calc(var(--project-thumb-height,220px) - 29px);right:26px}
.section-projects .project-actions .project-demo svg{width:21px;height:21px}
@media(max-width:768px){.section-projects .projects-grid:not(.is-expanded){--project-edge: min(4vw,calc((100vw - min(82vw,360px)*1.04)/2))}.section-projects .project-bottom{gap:12px}.section-projects .project-tags{gap:4px}.section-projects .project-tag{font-size:9px;padding:4px 6px}.section-projects .project-estimate .project-build-time{font-size:11px}.section-projects .project-actions .project-demo{width:52px;min-width:52px;height:52px;min-height:52px;top:calc(var(--project-thumb-height,220px) - 26px);right:22px}}

/* Larger covers and layered circular motion in carousel mode only. */
.section-projects .projects-grid:not(.is-expanded){--orbit-card:min(88vw,400px);--project-edge:min(4vw,calc((100vw - var(--orbit-card))/2));gap:0!important;padding:40px calc((100vw - var(--orbit-card))/2) 48px;scroll-padding-inline:calc((100vw - var(--orbit-card))/2);isolation:isolate}
.section-projects .projects-grid:not(.is-expanded) .project-card{position:relative;flex:0 0 var(--orbit-card);margin-right:calc(var(--orbit-card)*-.18);z-index:var(--orbit-layer,1);transform:perspective(1400px) translateY(var(--orbit-y,0px)) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,1));transform-origin:center;opacity:var(--carousel-opacity,1);background:#101013;transition:transform .18s ease-out,opacity .18s ease-out;will-change:transform}
.section-projects .projects-grid:not(.is-expanded) .project-card:last-child{margin-right:0}
.section-projects .projects-grid:not(.is-expanded) .project-thumb{aspect-ratio:16/9}
@media(min-width:769px){.section-projects .projects-grid:not(.is-expanded){--orbit-card:clamp(560px,32vw,1100px);--project-edge:min(12vw,calc((100vw - var(--orbit-card))/2));padding-top:48px;padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.section-projects .projects-grid:not(.is-expanded) .project-card{transition:none}}

/* Soft edge falloff and shadows between overlapping cards. */
.section-projects .projects-grid:not(.is-expanded){
 --project-edge:min(7vw,calc((100vw - var(--orbit-card))/2));
 --project-fade:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.025) calc(var(--project-edge)*.12),rgba(0,0,0,.10) calc(var(--project-edge)*.25),rgba(0,0,0,.28) calc(var(--project-edge)*.42),rgba(0,0,0,.55) calc(var(--project-edge)*.60),rgba(0,0,0,.80) calc(var(--project-edge)*.77),rgba(0,0,0,.95) calc(var(--project-edge)*.91),#000 var(--project-edge),#000 calc(100% - var(--project-edge)),rgba(0,0,0,.95) calc(100% - var(--project-edge)*.91),rgba(0,0,0,.80) calc(100% - var(--project-edge)*.77),rgba(0,0,0,.55) calc(100% - var(--project-edge)*.60),rgba(0,0,0,.28) calc(100% - var(--project-edge)*.42),rgba(0,0,0,.10) calc(100% - var(--project-edge)*.25),rgba(0,0,0,.025) calc(100% - var(--project-edge)*.12),transparent 100%);
 -webkit-mask-image:var(--project-fade);mask-image:var(--project-fade)
}
.section-projects .projects-grid:not(.is-expanded) .project-card{box-shadow:0 10px 20px rgba(0,0,0,.55),0 22px 52px rgba(0,0,0,.65),0 0 36px rgba(0,0,0,.5)}
@media(min-width:769px){.section-projects .projects-grid:not(.is-expanded){--project-edge:min(24vw,calc((100vw - var(--orbit-card))/2))}}

.section-projects .projects-grid:not(.is-expanded) .project-card{transition:none!important;translate:none!important;box-shadow:0 12px 40px rgba(0,0,0,.18),0 20px 80px rgba(0,0,0,.22)!important}
.section-projects .projects-grid:not(.is-expanded){--project-edge:min(3.5vw,calc((100vw - var(--orbit-card))/2));overflow-anchor:none}
@media(min-width:769px){.section-projects .projects-grid:not(.is-expanded){--project-edge:min(12vw,calc((100vw - var(--orbit-card))/2))}}

/* Front-facing cards with a small, consistent overlap. */
.section-projects .projects-grid:not(.is-expanded) .project-card{transform:scale(var(--carousel-scale,1));transform-origin:center;opacity:1;margin-right:calc(var(--orbit-card)*-.18)}
.section-projects .projects-grid:not(.is-expanded) .project-card:last-child{margin-right:0}

/* More space and a clear visual emphasis on the central project. */
.section-projects .projects-grid:not(.is-expanded) .project-card{margin-right:calc(var(--orbit-card)*-.10);filter:brightness(var(--orbit-brightness,1))}
.section-projects .projects-grid:not(.is-expanded) .project-card:last-child{margin-right:0}

@media(min-width:769px){.section-projects .projects-grid:not(.is-expanded) .project-card{transform:translateX(var(--orbit-pull,0px)) scale(var(--carousel-scale,1))}}

/* Center the curated-work heading independently of the view control. */
.section-projects .section-label{text-align:center}
.section-projects .projects-heading-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:16px}
.section-projects .projects-heading-row .section-heading{grid-column:2;text-align:center;margin:0 0 28px}
.section-projects .projects-view-toggle{grid-column:3;margin:0 0 28px;align-self:center}
@media(max-width:600px){.section-projects .projects-heading-row{grid-template-columns:1fr;gap:12px}.section-projects .projects-heading-row .section-heading{grid-column:1;margin-bottom:0}.section-projects .projects-view-toggle{grid-column:1;justify-self:end;margin-bottom:12px}}

/* Subtle inward rotation; the centered card remains front-facing. */
.section-projects .projects-grid:not(.is-expanded) .project-card{transform:perspective(1600px) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,1))}
@media(min-width:769px){.section-projects .projects-grid:not(.is-expanded) .project-card{transform:perspective(1600px) translateX(var(--orbit-pull,0px)) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,1))}}

.section-projects .projects-grid:not(.is-expanded) .project-card{filter:none!important;box-shadow:0 14px 38px rgba(0,0,0,.22)!important;backface-visibility:hidden}
.section-projects .projects-grid:not(.is-expanded) .project-card::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;background:#000;opacity:calc(1 - var(--orbit-brightness,1));pointer-events:none;transition:none}
.section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo{backdrop-filter:none;-webkit-backdrop-filter:none;background:#17171b}

.section-projects .section-label{text-align:left}
.section-projects .projects-heading-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.section-projects .projects-heading-row .section-heading{text-align:left;margin:0 0 28px}
.section-projects .projects-view-toggle{margin:0 0 28px;flex-shrink:0}
::view-transition-group(*){animation-duration:650ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root){animation:none}
@media(max-width:600px){.section-projects .projects-heading-row{align-items:flex-end;gap:12px}.section-projects .projects-heading-row .section-heading{font-size:clamp(32px,8vw,48px);margin-bottom:24px}.section-projects .projects-view-toggle{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation-duration:0s}}

/* Compact information area: natural description height and a single footer row. */
.section-projects .project-card{height:auto;align-self:start;padding-bottom:20px}
.section-projects .project-title{padding-top:20px;padding-right:64px;font-size:30px;line-height:1.12}
.section-projects .project-desc{min-height:0!important;height:auto;padding-top:8px;font-size:14px;line-height:1.5;max-width:64ch;-webkit-line-clamp:3}
.section-projects .project-bottom{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px}
.section-projects .project-meta-row{display:contents}
.section-projects .project-actions{grid-column:1;grid-row:1;align-self:center}
.section-projects .project-details{min-width:98px;min-height:40px;padding:0 18px;font-size:12px}
.section-projects .project-tags{grid-column:2;grid-row:1;display:flex;gap:5px;align-items:center;margin:0}
.section-projects .project-tag{min-height:24px;font-size:10px;padding:3px 8px;letter-spacing:0}
.section-projects .project-estimate{grid-column:3;grid-row:1;align-self:center;gap:5px;white-space:nowrap}
.section-projects .project-estimate .project-build-time{font-size:12px;line-height:1.2}
.section-projects .project-estimate strong{font-size:18px;line-height:1.2}
@media(max-width:1100px){.section-projects .project-bottom{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px}.section-projects .project-tags{grid-column:1;grid-row:1}.section-projects .project-actions{grid-column:1;grid-row:2}.section-projects .project-estimate{grid-column:2;grid-row:1 / span 2}.section-projects .project-title{font-size:27px}.section-projects .project-desc{font-size:13px}.section-projects .project-estimate strong{font-size:16px}}
body.light .section-projects .project-bottom{border-top-color:rgba(0,0,0,.1)}

/* Technology tags always occupy one row, including narrow cards. */
.section-projects .project-tags{display:flex;flex-wrap:nowrap!important;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.section-projects .project-tags::-webkit-scrollbar{display:none}
.section-projects .project-tag{flex:0 0 auto;white-space:nowrap}

/* High contrast hover/focus for every circular project-open control. */
.section-projects .project-actions .project-demo:hover,
.section-projects .project-actions .project-demo:focus-visible{background:#fff!important;color:#090909!important;border-color:#fff!important}
.section-projects .project-actions .project-demo:hover svg,
.section-projects .project-actions .project-demo:focus-visible svg{color:#090909!important;stroke:currentColor!important;opacity:1!important;visibility:visible!important}

::view-transition-group(*){animation-duration:280ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* Full-width descriptions; compact mobile metadata. */
.section-projects .project-desc{width:100%;max-width:none;align-self:stretch}
@media(max-width:768px){
 .section-projects .project-tags{display:none!important}
 .section-projects .project-bottom{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
 .section-projects .project-actions{grid-column:1;grid-row:1}
 .section-projects .project-estimate{grid-column:2;grid-row:1}
}

/* Поле «О проекте» не наследует выравнивание от сетки формы: и плейсхолдер,
   и введённый текст всегда начинаются в одной точке у левого верхнего края. */
textarea#cf-msg,
textarea#cf-msg::placeholder{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:14px 16px 82px!important;
  text-align:left!important;
  text-indent:0!important;
  line-height:1.5!important;
  vertical-align:top!important;
}

/* Mobile carousel: no edge fades, consistent heading rhythm, compact spacing. */
@media(max-width:768px){
 .section-projects .section-label{margin-bottom:16px}
 .section-projects .projects-heading-row{margin-top:0;margin-bottom:0;align-items:center}
 .section-projects .projects-heading-row .section-heading{margin-top:0;margin-bottom:12px}
 .section-projects .projects-view-toggle{margin-top:0;margin-bottom:12px}
 .section-projects .projects-grid:not(.is-expanded){mask-image:none!important;-webkit-mask-image:none!important;padding-top:12px;padding-bottom:20px;--project-edge:0px}
 .section-projects{padding-bottom:44px!important}
}

/* Contact and footer form one final section, with no clipped footer text. */
.section-contact{min-height:0;padding-bottom:32px!important}
.footer{padding:20px 48px max(20px,env(safe-area-inset-bottom));height:auto;min-height:0}
.footer-inner{gap:12px 24px;flex-wrap:wrap;transform:none}
.footer-left{flex-shrink:0}.footer-right{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
@media(min-width:769px){.section-contact{padding-top:76px!important}.contact-wrap{gap:40px}}
@media(max-width:768px){.section-contact{padding-bottom:20px!important}.footer{padding:16px 20px max(20px,env(safe-area-inset-bottom))}.footer-inner{align-items:flex-start;flex-direction:column;gap:8px}.footer-right{max-width:100%;font-size:10px}.footer-brand{font-size:11px}}

/* Keep the form centered, with the footer directly beneath the contact block. */
body::after{content:"";display:block;height:var(--contact-end-space,0px);pointer-events:none}
@media(min-width:769px){
 .section-contact{min-height:0;padding-top:76px!important;padding-bottom:16px!important}
 .footer{padding-top:16px;padding-bottom:16px}
}

/* Center the complete contact composition, keeping its original two columns. */
body::after{display:none!important}
.contact-screen{position:relative;z-index:10;height:100dvh;min-height:100svh;isolation:isolate}
.contact-screen .section-contact{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;min-height:0;margin:0;padding:0!important;border:0}
.contact-screen .section-contact>.section-inner{width:100%;max-width:none;margin:0;padding:0}
.contact-screen .contact-wrap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px;width:min(1120px,calc(100% - 64px));max-width:none;margin:0 auto;max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain;align-items:stretch}
.contact-screen .contact-info{display:flex;flex-direction:column;min-width:0}
.contact-screen .contact-form{box-sizing:border-box;width:100%;height:auto;min-width:0;margin:0;opacity:1;translate:none;transform:none}
.contact-screen .footer{position:absolute;inset:auto 0 0;margin:0;padding:14px 24px max(14px,env(safe-area-inset-bottom));background:transparent}
.contact-screen .footer-inner{flex-direction:row;align-items:center;gap:8px 20px}
@media(max-width:768px){
 .contact-screen .contact-wrap{display:flex;flex-direction:column;gap:0;width:calc(100% - 40px);max-height:calc(100dvh - 156px)}
 .contact-screen .contact-info{display:contents}
 .contact-screen .contact-form{margin-top:22px}
 .contact-screen .footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
 .contact-screen .footer-inner{flex-direction:column;align-items:center;gap:5px;text-align:center}
}

/* Sales preview: clearer offer, preserved visual identity. */
.hero-sub{color:#c4c4c4!important;max-width:760px}
.nav-links a{color:#aaa}
.section-projects .project-estimate>span:not(.project-build-time){display:block;font-size:11px;color:#aaa;line-height:1.2;letter-spacing:0;text-transform:none}
.section-projects .project-estimate .project-build-time{font-size:11px;color:#aaa}
.section-projects .project-kind{max-width:calc(100% - 24px)}
@media(max-width:768px){
.hero-highlights{gap:6px!important;flex-wrap:nowrap;flex-direction:row}
.hero-pill{font-size:12px!important;padding:8px 12px!important}
.contact-screen{height:auto;min-height:100svh;display:flex;flex-direction:column}
.contact-screen .section-contact{position:relative;display:block;height:auto;padding:72px 0 32px!important}
.contact-screen .contact-wrap{max-height:none;overflow:visible}
.contact-screen .footer{position:relative;margin-top:auto}
.contact-screen .contact-info{display:flex}
.contact-screen .contact-form{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* Restore the expressive opening and keep section transitions compact. */
.hero-pill{font-size:14px;padding:9px 15px}
.section-projects{padding-bottom:36px!important}
.section-outcome{padding-top:56px;padding-bottom:20px}
.section-outcome + .section-whatwedo{padding-top:40px}
@media(max-width:768px){
.section-projects{padding-bottom:24px!important}
.section-outcome{padding-top:32px;padding-bottom:12px}
.section-outcome + .section-whatwedo{padding-top:28px}
}

/* Allow wheel gestures to continue to the document at contact boundaries. */
.contact-screen .contact-wrap,.contact-screen .contact-form,.contact-screen textarea{overscroll-behavior:auto!important}

/* Permanent edge shading in both layouts, including transition snapshots. */
.section-projects{position:relative;isolation:isolate}
.section-projects .projects-grid{mask-image:none!important;-webkit-mask-image:none!important}
.portfolio-edge{position:absolute;top:0;bottom:0;width:12vw;pointer-events:none;z-index:150;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 23%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.15) 70%,transparent 100%)}
.portfolio-edge-left{left:0;view-transition-name:portfolio-edge-left}
.portfolio-edge-right{right:0;transform:scaleX(-1);view-transition-name:portfolio-edge-right}
::view-transition-group(portfolio-edge-left),::view-transition-group(portfolio-edge-right){z-index:1000;animation-duration:240ms}
::view-transition-old(portfolio-edge-left),::view-transition-old(portfolio-edge-right){animation:none;opacity:0}
::view-transition-new(portfolio-edge-left),::view-transition-new(portfolio-edge-right){animation:none;opacity:1}
@media(max-width:768px){.portfolio-edge{display:none}}

.section-projects.portfolio-grid-view .portfolio-edge{visibility:hidden}
.portfolio-edge{transition:none!important;animation:none!important}
::view-transition-group(portfolio-edge-left),::view-transition-group(portfolio-edge-right){animation-duration:0s!important}
::view-transition-old(portfolio-edge-left),::view-transition-old(portfolio-edge-right){animation:none!important;opacity:0!important}
::view-transition-new(portfolio-edge-left),::view-transition-new(portfolio-edge-right){animation:none!important;opacity:1!important}

.hero-offer-row{display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%}
.hero-h1 .hero-offer-row .thin{flex:1;min-width:0}
.hero-start-price{flex:none;color:#fff;font-size:clamp(48px,5.4vw,88px);font-weight:400;line-height:1.1;white-space:nowrap;letter-spacing:-.045em}
@media(max-width:768px){.hero-offer-row{flex-direction:column;align-items:flex-start;gap:14px}.hero-start-price{font-size:36px}}

@media(min-width:769px){.hero-start-price{transform:translateY(52px)}}

/* The hero background stays full bleed; text and actions share a capped frame. */

.hero-h1 .hero-inline-price{color:#fff;white-space:nowrap}
/* On wide screens, group the benefits directly above the right-hand actions. */
@media(min-width:1600px){
 .hero-content .hero-highlights{position:absolute;right:48px;bottom:124px;left:auto;top:auto;justify-content:flex-end;gap:10px;margin:0;max-width:620px}
 .hero-bottom .hero-actions{justify-content:flex-end}
}

@media(min-width:1800px){
 .hero-bottom{display:flex;align-items:center;gap:28px}
 .hero-bottom-copy{flex:1 1 0;min-width:0;max-width:none}
 .hero-bottom .hero-sub{max-width:none}
 .hero-bottom .hero-highlights{position:static;display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:8px;margin:0;max-width:none}
 .hero-bottom .hero-pill{white-space:nowrap;font-size:13px;padding:9px 12px}
 .hero-bottom .hero-actions{flex:0 0 auto;gap:14px}
 .hero-bottom .hero-actions button{min-height:58px;padding:16px 28px;font-size:17px;white-space:nowrap}
}

/* Avoid a second CSS transform animation after the captured layout movement. */
.projects-grid.layout-snapshot .project-card{transition:none!important}
.section-projects .projects-grid:not(.is-expanded) .project-card{transition:opacity .15s ease-out}
/* Keep the already-captured vignette visible throughout, without a delayed new image. */
::view-transition-old(portfolio-edge-left),::view-transition-old(portfolio-edge-right){opacity:1!important;animation:none!important}
::view-transition-new(portfolio-edge-left),::view-transition-new(portfolio-edge-right){opacity:0!important;animation:none!important}
.sales-faq-section{padding-bottom:24px}
@media(max-width:768px){.sales-faq-section{padding-bottom:12px}.contact-screen .section-contact{padding-top:36px!important}}

/* Compact project footer: a clear action, one line of technologies and a quiet estimate. */
.section-projects .project-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin-top:14px;padding-top:0;border-top:0}
.section-projects .project-actions{grid-column:1;grid-row:1;justify-self:start;margin:0}
.section-projects .project-details{min-width:124px;min-height:46px;padding:0 20px;font-size:14px;border-radius:12px}
.section-projects .project-tags{grid-column:1;grid-row:2;margin:0;gap:5px}
.section-projects .project-tag{font-size:10px;min-height:22px;padding:3px 7px}
.section-projects .project-estimate{grid-column:2;grid-row:1 / span 2;align-self:center;gap:5px;margin:0}
.section-projects .project-estimate>span:not(.project-build-time){display:none!important}
.section-projects .project-estimate .project-build-time{font-size:13px;line-height:1.3;color:#aaa}
.section-projects .project-estimate strong{font-size:20px;line-height:1.15;letter-spacing:-.025em}
.section-projects .project-card{padding-bottom:18px}
.section-projects .project-title{padding-top:16px}
.section-projects .project-desc{padding-top:6px;line-height:1.45}
@media(max-width:768px){
 .section-projects .project-bottom{gap:12px;margin-top:12px}
 .section-projects .project-estimate{grid-row:1}
 .section-projects .project-details{min-width:116px;min-height:44px;font-size:13px;padding:0 16px}
 .section-projects .project-estimate strong{font-size:18px}
 .section-projects .project-estimate .project-build-time{font-size:12px}
}

/* One compact row: action, technologies, duration and price. */
.section-projects .project-bottom{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.section-projects .project-actions{grid-column:1;grid-row:1}
.section-projects .project-tags{grid-column:2;grid-row:1;align-self:center;justify-self:start;width:100%;margin:0}
.section-projects .project-estimate{grid-column:3;grid-row:1;align-self:center}
.section-projects .project-details{min-width:112px;padding:0 16px;min-height:46px}
.section-projects .project-desc{width:100%;max-width:none;min-height:2.9em!important;font-size:14px;line-height:1.45;-webkit-line-clamp:unset;overflow:visible;display:block}
@media(max-width:768px){
 .section-projects .project-bottom{grid-template-columns:minmax(0,1fr) auto;gap:12px}
 .section-projects .project-estimate{grid-column:2;grid-row:1}
 .section-projects .project-desc{font-size:13px}
}

/* Align the action, technology row and price along one baseline. */
.section-projects .project-bottom{position:relative;border-top:0;padding-top:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;gap:7px 14px}
.section-projects .project-actions{grid-column:1;grid-row:1 / span 2;align-self:end}
.section-projects .project-details{border-color:transparent;background:rgba(255,255,255,.045);min-height:48px}
.section-projects .project-bottom::before{content:"";grid-column:2;grid-row:1;align-self:center;height:1px;background:rgba(255,255,255,.13)}
.section-projects .project-tags{grid-column:2;grid-row:2;align-self:end;padding:0;margin:0}
.section-projects .project-estimate{display:contents}
.section-projects .project-estimate .project-build-time{grid-column:3;grid-row:1;justify-self:end;align-self:center}
.section-projects .project-estimate strong{grid-column:3;grid-row:2;justify-self:end;align-self:end}
@media(max-width:768px){
 .section-projects .project-bottom{grid-template-columns:auto minmax(8px,1fr) auto}
 .section-projects .project-estimate .project-build-time,.section-projects .project-estimate strong{grid-column:3}
}

.section-projects .project-bottom{position:static}
.section-projects .project-bottom::before{display:none}
.section-projects .project-actions{position:static}
.section-projects .project-details{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);color:rgba(255,255,255,.8)}
.section-projects .project-details:hover,.section-projects .project-details:focus-visible{background:#f3f3f1;border-color:#f3f3f1;color:#09090b}
.section-projects .project-actions .project-demo{display:flex;visibility:visible;opacity:1;z-index:8}
.section-projects .project-desc{text-align:left;width:100%;max-width:none}

/* Keep portfolio navigation above both live and captured edge shading. */
.section-projects>.section-inner>.section-label,.section-projects .projects-heading-row{position:relative;z-index:200}
.section-projects .projects-heading-row{view-transition-name:portfolio-heading}
.section-projects>.section-inner>.section-label{view-transition-name:portfolio-label}
::view-transition-group(portfolio-heading),::view-transition-group(portfolio-label){z-index:1100}
::view-transition-old(portfolio-heading),::view-transition-old(portfolio-label){animation:none;opacity:0}
::view-transition-new(portfolio-heading),::view-transition-new(portfolio-label){animation:none;opacity:1}
.section-outcome .outcome-lead{max-width:32ch;font-size:16px;line-height:1.55}
.section-outcome .outcome-card p{font-size:14px;line-height:1.55}

.section-outcome .outcome-card p{font-size:17px;line-height:1.45;color:#bdbdc3;margin-top:10px}
.section-outcome .outcome-card{padding:22px;column-gap:12px}
@media(min-width:769px) and (max-width:1100px){.section-outcome .outcome-card{grid-template-columns:minmax(0,1fr)}.section-outcome .outcome-icon{display:none}}
@media(max-width:768px){.section-outcome .outcome-card p{font-size:16px}.section-outcome .outcome-card{padding:18px}}
@media(max-width:420px){.section-outcome .outcome-card{grid-template-columns:minmax(0,1fr)}.section-outcome .outcome-icon{display:none}}

.section-outcome .outcome-icon{display:none}
.section-outcome .outcome-card{grid-template-columns:minmax(0,1fr)}
.section-projects .project-details{border:1px solid var(--control-border);border-radius:13px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.9);box-shadow:var(--control-highlight);font-weight:500}
.section-projects .project-details:hover,.section-projects .project-details:focus-visible{background:#f3f3f1;color:#09090b;border-color:#f3f3f1;transform:translateY(-1px)}
.privacy-consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.5;color:#aaa}.privacy-consent input{width:16px!important;height:16px!important;flex:0 0 16px;margin:2px 0;accent-color:#ddd}.privacy-consent a,.privacy-footer{text-decoration:underline;text-underline-offset:3px;color:inherit}.privacy-footer{font-size:12px;color:#aaa}.footer-inner{flex-wrap:wrap}

/* Subtle fills for controls only; existing surfaces retain their original tones. */
:is(.btn-primary,.btn-secondary,.projects-view-toggle,.project-details,.sales-addon-price-toggle,.package-compare-open,.case-modal-action,.sales-package-toggle,.sales-package-cta,.sales-addon-cta,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close,.mobile-scroll-top,.nav-hamburger):not(.contact-screen *){background:#202023;border-color:rgba(255,255,255,.055);color:#f3f3f3;box-shadow:0 7px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)}
.hero-actions .btn-primary{background:#202023!important;border-color:rgba(255,255,255,.055)!important;color:#fff!important;box-shadow:0 7px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)}
:is(.btn-primary,.btn-secondary,.projects-view-toggle,.project-details,.sales-addon-price-toggle,.package-compare-open,.case-modal-action,.sales-package-toggle,.sales-package-cta,.sales-addon-cta,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close,.mobile-scroll-top,.nav-hamburger):not(.contact-screen *):hover{background:#f1f1ef;border-color:#f1f1ef;color:#111}
.hero-actions .btn-primary:hover{background:#f1f1ef!important;border-color:#f1f1ef!important;color:#111!important}
.hero-actions .btn-secondary{background:#eeeeec;color:#111}
.message-composer{position:relative;display:flex;flex:1;min-width:0;min-height:164px;background:#171719;border:1px solid rgba(255,255,255,.1);border-radius:13px;overflow:hidden}
.message-composer:focus-within{border-color:rgba(255,255,255,.3)}
.contact-form .message-composer .form-textarea{width:100%;min-width:0;min-height:164px;padding:15px 16px 80px;background:transparent;border:0;border-radius:0;box-shadow:none;outline:none;resize:vertical}
.message-composer .form-field--files{position:absolute;bottom:12px;right:12px;width:auto;max-width:calc(100% - 24px);margin:0;padding:0}
.message-composer .form-files{position:relative;flex-direction:row;align-items:center;gap:10px;text-align:right}
.message-composer .form-file-copy{order:0;gap:4px;pointer-events:none}
.message-composer .form-file-trigger{order:1;width:44px;min-width:44px;min-height:44px}
.message-composer .form-file-copy .form-label{font-size:10px;letter-spacing:.3px;line-height:1.4}
.message-composer .form-file-summary{font-size:10px;line-height:1.4;white-space:normal}
.form-file-list:empty,.form-file-error:empty{display:none}
.privacy-consent{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#c8c8cf;font-size:12px;line-height:1.65;cursor:pointer}
.privacy-consent input{appearance:none;width:20px!important;height:20px!important;flex:0 0 20px;border:1px solid #626268;border-radius:5px;background:#222225;margin:1px 0;display:grid;place-content:center;cursor:pointer}
.privacy-consent input:checked{background:#ededeb;border-color:#ededeb}
.privacy-consent input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #111;border-bottom:2px solid #111;transform:translateY(-1px) rotate(-45deg)}
.privacy-consent a{color:#fafafa;text-decoration-color:#8b8b95;text-underline-offset:3px}
.privacy-consent a:hover{text-decoration-color:#fff}
button:focus-visible,a:focus-visible,.form-file-trigger:focus-visible,.privacy-consent input:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:480px){.contact-form .message-composer .form-textarea{min-height:180px;font-size:16px}.privacy-consent{padding:12px;font-size:12px}}


.sales-package-top{margin-bottom:20px}
.sales-package > p{min-height:0}
.sales-package ul{margin-top:12px;margin-bottom:22px}
.sales-package-mobile-row{margin-top:12px}

.sales-package > p{margin-top:20px}
.sales-package ul{margin-top:20px}
:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.number-card,.diploma-card,.contact-form){background-color:#101012}

.section-projects .project-actions .project-demo:not(:hover):not(:focus-visible){background:#222226!important}

/* Нижняя строка тарифа: цена слева, следующее действие справа. */
.sales-package-mobile-row .sales-package-cta{width:auto;min-width:142px;margin:0;padding-inline:18px}
/* Цифры в блоке «Обо мне» — типографика, а не интерактивные карточки. */
.section-education .about-numbers .number-card,
.section-education .about-numbers .number-card:hover,
.section-education .about-numbers .number-card::before{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}

/* Два тихих источника света по краям создают матовую глубину, а не плоский градиент. */
:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.diploma-card,.contact-form){
  background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.043),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.03),transparent 57%),linear-gradient(148deg,rgba(31,31,31,.975),rgba(17,17,17,.985) 53%,rgba(23,23,23,.98))!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}
:is(.btn-primary,.btn-secondary,.projects-view-toggle,.project-details,.sales-addon-price-toggle,.package-compare-open,.case-modal-action,.sales-package-toggle,.sales-package-cta,.sales-addon-cta,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close,.mobile-scroll-top,.nav-hamburger):not(.contact-screen *){
  box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.2)!important;
}
.hero-actions .btn-primary{box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.2)!important}
:is(.btn-primary,.btn-secondary,.projects-view-toggle,.project-details,.sales-addon-price-toggle,.package-compare-open,.case-modal-action,.sales-package-toggle,.sales-package-cta,.sales-addon-cta):active{transform:translateY(1px);box-shadow:0 4px 10px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03)!important}

/* В широких карточках действие идёт рядом с ценой; в узких — честно переносится вниз. */
.sales-package{container-type:inline-size}
.sales-package-mobile-row{flex-wrap:wrap}
@container (max-width:305px){
  .sales-package-mobile-row .sales-package-cta{width:100%;flex-basis:100%}
  .sales-package-price{flex:none}
}

@media(max-width:768px){
  .sales-process-step{background:transparent!important;box-shadow:none!important}
  .contact-screen .contact-info{display:contents!important}
  .hero-mobile-copy{margin-top:16px}
}

/* Матовая капсула над обложкой проекта: отдельный слой, а не просто иконка. */
.section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo{
  background:linear-gradient(145deg,rgba(63,63,71,.78),rgba(28,28,33,.87))!important;
  border-color:rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.92)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.30)!important;
  backdrop-filter:blur(16px) saturate(.8)!important;
  -webkit-backdrop-filter:blur(16px) saturate(.8)!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo:hover,
.section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo:focus-visible{
  background:#f5f5f3!important;
  border-color:#fff!important;
  color:#0b0b0d!important;
  box-shadow:0 18px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
@media(min-width:769px){
  .section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo{
    width:64px;
    min-width:64px;
    height:64px;
    min-height:64px;
    top:calc(var(--project-thumb-height,220px) - 32px);
  }
  .sales-addon-cta{flex:1.28}
  .sales-addon-price-toggle{flex:.72}
}

/* Lumus uses a wide local cover; a matching backdrop prevents seams while it loads. */
.project-card[data-project-id="lumus"] .project-thumb{background:#8a8a8a}
.project-card[data-project-id="lumus"] .project-thumb img{object-fit:cover}

.hero-h1{position:relative;top:0;--hero-copy-gap:28px;margin-bottom:var(--hero-copy-gap)}
.hero-wordmark{display:block;margin-bottom:var(--hero-copy-gap)}
.hero-h1 .thin[data-i18n="hero_tagline"]{color:#a3a3a8;opacity:1;margin-top:0}
@media(max-width:768px){.hero-h1{--hero-copy-gap:22px}}

.section-projects{padding-inline:48px!important}
@media(max-width:768px){.section-projects{padding-inline:20px!important}}
.contact-form .privacy-consent{border:0;background:transparent;border-radius:0;padding:0}


#case-modal-action{background:#fff;border-color:#fff;color:#111;box-shadow:none}
#case-modal-action:hover{background:#ededeb;border-color:#ededeb;color:#111}

:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.diploma-card,.contact-form){border-width:1px}
.contact-form{
  background:linear-gradient(148deg,#202022,#151517 55%,#1a1a1c)!important;
}
.section-projects .projects-grid:not(.is-expanded) .project-card{background-color:#1a1a1a;border-width:1px}
.sales-faq-list{background-color:#09090b;border-top-width:1px}
.sales-faq-item{border-bottom-width:1px}

#faq,.sales-faq-list,.sales-faq-item,.sales-faq-panel{background:transparent!important}
.contact-form .message-composer .form-textarea{resize:none}

/* Единый, чуть более тёмный материал всех карточек. Поле «Коротко о задаче»
   намеренно повторяет тот же непрозрачный тон — без прозрачного фона. */
:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.diploma-card,.contact-form){
  background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.030),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.022),transparent 57%),linear-gradient(148deg,#1c1c1e,#101012 53%,#171719)!important;
}
.contact-form .message-composer{
  background:linear-gradient(148deg,#1c1c1e,#101012 58%,#171719)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* Единый, более собранный ритм после перестановки «Обо мне» и процесса. */
.section-education{padding:64px 48px!important}
.section-research{padding:96px 48px 24px!important}
#stack.sales-process-section{padding-bottom:16px!important}
#stack .research-content{padding-bottom:0!important}
.sales-faq-section{
  padding:56px 48px!important;
  border-top:0!important;
}
.sales-faq-list{border-top:0!important}
@media(max-width:768px){
  .section-education{padding:40px 20px!important}
  .section-research{padding:60px 20px 20px!important}
  #stack.sales-process-section{padding-bottom:28px!important}
  .sales-faq-section{padding:48px 20px!important}
}

/* FAQ: постоянный контекст слева, вопросы — в самостоятельной колонке справа. */
.faq-layout{
  display:grid;
  grid-template-columns:minmax(210px,.54fr) minmax(0,1.46fr);
  align-items:start;
  gap:clamp(16px,1.6vw,30px);
}
.faq-intro{
  position:sticky;
  top:108px;
  align-self:start;
}
.faq-intro .section-label{margin-bottom:22px}
.faq-intro .section-heading{margin:0 0 24px;max-width:10ch}
.faq-note{
  max-width:27ch;
  margin:0;
  color:rgba(255,255,255,.56);
  font-size:16px;
  line-height:1.6;
}
.faq-telegram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:46px;
  margin-top:28px;
  padding:0 18px;
  color:#f3f3f3;
  font:500 14px "Geist",sans-serif;
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:#202023;
  box-shadow:0 7px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.faq-telegram:hover,.faq-telegram:focus-visible{color:#09090b;border-color:#f5f5f3;background:#f5f5f3;transform:translateY(-1px)}
.faq-telegram svg{order:2;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#faq .sales-faq-list{padding:0}
#faq .sales-faq-item > button{min-height:72px;padding:17px 4px}
#faq .sales-faq-panel p{max-width:62ch}
@media(max-width:768px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:34px}
  .faq-intro{position:static}
  .faq-intro .section-label{margin-bottom:18px}
  .faq-intro .section-heading{max-width:none;margin-bottom:16px}
  .faq-note{max-width:34ch;font-size:15px}
  .faq-telegram{margin-top:20px}
  #faq .sales-faq-item > button{min-height:62px;padding:14px 2px;font-size:16px}
  #faq .sales-faq-panel p{padding-right:42px}
}

/* Рекомендуемый формат: немного светлее материал и яснее подпись, без цветного бейджа. */
.sales-package--featured{
  border-color:rgba(255,255,255,.18)!important;
  background:radial-gradient(108% 78% at 50% -24%,rgba(255,255,255,.062),transparent 58%),radial-gradient(104% 78% at 116% 122%,rgba(255,255,255,.032),transparent 58%),linear-gradient(148deg,#202022,#121214 53%,#19191b)!important;
  box-shadow:0 30px 66px rgba(0,0,0,.32),0 7px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}
.sales-package--featured .sales-package-kicker{color:rgba(255,255,255,.78)}

/* В покое карточки спокойнее; подсветка включается только у активной карточки. */
.sales-package{
  background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
  border-color:rgba(255,255,255,.085)!important;
}
.sales-package--featured{
  background:radial-gradient(108% 78% at 50% -24%,rgba(255,255,255,.032),transparent 58%),radial-gradient(104% 78% at 116% 122%,rgba(255,255,255,.018),transparent 58%),linear-gradient(148deg,#1b1b1d,#101012 53%,#171719)!important;
  border-color:rgba(255,255,255,.13)!important;
}
@media(hover:hover) and (pointer:fine){
  .sales-package:hover{
    background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
    border-color:rgba(255,255,255,.085)!important;
    box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  }
  .sales-package--featured:hover{
    background:radial-gradient(108% 78% at 50% -24%,rgba(255,255,255,.032),transparent 58%),radial-gradient(104% 78% at 116% 122%,rgba(255,255,255,.018),transparent 58%),linear-gradient(148deg,#1b1b1d,#101012 53%,#171719)!important;
  }
  .sales-packages > .sales-package-reveal:nth-child(3) .sales-package:hover{
    background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
  }
}

/* Comparison headings share the same generous vertical rhythm. */
.why-comparison .why-column-heading{padding-top:8px;padding-bottom:20px}
.sales-process-step .process-time{
  display:block;margin-top:14px;padding:0;border:0;border-radius:0;
  background:transparent;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;line-height:1.5;color:var(--type-gray);
}
.project-tags.tags-overflow{visibility:hidden!important;pointer-events:none!important}
@media(min-width:769px) and (max-width:1100px){
  #projects .project-bottom{column-gap:8px}
  #projects .project-details{min-width:96px;padding-inline:10px}
  #projects .project-tag{font-size:9px;padding-inline:5px}
}
.project-tags{max-height:54px;overflow:hidden}
.project-kind{max-width:100%;white-space:normal!important;overflow-wrap:break-word}
.sales-package h3{overflow-wrap:normal;word-break:normal}
@media(max-width:1200px){
  .diploma-card .diploma-thumb-btn,
  .diploma-card .diploma-thumb-btn:hover,
  .diploma-card .diploma-thumb-btn:active{
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#fff!important;
  }
  .diploma-card .diploma-thumb-btn svg{stroke:#fff!important;color:#fff!important}
  .diploma-thumb-btn::before,.diploma-thumb-btn::after,.diploma-thumb-btn .lumina-layer{display:none!important}
}
body.desktop-compact-nav .nav,
body.desktop-compact-nav .nav.scrolled{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.desktop-compact-nav .nav::before,
body.desktop-compact-nav .nav::after,
body.desktop-compact-nav .nav>.lumina-layer{display:none!important}
body.desktop-compact-nav .sales-addon-cta{display:none!important}
.nav-hamburger:hover,.nav-hamburger:focus-visible{background:#fff!important;color:#111!important}
.nav-hamburger:hover>span,.nav-hamburger:focus-visible>span{background:#111!important;color:#111!important}
@media(min-width:769px) and (max-width:1200px){
  .sales-addon-cta{display:none!important}
}

/* Очень тихий белый ореол появляется только под курсором и остаётся частью
   документа: он не плавает отдельно от секций и не добавляет анимацию. */
.ambient-background::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(250px circle at var(--ambient-pointer-x,-1000px) var(--ambient-pointer-y,-1000px),rgba(255,255,255,.048) 0%,rgba(255,255,255,.018) 40%,transparent 74%);
}

@media(hover:hover) and (pointer:fine){

  /* Главная кнопка не «пружинит»: только ясная белая финальная стадия. */
  .hero-actions .btn-primary{transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important}
  .hero-actions .btn-primary:hover{
    transform:none!important;
    background:#f1f1ef!important;
    border-color:#f1f1ef!important;
    color:#111!important;
    box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.72)!important;
  }
}

@media(hover:hover) and (pointer:fine){
  .section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo:hover,
  .section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo:focus-visible{
    background:#f1f1ef!important;
    border-color:#f1f1ef!important;
    color:#111!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.36),0 16px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.82)!important;
  }

  /* Круглая кнопка открытия — нейтральная матовая поверхность в покое;
     локальный свет и белое состояние появляются только возле курсора. */
  .section-projects .projects-grid:not(.is-expanded) .project-actions .project-demo{
    background:#242426!important;
    border-color:rgba(255,255,255,.11)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.26)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

@media(hover:hover) and (pointer:fine){

  /* Открытые окна получают спокойную световую кайму по всей границе. */
  .demo-modal.open .demo-window,
  .case-modal.open .case-modal-window{
    border-color:rgba(255,255,255,.2)!important;
    box-shadow:-28px 0 74px rgba(255,255,255,.055),28px 0 74px rgba(255,255,255,.055),0 38px 110px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.38)!important;
  }
  .case-modal-close:hover{transform:none!important}

  /* У этих трёх малых действий немного более светлая база — как у остальных
     кнопок, но без цветного стекла. */
  :is(.project-demo,.form-file-trigger,.diploma-thumb-btn,.sales-addon-icon){
    background:#242426!important;
    border-color:rgba(255,255,255,.12)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.24)!important;
  }
}

/* Финальная унификация формы и окон: три поля формы используют один и тот же
   непрозрачный матовый материал, а окна остаются стеклянными без цветного тона. */
.contact-form .form-input,
.contact-form .message-composer{
  background:linear-gradient(148deg,#1c1c1e,#101012 58%,#171719)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  transition:border-color .28s ease,box-shadow .28s ease,background .28s ease!important;
}
.contact-form .form-input:focus,
.contact-form .message-composer:focus-within{
  background:linear-gradient(148deg,#1c1c1e,#101012 58%,#171719)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.045),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

@media(hover:hover) and (pointer:fine){

  /* Все действия предпросмотра получают ту же матовую основу и локальный
     свет, что и основные кнопки сайта. */
  .demo-window :is(.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button),
  .demo-window .demo-viewport-controls,
  .demo-window .demo-zoom-controls{
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    color:rgba(255,255,255,.82)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.24)!important;
    -webkit-backdrop-filter:blur(14px) saturate(80%);
    backdrop-filter:blur(14px) saturate(80%);
  }
  .demo-window .demo-viewport-controls{
    isolation:isolate;
    background:rgba(255,255,255,.03)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  .demo-window .demo-viewport-controls::before{
    background:#f1f1ef!important;
    box-shadow:0 4px 12px rgba(0,0,0,.25)!important;
  }
  .demo-window .demo-viewport-button{
    color:rgba(255,255,255,.62)!important;
    font-weight:500!important;
  }
  .demo-window .demo-viewport-button[aria-pressed="true"]{color:#090a0b!important}
  .diploma-thumb-btn:hover,
  .form-file-trigger:hover,
  .project-demo:hover{
    background:#f1f1ef!important;
    border-color:#f1f1ef!important;
    color:#111!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.42),0 16px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.82)!important;
  }
  .diploma-thumb-btn:hover svg,
  .form-file-trigger:hover svg,
  .project-demo:hover svg{stroke:#111!important}

  /* Окна — матовое стекло, а не чёрный прямоугольник. Свет остаётся по
     бокам, чтобы не спорить с содержимым внутри. */
  .demo-window,
  .case-modal-window{
    background:linear-gradient(148deg,rgba(35,35,38,.84),rgba(15,15,18,.9) 56%,rgba(26,26,28,.86))!important;
    border-color:rgba(255,255,255,.18)!important;
    -webkit-backdrop-filter:blur(26px) saturate(78%);
    backdrop-filter:blur(26px) saturate(78%);
  }
  .demo-bar{background:rgba(20,20,23,.64)!important}
  .demo-modal.open .demo-window,
  .case-modal.open .case-modal-window{
    box-shadow:-46px 0 112px rgba(255,255,255,.11),46px 0 112px rgba(255,255,255,.11),0 42px 120px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.38)!important;
  }
  .case-modal-close{
    z-index:20!important;
    background:rgba(24,24,27,.68)!important;
    border-color:rgba(255,255,255,.18)!important;
  }
}

/* --------------------------------------------------------------------------
   Единая система поверхностей и взаимодействий.
   Этот блок — единственная точка настройки карточек, действий и формы.
   Он намеренно монохромный и не использует постоянные тяжёлые размытия.
   -------------------------------------------------------------------------- */
:root{
  --surface: #171719;
  --surface-raised: #202023;
  --surface-border: rgba(255,255,255,.105);
  --surface-edge: rgba(255,255,255,.075);
  --control: #252527;
  --control-text: #f2f2f0;
}

:is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card){
  background:linear-gradient(145deg,#1a1a1c 0%,#141416 58%,#171719 100%)!important;
  border-color:var(--surface-border)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 var(--surface-edge),inset 0 -1px 0 rgba(0,0,0,.38)!important;
}

.contact-form{
  background:linear-gradient(145deg,#1a1a1c 0%,#111113 60%,#161618 100%)!important;
  border-color:var(--surface-border)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 var(--surface-edge),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* Все три поля используют один материал. Большое поле отличается только
   высотой, а не цветом, радиусом или логикой свечения. */
.contact-form :is(.form-input,.message-composer){
  background:linear-gradient(145deg,#1a1a1c,#111113 60%,#161618)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}
.contact-form :is(.form-input:focus,.message-composer:focus-within){
  border-color:rgba(255,255,255,.25)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* Небольшие действия всегда читаются как отдельный слой, без оттенков цвета. */
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.diploma-thumb-btn,.form-file-trigger,.sales-addon-icon,.faq-telegram,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.mobile-scroll-top){
  background:var(--control)!important;
  border-color:rgba(255,255,255,.13)!important;
  color:var(--control-text)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.3)!important;
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .28s ease!important;
}

@media (hover:hover) and (pointer:fine){
  .diploma-thumb-btn:hover,.project-demo:hover,.sales-addon-icon:hover,.case-modal-close:hover{transform:none!important}
  .demo-modal.open .demo-window,.case-modal.open .case-modal-window{
    border-color:rgba(255,255,255,.2)!important;
    box-shadow:-32px 0 80px rgba(255,255,255,.07),32px 0 80px rgba(255,255,255,.07),0 38px 108px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4)!important;
  }
}

@media(max-width:768px){
  .sales-process-step{background:transparent!important;box-shadow:none!important}
  .faq-note,.faq-telegram{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  :is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.diploma-thumb-btn,.form-file-trigger,.sales-addon-icon,.faq-telegram){transition:none!important}
}

/* Исправления геометрии: элементы с собственной абсолютной позицией не
   участвуют в световом слое и всегда остаются на закреплённых координатах. */
.sales-addon{position:relative}
.sales-addon-icon.desktop-fixed{
  position:absolute!important;
  top:26px!important;
  right:26px!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  opacity:1!important;
}
.diploma-card .diploma-thumb-btn{
  position:absolute!important;
  top:auto!important;
  right:12px!important;
  bottom:11px!important;
  left:auto!important;
  transform:none!important;
}
.section-projects .project-actions .project-demo{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
}
.section-projects .project-actions .project-demo svg{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}

/* Окно «Подробнее» — независимая двухрядная сетка. Его внутренности не
   получают позиционирование или слой свечения, поэтому фото всегда сверху,
   контент ниже, а крестик — строго в правом углу. */
.case-modal-window{
  display:grid!important;
  grid-template-rows:minmax(160px,260px) minmax(0,auto)!important;
  overflow:hidden!important;
}
.case-modal-media{
  grid-row:1!important;
  grid-column:1!important;
  position:relative!important;
  z-index:0!important;
  min-height:0!important;
}
.case-modal-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.case-modal-content{
  grid-row:2!important;
  grid-column:1!important;
  position:relative!important;
  z-index:1!important;
}
.case-modal-close{
  position:absolute!important;
  z-index:12!important;
  top:18px!important;
  right:18px!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
}

/* Полноэкранный просмотр использует обычную короткую смену состояния —
   никаких послойных бликов и скачков между тёмным и светлым. */
.demo-window :is(.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button){
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .demo-window :is(.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button):hover{
    background:#f2f2f0!important;
    border-color:#f2f2f0!important;
    color:#111!important;
    box-shadow:0 10px 22px rgba(0,0,0,.28)!important;
    transform:none!important;
  }
}

/* В строке трёх тарифов все контрольные точки совпадают: шапка, название,
   описание, каждая строка состава, цена и действие. */
@media(min-width:769px){
  .sales-packages{align-items:stretch}
  .sales-package-reveal,.sales-package{height:100%}
  .sales-package-details,.sales-package-details-inner{display:flex;flex:1 1 auto;min-height:0}
  .sales-package-details-inner,.sales-package-details-inner ul{width:100%}
  .sales-package-mobile-row{margin-top:auto!important}
}

@media(max-width:768px){
  .sales-addon-icon.desktop-fixed{top:18px!important;right:18px!important}
  .diploma-card .diploma-thumb-btn{right:10px!important;bottom:10px!important}
  .case-modal-window{grid-template-rows:clamp(120px,26svh,220px) minmax(0,auto)!important}
  .case-modal-close{top:16px!important;right:16px!important}
}

/* Вложенные служебные контейнеры не должны становиться новыми точками отсчёта
   для абсолютных иконок. Иначе «Открыть» и Direct смещаются из углов карточки. */
.section-projects .project-actions{position:static!important}
.sales-addon-header-row{position:static!important}
.sales-addon .sales-addon-icon.desktop-fixed{
  position:absolute!important;
  inset:24px 24px auto auto!important;
  margin:0!important;
  z-index:8!important;
}

@media(max-width:768px){
  .sales-addon .sales-addon-icon.desktop-fixed{inset:18px 18px auto auto!important}
}

/* Финальная настройка: вопросы остаются только текстом, а действия получают
   более сильный, локальный отклик, чем поверхность карточки. */
#faq .sales-faq-item,
#faq .sales-faq-item > button,
#faq .sales-faq-item > button:hover,
#faq .sales-faq-item > button:focus-visible{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Круглое действие «Открыть» закреплено на стыке обложки и контента при
   любой ширине карточки; оно не зависит от раскладки нижней строки. */
.section-projects .project-card{position:relative!important}
.section-projects .project-actions .project-demo{
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  top:calc(var(--project-thumb-height,220px) - 30px)!important;
  right:24px!important;
  width:60px!important;
  min-width:60px!important;
  height:60px!important;
  min-height:60px!important;
  margin:0!important;
  padding:0!important;
  z-index:30!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
  border-radius:50%!important;
  background:#252527!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#f2f2f0!important;
  transform:none!important;
}
.section-projects .project-actions .project-demo svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}
.section-projects .project-actions .project-demo:hover{
  background:#f2f2f0!important;
  border-color:#f2f2f0!important;
  color:#111!important;
}
.section-projects .project-actions .project-demo:hover svg{stroke:#111!important;color:#111!important}

@media(max-width:768px){
  .section-projects .project-actions .project-demo{
    top:calc(var(--project-thumb-height,220px) - 23px)!important;
    right:14px!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }
  .section-projects .project-actions .project-demo svg{width:17px!important;height:17px!important}
}

/* Единый материал для малых меток: это не отдельные анимации, а тот же
   одноразовый световой слой, что у кнопок. */
@media(hover:hover) and (pointer:fine){

  /* Фокус в полях заметен через материал формы, но без белой внешней рамки. */
  .contact-form .form-input:focus,
  .contact-form .message-composer:focus-within{
    outline:none!important;
    border-color:rgba(255,255,255,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  }
}

/* Последняя полировка взаимодействий: световой контур клипуется самим
   элементом, поэтому повторяет его радиус пиксель-в-пиксель. */
@media(hover:hover) and (pointer:fine){

  /* У переключателя предпросмотра та же спокойная логика, что у RU / EN:
     белая только выбранная половина, неактивная не получает локальный свет. */
  .demo-window .demo-viewport-controls{
    isolation:isolate;
    padding:3px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.03)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .demo-window .demo-viewport-controls::before{
    top:3px!important;
    bottom:3px!important;
    left:3px!important;
    height:auto!important;
    width:calc((100% - 6px) / 2)!important;
    background:#f2f2f0!important;
    box-shadow:0 4px 12px rgba(0,0,0,.25)!important;
    transition:transform .38s cubic-bezier(.22,1,.36,1)!important;
  }
  .demo-window .demo-viewport-button,
  .demo-window .demo-viewport-button:hover{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:rgba(255,255,255,.4)!important;
    transition:color .28s ease!important;
  }
  .demo-window .demo-viewport-button:hover{color:rgba(255,255,255,.85)!important}
  .demo-window .demo-viewport-button[aria-pressed="true"],
  .demo-window .demo-viewport-button[aria-pressed="true"]:hover{color:#08090b!important}
}

/* У контактной формы есть запас на мягкий подъём, поэтому её край никогда
   не режется прокручиваемой областью. Подвал заканчивает страницу компактно. */
@media(min-width:769px){
  .contact-screen .contact-wrap{
    box-sizing:border-box;
    padding:6px 0;
  }
  .contact-screen .contact-form{position:relative;z-index:1}
  .contact-screen .footer{padding:8px 24px max(8px,env(safe-area-inset-bottom))}
}

/* Сроки остаются спокойной типографикой. Светятся только технологические
   метки, как и было задумано для интерфейсных плашек. */
.project-build-time,
.sales-package-time{isolation:auto!important}

/* FAQ остаётся прозрачным, но разделён тонкими линиями между вопросами. */
#faq .sales-faq-item + .sales-faq-item{
  border-top:1px solid rgba(255,255,255,.09)!important;
}

/* Адаптация для слабого железа: сохраняем рисунок и структуру, уменьшая
   только дорогие размытия и второстепенную реакцию фона. */
.performance-lite :is(.nav,.mobile-menu,.mobile-sticky-cta,.case-modal-window,.demo-window,.project-demo){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.performance-lite .ambient-background::before,
.performance-lite .ambient-background::after{display:none!important}
.performance-lite :is(.project-card,.reveal,.sales-package,.sales-addon,.outcome-card,.diploma-card){will-change:auto!important}

/* Карточки не меняют материал по hover: подъём и свет начинаются на подходе
   к границе и столь же плавно затухают после ухода курсора. */
@media(hover:hover) and (pointer:fine){
  .sales-package:hover,
  .sales-package--featured:hover,
  .sales-packages > .sales-package-reveal:nth-child(3) .sales-package:hover{
    background:linear-gradient(145deg,#1a1a1c 0%,#141416 58%,#171719 100%)!important;
  }
}

/* Возвращённая кнопка открытия: закреплена поверх стыка обложки и карточки,
   имеет тот же размер и заметную матовую основу, что в стабильной версии. */
.section-projects .project-bottom{
  /* Световой слой добавляет position прямым потомкам карточки. Для этой
     строки оно не нужно: иначе абсолютная кнопка считает top от нижней
     части вместо всей карточки и оказывается за пределами экрана. */
  position:static!important;
  z-index:auto!important;
}
.section-projects .project-actions .project-demo{
  top:calc(var(--project-thumb-height,220px) - 32px)!important;
  right:24px!important;
  width:64px!important;
  min-width:64px!important;
  height:64px!important;
  min-height:64px!important;
  background:linear-gradient(145deg,rgba(63,63,71,.92),rgba(28,28,33,.96))!important;
  border-color:rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.98)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.3)!important;
}
.section-projects .project-actions .project-demo svg{
  width:22px!important;
  height:22px!important;
  stroke:currentColor!important;
}
@media(max-width:768px){
  .section-projects .project-actions .project-demo{
    top:calc(var(--project-thumb-height,220px) - 26px)!important;
    right:18px!important;
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
  }
}

/* Финальный источник состояний hover — расположен после исторических
   переопределений, чтобы скорость и геометрия больше не спорили друг с другом. */
@media(hover:hover) and (pointer:fine){

  .demo-window .demo-viewport-controls{
    isolation:isolate;
    padding:3px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.03)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .demo-window .demo-viewport-controls::before{
    top:3px!important;
    bottom:3px!important;
    left:3px!important;
    height:auto!important;
    width:calc((100% - 6px) / 2)!important;
    background:#f2f2f0!important;
    box-shadow:0 4px 12px rgba(0,0,0,.25)!important;
    transition:transform .38s cubic-bezier(.22,1,.36,1)!important;
  }
  .demo-window .demo-viewport-button,
  .demo-window .demo-viewport-button:hover{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:rgba(255,255,255,.4)!important;
    transition:color .28s ease!important;
  }
  .demo-window .demo-viewport-button:hover{color:rgba(255,255,255,.85)!important}
  .demo-window .demo-viewport-button[aria-pressed="true"],
  .demo-window .demo-viewport-button[aria-pressed="true"]:hover{color:#08090b!important}
}

@media(min-width:769px){
  .contact-screen .contact-wrap{box-sizing:border-box;padding:6px 0}
  .contact-screen .contact-form{position:relative;z-index:1}
  .contact-screen .footer{padding:8px 24px max(8px,env(safe-area-inset-bottom))}
}

/* Текущая UI-полировка: форма, фон модальных окон и режимы портфолио. */
.ambient-background{background-size:100% 100%,30px 30px!important}
.ambient-background::after{background-size:30px 30px!important}

/* Оверлей не затемняет страницу: это нейтральное матовое стекло поверх
   текущей композиции, а не чёрная шторка. */
:is(.demo-modal,.case-modal){
  background:rgba(236,236,240,.075)!important;
  -webkit-backdrop-filter:blur(24px) saturate(82%) brightness(1.14)!important;
  backdrop-filter:blur(24px) saturate(82%) brightness(1.14)!important;
}

/* Обложки проектов не масштабируются от наведения — смена главной карточки
   происходит только после нажатия. */
.section-projects .project-card:hover .project-thumb img{transform:none!important}

/* На широком экране витрина — две равные колонки. */
@media(min-width:769px){
  .section-projects .projects-grid.is-expanded{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  .section-projects .projects-grid.is-expanded .project-card{
    width:auto!important;
    min-width:0!important;
    flex:none!important;
    margin:0!important;
  }

  /* В режиме карусели заголовок переезжает в центр, а переключатель
     остаётся на прежнем правом краю. View Transition плавно связывает
     оба состояния. */
  .section-projects:not(.portfolio-grid-view) .projects-heading-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
  }
  .section-projects:not(.portfolio-grid-view) .projects-heading-row .section-heading{
    grid-column:2!important;
    justify-self:center!important;
    text-align:center!important;
  }
  .section-projects:not(.portfolio-grid-view) .projects-view-toggle{
    grid-column:3!important;
    justify-self:end!important;
  }
}

@media(hover:hover) and (pointer:fine){
  .contact-form .form-input{
    --form-spotlight-strength:0;
    --form-spotlight-x:50%;
    --form-spotlight-y:50%;
    background:radial-gradient(270px circle at var(--form-spotlight-x) var(--form-spotlight-y),rgb(255 255 255 / calc(var(--form-spotlight-strength) * .15)) 0%,rgb(255 255 255 / calc(var(--form-spotlight-strength) * .052)) 38%,transparent 76%),linear-gradient(145deg,#1a1a1c,#111113 60%,#161618)!important;
    border-color:rgb(255 255 255 / calc(.11 + var(--form-spotlight-strength) * .12))!important;
    box-shadow:0 0 0 1px rgb(255 255 255 / calc(var(--form-spotlight-strength) * .045)),inset 0 1px 0 rgb(255 255 255 / calc(.065 + var(--form-spotlight-strength) * .05)),inset 0 -1px 0 rgba(0,0,0,.42)!important;
    transition:border-color .36s cubic-bezier(.22,1,.36,1),box-shadow .36s cubic-bezier(.22,1,.36,1)!important;
  }
}

/* Свет затухает инерционно: быстрый проход между соседними поверхностями
   больше не выглядит как серия резких включений и выключений. */
@property --form-spotlight-strength{
  syntax:"<number>";
  inherits:false;
  initial-value:0;
}
@media(hover:hover) and (pointer:fine){
  .contact-form .form-input{
    transition:--form-spotlight-strength .58s cubic-bezier(.22,1,.36,1),border-color .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1)!important;
  }
}

/* Финальный ряд действительно завершает страницу, без лишнего чёрного поля. */
@media(min-width:769px){
  .contact-screen .footer{padding:4px 24px max(4px,env(safe-area-inset-bottom))!important}
}

/* Финальная геометрия диплома и переходов портфолио. Диплом — не 16:9-сайт:
   он получает своё, более узкое окно, близкое к пропорциям оригинала. */
@media(min-width:769px){
  .demo-modal.is-diploma-view .demo-window{
    width:min(calc(100vw - 112px),calc((100svh - 128px) * 1.414))!important;
    max-width:none!important;
    height:auto!important;
  }
  .demo-modal.is-diploma-view .demo-frame-wrap{
    flex:none!important;
    aspect-ratio:1520 / 1075!important;
  }
  .demo-modal.is-diploma-view .diploma-pages{
    padding:12px!important;
    gap:12px!important;
  }
  .demo-modal.is-diploma-view .diploma-pages img{width:100%!important;max-width:none!important}

  /* Имена перехода принадлежат непосредственно тексту. Поэтому и заголовок,
     и метка «Портфолио» физически перемещаются, а не перескакивают по широкой
     строке при смене раскладки. */
  .section-projects .projects-heading-row{view-transition-name:none!important}
  .section-projects .projects-heading-row .section-heading{
    width:fit-content!important;
    view-transition-name:portfolio-heading;
  }
  .section-projects>.section-inner>.section-label{
    width:fit-content!important;
    margin-left:0!important;
    margin-right:auto!important;
    text-align:left!important;
  }
  .section-projects:not(.portfolio-grid-view)>.section-inner>.section-label{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}

@media(min-width:769px) and (prefers-reduced-motion:no-preference){
  ::view-transition-group(portfolio-heading),
  ::view-transition-group(portfolio-label){
    animation-duration:1500ms!important;
    animation-timing-function:cubic-bezier(.22,1,.36,1)!important;
  }
}

/* Финальная доводка взаимодействий: одна модель света для трёх полей формы,
   точный круговой край у «Открыть» и стабильная геометрия карусели. */
@media(hover:hover) and (pointer:fine){

  /* Имя, контакт и описание задачи используют один материал и одинаковую
     динамическую реакцию на положение курсора. */
  .contact-form :is(.form-input,.message-composer){
    --form-spotlight-strength:0;
    --form-spotlight-x:50%;
    --form-spotlight-y:50%;
    background:
      radial-gradient(270px circle at var(--form-spotlight-x) var(--form-spotlight-y),rgb(255 255 255 / calc(var(--form-spotlight-strength) * .15)) 0%,rgb(255 255 255 / calc(var(--form-spotlight-strength) * .052)) 38%,transparent 76%),
      linear-gradient(145deg,#1a1a1c,#111113 60%,#161618)!important;
    border:1px solid rgb(255 255 255 / calc(.11 + var(--form-spotlight-strength) * .12))!important;
    border-radius:13px!important;
    box-shadow:0 0 0 1px rgb(255 255 255 / calc(var(--form-spotlight-strength) * .045)),inset 0 1px 0 rgb(255 255 255 / calc(.065 + var(--form-spotlight-strength) * .05)),inset 0 -1px 0 rgba(0,0,0,.42)!important;
    transition:--form-spotlight-strength .58s cubic-bezier(.22,1,.36,1),border-color .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1)!important;
  }
  .contact-form .message-composer .form-textarea,
  .contact-form .message-composer .form-textarea::placeholder{
    box-sizing:border-box!important;
    display:block!important;
    padding:15px 16px 80px!important;
    text-align:left!important;
  }
}

/* В горизонтальной витрине не остаётся пустого «коридора» после заголовка. */
@media(min-width:769px){
  .section-projects:not(.portfolio-grid-view) .projects-grid{padding-top:28px!important}
  #stack.sales-process-section{padding-bottom:88px!important}
  #faq.sales-faq-section{padding-top:64px!important}
}

/* В карусели белый заголовок читается как единый, точно центрированный блок. */
.section-projects .projects-heading-row .section-heading,
.section-projects .projects-heading-row .section-heading .thin{
  color:#fff!important;
  opacity:1!important;
}

/* Виньетка появляется в момент выбора горизонтального вида, а не после
   завершения перехода карточек. */
.section-projects.portfolio-edge-ready .portfolio-edge{
  visibility:visible!important;
  opacity:1!important;
}

/* Единая типографика и три коротких преимущества первого экрана. */
.hero-h1 .thin,
.section-heading .thin,
.cta-heading .thin,
.projects-heading-row .thin{
  color:#fff!important;
  opacity:1!important;
}
.hero-pill{
  border-color:rgba(108,235,151,.22)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(164,255,198,.16),inset 0 -1px 0 rgba(0,0,0,.32)!important;
}
.hero-pill::before{
  width:6px;height:6px;
  background:#62e6a0!important;
  box-shadow:0 0 0 3px rgba(98,230,160,.09),0 0 14px rgba(98,230,160,.42);
  animation:pulse 2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.hero-pill::before{animation:none}}

/* Нижние действия возвращены и на широкие экраны: они не перекрывают
   контент, но остаются доступны после первого экрана. */
@media(min-width:769px){
  .mobile-sticky-cta{
    display:flex!important;
    position:fixed!important;
    left:50%!important;
    bottom:24px!important;
    z-index:100!important;
  }
  .mobile-scroll-top{
    display:flex!important;
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:100!important;
  }
}

/* Обложка Lumus показывает весь первый экран без белой кромки и обрезки. */
.project-card[data-project-id="lumus"] .project-thumb{background:#0a0a0b url("portfolio/lumus/cover-poster.jpg") center top / cover no-repeat!important}
.project-card[data-project-id="lumus"] .project-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
}

/* Финальная настройка материала: в спокойном состоянии поверхности заметно
   отделяются от чёрного фона, но их радиус и существующие края не меняются. */
:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.diploma-card,.contact-form){
  background:
    radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.061),transparent 55%),
    radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.043),transparent 58%),
    linear-gradient(148deg,#242426,#161619 54%,#1e1e21)!important;
}
.sales-package:hover{
  background:
    radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.061),transparent 55%),
    radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.043),transparent 58%),
    linear-gradient(148deg,#242426,#161619 54%,#1e1e21)!important;
}
@media(hover:hover) and (pointer:fine){
  .contact-form :is(.form-input,.message-composer){
    background:
      radial-gradient(270px circle at var(--form-spotlight-x,50%) var(--form-spotlight-y,50%),rgb(255 255 255 / calc(var(--form-spotlight-strength,0) * .15)) 0%,rgb(255 255 255 / calc(var(--form-spotlight-strength,0) * .052)) 38%,transparent 76%),
      linear-gradient(148deg,#212124,#151518 58%,#1b1b1e)!important;
  }
}

/* Названия вновь получают спокойный второй тон — это возвращает ритм,
   но основной текст остаётся достаточно контрастным на тёмном фоне. */
.hero-h1 .thin{color:#a3a3a8!important}
.section-heading .thin,.cta-heading .thin,.projects-heading-row .thin{
  color:rgba(255,255,255,.58)!important;
}

/* У «Портфолио» второй тон не должен теряться из-за более раннего
   центрирующего правила: заголовок снова читается как одна двухцветная
   фраза, а не как полностью белый блок. */
.section-projects .projects-heading-row .section-heading .thin{
  color:rgba(255,255,255,.58)!important;
}

/* У плашек нейтральная стеклянная кромка; зелёным остаётся только индикатор. */
.hero-pill{
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.32)!important;
}

/* По краям остаётся читаемая сетка, без резкого белого центра. */
.ambient-background{
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,.78) 10%,#000 28%,#000 72%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.7) 100%)!important;
  mask-image:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,.78) 10%,#000 28%,#000 72%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.7) 100%)!important;
}

/* Завершение страницы отделено полной спокойной линией и симметричным полем. */
.contact-screen .footer{
  width:100%;
  margin-top:22px!important;
  padding:20px 24px max(20px,env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.08));
}
.contact-screen .footer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:1px;
  translate:-50% 0;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}
@media(max-width:768px){
  .contact-screen .footer{padding:18px 20px max(18px,env(safe-area-inset-bottom))!important}
}

/* Вне прямого попадания курсора карточка уже слегка оживает: это делает
   переход между соседними поверхностями спокойным. Непосредственно под
   курсором тон усиливается ещё на один шаг за полсекунды. */
@media(hover:hover) and (pointer:fine){
  .contact-form :is(.form-input,.message-composer){
    background:
      radial-gradient(270px circle at var(--form-spotlight-x,50%) var(--form-spotlight-y,50%),rgb(255 255 255 / calc(var(--form-spotlight-strength,0) * .15)) 0%,rgb(255 255 255 / calc(var(--form-spotlight-strength,0) * .052)) 38%,transparent 76%),
      linear-gradient(148deg,#222225,#171719 58%,#1d1d20)!important;
  }
}

/* В спокойном состоянии все три поля заявки используют одинаковый, чуть
   более светлый материал. Большое поле отличается лишь высотой. */
.contact-form :is(.form-input,.message-composer){
  background:linear-gradient(148deg,#222225,#171719 58%,#1d1d20)!important;
  border-color:rgba(255,255,255,.12)!important;
  border-radius:13px!important;
}

/* В сеточном портфолио — более собранный, но всё ещё безопасный ритм. */
@media(min-width:769px){
  .section-projects .projects-grid.is-expanded{gap:20px!important}
}

/* В «Подробнее» два нейтральных шага и один постоянный акцент: дизайн →
   интерактивный предпросмотр → реальный сайт. */
#case-modal-action{
  background:#202023!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f3f3f3!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#case-modal-site-action{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 10px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
#case-modal-site-action:hover{background:#fff!important;border-color:#fff!important;color:#09090b!important}
#case-modal-site-action[hidden]{display:none!important}
@media(max-width:768px){
  .case-modal-actions{flex-direction:column!important}
  .case-modal-action{width:100%!important;min-height:46px!important}
}

/* Финальный слой для форматов работы. Он намеренно стоит после старых
   :hover-правил, включая третий формат, поэтому ни одна карточка не теряет
   собственный серый материал при приближении курсора. */
@media(hover:hover) and (pointer:fine){
  .sales-packages > .sales-package-reveal > .sales-package:hover{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.061),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.043),transparent 58%),
      linear-gradient(148deg,#242426,#161619 54%,#1e1e21)!important;
  }
  .section-outcome .outcome-card.active{
    translate:0 -4px!important;
    scale:1.014;
    border-color:rgba(255,255,255,.21)!important;
    background:
      radial-gradient(112% 82% at -12% -26%,rgba(255,255,255,.095),transparent 57%),
      radial-gradient(108% 80% at 114% 120%,rgba(255,255,255,.06),transparent 59%),
      linear-gradient(148deg,#2a2a2d,#1c1c1f 54%,#242427)!important;
    box-shadow:0 22px 52px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.36)!important;
  }
}

/* Баланс материала для разной яркости дисплеев: спокойная поверхность на
   один тон глубже, но с сохранённым разделением от чёрного фона. Края,
   радиусы и вся уже настроенная физика света остаются прежними. */
:is(.sales-package,.sales-addon,.outcome-card,.sales-process-step,.project-card,.diploma-card,.contact-form){
  background:
    radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
    radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
    linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
}
.contact-form :is(.form-input,.message-composer){
  background:linear-gradient(148deg,#1e1e20,#131315 58%,#19191b)!important;
}

/* Текст и ввод в большом поле начинаются с одной и той же точки — слева
   сверху. Отступ снизу оставлен только для закреплённого файла. */
.message-composer .form-textarea,
.message-composer .form-textarea::placeholder{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:16px 16px 80px!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  text-indent:0!important;
  vertical-align:top!important;
}

@media(hover:hover) and (pointer:fine){
  .sales-packages > .sales-package-reveal > .sales-package:hover{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.052),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.037),transparent 58%),
      linear-gradient(148deg,#202022,#141416 54%,#1a1a1c)!important;
  }
  .section-outcome .outcome-card.active{
    background:
      radial-gradient(112% 82% at -12% -26%,rgba(255,255,255,.078),transparent 57%),
      radial-gradient(108% 80% at 114% 120%,rgba(255,255,255,.052),transparent 59%),
      linear-gradient(148deg,#252527,#19191b 54%,#1f1f21)!important;
  }
}

/* Поля заявки — статичные поверхности для ввода. Они заметно отделены от
   формы, но не дублируют курсорный свет карточек и не выглядят как кнопки. */
.contact-form :is(.form-input,.message-composer),
.contact-form :is(.form-input,.message-composer):hover,
.contact-form :is(.form-input,.message-composer):focus,
.contact-form .message-composer:focus-within{
  background:rgba(5,5,7,.16)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(0,0,0,.24)!important;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}

/* Базовый материал карточек не меняется от обычного CSS-hover: состоянием
   света управляет единая направленная модель из main.js. */
@media(hover:hover) and (pointer:fine){
  .sales-packages > .sales-package-reveal > .sales-package:hover{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
      linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
  }
  .section-projects .project-card:hover::after{opacity:0!important}
  .outcome-grid:has(.outcome-card:hover) + .outcome-visual canvas{opacity:.32!important}
}

/* Все рабочие действия используют один спокойный материал. Исключение —
   постоянная белая «Портфолио» на первом экране и белая кнопка реального сайта
   в окне кейса. Геометрия круглых и иконковых действий остаётся прежней. */
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-sticky-cta,.mobile-scroll-top,.case-modal-action,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close){
  background:#202023!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f3f3f3!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.28)!important;
  transition:background .24s ease,border-color .24s ease,color .24s ease,box-shadow .32s ease!important;
}
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-sticky-cta,.mobile-scroll-top,.case-modal-action,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close):hover,
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-sticky-cta,.mobile-scroll-top,.case-modal-action,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close):focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-sticky-cta,.mobile-scroll-top,.case-modal-action,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close):hover svg,
:is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-sticky-cta,.mobile-scroll-top,.case-modal-action,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close):focus-visible svg{stroke:#111!important;color:#111!important}

/* Два ранее согласованных исключения сохраняют свой постоянный акцент. */
.hero-actions .btn-secondary,
.hero-actions .btn-secondary:hover,
.hero-actions .btn-secondary:focus-visible,
#case-modal-site-action,
#case-modal-site-action:hover,
#case-modal-site-action:focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
}

/* Витрина проектов поднимается как остальные карточки, но её собственные
   угол, масштаб и положение в карусели остаются нетронутыми. */
@media(hover:hover) and (pointer:fine){
  .section-projects .projects-grid .project-card{
    transition:translate .34s cubic-bezier(.22,1,.36,1)!important;
  }
  .section-projects .projects-grid .project-card:hover{
    translate:0 -3px!important;
  }

  /* Третий формат не имеет отдельного hover-материала: «Веб-сервис» ведёт
     себя так же, как лендинг и многостраничный сайт. */
  .sales-packages > .sales-package-reveal:nth-child(3) > .sales-package,
  .sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:hover{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
      linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
  }
}

/* Единая спокойная кинематика карточек: движение остаётся на композиторе
   браузера (transform), поэтому не добавляет перерасчётов или рывков. */
@media(hover:hover) and (pointer:fine){
  :is(.outcome-card,.sales-package,.sales-addon,.diploma-card,.number-card,.contact-form){
    will-change:transform;
    transition:transform .62s cubic-bezier(.16,1,.3,1)!important;
  }
  :is(.outcome-card,.sales-package,.sales-addon,.diploma-card,.number-card,.contact-form):hover{
    transform:translateY(-3px) scale(1.005)!important;
  }

  /* В двухколоночной витрине проект ведёт себя так же, как карточка Lumus:
     едва заметно поднимается и увеличивается вместе с целой поверхностью. */
  .section-projects .projects-grid.is-expanded .project-card{
    will-change:transform;
    transition:transform .62s cubic-bezier(.16,1,.3,1)!important;
  }
  .section-projects .projects-grid.is-expanded .project-card:hover{
    translate:none!important;
    transform:translateY(-3px) scale(1.005)!important;
  }

  /* Стрелка круглого действия повторяет жест Lumus: поворачивается от
     наведения на карточку, а не требует отдельного попадания в иконку. */
  .section-projects .project-actions .project-demo.lumina-target > svg:not(.lumina-layer){
    transition:transform .62s cubic-bezier(.16,1,.3,1)!important;
  }
  .section-projects .projects-grid.is-expanded .project-card:hover .project-demo svg,
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover .project-demo svg{
    transform:rotate(45deg)!important;
  }

  /* В горизонтальной витрине соседние проекты остаются неподвижными:
     не увеличиваются и не становятся светлее. Реагирует только главный. */
  .section-projects .projects-grid:not(.is-expanded) .project-card{
    transition:transform .62s cubic-bezier(.16,1,.3,1),translate .62s cubic-bezier(.16,1,.3,1)!important;
  }
  .section-projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active):hover{
    translate:none!important;
    transform:perspective(1600px) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,1))!important;
    border-color:rgba(255,255,255,.095)!important;
    box-shadow:0 14px 38px rgba(0,0,0,.22)!important;
  }
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover{
    translate:0 -3px!important;
    transform:perspective(1600px) rotateY(var(--orbit-angle,0deg)) scale(calc(var(--carousel-scale,1) + .005))!important;
    border-color:rgba(255,255,255,.095)!important;
    box-shadow:0 14px 38px rgba(0,0,0,.22)!important;
  }
}
@media(min-width:769px) and (hover:hover) and (pointer:fine){
  .section-projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active):hover{
    transform:perspective(1600px) translateX(var(--orbit-pull,0px)) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,1))!important;
  }
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover{
    transform:perspective(1600px) translateX(var(--orbit-pull,0px)) rotateY(var(--orbit-angle,0deg)) scale(calc(var(--carousel-scale,1) + .005))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  :is(.outcome-card,.sales-package,.sales-addon,.diploma-card,.number-card,.contact-form,.section-projects .project-card,.section-projects .project-actions .project-demo svg){
    transition:none!important;
  }
}

@media(hover:hover) and (pointer:fine){

  /* Внешняя ссылка начинается как ↗ и спокойно разворачивается в → только
     при наведении на саму карточку. У «Планировщика» иконка не меняется. */
  .section-projects .project-actions .project-demo:not(.project-gallery-open) svg{
    transform:rotate(-45deg)!important;
  }
  .section-projects .projects-grid.is-expanded .project-card:hover .project-demo.lumina-target:not(.project-gallery-open) > svg:not(.lumina-layer),
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover .project-demo.lumina-target:not(.project-gallery-open) > svg:not(.lumina-layer){
    transform:rotate(0deg)!important;
  }
  .section-projects .project-card:hover .project-demo.project-gallery-open svg{
    transform:none!important;
  }

  /* Hover не меняет материал карточек: прежние градиенты, рамки и тени
     остаются одинаковыми до и после наведения. */
  .sales-package:hover,
  .sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:hover{
    background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
    border-color:rgba(255,255,255,.085)!important;
    box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  }
  .sales-package--featured:hover{
    background:radial-gradient(108% 78% at 50% -24%,rgba(255,255,255,.032),transparent 58%),radial-gradient(104% 78% at 116% 122%,rgba(255,255,255,.018),transparent 58%),linear-gradient(148deg,#1b1b1d,#101012 53%,#171719)!important;
    border-color:rgba(255,255,255,.13)!important;
  }
  :is(.sales-addon,.outcome-card,.diploma-card):hover{
    border-color:rgba(255,255,255,.105)!important;
    box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  }
  .outcome-grid:has(.outcome-card:hover) + .outcome-visual canvas{
    opacity:.32!important;
  }
}

/* Последний проход по интеракциям: движение у всех поверхностей одно и то же,
   материал самих карточек не зависит от положения курсора. */
@media(hover:hover) and (pointer:fine){
  :is(.sales-process-step,.sales-addon,.outcome-card,.diploma-card,.contact-form){
    will-change:transform;
    transition:transform .72s cubic-bezier(.16,1,.3,1)!important;
  }
  :is(.sales-process-step,.sales-addon,.outcome-card,.diploma-card,.contact-form):hover{
    transform:translateY(-3px) scale(1.005)!important;
  }

  /* Этапы и карточки «зачем нужен сайт» используют ту же спокойную кривую,
     включая автоматическую смену активного пункта. */
  .section-outcome .outcome-card,
  .section-outcome .outcome-card.active{
    transition:transform .72s cubic-bezier(.16,1,.3,1),translate .72s cubic-bezier(.16,1,.3,1),scale .72s cubic-bezier(.16,1,.3,1)!important;
  }
  .section-outcome .outcome-card:hover{
    transform:translateY(-3px) scale(1.005)!important;
  }

  /* Hover не перекрашивает ни одну поверхность: он отвечает только за
     лёгкое объёмное движение. Это исключает потемнение веб-сервиса. */
  :is(.sales-addon,.sales-process-step,.outcome-card,.project-card,.diploma-card,.contact-form),
  :is(.sales-addon,.sales-process-step,.outcome-card,.project-card,.diploma-card,.contact-form):hover,
  .section-outcome .outcome-card.active{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
      linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
    filter:none!important;
  }
  .sales-package,
  .sales-package:hover,
  .sales-packages > .sales-package-reveal:nth-child(3) > .sales-package,
  .sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:hover{
    background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
    filter:none!important;
  }
  .sales-package--featured,
  .sales-package--featured:hover{
    background:radial-gradient(108% 78% at 50% -24%,rgba(255,255,255,.032),transparent 58%),radial-gradient(104% 78% at 116% 122%,rgba(255,255,255,.018),transparent 58%),linear-gradient(148deg,#1b1b1d,#101012 53%,#171719)!important;
    filter:none!important;
  }

  /* У «Планировщика» действие открывает галерею — его пиктограмма всегда
     остаётся неподвижной, независимо от наведения на карточку. */
  .section-projects .project-card:hover .project-demo.project-gallery-open svg,
  .section-projects .project-demo.project-gallery-open svg{
    transition:none!important;
    transform:none!important;
  }
}

/* Пара пикселей воздуха внутри прокручиваемой области сохраняет правый край
   формы, когда «Коротко о задаче» мягко увеличивается. */
@media(min-width:769px){
  .contact-screen .contact-wrap{
    box-sizing:border-box!important;
    padding-inline:8px!important;
  }
  .contact-screen .contact-form{transform-origin:right center!important}
}

/* Витрина форматов — один неизменный материал для всех трёх карточек.
   Курсор может двигать поверхность, но никогда не меняет её оттенок. */
@media(hover:hover) and (pointer:fine){
  .sales-package,
  .sales-package--featured,
  .sales-package:hover,
  .sales-package--featured:hover{
    background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
    border-color:rgba(255,255,255,.085)!important;
    box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
    filter:none!important;
  }

  /* Кнопки остаются на своей позиции, но получают короткое «взлётное»
     увеличение. Фон по-прежнему становится белым только при прямом hover. */
  button:not(#mobile-menu-backdrop),
  .mobile-sticky-cta{
    transition:transform .46s cubic-bezier(.16,1,.3,1),background .24s ease,border-color .24s ease,color .24s ease,box-shadow .32s ease!important;
  }
  button:not(#mobile-menu-backdrop):hover,
  button:not(#mobile-menu-backdrop):focus-visible,
  .mobile-sticky-cta:hover,
  .mobile-sticky-cta:focus-visible{
    transform:scale(1.025)!important;
  }

  /* У Планировщика не меняется сама пиктограмма открытия: никаких поворотов,
     переходов или наследуемых трансформаций. */
  #planner-gallery-open svg,
  #planner-gallery-open:hover svg,
  #planner-gallery-open:focus-visible svg{
    transition:none!important;
    transform:none!important;
  }
}

/* Технологии больше не прокручиваются скрыто: при нехватке места занимают
   две компактные строки ровно в высоту соседней кнопки «Подробнее». */
@media(min-width:769px){
  .section-projects .project-tags{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:stretch!important;
    align-content:center!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px 5px!important;
    max-height:48px!important;
    overflow:visible!important;
  }
}

/* Общий, почти незаметный размер hover-состояния: ни одна карточка не
   получает отдельный «прыжок» или увеличенный масштаб. */
@media(hover:hover) and (pointer:fine){
  :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.diploma-card,.number-card,.contact-form):hover{
    transform:translateY(-2px) scale(1.003)!important;
  }
  .section-projects .projects-grid.is-expanded .project-card:hover{
    translate:none!important;
    transform:translateY(-2px) scale(1.003)!important;
  }
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover{
    translate:0 -2px!important;
    transform:perspective(1600px) translateX(var(--orbit-pull,0px)) rotateY(var(--orbit-angle,0deg)) scale(calc(var(--carousel-scale,1) + .003))!important;
  }

  /* Фиксированная нижняя CTA центрируется через translateX; масштаб
     добавляется к нему, а не заменяет его — поэтому она не уезжает вправо. */
  .mobile-sticky-cta{
    transform:translateX(-50%)!important;
  }
  .mobile-sticky-cta:hover,
  .mobile-sticky-cta:focus-visible{
    transform:translateX(-50%) scale(1.025)!important;
  }
}

/* «Смотреть экраны» — постоянное белое действие; у него меняется только
   общий небольшой масштаб кнопки, но не цвет и не иконка. */
#planner-gallery-open,
#planner-gallery-open:hover,
#planner-gallery-open:focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}
#planner-gallery-open svg,
#planner-gallery-open:hover svg,
#planner-gallery-open:focus-visible svg{stroke:#111!important;color:#111!important}

/* У действия предпросмотра тот же ясный hover, что у «Дизайна проекта».
   Базовое id-правило не должно удерживать его в тёмном состоянии. */
#case-modal-action:hover,
#case-modal-action:focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}
#case-modal-action:hover svg,
#case-modal-action:focus-visible svg{stroke:#111!important;color:#111!important}

/* Все три формата используют ровно одну основу MVP — и на компьютере,
   и на сенсорных устройствах. */
.sales-package,
.sales-package--featured{
  background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
}

/* Кнопки «взлетают» одинаково: один пиксель вверх и 1,2% масштаба.
   Так кнопка отправки формы больше не выглядит крупнее остальных. */
@media(hover:hover) and (pointer:fine){
  button:not(#mobile-menu-backdrop):hover,
  button:not(#mobile-menu-backdrop):focus-visible,
  .demo-newtab:hover,
  .demo-newtab:focus-visible{
    transform:translateY(-1px) scale(1.012)!important;
  }
  .mobile-sticky-cta:hover,
  .mobile-sticky-cta:focus-visible{
    transform:translateX(-50%) translateY(-1px) scale(1.012)!important;
  }
}

/* Селектор намеренно повторяет структуру витрины: старые hover-правила с
   большей специфичностью больше не смогут осветлить только первые две карты. */
.sales-packages > .sales-package-reveal > .sales-package,
.sales-packages > .sales-package-reveal > .sales-package:hover,
.sales-packages > .sales-package-reveal > .sales-package:focus-within,
.sales-packages > .sales-package-reveal > .sales-package:active,
.sales-packages > .sales-package-reveal:nth-child(3) > .sales-package,
.sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:hover,
.sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:focus-within,
.sales-packages > .sales-package-reveal:nth-child(3) > .sales-package:active{
  background:radial-gradient(105% 72% at -14% -24%,rgba(255,255,255,.018),transparent 54%),radial-gradient(105% 76% at 116% 122%,rgba(255,255,255,.014),transparent 57%),linear-gradient(148deg,#19191b,#0e0e10 53%,#151517)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
  filter:none!important;
}

/* Lumina — единый локальный свет без fixed-слоёв и тяжёлых фильтров.
   Он работает только там, где устройство действительно поддерживает hover. */
@media(hover:hover) and (pointer:fine){
  .lumina-positioned{position:relative!important}
  .lumina-target{isolation:isolate!important}
  .lumina-target--card{overflow:hidden!important}
  .lumina-target--control,.lumina-target--chip{overflow:hidden!important}
  .lumina-target > :not(.lumina-layer){position:relative;z-index:1}
  .lumina-layer{
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:inherit;
    overflow:hidden;
    pointer-events:none;
    opacity:var(--lumina-strength,0);
    transition:opacity .34s cubic-bezier(.22,1,.36,1);
  }
  .lumina-layer::before,
  .lumina-layer::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
  }
  .lumina-target--card .lumina-layer::before{
    background:radial-gradient(340px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.12) 0%,rgba(255,255,255,.045) 38%,transparent 76%);
  }
  .lumina-target--card .lumina-layer::after{
    padding:1px;
    background:radial-gradient(280px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.54) 0%,rgba(255,255,255,.18) 42%,transparent 78%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
  }
  .lumina-target--control .lumina-layer::before{
    background:radial-gradient(320px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 44%,transparent 80%);
  }
  .lumina-target--control .lumina-layer::after{
    padding:1px;
    background:radial-gradient(250px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.90) 0%,rgba(255,255,255,.30) 46%,transparent 82%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
  }
  .lumina-target--chip .lumina-layer::before{
    background:radial-gradient(220px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 46%,transparent 80%);
  }
  .lumina-target--chip .lumina-layer::after{
    padding:1px;
    background:radial-gradient(190px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.72) 0%,rgba(255,255,255,.20) 46%,transparent 82%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
  }

  /* Точки и мягкое облако принадлежат документу, поэтому идут со страницей
     без инерции и не отстают от прокрутки. */
  html.lumina-enabled .ambient-background::before{
    content:""!important;
    display:block!important;
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(250px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),rgba(255,255,255,.11) 0%,rgba(255,255,255,.038) 38%,transparent 74%);
    opacity:var(--lumina-ambient,0);
    transition:opacity .3s cubic-bezier(.22,1,.36,1);
  }
  html.lumina-enabled .ambient-background::after{
    content:""!important;
    display:block!important;
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 18px 18px,rgba(255,255,255,.36) 0 1.25px,transparent 1.58px)!important;
    background-size:30px 30px!important;
    -webkit-mask-image:radial-gradient(156px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),#000 0%,rgba(0,0,0,.70) 38%,transparent 76%)!important;
    mask-image:radial-gradient(156px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),#000 0%,rgba(0,0,0,.70) 38%,transparent 76%)!important;
    opacity:var(--lumina-ambient,0);
    transition:opacity .3s cubic-bezier(.22,1,.36,1);
  }
}

/* На смартфоне нет hover-подсветки: иконка диплома остаётся спокойной,
   а этапы — чистой прозрачной типографикой без фона. */
@media(max-width:768px){
  .diploma-card .diploma-thumb-btn{background:#202023!important;box-shadow:none!important}
  .diploma-card .lumina-layer{display:none!important}
  .sales-process-step{background:transparent!important;box-shadow:none!important}
}
@media(prefers-reduced-motion:reduce){
  .lumina-layer,.ambient-background::before,.ambient-background::after{transition:none!important;animation:none!important}
}

/* «Зачем вашему бизнесу сайт» остаётся обычным блоком: без авто-подсветки,
   свечения краёв и смены тона при наведении. */
@media(hover:hover) and (pointer:fine){
  .section-outcome .lumina-layer{display:none!important}
  .section-outcome .outcome-card,
  .section-outcome .outcome-card:hover,
  .section-outcome .outcome-card.active{
    background:radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
    border-color:rgba(255,255,255,.105)!important;
    box-shadow:0 28px 62px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.42)!important;
    filter:none!important;
  }
}

/* Финальная настройка локального света.
   Радиусы у действий шире, чем у поверхностей, а у карточек портфолио
   слой проходит над обложкой, но остаётся под текстом и кнопками. */
@media(hover:hover) and (pointer:fine){
  .lumina-target--card .lumina-layer::before{
    background:radial-gradient(380px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.12) 0%,rgba(255,255,255,.045) 38%,transparent 76%);
  }
  .lumina-target--card .lumina-layer::after{
    background:radial-gradient(315px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.54) 0%,rgba(255,255,255,.18) 42%,transparent 78%);
  }
  .lumina-target--control .lumina-layer::before{
    background:radial-gradient(360px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 44%,transparent 80%);
  }
  .lumina-target--control .lumina-layer::after{
    background:radial-gradient(285px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.90) 0%,rgba(255,255,255,.30) 46%,transparent 82%);
  }
  .lumina-target--chip .lumina-layer::before{
    background:radial-gradient(250px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 46%,transparent 80%);
  }
  .lumina-target--chip .lumina-layer::after{
    background:radial-gradient(215px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.72) 0%,rgba(255,255,255,.20) 46%,transparent 82%);
  }

  .section-projects .project-card.lumina-target > .project-thumb{z-index:1!important}
  .section-projects .project-card.lumina-target > .lumina-layer{z-index:2!important}
  .section-projects .project-card.lumina-target > :not(.project-thumb):not(.lumina-layer){z-index:3!important}

  /* Этот блок переключается автоматически, поэтому в нём не остаётся
     отдельного активного материала, подъёма или светящейся кромки. */
  .section-outcome .outcome-card,
  .section-outcome .outcome-card:hover,
  .section-outcome .outcome-card.active{
    transform:none!important;
    translate:0 0!important;
    scale:1!important;
  }
  .outcome-grid:has(.outcome-card:hover) + .outcome-visual canvas{opacity:.32!important}

  /* FAQ — только текст, тонкие разделители и раскрытие ответа. */
  #faq .sales-faq-item,
  #faq .sales-faq-item > button,
  #faq .sales-faq-item > button:hover,
  #faq .sales-faq-item > button:focus-visible,
  #faq .sales-faq-panel{
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
  }
}

/* Результаты получают ту же физику, что и другие карточки. Автосмена меняет
   только композицию частиц: свет на карточке всегда определяется курсором. */
@media(hover:hover) and (pointer:fine){
  .section-outcome .lumina-layer{display:block!important}
  .section-outcome .outcome-card{
    transform:none!important;
    translate:0 0!important;
    scale:1!important;
  }
  .section-outcome .outcome-card:hover{
    transform:translateY(-2px) scale(1.003)!important;
  }
  .section-outcome .outcome-card.active{
    transform:translateY(-2px) scale(1.003)!important;
    translate:0 0!important;
    scale:1!important;
  }

  /* У круглого «Открыть» собственный слой обязан быть поверх обложки.
     Текст и пиктограмма остаются выше него и не теряют контраст. */
  .section-projects .project-actions .project-demo.lumina-target{
    isolation:isolate!important;
    overflow:hidden!important;
  }
  .section-projects .project-actions .project-demo.lumina-target > .lumina-layer{
    display:block!important;
    z-index:2!important;
  }
  .section-projects .project-actions .project-demo.lumina-target > :not(.lumina-layer){
    position:relative!important;
    z-index:3!important;
  }

  /* У Планировщика только запрет на поворот иконки. По цвету это обычная кнопка. */
  #planner-gallery-open{
    background:#202023!important;
    border-color:rgba(255,255,255,.10)!important;
    color:#f3f3f3!important;
    box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.28)!important;
  }
  #planner-gallery-open:hover,
  #planner-gallery-open:focus-visible{
    background:#f3f3f1!important;
    border-color:#f3f3f1!important;
    color:#111!important;
  }
  #planner-gallery-open svg{stroke:currentColor!important;color:currentColor!important}

  /* У света нет яркой «игольчатой» точки: центр растворяется в большом пятне. */
  .lumina-target--card .lumina-layer::before{
    background:radial-gradient(400px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.095) 0%,rgba(255,255,255,.068) 25%,rgba(255,255,255,.032) 56%,transparent 84%);
  }
  .lumina-target--card .lumina-layer::after{
    background:radial-gradient(335px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.42) 0%,rgba(255,255,255,.22) 38%,rgba(255,255,255,.05) 72%,transparent 90%);
  }
  .lumina-target--control .lumina-layer::before{
    background:radial-gradient(380px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.22) 0%,rgba(255,255,255,.16) 30%,rgba(255,255,255,.065) 62%,transparent 88%);
  }
  .lumina-target--control .lumina-layer::after{
    background:radial-gradient(305px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.07) 74%,transparent 91%);
  }
  html.lumina-enabled .ambient-background::before{
    background:radial-gradient(330px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),rgba(255,255,255,.075) 0%,rgba(255,255,255,.042) 36%,rgba(255,255,255,.014) 65%,transparent 88%);
  }
  html.lumina-enabled .ambient-background::after{
    -webkit-mask-image:radial-gradient(190px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),#000 0%,rgba(0,0,0,.68) 42%,transparent 82%)!important;
    mask-image:radial-gradient(190px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),#000 0%,rgba(0,0,0,.68) 42%,transparent 82%)!important;
  }
}

/* Форма не упирается в правую колонку: её край возвращён к общей сетке. */
@media(min-width:769px){
  .contact-screen .contact-form{translate:-6px 0!important}
}

/* Световой контур наследует реальную геометрию каждого действия — без
   отдельного, более округлого «внутреннего» кольца. */
@media(hover:hover) and (pointer:fine){
  .lumina-target--control{
    overflow:hidden!important;
  }
  .lumina-target--control > .lumina-layer,
  .lumina-target--control > .lumina-layer::before,
  .lumina-target--control > .lumina-layer::after{
    border-radius:inherit!important;
  }
  .lumina-target--control > .lumina-layer{
    /* Абсолютный потомок обычно начинается внутри border-box. Выходим на 1px,
       чтобы светил именно внешний край кнопки, а не меньшая окружность внутри. */
    inset:-1px!important;
  }

  /* У кнопок ярче сама поверхность, но светящаяся кромка остаётся тонкой. */
  .lumina-target--control .lumina-layer::before{
    background:radial-gradient(380px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.30) 0%,rgba(255,255,255,.20) 32%,rgba(255,255,255,.075) 64%,transparent 89%);
  }
  .lumina-target--control .lumina-layer::after{
    background:radial-gradient(305px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.54) 0%,rgba(255,255,255,.23) 42%,rgba(255,255,255,.04) 74%,transparent 91%);
  }

  /* Старое правило прятало любой span внутри «Открыть». Новый слой тоже span,
     поэтому явно возвращаем ему размер самой круглой кнопки. */
  .project-actions .project-demo > .lumina-layer{
    position:absolute!important;
    inset:-1px!important;
    width:auto!important;
    height:auto!important;
    overflow:hidden!important;
    clip-path:none!important;
    border-radius:inherit!important;
  }

  /* Поворот стрелки меняется независимо от её координат: центр всегда один. */
  .section-projects .project-actions .project-demo svg{
    position:absolute!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    left:50%!important;
    margin:0!important;
    translate:none!important;
    transform:translate(-50%,-50%) rotate(-45deg)!important;
    transform-origin:50% 50%!important;
  }
  .section-projects .projects-grid.is-expanded .project-card:hover .project-demo:not(.project-gallery-open) svg,
  .section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover .project-demo:not(.project-gallery-open) svg{
    transform:translate(-50%,-50%) rotate(0deg)!important;
  }
  .section-projects .project-actions .project-demo.lumina-target.project-gallery-open > svg:not(.lumina-layer),
  .section-projects .project-card:hover .project-demo.lumina-target.project-gallery-open > svg:not(.lumina-layer){
    transform:translate(-50%,-50%)!important;
  }
}

/* Большое поле сообщения — настоящая поверхность ввода от левого верхнего
   угла; закреплённые материалы остаются поверх него справа снизу. */
.message-composer .form-textarea{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  padding:16px 16px 80px!important;
  text-align:left!important;
  text-indent:0!important;
  line-height:1.55!important;
}

/* Статус отправки появляется только после действия и не меняет исходную
   композицию формы. */
.form-submit-status{
  display:none;
  margin:7px 0 0;
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1.35;
  text-align:center;
}
.form-submit-status:not(:empty){display:block}
.form-submit-status.is-success{color:rgba(184,255,213,.88)}
.form-submit-status.is-error{color:rgba(255,184,190,.90)}
.sales-addon-spaced{margin-top:22px}

/* «Конфиденциальность» привязана к геометрическому центру сайта, а не к
   свободному месту между подписью студии и копирайтом. */
@media(min-width:769px){
  .contact-screen .footer-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    width:100%!important;
  }
  .contact-screen .footer-left{grid-column:1;justify-self:start}
  .contact-screen .privacy-footer{grid-column:2;justify-self:center}
  .contact-screen .footer-right{grid-column:3;justify-self:end}
}

/* В горизонтальной витрине координаты карточек меняются прямо от scrollLeft.
   Пока пользователь прокручивает ленту, переход transform на 620 мс заставлял
   их отставать от жеста и создавать рывок. Переход выключен только на время
   прокрутки; все остальные состояния и анимация смены вида остаются прежними. */
.section-projects .projects-grid:not(.is-expanded).is-carousel-scrolling .project-card{
  transition:none!important;
}

/* During the grid/carousel handoff card geometry is animated by the small
   FLIP routine in main.js.  The live list stays interactive everywhere else,
   while this brief state prevents a second click from rebuilding the carousel
   underneath the transition. */
.section-projects .projects-grid.is-layout-transitioning{
  pointer-events:none;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overflow-anchor:none;
}
.section-projects .projects-grid.is-layout-transitioning .project-card{
  backface-visibility:hidden;
}
/* Resolve final geometry before FLIP measures it; inline motion owns this handoff. */
html body #projects .projects-grid.is-layout-transitioning .project-card{
  transition:none!important;
}

/* Слой View Transition не забирает колесо и тач-жест: если пользователь
   начинает скроллить, действие идёт в живую страницу, а не в снимок. */
::view-transition{
  pointer-events:none!important;
}

/* «Связаться с нами» — самостоятельное действие рядом с FAQ, а не вопрос.
   Поэтому оно сохраняет единый материал всех кнопок, в отличие от прозрачных
   строк аккордеона, и полноценно отвечает на приближение курсора. */
#faq .faq-telegram{
  background:#202023!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f3f3f3!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.28)!important;
}
#faq .faq-telegram:hover,
#faq .faq-telegram:focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}

/* Форматы работы используют ровно тот же спокойный материал, границу и тень,
   что и карточка Директа. Это снимает разнобой между тремя форматами и
   остальными поверхностями, но оставляет их содержание и размеры прежними. */
.sales-packages > .sales-package-reveal > .sales-package,
.sales-packages > .sales-package-reveal > .sales-package:hover,
.sales-packages > .sales-package-reveal > .sales-package:focus-within,
.sales-packages > .sales-package-reveal > .sales-package:active{
  background:
    radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
    radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
    linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
  border-color:rgba(255,255,255,.106)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.38)!important;
}

/* После ухода курсора поверхность возвращается в обычный растровый слой —
   текст и тонкие границы снова остаются такими же резкими, как до hover.
   Слой ускорения включается только на время самого движения. */
@media(hover:hover) and (pointer:fine){
  :is(.sales-package,.sales-addon,.sales-process-step,.outcome-card,.diploma-card,.contact-form,.why-panel){
    will-change:auto!important;
  }
  :is(.sales-package,.sales-addon,.sales-process-step,.outcome-card,.diploma-card,.contact-form,.why-panel):hover,
  .section-outcome .outcome-card.active{
    will-change:transform!important;
  }
  .sales-packages > .sales-package-reveal > .sales-package{
    transition:transform .72s cubic-bezier(.16,1,.3,1)!important;
  }

  /* Контур у действий — тонкий и направленный: он появляется только близко
     к курсору, не превращаясь в постоянную светлую рамку. */
  .lumina-target--control .lumina-layer::after{
    background:radial-gradient(265px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.64) 0%,rgba(255,255,255,.27) 42%,rgba(255,255,255,.055) 74%,transparent 91%);
  }
  .lumina-target--control .lumina-layer::before{
    background:radial-gradient(330px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.25) 0%,rgba(255,255,255,.14) 33%,rgba(255,255,255,.045) 66%,transparent 90%);
  }
}

/* Final mobile pass: phone interaction is deliberately quiet. Hover-light
   layers are a desktop affordance and must never be visible or clickable on a
   touch screen. */
@media(max-width:768px){
  .lumina-layer,.ambient-background::before,.ambient-background::after{display:none!important}
  .lumina-target{--lumina-strength:0!important}
  .sales-process-step,.sales-process-step::before,.sales-process-step::after{
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;filter:none!important
  }
  .diploma-card .diploma-thumb-btn,
  .diploma-card .diploma-thumb-btn:hover,
  .diploma-card .diploma-thumb-btn:focus-visible,
  .diploma-card .diploma-thumb-btn:active{
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#fff!important;transform:none!important
  }
  .diploma-card .diploma-thumb-btn svg{stroke:#fff!important;color:#fff!important;fill:none!important}

  /* Three compact controls keep their roles and share the normal button
     material instead of collapsing into a second line. */
  .sales-package-mobile-row{grid-template-columns:minmax(0,1fr) 104px minmax(0,1.16fr)!important;gap:8px!important}
  .sales-package-toggle{display:inline-flex!important;width:104px!important;min-width:104px!important;min-height:48px!important;height:48px!important;padding:0 28px 0 10px!important;justify-content:center!important;align-items:center!important;border-radius:12px!important}
  .sales-package-toggle span{width:auto!important;text-align:center!important}
  .sales-package .sales-package-cta{display:inline-flex!important;min-width:0!important;min-height:48px!important;padding:8px 10px!important;font-size:11px!important;white-space:normal!important;line-height:1.15!important}
  .sales-package-cta .package-cta-long{display:none!important}
  .sales-package-cta .package-cta-short{display:inline!important}
  .package-compare-open{min-height:48px!important;margin-top:16px!important;border-radius:13px!important}

  .sales-addon-action{display:grid!important;grid-template-columns:minmax(0,1.38fr) minmax(88px,.62fr)!important;gap:8px!important}
  .sales-addon-cta,.sales-addon-price-toggle{min-width:0!important;min-height:48px!important;padding:10px 9px!important;font-size:11px!important;white-space:normal!important;line-height:1.15!important}

  .message-composer{display:block!important;position:relative!important;align-self:stretch!important}
  .message-composer .form-textarea{display:block!important;position:absolute!important;inset:0!important;align-self:stretch!important;justify-self:stretch!important;padding:16px 16px 80px!important;text-align:left!important;text-indent:0!important;vertical-align:top!important;line-height:1.55!important}
  .message-composer .form-textarea::placeholder{text-align:left!important;opacity:1!important}
}

/* Последняя мобильная правка: в тарифе остаётся цена и спокойная кнопка
   «Состав». Расчёт доступен в десктопной версии, но не сжимает телефонную
   сетку и не создаёт третью мелкую кнопку. */
@media(max-width:768px){
  .sales-package-mobile-row{
    grid-template-columns:minmax(0,1fr) 112px!important;
    align-items:center!important;
  }
  .sales-package .sales-package-cta{display:none!important}
  .sales-package-toggle{
    position:relative!important;
    display:inline-flex!important;
    width:112px!important;
    min-width:112px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 30px 0 10px!important;
    overflow:hidden!important;
  }
  .sales-package-toggle i{
    position:absolute!important;
    top:50%!important;
    right:11px!important;
    bottom:auto!important;
    left:auto!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
    translate:none!important;
    transform:translateY(-50%)!important;
  }
  .sales-package-toggle i::before,
  .sales-package-toggle i::after{top:10px!important}
  .sales-package.details-open .sales-package-toggle i::before,
  .sales-package.details-open .sales-package-toggle i::after{top:5px!important}

  /* В Direct второе действие стало достаточно широким, но продвижение не
     переносится в тесную многострочную кнопку. */
  .sales-addon-action{
    grid-template-columns:minmax(0,1.28fr) minmax(112px,.72fr)!important;
  }

  /* Четыре этапа на телефоне — чистая типографика без состояния hover/tap. */
  .sales-process-step,
  .sales-process-step:hover,
  .sales-process-step:focus,
  .sales-process-step:focus-visible,
  .sales-process-step:active{
    background:transparent!important;
    background-image:none!important;
    border-color:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }

  /* Текст большого поля всегда стартует ровно там же, где печатается ввод —
     из левого верхнего угла, независимо от более ранних desktop-правил. */
  .contact-form .message-composer .form-textarea,
  .contact-form .message-composer .form-textarea::placeholder{
    position:absolute!important;
    inset:0!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:14px 16px 80px!important;
    text-align:left!important;
    text-indent:0!important;
    line-height:1.5!important;
    vertical-align:top!important;
  }
}

/* Side shades are part of the view transition itself. The snapshot that
   leaves fades out, the snapshot that arrives fades in immediately — no
   one-second waiting period and no hard pop at either end. */
@keyframes portfolio-edge-enter{from{opacity:0}to{opacity:1}}
@keyframes portfolio-edge-leave{from{opacity:1}to{opacity:0}}
.portfolio-edge{visibility:visible!important;opacity:0!important;transition:opacity 180ms cubic-bezier(.22,1,.36,1)!important}
.section-projects.portfolio-edge-ready .portfolio-edge{visibility:visible!important;opacity:1!important}
.section-projects.portfolio-grid-view .portfolio-edge{visibility:visible!important;opacity:0!important}
::view-transition-group(portfolio-edge-left),::view-transition-group(portfolio-edge-right){animation-duration:180ms!important;animation-timing-function:cubic-bezier(.22,1,.36,1)!important}
::view-transition-old(portfolio-edge-left),::view-transition-old(portfolio-edge-right){animation:portfolio-edge-leave 180ms cubic-bezier(.22,1,.36,1) both!important;opacity:1!important}
::view-transition-new(portfolio-edge-left),::view-transition-new(portfolio-edge-right){animation:portfolio-edge-enter 180ms cubic-bezier(.22,1,.36,1) both!important;opacity:1!important}

/* Нижняя CTA — постоянное светлое действие. Она не наследует состояние
   круглой кнопки «Наверх» и мягко приезжает только из-за нижнего края. */
body .mobile-sticky-cta,
body .mobile-sticky-cta:hover,
body .mobile-sticky-cta:focus-visible{
  background:#f3f3f1!important;
  border-color:#f3f3f1!important;
  color:#111!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
  transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .46s cubic-bezier(.22,1,.36,1),box-shadow .24s ease!important;
}
body .mobile-sticky-cta:not(.hidden){
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(0)!important;
}
body .mobile-sticky-cta.hidden{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateX(-50%) translateY(calc(100% + 32px))!important;
}
@media(hover:hover) and (pointer:fine){
  body .mobile-sticky-cta:hover,
  body .mobile-sticky-cta:focus-visible{
    transform:translateX(-50%) translateY(-1px) scale(1.012)!important;
  }
body .mobile-sticky-cta.hidden:hover,
  body .mobile-sticky-cta.hidden:focus-visible{
    transform:translateX(-50%) translateY(calc(100% + 32px))!important;
  }
}

/* Заявка остаётся частью обычной страницы: прокручивается документ, а не
   тесная внутренняя область. Так верх карточки не режется при движении. */
@media(min-width:769px){
  .contact-screen{
    height:auto!important;
    min-height:100svh!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .contact-screen .section-contact{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    height:auto!important;
    min-height:100svh!important;
    padding:88px 0 56px!important;
  }
  .contact-screen .contact-wrap{
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    align-items:start!important;
  }
  .contact-screen .footer{
    position:relative!important;
    inset:auto!important;
    margin-top:auto!important;
  }
}

/* Раньше полноэкранный режим принудительно показывал форму с первого кадра.
   Возвращаем ей тот же спокойный reveal, что и остальным элементам страницы. */
body .contact-screen .contact-form.reveal{
  opacity:0!important;
  translate:0 8px!important;
}
body .contact-screen .contact-form.reveal.visible{
  opacity:1!important;
  translate:0 0!important;
}

/* Действия остаются самым заметным откликом за счёт внутренней поверхности.
   Контур у действий и карточек следует одной и той же физике курсора. */
@media(hover:hover) and (pointer:fine){
  /* Свет повторяет именно внешнюю геометрию цели: без самостоятельного
     меньшего радиуса у слоя, внутреннего блика или маски кромки. */
  .lumina-target--card > .lumina-layer,
  .lumina-target--control > .lumina-layer,
  .lumina-target--chip > .lumina-layer{
    display:block!important;
    /* Абсолютный потомок считается от внутреннего поля. Вынос на толщину
       обычной 1px рамки ставит свет прямо на настоящую границу, а не рядом
       с ней вторым внутренним кольцом. */
    inset:-1px!important;
    box-sizing:border-box!important;
    border-radius:inherit!important;
  }
  .lumina-target--control > .lumina-layer{
    opacity:calc(var(--lumina-strength,0) * .95)!important;
    transition:opacity .42s cubic-bezier(.22,1,.36,1)!important;
  }
  .lumina-target--card > .lumina-layer::before,
  .lumina-target--card > .lumina-layer::after,
  .lumina-target--control > .lumina-layer::before,
  .lumina-target--control > .lumina-layer::after,
  .lumina-target--chip > .lumina-layer::before,
  .lumina-target--chip > .lumina-layer::after{
    box-sizing:border-box!important;
    border-radius:inherit!important;
  }
  .lumina-target--card > .lumina-layer::after{
    padding:1px!important;
    /* У кнопки слой усилен через opacity ×1.3. Здесь те же итоговые
       значения контура сразу в градиенте: край реагирует идентично, но
       спокойная поверхность карточки остаётся самостоятельной. */
    background:radial-gradient(250px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.48) 0%,rgba(255,255,255,.2) 42%,rgba(255,255,255,.034) 73%,transparent 91%)!important;
  }
  /* Лёгкий общий подъём тона появляется только после прямого наведения.
     Он не заменяет исходный цвет карточки и не использует filter, поэтому
     не даёт мутности и не нагружает прокрутку. */
  .lumina-target--card > .lumina-layer::before{
    /* Мягкое облако видно уже в радиусе курсора, но вдвое спокойнее
       внутреннего света кнопки: карточка не меняет свой базовый цвет. */
    background:radial-gradient(400px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.105) 0%,rgba(255,255,255,.041) 38%,rgba(255,255,255,.008) 70%,transparent 88%)!important;
    transition:background-color .8s cubic-bezier(.22,1,.36,1)!important;
  }
  .lumina-target--card:hover > .lumina-layer::before{
    background-color:rgba(255,255,255,.012)!important;
  }
  .lumina-target--control > .lumina-layer::before{
    background:radial-gradient(300px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.36) 0%,rgba(255,255,255,.18) 36%,rgba(255,255,255,.05) 66%,transparent 88%)!important;
  }
  .lumina-target--control > .lumina-layer::after{
    padding:1px!important;
    background:radial-gradient(250px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.48) 0%,rgba(255,255,255,.20) 42%,rgba(255,255,255,.035) 73%,transparent 91%)!important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;
  }
  /* Контур живёт на границе каждого элемента. Сам слой уже обрезан его
     собственным радиусом, поэтому внешнее отсечение цели не нужно: оно
     иначе срезает ровно единственный пиксель динамической кромки. */
  .lumina-target--card,
  .lumina-target--control,
  .lumina-target--chip{
    overflow:visible!important;
  }
  /* У круга абсолютный слой по умолчанию считался от внутреннего поля
     (62px внутри кнопки 64px), из-за чего появлялось меньшее кольцо. Вынос
     ровно на толщину border возвращает слою реальный диаметр кнопки. */
  .section-projects .project-actions .project-demo.lumina-target--control > .lumina-layer{
    inset:-1px!important;
    z-index:4!important;
    border-radius:50%!important;
  }
  .section-projects .project-actions .project-demo.lumina-target--control > .lumina-layer::before,
  .section-projects .project-actions .project-demo.lumina-target--control > .lumina-layer::after{
    border-radius:50%!important;
  }
  .section-projects .project-actions .project-demo.lumina-target--control > :not(.lumina-layer){
    z-index:5!important;
  }
  .section-projects .project-actions .project-demo.lumina-target--control{
    overflow:visible!important;
  }
}

/* У всех действий световой слой находится над старым материалом кнопки, но
   под текстом и иконкой. Это возвращает тонкую направленную кромку не только
   герою, но и форме, FAQ, карточкам кейсов и фиксированной CTA. */
@media(hover:hover) and (pointer:fine){
  .lumina-target--control > .lumina-layer{
    z-index:10!important;
  }
  .lumina-target--control > :not(.lumina-layer){
    position:relative!important;
    z-index:11!important;
  }
}

/* Запасной почтовый сценарий раскрывается только по запросу. */
#cf-mail-fallback[hidden]{display:none!important}
#cf-mail-fallback{
  display:block;width:100%;min-width:0;grid-column:1 / -1;
  margin:0;color:#aaa;font-size:13px;line-height:1.5;
}
#cf-mail-fallback summary{
  display:list-item;cursor:pointer;width:fit-content;margin:0 auto;
  padding:10px 0;color:#aaa;text-transform:none;letter-spacing:normal;
}
#cf-mail-fallback summary:focus-visible{outline:2px solid #aaa;outline-offset:3px;border-radius:4px}
#cf-mail-fallback label{
  display:block;margin:8px 0;text-transform:none;letter-spacing:normal;
  font-size:13px;line-height:1.5;
}
#cf-mail-draft{
  display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;
  height:180px;min-height:120px;resize:vertical;position:static;
  font-size:13px;line-height:1.5;padding:12px 14px;
}
.contact-form #cf-msg{padding-bottom:16px!important}

/* Финальный экран растёт вместе с формой; подвал остаётся в потоке. */
@media(min-width:769px){
  .contact-screen{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:100svh!important;
  }
  .contact-screen .section-contact{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    flex:1;
    min-height:0!important;
    margin:0!important;
    padding:64px 0 72px!important;
  }
  .contact-screen .section-contact > .section-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .contact-screen .contact-wrap{
    width:min(1120px,calc(100% - 96px))!important;
    max-height:none!important;
    margin:0 auto!important;
    overflow:visible!important;
    align-items:center!important;
  }
  .contact-screen .footer{
    position:relative!important;
    inset:auto!important;
    margin-top:auto!important;
    padding:14px 24px max(14px,env(safe-area-inset-bottom))!important;
  }
}

/* Если рабочая область ниже 820px, композиции объективно не хватает высоты
   для формы и нижней строки одновременно. В этом случае сохраняем обычную
   прокрутку вместо наложения подвала на кнопку отправки. */
@media(min-width:769px) and (max-height:819px){
  .contact-screen{
    height:auto!important;
    min-height:100svh!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .contact-screen .section-contact{
    display:block!important;
    height:auto!important;
    min-height:100svh!important;
    padding:88px 0 56px!important;
  }
  .contact-screen .contact-wrap{
    align-items:start!important;
  }
  .contact-screen .footer{
    position:relative!important;
    inset:auto!important;
    margin-top:auto!important;
  }
}

/* Карточки результата используют ту же спокойную силу света, что и остальные
   поверхности: у них больше нет отдельного активного режима. */
@media(hover:hover) and (pointer:fine){
  .section-outcome .lumina-target--card > .lumina-layer::before{
    background:radial-gradient(400px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.105) 0%,rgba(255,255,255,.041) 38%,rgba(255,255,255,.008) 70%,transparent 88%)!important;
  }

  /* Отправка формы — такое же действие, как «Рассчитать стоимость»: одна
     реальная 1px-граница и тот же спокойный материал до прямого наведения. */
  .contact-form .btn-primary.lumina-target--control{
    border:1px solid rgba(255,255,255,.10)!important;
    background:#202023!important;
    box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.20)!important;
  }
  .contact-form .btn-primary.lumina-target--control:hover,
  .contact-form .btn-primary.lumina-target--control:focus-visible{
    border-color:#f3f3f1!important;
    background:#f3f3f1!important;
    color:#111!important;
    box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(0,0,0,.12)!important;
  }
}

/* Карточка отзывается на точку курсора настоящей 3D-плоскостью. Базовые
   hover-подъёмы ниже обнулены только для этих поверхностей: движением теперь
   управляет один сценарий в main.js, а не несколько старых transform-правил. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card-corner-tilt{
    rotate:none!important;
    transform-origin:center center;
    backface-visibility:hidden;
  }
  .card-corner-tilt.is-card-corner-flying,
  .card-corner-tilt.is-card-corner-settling{
    transform-style:preserve-3d;
  }
  :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.diploma-card,.contact-form,.why-panel).card-corner-tilt:hover,
  .section-projects .projects-grid.is-expanded .project-card.card-corner-tilt:hover{
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }
}

/* Если устройство не выдерживает плавный поток кадров, JavaScript ставит
   card-motion-lite. Вместо 3D-плоскости остаётся дешёвый отклик: одна
   композитная трансформация без наклона. В горизонтальной витрине уже
   действуют существующие правила: реагирует только центральная карточка. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.card-motion-lite :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.diploma-card,.contact-form,.why-panel).card-corner-tilt:hover,
  html.card-motion-lite .section-projects .projects-grid.is-expanded .project-card.card-corner-tilt:hover{
    transform:translateY(-2px) scale(1.002)!important;
    translate:none!important;
    scale:1!important;
  }
}

/* На телефоне курсорной плоскости нет: только короткий отклик всей карточки
   в момент касания. Это не зависит от случайного hover-состояния браузера. */
@media(max-width:768px), (hover:none), (pointer:coarse){
  html body :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card,.why-panel).card-corner-tilt,
  html body :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card,.why-panel).card-corner-tilt:hover{
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }
  html body :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card,.why-panel).card-corner-tilt.is-card-pressed{
    transform:translateY(-1px) scale(1.002)!important;
    transition:transform 150ms cubic-bezier(.22,1,.36,1)!important;
  }
}

/* «Почему мы»: единая большая поверхность в системе остальных карточек.
   Внутренняя ви́ньетка переехала сюда с блока «Зачем вашему бизнесу сайт». */
.section-why{
  isolation:isolate;
  padding:clamp(72px,9vw,132px) 48px clamp(52px,5vw,76px)!important;
  overflow:hidden;
}
.section-why::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  left:0;
  height:clamp(190px,21vw,320px);
  pointer-events:none;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.96) 18%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.25) 76%,transparent 100%);
}
.section-why .section-inner{position:relative;z-index:1}
.why-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(20px,2.3vw,32px) clamp(20px,2.3vw,32px) clamp(14px,1.4vw,18px);
  border:1px solid var(--surface-border);
  border-radius:28px;
  background:
    radial-gradient(110% 88% at -12% -22%,rgba(255,255,255,.045),transparent 56%),
    radial-gradient(98% 88% at 114% 118%,rgba(255,255,255,.026),transparent 58%),
    linear-gradient(148deg,#1b1b1d,#101012 55%,#171719);
  box-shadow:0 32px 76px rgba(0,0,0,.34),0 8px 18px rgba(0,0,0,.17),inset 0 1px 0 var(--surface-edge),inset 0 -1px 0 rgba(0,0,0,.44);
}
.why-panel::before{
  content:none;
}
/* Внутри остаётся тот же порядок, что у обычной карточки: свет снизу,
   содержимое сверху. Раньше сюда попадал и сам световой слой, из-за чего
   таблица жила с отдельной, конфликтующей системой слоёв. */
.why-panel > :not(.lumina-layer){position:relative;z-index:1}
.why-heading{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:end;
  gap:clamp(28px,4vw,64px);
  margin-bottom:clamp(28px,3vw,40px);
}
.why-heading .section-heading{max-width:760px;margin:0}
.why-lead{
  max-width:390px;
  margin:0 0 4px;
  color:rgba(255,255,255,.54);
  font-size:16px;
  line-height:1.65;
}
.why-lead span{display:block}
.why-lead span + span{margin-top:2px}
.why-table-head,
.why-row{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.why-table-head{
  align-items:end;
  border-bottom:1px solid rgba(255,255,255,.11);
  font-family:"Instrument Serif","Oranienbaum",Georgia,serif;
  font-size:clamp(21px,2vw,28px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.35px;
}
html[lang="ru"] .why-table-head{font-family:"Oranienbaum",Georgia,serif}
.why-table-head span{
  display:block;
  min-width:0;
  padding:0 22px 14px;
  color:rgba(255,255,255,.56);
}
.why-table-head span:first-child{padding-left:0}
.why-table-head span + span{
  padding-right:0;
  color:rgba(255,255,255,.96);
  border-left:1px solid rgba(255,255,255,.11);
}
.why-row{border-bottom:1px solid rgba(255,255,255,.085)}
.why-row:last-child{border-bottom:0}
.why-side{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  padding:16px 22px 17px;
}
.why-side:first-child{padding-left:0}
.why-side + .why-side{padding-right:0;border-left:1px solid rgba(255,255,255,.10)}
.why-side p{
  margin:0;
  font-size:16px;
  line-height:1.5;
}
.why-side--problem p{color:rgba(255,255,255,.48)}
.why-side--solution p{color:rgba(255,255,255,.90)}
.why-marker{
  display:grid;
  flex:0 0 14px;
  place-items:center;
  width:14px;
  height:21px;
  margin-top:2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.why-marker svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
/* Цвет остаётся только в самом знаке: он объясняет сравнение, но не меняет
   чёрно-белую основу таблицы. */
.why-marker--problem{background:transparent;color:rgba(214,108,116,.96)}
.why-marker--solution{background:transparent;color:rgba(99,217,154,.98)}
/* Виньетка больше не затемняет следующий раздел. */
.section-outcome::before{content:none!important}
.section-why + .section-outcome{padding-top:clamp(54px,7vw,96px)!important}
body.light .why-panel{
  border-color:rgba(20,20,22,.13);
  background:linear-gradient(148deg,#fff,#f2f2ef 55%,#f8f8f5);
  box-shadow:0 28px 64px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,20,22,.05);
}
body.light .why-lead,
body.light .why-side--problem p{color:rgba(20,20,22,.56)}
body.light .why-side--solution p,
body.light .why-table-head span + span{color:rgba(20,20,22,.92)}
body.light .why-table-head span{color:rgba(20,20,22,.56)}
body.light .why-table-head,
body.light .why-row,
body.light .why-side + .why-side{border-color:rgba(20,20,22,.12)}
body.light .why-marker--problem{background:transparent;border-color:transparent;color:rgba(214,108,116,.98)}
body.light .why-marker--solution{background:transparent;border-color:transparent;color:rgba(36,147,93,.98)}
@media(max-width:768px){
  .section-why{padding:64px 20px 56px!important}
  .why-panel{padding:20px 18px 18px;border-radius:24px}
  .why-heading{display:block;margin-bottom:28px}
  .why-heading .section-label{margin-bottom:16px}
  .why-heading .section-heading{font-size:clamp(38px,10.5vw,50px);letter-spacing:-1.15px;margin-bottom:20px}
  .why-lead{font-size:15px;line-height:1.6}
  .why-table-head{display:grid;grid-template-columns:1fr;gap:4px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.10);font-size:22px;line-height:1.12}
  .why-table-head span,.why-table-head span:first-child,.why-table-head span + span{padding:0;border-left:0}
  .why-table-head span:first-child{color:rgba(255,255,255,.52)}
  .why-table-head span + span{color:rgba(255,255,255,.93)}
  .why-row{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
  .why-side,.why-side:first-child{gap:12px;padding:0}
  .why-side + .why-side{margin-top:10px;border-left:0}
  .why-side p{font-size:15px;line-height:1.5}
  .why-marker{flex-basis:14px;width:14px;height:19px;margin-top:2px}
  .why-marker svg{width:13px;height:13px}
  .section-why + .section-outcome{padding-top:52px!important}
}

/* Финальная калибровка поверхностей: материал карточек становится на один
   спокойный тон светлее, а разделяющая кромка — чуть тише. Действия и кнопки
   в этот набор намеренно не входят. */
@media(min-width:769px){
  body:not(.light) :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card,.number-card,.contact-form,.why-panel){
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.052),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.036),transparent 58%),
      linear-gradient(148deg,#1f1f21,#131315 54%,#1a1a1c)!important;
    border-color:rgba(255,255,255,.088)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.067),inset 0 -1px 0 rgba(0,0,0,.38)!important;
  }
  .why-panel{padding-bottom:18px}
  .why-row:last-child .why-side{padding-bottom:14px}
}

/* Материал большой таблицы — это материал обычной карточки «Лендинг для
   бизнеса». Содержимое и большой радиус остаются своими, но поверхность,
   граница и объём теперь не имеют отдельной версии. */
@media(min-width:769px){
  body:not(.light) .why-panel{
    background:
      radial-gradient(116% 84% at -15% -23%,rgba(255,255,255,.048),transparent 55%),
      radial-gradient(112% 84% at 116% 122%,rgba(255,255,255,.033),transparent 58%),
      linear-gradient(148deg,#1e1e20,#121214 54%,#18181a)!important;
    border-color:rgba(255,255,255,.106)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.38)!important;
  }
}

/* Верхняя навигация остаётся полупрозрачным слоем страницы, но на близость
   курсора откликается тем же направленным светом, что и карточки. Отдельная
   разновидность цели не наследует их подъём или 3D-наклон. */
@media(hover:hover) and (pointer:fine){
  .nav.lumina-target--nav{
    isolation:isolate!important;
    overflow:hidden!important;
  }
  .nav.lumina-target--nav > .lumina-layer{
    display:block!important;
    inset:0!important;
    z-index:0!important;
    box-sizing:border-box!important;
    border-radius:inherit!important;
    opacity:calc(var(--lumina-strength,0) * .78)!important;
    transition:opacity .28s cubic-bezier(.22,1,.36,1)!important;
  }
  .nav.lumina-target--nav > .lumina-layer::before,
  .nav.lumina-target--nav > .lumina-layer::after{
    box-sizing:border-box!important;
    border-radius:inherit!important;
  }
  .nav.lumina-target--nav > .lumina-layer::before{
    background:radial-gradient(260px 112px at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.12) 0%,rgba(255,255,255,.042) 42%,transparent 84%)!important;
  }
  .nav.lumina-target--nav > .lumina-layer::after{
    padding:1px!important;
    background:radial-gradient(270px 116px at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.42) 0%,rgba(255,255,255,.15) 42%,rgba(255,255,255,.025) 74%,transparent 94%)!important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;
  }
  .nav.lumina-target--nav > :not(.lumina-layer){
    position:relative!important;
    z-index:1!important;
  }
}

/* «Почему мы»: слева остаётся спокойный фон страницы, справа — одна ясная
   рабочая карточка. Так сравнение легче сканируется и не спорит с модульной
   композицией остальных разделов. */
.why-comparison{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:stretch;
  gap:clamp(30px,5vw,82px);
}
.why-problems{
  min-width:0;
  padding:clamp(18px,2vw,28px) 0 0;
}
.why-panel{
  padding:clamp(20px,2.3vw,32px)!important;
}
.why-column-heading{
  min-height:44px;
  display:flex;
  align-items:flex-start;
  padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.56);
  font-family:"Instrument Serif","Oranienbaum",Georgia,serif;
  font-size:clamp(21px,2vw,28px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.35px;
}
html[lang="ru"] .why-column-heading{font-family:"Oranienbaum",Georgia,serif}
.why-panel .why-column-heading{color:rgba(255,255,255,.96)}
.why-problem,
.why-solution{
  min-height:68px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.085);
}
.why-problem:last-child,
.why-solution:last-child{border-bottom:0}
.why-problem p,
.why-solution p{
  margin:0;
  font-size:16px;
  line-height:1.5;
}
.why-problem p{color:rgba(255,255,255,.48)}
.why-solution p{color:rgba(255,255,255,.90)}

/* В среднем тарифе функциональность может быть добавлена, но не обещается
   по умолчанию: отдельный нейтральный знак не смешивает её с «да» и «нет». */
.sales-package li.is-partial{color:rgba(255,255,255,.62)}
.sales-package li.is-partial::before{content:"✓";color:rgba(255,255,255,.58)}
.package-compare-row > i.partial{color:rgba(255,255,255,.58);font-size:15px}

/* Верхняя навигация остаётся стеклянной, но читается увереннее на тёмном
   первом экране. Направленный свет Lumina поверх этого слоя не меняется. */
body:not(.light) .nav{
  background:rgba(23,23,25,.58);
  border-bottom-color:rgba(255,255,255,.075);
}
/* На первом экране шапка не образует отдельную плашку: остаётся только
   навигация поверх геро-фона. После начала прокрутки возвращается тихое
   стекло, а направленный свет курсора работает в обоих состояниях. */
body:not(.light) .nav:not(.scrolled){
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
body:not(.light) .nav.scrolled{
  background:rgba(20,20,22,.79);
  border-bottom-color:rgba(255,255,255,.095);
}

body.light .why-column-heading{border-color:rgba(20,20,22,.12);color:rgba(20,20,22,.56)}
body.light .why-panel .why-column-heading{color:rgba(20,20,22,.92)}
body.light .why-problem,
body.light .why-solution{border-color:rgba(20,20,22,.10)}
body.light .why-problem p{color:rgba(20,20,22,.56)}
body.light .why-solution p{color:rgba(20,20,22,.90)}
body.light .sales-package li.is-partial,
body.light .sales-package li.is-partial::before,
body.light .package-compare-row > i.partial{color:rgba(20,20,22,.58)}

@media(max-width:768px){
  .why-comparison{grid-template-columns:1fr;gap:20px}
  .why-problems{padding:0 2px}
  .why-panel{padding:20px 18px!important;border-radius:24px}
  .why-column-heading{min-height:0;padding-bottom:13px;font-size:22px}
  .why-problem,
  .why-solution{min-height:0;gap:12px;padding:14px 0}
  .why-problem p,
  .why-solution p{font-size:15px;line-height:1.5}
}

/* На широком экране это уже не таблица с разным масштабом колонок, а две
   равновесные смысловые зоны. Карточка обнимает только своё содержимое — без
   искусственного пустого низа. */
@media(min-width:769px){
  .why-comparison{
    grid-template-columns:minmax(0,.93fr) minmax(0,1.13fr);
    align-items:start;
    gap:clamp(44px,4vw,68px);
  }
  .why-problems{padding-top:14px}
  .why-panel{
    align-self:start;
    padding:clamp(20px,1.75vw,28px) clamp(20px,1.75vw,28px) 7px!important;
  }
  .why-column-heading{
    min-height:0;
    padding-bottom:12px;
    font-size:clamp(24px,1.7vw,30px);
  }
  .why-problem,
  .why-solution{
    min-height:0;
    gap:18px;
    padding:13px 0;
  }
  .why-solution:last-child{padding-bottom:7px}
  .why-comparison .why-marker{
    flex:0 0 20px;
    width:20px;
    height:24px;
    margin-top:1px;
  }
  .why-comparison .why-marker svg{
    width:18px;
    height:18px;
    stroke-width:1.9;
  }
  body:not(.light) .why-problems .why-column-heading{color:rgba(255,255,255,.72)}
  body:not(.light) .why-problem p{color:rgba(255,255,255,.64)}
}

/* Названия колонок поддерживают выразительный шрифт заголовков сайта. */
.why-column-heading{
  font-family:var(--font-display);
  font-size:clamp(26px,1.9vw,30px);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.2px;
}
html[lang="ru"] .why-column-heading{font-family:"Oranienbaum",Georgia,serif}

/* ===== ЕДИНАЯ ПАЛИТРА ТИПОГРАФИКИ =====
   Текст использует только три роли: белый — основной, единый серый —
   поясняющий, чёрный — текст на светлых контролах. Фоны, границы и
   смысловые пиктограммы намеренно не затрагиваются. */
:root{
  --type-white:#fff;
  --type-gray:#a3a3a8;
  --type-black:#111;
}
body:not(.light){
  --fg:var(--type-white);
  --fg2:var(--type-gray);
  --fg3:var(--type-gray);
}
body:not(.light) :is(
  p,
  li,
  label,
  .section-label,
  .thin,
  .section-heading .thin,
  .nav-links a,
  .mobile-link,
  .lang-option:not(.active),
  #lang-toggle > span:not(.active),
  .contact-direct-label,
  .contact-method-label,
  .diploma-meta,
  .diploma-sub,
  .project-desc,
  .project-tag,
  .project-build-time,
  .project-estimate > span,
  .sales-package-kicker,
  .sales-package-time,
  .sales-addon-badge,
  .sales-addon-details-label,
  .sales-addon-price-list span,
  .sales-addon-budget-note span,
  .sales-process-step > span:not(.lumina-layer),
  .about-point,
  .credentials-head,
  .diploma-meta-kind,
  .contact-form-sub,
  .form-file-summary,
  .form-file-copy .form-label,
  .number-label,
  .case-modal-tech-label,
  .demo-loading,
  .demo-zoom-value,
  .demo-newtab-long,
  .demo-newtab-short,
  .footer-left,
  .footer-right,
  .footer-brand,
  .footer a,
  .why-problems .why-column-heading
){
  color:var(--type-gray)!important;
}
body:not(.light) :is(
  .why-panel .why-column-heading,
  .why-solution p,
  .contact-method-val,
  .hero-wordmark,
  .hero-inline-price,
  .project-kind
){
  color:var(--type-white)!important;
}
body:not(.light) :is(input,textarea)::placeholder{
  color:var(--type-gray)!important;
  opacity:1;
}
/* Эти состояния имеют более точные старые селекторы, поэтому фиксируем
   тот же серый прямо на них — без изменения их геометрии и поведения. */
body:not(.light) .lang-toggle span:not(.active),
body:not(.light) .section-heading .thin,
body:not(.light) .cta-heading .thin,
body:not(.light) .projects-heading-row .thin,
body:not(.light) .sales-addon-price-list .sales-addon-budget-note strong,
body:not(.light) .demo-window .demo-viewport-button[aria-pressed="false"]{
  color:var(--type-gray)!important;
}

/* ===== ТИПОГРАФИЧЕСКАЯ СИСТЕМА =====
   Пять стабильных ролей для всей страницы: display, заголовок карточки,
   основной текст, UI и метка. Размеры внутри роли адаптируются только под
   контекст и ширину экрана — новые случайные стили не появляются. */
:root{
  --font-display:"Instrument Serif","Oranienbaum",Georgia,serif;
  --font-interface:"Geist",Arial,sans-serif;
  --type-card-title:clamp(21px,1.5vw,24px);
  --type-card-title-leading:1.08;
  --type-body:clamp(15px,1.05vw,16px);
  --type-body-leading:1.6;
  --type-ui:13px;
  --type-ui-leading:1.25;
  --type-meta:11px;
  --type-meta-leading:1.25;
  --type-meta-tracking:.12em;
}

/* Короткие названия — это не служебный интерфейсный текст, а смысловые
   акценты карточек. Serif связывает их с большими заголовками и возвращает
   характер, но размер остаётся компактным и не спорит с секцией. */
html[lang] :is(.outcome-card,.sales-process-step) h3{
  font-family:var(--font-display)!important;
  font-size:var(--type-card-title)!important;
  font-weight:400!important;
  line-height:var(--type-card-title-leading)!important;
  letter-spacing:-.025em!important;
}
html[lang="ru"] :is(.outcome-card,.sales-process-step) h3{
  font-family:"Oranienbaum",Georgia,serif!important;
  letter-spacing:-.035em!important;
}

/* Один спокойный ритм поясняющего текста. Размер и межстрочный интервал
   совпадают на карточках, в сравнении подходов и в содержательных блоках. */
body:not(.light) :is(
  .outcome-card p,
  .sales-package > p,
  .sales-addon p,
  .sales-process-step p,
  .project-desc,
  .why-problem p,
  .why-solution p,
  .contact-form-sub,
  .faq-note,
  .sales-faq-panel p,
  .about-copy > p,
  .cta-sub
){
  font-family:var(--font-interface)!important;
  font-size:var(--type-body)!important;
  font-weight:400!important;
  line-height:var(--type-body-leading)!important;
}

/* Метки всегда сканируются как один слой, а не как набор произвольных
   маленьких шрифтов. Смысловые цветные иконки сюда намеренно не входят. */
body:not(.light) :is(
  .section-label,
  .sales-package-kicker,
  .sales-package-time,
  .sales-addon-badge,
  .contact-direct-label,
  .contact-method-label,
  .credentials-head,
  .diploma-meta,
  .diploma-meta-kind,
  .form-label,
  .project-kind,
  .sales-addon-details-label,
  .case-modal-tech-label
){
  font-family:var(--font-interface)!important;
  font-size:var(--type-meta)!important;
  font-weight:500!important;
  line-height:var(--type-meta-leading)!important;
  letter-spacing:var(--type-meta-tracking)!important;
}

/* Действия и навигация используют единый интерфейсный кегль. Их габариты,
   скругления и уже настроенная световая физика не меняются. */
body:not(.light) :is(
  .nav-links a,
  .btn-primary,
  .btn-secondary,
  .project-details,
  .project-demo,
  .sales-package-cta,
  .sales-package-toggle,
  .sales-addon-cta,
  .sales-addon-price-toggle,
  .diploma-view,
  .faq-telegram,
  .contact-form button,
  #mobile-sticky-cta
){
  font-family:var(--font-interface)!important;
  font-size:var(--type-ui)!important;
  font-weight:500!important;
  line-height:var(--type-ui-leading)!important;
}

@media(max-width:768px){
  :root{
    --type-card-title:20px;
    --type-body:16px;
    --type-ui:13px;
    --type-meta:10px;
  }
}

/* Шапка заявки читается сверху вниз: название занимает собственную строку,
   а пояснение начинается ровно под ним. Так карточка выглядит собранной,
   а не разделённой на случайные колонки. */
@media(min-width:769px){
  .contact-form-intro{
    display:block!important;
    width:100%;
    margin-bottom:14px;
  }
  .contact-form-title{
    margin:0!important;
    white-space:nowrap;
  }
  .contact-form-sub{
    max-width:46ch!important;
    padding-top:8px;
  }

  /* Правой рабочей колонке отдано 60% пространства: она ощутимо шире,
     но левая сторона сравнения остаётся достаточно читаемой. */
  .why-comparison{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;
    gap:clamp(36px,3.5vw,56px)!important;
  }
}

/* В сравнении это основной смысловой текст, а не второстепенная подпись.
   Поэтому он получает комфортный для чтения кегль; метки столбцов, теги и
   кнопки остаются компактными. */
body:not(.light) :is(.why-problem p,.why-solution p){
  font-size:16px!important;
  line-height:1.5!important;
}

/* В карточках этапов описания могут занимать две или три строки. Центровка
   всей пары «номер + текст» устраняет ложную пустоту снизу без растягивания
   текста и сохраняет одинаковую высоту модулей. */
@media(min-width:769px){
  .sales-process-step{
    align-items:center!important;
  }
  .sales-process-step > span:not(.lumina-layer){
    flex:0 0 48px;
  }
  .sales-process-step > div{
    min-width:0;
  }
}

/* «Почему мы»: обе половины сравнения работают по одной базовой линии.
   Карточка справа поднята ровно на её внутренний отступ, поэтому заголовки,
   разделители и все четыре строки считываются как единая таблица. */
@media(min-width:769px){
  .why-panel{
    margin-top:calc(13px - clamp(20px,1.75vw,28px));
  }
  .why-solution:last-child{
    padding-bottom:13px;
  }
  .why-lead{
    align-self:start;
    margin:calc(clamp(34px,3vw,44px) + 36px) 0 0;
  }
}

/* Предзаголовок остаётся навигационным ориентиром, но не конкурирует с
   основным заголовком и содержанием секции. */
:root{--type-meta-muted:#929298}
body:not(.light) .section-label{
  --type-gray:var(--type-meta-muted);
  color:var(--type-meta-muted)!important;
}
body:not(.light) .hero-h1 .thin[data-i18n="hero_tagline"]{
  --type-gray:#929298;
  color:#929298!important;
}
body:not(.light) .diploma-sub{
  font-family:var(--font-interface)!important;
  font-size:13px!important;
  line-height:1.5!important;
  font-weight:400!important;
}

/* Сетка — часть фирменной среды и на первом экране. Она остаётся статичной,
   заметно тише основной страницы и лежит ниже текста и затемняющих слоёв. */
@media(min-width:769px){
  .hero-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:radial-gradient(circle at 15px 15px,rgba(255,255,255,.14) 0 1px,transparent 1.3px);
    background-size:30px 30px;
    opacity:.6;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.78) 10%,#000 28%,#000 72%,rgba(0,0,0,.78) 90%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.78) 10%,#000 28%,#000 72%,rgba(0,0,0,.78) 90%,transparent 100%);
  }
}

/* До первой прокрутки шапка остаётся только навигацией поверх hero: никакого
   фона, рамки или курсорного блика. Они мягко возвращаются уже в scrolled. */
body:not(.light) .nav:not(.scrolled){
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
@media(hover:hover) and (pointer:fine){
  body:not(.light) .nav:not(.scrolled).lumina-target--nav > .lumina-layer{
    opacity:0!important;
  }
  body:not(.light) .nav-links a{
    transition:color .24s cubic-bezier(.22,1,.36,1)!important;
  }
  body:not(.light) .nav-links a:hover,
  body:not(.light) .nav-links a:focus-visible{
    color:var(--type-white)!important;
  }
}

/* Intermediate widths need readable service cards, not three narrow columns. */
@media(min-width:769px) and (max-width:1100px){
  #services .sales-packages{grid-template-columns:minmax(0,1fr)!important;gap:20px}
  #services .sales-package{min-width:0;width:100%}
  #services .sales-package h3{font-size:32px!important;overflow-wrap:anywhere}
  #services .sales-package > p{max-width:65ch}
}
@media(max-width:1200px){
  #services .sales-addon{grid-template-columns:minmax(0,1fr) 132px!important;column-gap:20px}
  #services .sales-addon-header-row{grid-column:1 / -1}
  #services .sales-addon-body{grid-column:1;grid-row:2;padding-right:0!important}
  #services .sales-addon-action{
    display:flex!important;grid-column:2;grid-row:2;min-width:0!important;
    width:132px;justify-self:end;align-self:end;
  }
  #services .sales-addon-price-toggle{
    width:132px;min-width:0!important;flex:none!important;
    padding:10px 12px!important;font-size:13px!important;white-space:nowrap!important;
  }
  #services .sales-addon-price-details{grid-column:1 / -1}
}
@media(max-width:540px){
  #services .sales-addon{grid-template-columns:minmax(0,1fr)!important}
  #services .sales-addon-body{grid-column:1;grid-row:2}
  #services .sales-addon-action{grid-column:1;grid-row:3;margin-top:18px}
}
#stack .sales-process-step{align-items:flex-start!important}
#stack .sales-process-step > span:not(.lumina-layer){align-self:flex-start!important;margin-top:0!important}
#stack .sales-process-step > div{
  display:flex;flex-direction:column;align-self:stretch;flex:1;min-width:0;
}
#stack .sales-process-step .process-time{
  align-self:flex-end;max-width:100%;margin-top:auto;
  padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:9px;
  background:rgba(255,255,255,.025);font-size:12px;line-height:1.5;
  text-align:right;
}
#stack .sales-process-step p{margin-bottom:18px}

@media(min-width:1101px){
  #why-us .why-panel{padding-top:14px!important;margin-top:-1px}
}
@media(min-width:769px){
  #services .sales-package-mobile-row .sales-package-toggle{display:none!important}
}
#stack .sales-process-step .process-time{
  order:-1;margin-top:0;margin-bottom:14px;border-radius:999px;
}
#education .about-copy > p,
#education .about-copy .about-point{
  font-family:var(--font-interface)!important;font-size:16px!important;line-height:1.6!important;font-weight:400!important;
}
#cf-consent{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  width:16px;height:16px;flex:0 0 16px;border:1px solid #444!important;
  border-radius:4px;background:#171719!important;position:relative;cursor:pointer;
}
#cf-consent:checked{background:#303034!important;border-color:#777!important}
#cf-consent:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #eee;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#cf-consent:focus-visible{outline:2px solid #aaa;outline-offset:3px}

.pricing-carousel-nav{display:none}
@media(min-width:769px) and (max-width:1100px){
  #services .sales-heading-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
  #services .sales-heading-row .section-heading{flex:1 1 440px}
  .pricing-carousel-nav{display:flex;gap:4px;margin-left:auto;padding:4px;border:1px solid #333;border-radius:24px}
  .pricing-carousel-nav button{border:0;border-radius:20px;background:transparent;color:var(--type-gray);padding:10px 14px;font:500 13px var(--font-interface);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
  .pricing-carousel-nav button[aria-pressed="true"]{background:#eee;color:#111}
  #services .sales-packages{
    position:relative;box-sizing:border-box;
    padding:18px calc((100% - var(--price-width,460px)) / 2) 36px!important;
    scroll-padding-inline:0!important;scrollbar-width:none;
  }
  #services .sales-packages::-webkit-scrollbar{display:none}
  #services .sales-package-reveal{
    flex-basis:var(--price-width,460px)!important;scroll-snap-align:center!important;
    scale:var(--price-scale,1)!important;translate:0 var(--price-drop,0px)!important;
    transform-origin:center;transition:scale .2s ease-out,translate .2s ease-out,opacity .92s!important;
  }
  #services .sales-package > p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;height:auto!important}
}
@media(min-width:769px) and (max-width:950px){
  .pricing-carousel-nav{margin-inline:auto}
}
@media(max-width:768px){
  #services.section .sales-packages{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;padding:0!important;gap:16px!important}
  #services .sales-package-reveal{order:0!important;min-width:0;scale:none;translate:none}
  #services .sales-package > p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;height:auto!important;max-height:none!important}
}
#services .sales-package-toggle{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:0 14px!important}
#services .sales-package-toggle > i{
  position:static!important;inset:auto!important;flex:0 0 8px;width:8px!important;height:8px!important;
  margin:0 0 4px!important;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg)!important;translate:none!important;
}
#services .sales-package-toggle > i::before,#services .sales-package-toggle > i::after{display:none!important}
#services .sales-package.details-open .sales-package-toggle > i{transform:rotate(225deg)!important;margin-top:6px!important}
@media(max-width:1200px){
  #services .sales-addon-cta{display:none!important}
  #services .sales-addon-action{min-width:0!important;max-width:100%!important;gap:0!important}
}
@media(max-width:768px){
  #services .sales-addon{
    display:grid!important;grid-template-columns:minmax(0,1fr) 120px!important;
    grid-template-rows:auto auto auto auto;column-gap:16px;
  }
  #services .sales-addon-header-row{grid-column:1/-1;grid-row:1}
  #services .sales-addon-body{display:contents}
  #services .sales-addon-body h3{grid-column:1/-1;grid-row:2;margin:13px 0 0}
  #services .sales-addon-body p{
    grid-column:1/-1;grid-row:3;margin:12px 0 0;
    min-height:var(--direct-text-height,6lh);
  }
  #services .sales-addon-body p::before{
    content:"";float:right;width:136px;height:var(--direct-text-height,6lh);
    shape-outside:inset(max(0px,calc(var(--direct-text-height,6lh) - 56px)) 0 0 0);
    pointer-events:none;
  }
  #services .sales-addon-action{
    grid-column:2!important;grid-row:3!important;width:120px!important;
    justify-self:end!important;align-self:end;margin:12px 0 0;
  }
  #services .sales-addon-price-toggle{
    box-sizing:border-box!important;width:120px!important;max-width:100%!important;
  }
  #services .sales-addon-price-details{grid-column:1/-1;grid-row:4}
}

@media(max-width:1100px){
  #why-us .why-heading{display:block;margin-bottom:26px}
  #why-us .why-lead,#why-us .why-column-heading,#why-us .why-marker{display:none!important}
  #why-us .why-comparison{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  #why-us .why-problems,#why-us .why-panel,#why-us .why-solutions{display:contents!important}
  #why-us .why-panel > .lumina-layer{display:none!important}
  #why-us .why-problem,#why-us .why-solution{
    display:block;grid-column:1;min-height:0;border:0;margin:0;
  }
  #why-us .why-problem{padding:20px 0 7px}
  #why-us .why-solution{padding:0 0 20px;border-bottom:1px solid rgba(255,255,255,.09)}
  #why-us .why-problem p{font-size:15px!important;color:var(--type-gray)!important;text-decoration:line-through;text-decoration-thickness:1px}
  #why-us .why-solution p{font-size:19px!important;line-height:1.5!important;color:var(--type-white)!important}
  #why-us .why-problem:nth-of-type(1){grid-row:1}
  #why-us .why-solution:nth-of-type(1){grid-row:2}
  #why-us .why-problem:nth-of-type(2){grid-row:3}
  #why-us .why-solution:nth-of-type(2){grid-row:4}
  #why-us .why-problem:nth-of-type(3){grid-row:5}
  #why-us .why-solution:nth-of-type(3){grid-row:6}
  #why-us .why-problem:nth-of-type(4){grid-row:7}
  #why-us .why-solution:nth-of-type(4){grid-row:8}
  #services .sales-packages{
    display:flex!important;overflow-x:auto;overflow-y:hidden;gap:20px;
    padding:12px 12px 26px;scroll-snap-type:x mandatory;scroll-padding-inline:12px;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  }
  #services .sales-package-reveal{
    flex:0 0 min(400px,82vw);min-width:0;scroll-snap-align:start;
  }
  #services .sales-package-reveal:nth-child(2){order:-1}
  #services .sales-package{height:100%;box-sizing:border-box}
}
@media(max-width:768px){
  .section-projects .projects-grid:not(.is-expanded) .project-card,
  .section-projects .projects-grid:not(.is-expanded) .project-card:hover{
    transform:scale(var(--carousel-scale,.88))!important;
    translate:none!important;transform-origin:center center;
  }
}

@media(min-width:769px) and (max-width:1100px){
  #services .sales-packages{
    width:100vw;max-width:none;margin-left:calc(50% - 50vw);
    padding-inline:calc((100vw - var(--price-width,460px)) / 2)!important;
  }
  #services .sales-package-reveal:nth-child(2){order:0!important}
  .pricing-carousel-nav{position:relative;isolation:isolate}
  .pricing-carousel-nav::before{
    content:"";position:absolute;left:0;top:4px;bottom:4px;
    width:var(--indicator-width,80px);transform:translateX(var(--indicator-x,4px));
    border-radius:999px;background:#eee;pointer-events:none;z-index:0;
    transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1);
  }
  .pricing-carousel-nav button{position:relative;z-index:1;background:transparent!important}
}
@media(max-width:1200px){
  #education .diploma-card .diploma-thumb-btn,
  #education .diploma-card .diploma-thumb-btn:hover{
    top:50%!important;bottom:auto!important;right:12px!important;
    width:48px!important;height:48px!important;padding:0 0 0 12px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    transform:translateY(-50%)!important;translate:none!important;
  }
  #education .diploma-card .diploma-thumb-btn::before{
    content:"";display:block!important;position:absolute;left:0;top:8px;bottom:8px;
    width:1px;height:auto;background:rgba(255,255,255,.15)!important;
    opacity:1!important;transform:none!important;box-shadow:none!important;
  }
  #education .diploma-card .diploma-thumb-btn svg{position:static!important;margin:0!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .pricing-carousel-nav::before{transition:none}
}

#stack .sales-process-step{padding-top:20px;padding-bottom:20px}
#stack .sales-process-step > div{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content;
  grid-template-rows:auto 1fr;column-gap:16px;align-items:center;align-content:start;
}
#stack .sales-process-step h3{grid-column:1;grid-row:1}
#stack .sales-process-step .process-time{
  grid-column:2;grid-row:1;order:0;align-self:center;justify-self:end;
  translate:6px -4px;
  width:max-content;max-width:none;white-space:nowrap;margin:0;
  padding:4px 8px;font-family:var(--font-interface);font-size:11px;line-height:1.2;
  border-color:rgba(255,255,255,.1);background:transparent;
}
#stack .sales-process-step p{grid-column:1 / -1;grid-row:2;align-self:start;margin:10px 0 0}
#stack .sales-process-step > .process-time-hidden{grid-template-columns:minmax(0,1fr)}
#stack .process-time-hidden .process-time{position:absolute;visibility:hidden;pointer-events:none}
#cf-consent{width:16px!important;height:16px!important;min-width:16px;min-height:16px;flex:0 0 16px!important;border-radius:6px!important;transition:translate .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #cf-consent:hover{translate:0 -1px}
}

@media(min-width:769px) and (max-width:1100px){
  #services .sales-packages{gap:0!important;scroll-snap-type:x proximity}
  #services .sales-package-reveal{position:relative;margin-right:-36px}
  #services .sales-package-reveal:last-child{margin-right:0}
  .pricing-carousel-nav{
    background:rgba(40,40,44,.82);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.15);
  }
}
@media(max-width:1200px){
  #education .diploma-card .diploma-thumb-btn,
  #education .diploma-card .diploma-thumb-btn:hover,
  #education .diploma-card .diploma-thumb-btn:focus-visible{
    background:transparent!important;background-image:none!important;box-shadow:none!important;
    border-color:transparent!important;filter:none!important;color:#fff!important;
  }
  #education .diploma-thumb-btn .lumina-layer,
  #education .diploma-thumb-btn::after{display:none!important}
  #education .diploma-card .diploma-thumb-btn::before{top:2px!important;bottom:auto!important;height:44px!important;max-height:none!important}
  #education .diploma-thumb-btn svg{filter:none!important}
}
#services .sales-package li.is-partial::before{
  content:"◌";color:var(--type-gray)!important;font-size:13px;line-height:1;
}
@media(max-width:1100px){
  #why-us .why-comparison .why-marker{display:flex!important;flex:0 0 20px;width:20px;height:24px}
  #why-us .why-comparison .why-problem,
  #why-us .why-comparison .why-solution{display:flex;align-items:flex-start;gap:12px}
  body:not(.light) #why-us .why-comparison .why-solution p{color:#eeeeef!important}
  body:not(.light) #why-us .why-comparison .why-problem p{color:#b5b5ba!important}
}

@media(min-width:769px) and (max-width:1100px){
  #services .sales-package-reveal{
    transform:perspective(1400px) rotateY(var(--price-angle,0deg))!important;
    transition:scale .2s ease-out,translate .2s ease-out,transform .2s ease-out,opacity .92s!important;
  }
  html body #services .is-pricing-carousel .sales-package-reveal:not(.is-price-active) .sales-package,
  html body #services .is-pricing-carousel .sales-package-reveal:not(.is-price-active) .sales-package:hover{
    transform:none!important;translate:none!important;scale:1!important;
  }
}
html body .section-projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active),
html body .section-projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active):hover{
  transform:perspective(1600px) translateY(var(--orbit-y,0px)) translateX(var(--orbit-pull,0px)) rotateY(var(--orbit-angle,0deg)) scale(var(--carousel-scale,.88))!important;
  scale:1!important;translate:none!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.22)!important;
}
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active) .lumina-layer{
  display:none!important;
}
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active) :is(button,a){
  pointer-events:none;
}
html body .section-projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active) > .lumina-layer::before,
html body #services .is-pricing-carousel .sales-package-reveal:not(.is-price-active) .sales-package > .lumina-layer::before{
  background-color:transparent!important;
}
@media(max-width:768px){
  html body .section-projects .projects-grid:not(.is-expanded) .project-card:is(.is-carousel-active,:not(.is-carousel-active)),
  html body .section-projects .projects-grid:not(.is-expanded) .project-card:is(.is-carousel-active,:not(.is-carousel-active)):hover{
    transform:translateY(var(--orbit-y,0px)) scale(var(--carousel-scale,.88))!important;
    translate:none!important;scale:1!important;
    transition:none!important;
  }
}

@media(min-width:769px) and (max-width:1100px){
  #services .sales-packages{padding-inline:48px!important;scroll-padding-inline:48px!important}
  #services .sales-package-reveal:first-child{scroll-snap-align:start!important}
  #services .sales-package-reveal:last-child{scroll-snap-align:end!important}
}
#education .diploma-card .diploma-thumb-btn:hover svg,
#education .diploma-card .diploma-thumb-btn:focus-visible svg,
#education .diploma-card .diploma-thumb-btn:active svg{
  color:#fff!important;stroke:#fff!important;filter:none!important;
}
body:not(.light) .contact-form input::placeholder,
body:not(.light) .contact-form textarea#cf-msg::placeholder{
  color:#68686e!important;opacity:1!important;
}
.section-projects .project-card .project-desc{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3!important;
  overflow:hidden!important;text-overflow:ellipsis;
  padding-top:0!important;margin-top:8px;line-height:1.5!important;
  height:4.5em!important;min-height:4.5em!important;max-height:4.5em!important;
}
.section-projects .projects-grid.is-expanded .project-card .project-desc{
  height:auto!important;min-height:0!important;
}
.diploma-sub-short{white-space:nowrap}
.diploma-label-full{display:none}
@media(max-width:1040px){
  .diploma-label-compact{display:none}
  .diploma-label-full{display:inline}
  .diploma-sub-short{white-space:normal}
}
@media(min-width:769px) and (max-width:1100px){
  #services .pricing-carousel-nav{top:14px}
}

/* Reveal must survive component hover/tilt transition declarations.
   Horizontal carousel transforms remain driven directly by scrolling. */
@media(prefers-reduced-motion:no-preference){
  html body .reveal:not(.projects-grid:not(.is-expanded) > .project-card){
    transition-property:opacity,translate,transform!important;
    transition-duration:1.25s,1.25s,.85s!important;
    transition-timing-function:cubic-bezier(.22,.68,.3,1),cubic-bezier(.22,.68,.3,1),cubic-bezier(.16,1,.3,1)!important;
  }
  html body .reveal:not(.visible){opacity:0!important}
}

/* Entry motion stays independent from hover geometry for every project. */
@media(prefers-reduced-motion:no-preference){
  html body #projects .projects-grid.is-expanded .project-card.reveal{translate:0 26px!important}
  html body #projects .projects-grid.is-expanded .project-card.reveal.visible{translate:0 0!important}
}
.hero-highlights .hero-pill{white-space:nowrap}
@media(max-width:768px){
  .hero-content .hero-highlights{
    position:static;display:flex;flex-direction:row;flex-wrap:wrap;
    width:100%;max-width:none;margin:20px 0 0;
    align-items:center;justify-content:flex-start;gap:7px!important;
  }
  .hero-highlights .hero-pill{
    font-size:12px!important;padding:7px 10px!important;
    gap:4px;letter-spacing:0;text-transform:none;
  }
  .hero-highlights .hero-pill::before{width:4px;height:4px}
  .hero-highlights + .hero-mobile-copy{margin-top:20px}
}

/* Consistent section rhythm; the FAQ gets extra separation. */
body :is(#why-us,#projects,#services,#stack,#education,#faq).section{
  padding-top:104px!important;padding-bottom:104px!important;
}
body #faq.section{padding-top:128px!important}
body #contact.section{padding-top:104px!important}
@media(max-width:768px){
  body :is(#why-us,#projects,#services,#stack,#education,#faq).section{
    padding-top:64px!important;padding-bottom:64px!important;
  }
  body #faq.section{padding-top:84px!important}
  body #contact.section{padding-top:64px!important}
  #stack .sales-process-step + .sales-process-step{
    border-top:1px solid rgba(255,255,255,.12)!important;
    border-radius:0!important;
  }
  #education .about-copy > p{
    width:100%;max-width:none;text-align:justify;hyphens:auto;
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .lumina-target--card > .lumina-layer{
    opacity:calc(var(--lumina-strength,0) * .62)!important;
    transition:opacity .65s cubic-bezier(.22,1,.36,1)!important;
  }
}
/* During scrolling the static card material stays; cursor gradients resume
   after scrolling settles instead of repainting the entire visible page. */
/* Muted supporting copy is deliberately quieter than body text. */
html body:not(.light) .section-label,
html body:not(.light) #contact .contact-form-note{
  --type-gray:#737378;
  --type-meta-muted:#737378;
  color:#737378!important;
}

/* Carousel has one motion owner: selection, never pointer proximity. */
html body #projects .projects-grid:not(.is-expanded):not(.is-layout-transitioning) .project-card,
html body #projects .projects-grid:not(.is-expanded):not(.is-layout-transitioning) .project-card:hover{
  transform:perspective(1600px) translateY(var(--orbit-y,18px)) rotateY(var(--orbit-angle,8deg)) scale(var(--carousel-scale,.88))!important;
  translate:none!important;scale:1!important;
  transition:transform .48s cubic-bezier(.4,0,.2,1)!important;
}
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active)::after,
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active):hover::after{
  background:#000!important;opacity:.18!important;transition:none!important;
}
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active),
html body #projects .projects-grid:not(.is-expanded) .project-card:not(.is-carousel-active):hover{
  background:#101013!important;filter:none!important;
}
@media(prefers-reduced-motion:reduce){
  html body #projects .projects-grid:not(.is-expanded):not(.is-layout-transitioning) .project-card{transition:none!important}
}
html.lumina-scrolling .lumina-layer,
html.lumina-scrolling .ambient-background::before,
html.lumina-scrolling .ambient-background::after{opacity:0!important}
html.lumina-enabled .ambient-background::before{
  background:radial-gradient(280px circle at var(--lumina-ambient-x,-999px) var(--lumina-ambient-y,-999px),rgba(255,255,255,.045),rgba(255,255,255,.024) 36%,rgba(255,255,255,.008) 65%,transparent 88%);
}
@media(min-width:769px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html body #stack .sales-process-step.card-corner-tilt{
    transform:translateY(0)!important;
    transition:transform .65s cubic-bezier(.4,0,.2,1),opacity 1.25s ease,translate 1.25s ease!important;
  }
  html body #stack .sales-process-step.card-corner-tilt:hover{
    transform:translateY(-3px)!important;
  }
}