/* ============================================================
   Numo Web — main styles
   Извлечено из index.html (инлайн style-блоки собраны в один файл
   в исходном порядке следования в документе)
   ============================================================ */

/* --- base / layout / components --- */
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

    /* =========================================================
       01. ROOT / BASE
    ========================================================= */
    :root {
      --font: "Jura", sans-serif;
      --font-2: "Nunito", sans-serif;

      --accent: #ee3937;
      --accent-2: #ff7a45;
      --accent-3: #ffcf5a;

      --dark: #090a0f;
      --dark-2: #10131b;
      --dark-3: #171b26;
      --dark-4: #202636;

      --white: #ffffff;
      --light: #f5f2ea;
      --light-2: #ebe7dd;
      --light-card: #ffffff;

      --text: rgba(255, 255, 255, 0.92);
      --text-dark: #11131a;
      --muted: rgba(255, 255, 255, 0.68);
      --muted-2: rgba(255, 255, 255, 0.48);
      --muted-dark: rgb(17, 19, 26);

      --line: rgba(255, 255, 255, 0.12);
      --line-2: rgba(255, 255, 255, 0.18);
      --line-dark: rgba(17, 19, 26, 0.12);

      --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
      --shadow-soft: 0 24px 70px rgba(18, 20, 28, 0.10);
      --shadow-accent: 0 18px 60px rgba(238, 57, 55, 0.36);

      --radius: 30px;
      --radius-sm: 18px;
      --container: 1720px;

      --blur-background: rgba(255, 255, 255, 0.055);
      --blur-filter: blur(28px);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-2);
      color: var(--text);
      background: #0b0e15;
      overflow-x: hidden;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

p {

}

    /* CURSOR */
    #cur,
    #cur-r {
      position: fixed;
      pointer-events: none;
      border-radius: 50%;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .3s, height .3s, opacity .3s;
    }

    #cur {
      width: 10px;
      height: 10px;
      background: var(--accent);
      transition: transform .08s;
    }

    #cur-r {
      width: 38px;
      height: 38px;
      border: 1.5px solid var(--accent);
      opacity: .5;
      transition: width .3s, height .3s, transform .15s ease-out, opacity .3s;
    }

    .container {
      width: min(100% - 32px, var(--container));
      margin: 0 auto;
    }

    @media (max-width: 1600px) {
      .container {
        width: min(100% - 32px, 1220px);
        margin: 0 auto;
      }
    }

    .page {
      position: relative;
    }

    .noise {
      position: fixed;
      inset: 0;
      z-index: -2;
      opacity: .02;
      pointer-events: none;
      background-image: url("assets/images/noise.gif");
    }

    .decor {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .blob {
      position: absolute;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(238, 57, 55, 0.24);
      filter: blur(72px);
      pointer-events: none;
      z-index: -1;
      animation: blobMove 12s ease-in-out infinite alternate;
    }

    .blob--one {
      top: 230px;
      left: -170px;
    }

    .blob--two {
      right: -180px;
      top: 1040px;
      background: rgba(255, 122, 69, 0.16);
      animation-delay: 2s;
    }

    .blob--three {
      left: 36%;
      top: 2120px;
      width: 320px;
      height: 320px;
      background: rgba(255, 207, 90, 0.09);
      animation-delay: 4s;
    }

    @keyframes blobMove {
      from {
        transform: translate3d(0, 0, 0) scale(1);
      }

      to {
        transform: translate3d(42px, -54px, 0) scale(1.08);
      }
    }

    /* =========================================================
       02. COMMON UI
    ========================================================= */

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 14px 22px;
      border: 0;
      border-radius: 999px;
      color: var(--white);
      background: rgba(255, 255, 255, 0.08);
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      white-space: nowrap;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 48%);
      opacity: 0;
      transition: 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:hover::before {
      opacity: 1;
    }

    .btn--accent {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: var(--shadow-accent);
    }

    .btn--border {
      border: 1px solid var(--line);
      background: var(--blur-background);
      backdrop-filter: var(--blur-filter);
    }

    .btn--light {
      color: var(--text-dark);
      border: 1px solid var(--line-dark);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: var(--shadow-soft);
    }

    .btn--wide {
      width: 100%;
    }

    .section {
      padding: 85px 0;
      position: relative;
    }

    .section--light {
      color: var(--text-dark);
      background: #ffffff;
    }

    .section__head {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      margin-bottom: 36px;
    }

    .section__head>div {
      display: flex;
      gap: 10px;
      flex-direction: column;
      align-items: flex-start;
    }


    .eyebrow {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 13px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px);
      font-size: 14px;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(238, 57, 55, 0.15);
    }

    .section--light .eyebrow {
      color: var(--muted-dark);
      border-color: var(--line-dark);
      background: rgba(255, 255, 255, 0.72);
    }

    .title {
      margin-bottom: 16px;
      max-width: 1000px;
      font-size: clamp(34px, 6.3vw, 68px);
      font-family: var(--font);
      line-height: 0.92;
      letter-spacing: -0.03em;
    }

    .title span,
    .section__title span {
      color: transparent;
      background: linear-gradient(135deg, var(--white), #ff9a87 45%, var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
    }

    .section__title.gradient span {
      background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 42%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.38), transparent 38%), linear-gradient(135deg, #ffffff 0%, #7c3aed 22%, #ee3937 60%, #ff7a45 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .section--light .section__title span {
      background: linear-gradient(135deg, #11131a, var(--accent) 55%, var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
    }

    .lead {
      color: var(--white);
      font-size: clamp(15px, 1.7vw, 21px);
      line-height: 1.65;
      max-width: 720px;
    }

    .section__title {
      font-size: clamp(34px, 4.4vw, 64px);
      font-family: var(--font);
      line-height: 1;
      letter-spacing: -0.008em;
      margin-bottom: 16px;
    }

    .section__text {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.5;
      border-left: 1px solid #fa6641;
      padding-left: 16px;
    }

    .section--light .section__text,
    .section--light .lead {
      color: var(--muted-dark);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.055);
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
      background: var(--card-soft);

    }

    @media (max-width: 760px) {
      .section__text {
        padding-left: 8px;
        font-size: 15px;
      }
    }

    /* =========================================================
   03. SHARED 3D TILT EFFECT — SMOOTH
========================================================= */
    .tilt-3d {
      position: relative;
      transform-style: preserve-3d;
      will-change: transform;
      transform:
        perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
      transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease;
    }

    .tilt-3d::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      border-radius: inherit;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
          rgba(255, 255, 255, 0.22),
          transparent 34%);
      opacity: 0;
      transition: opacity 0.24s ease;
      mix-blend-mode: screen;
    }

    .tilt-3d.is-tilting::after {
      opacity: 1;
    }

    .tilt-3d.is-tilting {
      box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .portfolio-card__media {
      transform: translateZ(28px);
    }

    .portfolio-card__body {
      transform: translateZ(34px);
    }

    .portfolio-card__tags {
      transform: translateZ(44px);
    }

    .portfolio-card__footer {
      transform: translateZ(38px);
    }

    .portfolio-card__result {
      transform: translateZ(58px);
    }

    /* =========================================================
       04. HEADER / DROPDOWN / MOBILE MENU
    ========================================================= */
    .header {
      position: fixed;
      top: 16px;
      left: 0;
      right: 0;
      z-index: 1000;
      pointer-events: none;
      transform: translateY(0);
      opacity: 1;
      transition: transform 0.42s ease, opacity 0.42s ease;
    }

    .header.is-hidden {
      transform: translateY(-130%);
      opacity: 0;
    }

    body.menu-open .header {
      transform: translateY(0);
      opacity: 1;
    }

    .header__inner {
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(11, 13, 19, 0.76);
      backdrop-filter: blur(26px);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
    }

    .logo {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      padding-left: 8px;
      font-weight: 750;
      letter-spacing: -0.045em;
    }

    .logo__img {
      height: 50px;
    }

    .logo span {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
    }

    .logo span::after {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      background: var(--accent);
      border-radius: 50%;
      margin-left: 5px;
      margin-top: 14px;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav__item {
      position: relative;
    }

    .nav__link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.055);
      border-radius: 999px;
      color: var(--muted);
      overflow: hidden;
      transition: 0.25s ease;
    }

    @media (max-width: 1199px) {
      .nav__link {
        font-size: 14px;
      }
    }


    .nav__link::after {
      content: "";
      border-radius: 50%;
      width: 100%;
      min-height: 100%;
      margin-bottom: 72px;
      padding-top: 100%;
      position: absolute;
      transition: margin .4s, border-radius .25s;
      inset: auto 0 0;
      z-index: -1;
      background: linear-gradient(135deg,
          #7c3aed 30%,
          #ee3937 65%,
          #ff7a45 100%);
    }


    @media (any-hover: hover) {
      .nav__link:hover::after {
        border-radius: 0;
        margin-bottom: 0
      }
    }

    .nav__link:hover {
      color: var(--white);
      background: rgba(255, 255, 255, 0.08);
    }

    .nav__arrow {
      width: 7px;
      height: 7px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      opacity: 0.8;
    }

    .dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      width: 310px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(13, 15, 22, 0.92);
      backdrop-filter: blur(28px);
      box-shadow: var(--shadow);
      transform: translateX(-50%) translateY(12px);
      opacity: 0;
      visibility: hidden;
      transition: 0.22s ease;
    }


    .nav__item:hover .dropdown,
    .nav__item.is-open .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .dropdown a {
      display: grid;
      gap: 5px;
      padding: 13px;
      border-radius: 16px;
      color: var(--white);
      transition: 0.22s ease;
    }

    .dropdown a:hover {
      background: rgba(255, 255, 255, 0.075);
    }

    .dropdown strong {
      font-size: 14px;
      letter-spacing: -0.02em;
    }

    .dropdown span {
      color: var(--muted-2);
      font-size: 12px;
      line-height: 1.35;
    }

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

    .header__phone {
      display: inline-flex;
      align-items: center;
      min-height: 46px;
      padding: 12px 15px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--white);
      background: rgba(255, 255, 255, 0.055);
      font-size: 14px;
      transition: 0.25s ease;
    }

    .header__phone:hover {
      border-color: rgba(238, 57, 55, 0.45);
      background: rgba(238, 57, 55, 0.12);
    }


    @media (max-width: 1099px) {
      .header__phone {
        display: none
      }
    }

    .burger {
      display: none;
      position: relative;
      width: 48px;
      height: 48px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      border-radius: 50%;
      color: var(--white);
      cursor: pointer;
      z-index: 1100;
    }

    .burger span {
      position: absolute;
      left: 14px;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 99px;
      transition: 0.25s ease;
    }

    .burger span:nth-child(1) {
      top: 18px;
    }

    .burger span:nth-child(2) {
      top: 25px;
    }

    body.menu-open .burger span:nth-child(1) {
      top: 23px;
      transform: rotate(45deg);
    }

    body.menu-open .burger span:nth-child(2) {
      top: 23px;
      transform: rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: none;
      padding: 96px 16px 20px;
      background:
        radial-gradient(circle at 20% 0%, rgba(238, 57, 55, 0.28), transparent 32%),
        radial-gradient(circle at 95% 14%, rgba(255, 122, 69, 0.18), transparent 30%),
        rgba(8, 10, 15, 0.96);
      backdrop-filter: blur(28px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-18px);
      transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease;
      overflow-y: auto;
    }

    body.menu-open .mobile-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .mobile-menu__inner {
      width: min(100%, 720px);
      margin: 0 auto;
      display: grid;
      gap: 18px;
    }

    .mobile-menu__card {
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.065);
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
    }

    .mobile-link,
    .mobile-group__head {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      color: var(--white);
      text-align: left;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .mobile-link:last-child {
      border-bottom: 0;
    }

    .mobile-group__head span:last-child {
      color: var(--accent);
      font-size: 26px;
      transition: 0.25s ease;
    }

    .mobile-group.is-open .mobile-group__head span:last-child {
      transform: rotate(45deg);
    }

    .mobile-sub {
      display: grid;
      gap: 8px;
      max-height: 0;
      overflow-x: auto;
      padding: 0 12px;
      transition: 0.3s ease;
    }

    .mobile-group.is-open .mobile-sub {
      max-height: 420px;
      padding: 0 12px 12px;
    }

    .mobile-sub a {
      display: grid;
      gap: 4px;
      padding: 13px 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.055);
    }

    .mobile-sub strong {
      font-size: 15px;
    }

    .mobile-sub span {
      display: none;
      color: var(--muted-2);
      font-size: 13px;
      line-height: 1.4;
    }

    .mobile-cta {
      position: relative;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        radial-gradient(circle at 80% 10%, rgba(238, 57, 55, 0.32), transparent 34%),
        rgba(255, 255, 255, 0.075);
      overflow: hidden;
    }

    .mobile-cta h3 {
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .mobile-cta p {
      margin-top: 10px;
      color: var(--muted);
      line-height: 1.55;
    }

    .mobile-cta__actions {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    /* =========================================================
       05. HERO
    ========================================================= */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 158px 0 92px;
      overflow: hidden;
    }

    .hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
      gap: 38px;
      align-items: center;
    }

    .hero__content {
      overflow: hidden;
      z-index: 1;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .hero__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--blur-background);
      backdrop-filter: var(--blur-filter);
      color: var(--muted);
      font-size: 14px;
    }

    .meta-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 34px;
    }

    .trust-card {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--blur-background);
      backdrop-filter: var(--blur-filter);
    }

    .trust-card strong {
      display: block;
      font-size: 30px;
      letter-spacing: -0.055em;
    }

    .trust-card span {
      display: block;
      margin-top: 7px;
      color: var(--muted-2);
      line-height: 1.35;
      font-size: 14px;
    }

    .hero-stage {
      position: relative;

    }

    .orbit {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none;
      right: -50%;
    }

    .orbit__ring {
      position: absolute;
      width: 68%;
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: rotate 22s linear infinite;
    }

    .orbit__ring:nth-child(2) {
      width: 52%;
      animation-duration: 16s;
      animation-direction: reverse;
    }

    .orbit__ring::before,
    .orbit__ring::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 28px rgba(238, 57, 55, 0.72);
    }

    .orbit__ring::before {
      top: 10%;
      left: 18%;
    }

    .orbit__ring::after {
      right: 13%;
      bottom: 14.8%;
      background: var(--accent-3);
      box-shadow: 0 0 28px rgba(255, 207, 90, 0.42);
    }


    .orbit__ring:last-child:after {
      bottom: 14.4%;
    }


    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }

    .hero-panel {
      z-index: 2;
      border: 1px solid var(--line);
      border-radius: 38px;
      padding: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
        rgba(255, 255, 255, 0.06);
      backdrop-filter: var(--blur-filter);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(circle at 25% 14%, rgba(238, 57, 55, 0.34), transparent 35%),
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.16), transparent 26%);
      pointer-events: none;
    }

    .hero-panel__bar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 8px 16px;
      color: var(--muted-2);
      font-size: 13px;
      transform: translateZ(34px);
    }

    .dots {
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.22);
    }

    .screen {
      position: relative;
      z-index: 2;
      overflow: hidden;
      min-height: 470px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: #0b0e15;
      transform: translateZ(26px);
    }

    .screen__top {
      padding: 28px;
      min-height: 265px;
      background:
        radial-gradient(circle at 80% 18%, rgba(238, 57, 55, 0.34), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
    }

    .screen__badge {
      width: fit-content;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(238, 57, 55, 0.16);
      color: #ffb4ae;
      font-size: 12px;
      border: 1px solid rgba(238, 57, 55, 0.28);
    }

    .screen__title {
      margin-top: 18px;
      max-width: 340px;
      font-size: 38px;
      font-family: var(--font);
      line-height: 0.94;
      letter-spacing: -0.025em;
    }


    @media (max-width: 760px) {
      .screen__title {
        font-size: 28px;
      }
    }

    .screen__line {
      height: 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      margin-top: 16px;
    }

    .screen__line:nth-child(4) {
      width: 74%;
    }

    .screen__line:nth-child(5) {
      width: 48%;
    }

    .screen__cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 14px;
    }

    .mini-card {
      min-height: 112px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--line);
      padding: 14px;
    }

    @media (max-width: 760px) {
      .mini-card:nth-child(2) {
        display: none;
      }

      .mini-card:nth-child(3) {
        display: none;
      }
    }

    .mini-card span {
      display: block;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      margin-bottom: 18px;
      animation: pulseSoft 2.6s ease-in-out infinite;
    }

    .mini-card:nth-child(2) span {
      animation-delay: 0.4s;
    }

    .mini-card:nth-child(3) span {
      animation-delay: 0.8s;
    }

    @keyframes pulseSoft {

      0%,
      100% {
        box-shadow: 0 0 0 rgba(238, 57, 55, 0);
      }

      50% {
        box-shadow: 0 0 32px rgba(238, 57, 55, 0.34);
      }
    }

    .mini-card i {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      margin-top: 9px;
    }

    .floating-note {
      position: absolute;
      right: 30px;
      bottom: 30px;
      z-index: 5;
      width: 236px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(12, 14, 20, 0.75);
      backdrop-filter: blur(24px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
      animation: float 4.4s ease-in-out infinite;
      transform: translateZ(70px);
    }

    .floating-note strong {
      display: block;
      font-size: 28px;
      letter-spacing: -0.05em;
    }

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

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-13px);
      }
    }

    /* =========================================================
       06. MARQUEE
    ========================================================= */
    .marquee {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }

    .marquee__track {
      display: flex;
      width: max-content;
      padding: 18px 0;
      will-change: transform;
    }

    .marquee__item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      font-size: 14px;
      padding: 0 18px;
      /* gap через padding, не gap на flex */
      white-space: nowrap;
    }

    .marquee__item::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    @keyframes marquee-scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(var(--marquee-offset));
      }
    }

    /* =========================================================
       07. SERVICES
    ========================================================= */
    .services {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)) 1.15fr;
      grid-auto-rows: minmax(330px, auto);
      gap: 14px;
      align-items: stretch;
    }

    .service-card {
      position: relative;
      min-height: 330px;
      padding: 26px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045));
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.35s ease;
    }

    .service-card:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
      transform: translateY(-3px);
    }

    .service-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .service-card__num {
      color: var(--muted-2);
      font-size: 14px;
    }

    .service-card__icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(238, 57, 55, 0.12);
      border: 1px solid rgba(238, 57, 55, 0.22);
      color: var(--accent);
      flex-shrink: 0;
    }

    .service-card__icon svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
    }

    .service-card h3 {
      margin-top: 10px;
      font-size: 28px;
      font-family: var(--font);
      line-height: 1.05;
      letter-spacing: -0.008em;
      position: relative;
      z-index: 1;
    }

    .service-card p {
      margin-top: 16px;
      color: var(--muted);
      line-height: 1.65;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 760px) {
      .service-card p {
        font-size: 15px;
      }

    }

    .service-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
      position: relative;
      z-index: 1;
    }

    .service-card__actions {
      margin-top: auto;
      padding-top: 24px;
      position: relative;
      z-index: 1;
    }

    /* Большая последняя карточка справа */
    .services .service-card--wide {
      grid-column: 3;
      grid-row: 1 / span 2;
      min-height: auto;
      padding: 34px;
      background:
        radial-gradient(circle at 82% 12%, rgba(238, 57, 55, 0.24), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(255, 122, 69, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    }

    .services .service-card--wide::before {
      content: "";
      position: absolute;
      inset: auto -90px -110px auto;
      width: 270px;
      height: 270px;
      border-radius: 50%;
      background: rgba(238, 57, 55, 0.2);
      filter: blur(20px);
      pointer-events: none;
    }

    .services .service-card--wide .service-card__head,
    .services .service-card--wide h3,
    .services .service-card--wide p,
    .services .service-card--wide .service-card__tags,
    .services .service-card--wide .service-card__actions {
      position: relative;
      z-index: 1;
    }

    .services .service-card--wide .service-card__icon {
      width: 62px;
      height: 62px;
      border-radius: 20px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 55%),
        linear-gradient(135deg, var(--accent), var(--accent-2));
      color: var(--white);
      box-shadow: var(--shadow-accent);
    }

    .services .service-card--wide .service-card__actions {
      padding-top: 34px;
    }

    .services .service-card:nth-child(6) {
      grid-column: span 2;
    }

    .service-card__features {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .service-card__feature {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 12px;
      align-items: flex-start;
      padding: 10px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      background: rgba(255, 255, 255, 0.055);
    }

    .service-card__feature span {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      border-radius: 50%;
      background: rgba(238, 57, 55, 0.16);
      border: 1px solid rgba(238, 57, 55, 0.32);
      position: relative;
    }

    .service-card__feature span::before {
      content: "";
      position: absolute;
      left: 6px;
      top: 3px;
      width: 3px;
      height: 7px;
      border-right: 1px solid var(--accent);
      border-bottom: 1px solid var(--accent);
      transform: rotate(45deg);
    }

    .services .service-card--wide .service-card__feature p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    /* 1600px+ — всего 4 колонки вместе с большой */
    @media (min-width: 1600px) {
      .services {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr;
      }

      .services .service-card--wide {
        grid-column: 4;
        grid-row: 1 / span 2;
      }

      .services .service-card:nth-child(6) {
        grid-column: auto;
      }
    }

    @media (max-width: 1180px) {
      .services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
      }

      .services .service-card--wide,
      .services .service-card:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
      }

      .services .service-card--wide {
        grid-column: 1 / -1;
        min-height: 330px;
      }
    }

    @media (max-width: 640px) {
      .services {
        grid-template-columns: 1fr;
      }

      .service-card,
      .services .service-card--wide {
        min-height: auto;
        padding: 24px;
      }

      .services .service-card--wide,
      .services .service-card:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
      }

      .service-card h3,
      .services .service-card--wide h3 {
        margin-top: 15px;
        font-size: 24px;
        line-height: 1.08;
      }
    }


    /* =========================================================
       08. BENEFITS / LIGHT BLOCK
    ========================================================= */
    .benefits-section {
      position: relative;
      overflow: hidden;
    }

    .benefits {
      position: relative;
      z-index: 1;
    }

    .benefits__main {
      position: relative;
      min-height: 520px;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
      gap: 24px;
      padding: 34px;
      padding-top: 0;
      border-radius: 42px;
      background: #fff;
      overflow: hidden;
    }

    .benefits__main::before {
      content: "";
      position: absolute;
      inset: 16px;
      border-radius: 34px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      pointer-events: none;
    }


    .benefits__content {
      position: relative;
      z-index: 2;
      max-width: 760px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 34px 0 34px 0;
      gap: 20px;
    }

    .benefits__visual {
      position: relative;
      z-index: 2;
      min-height: 440px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .benefits-orbit {
      position: relative;
      width: min(100%, 390px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2) 48%, transparent 72%),
        radial-gradient(circle at 50% 50%, rgba(238, 57, 55, 0.12), transparent 66%);
    }

    .benefits-orbit::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(17, 19, 26, 0.12);
      animation: benefitsRotate 16s linear infinite;
    }

    .benefits-orbit::after {
      content: "";
      position: absolute;
      inset: 44px;
      border-radius: 50%;
      border: 1px dashed rgba(17, 19, 26, 0.16);
      animation: benefitsRotateReverse 18s linear infinite;
    }

    .benefits-orbit__ring {
      position: absolute;
      inset: 86px;
      border-radius: 50%;
      border: 1px solid rgba(238, 57, 55, 0.22);
    }

    .benefits-orbit__ring--sm {
      inset: 128px;
      border-color: rgba(17, 19, 26, 0.12);
    }

    .benefits-orbit__center {
      position: relative;
      z-index: 3;
      width: 148px;
      height: 148px;
      border-radius: 42px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: rotate(-8deg);
      color: var(--white);
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 42%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.38), transparent 38%),
        linear-gradient(var(--gradient-angle), #7c3aed 0%, #ee3937 52%, #ff7a45 100%);

      box-shadow: var(--shadow-accent);
      animation: spinGradient 8s linear infinite;
    }

    @keyframes spinGradient {
      0% {
        --gradient-angle: 0deg;
      }

      100% {
        --gradient-angle: 360deg;
      }
    }

    .benefits-orbit__center strong {
      font-size: 42px;
      line-height: 0.9;
      letter-spacing: -0.008em;
    }

    .benefits-orbit__center span {
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .benefits-orbit__item {
      position: absolute;
      z-index: 4;
      min-width: 74px;
      min-height: 42px;
      padding: 0 15px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--line-dark);
      color: var(--text-dark);
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 50px rgba(18, 20, 28, 0.12);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: -0.02em;
    }

    .benefits-orbit__item--one {
      top: 28px;
      left: 50%;
      transform: translateX(-50%);
    }

    .benefits-orbit__item--two {
      right: 6px;
      top: 46%;
    }

    .benefits-orbit__item--three {
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    .benefits-orbit__item--four {
      left: 3px;
      top: 46%;
    }

    @keyframes benefitsRotate {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes benefitsRotateReverse {
      to {
        transform: rotate(-360deg);
      }
    }

    .benefits__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .benefit-card {
      position: relative;
      min-height: 310px;
      padding: 28px;
      border-radius: var(--radius);
      border: 1px solid var(--line-dark);
      background:
        radial-gradient(circle at 100% 0%, rgba(238, 57, 55, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.72);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
    }


    .benefit-card::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: calc(var(--radius) - 1px);
      border: 1px solid rgba(255, 255, 255, 0.66);
      pointer-events: none;
    }

    .benefit-card:hover {
      transform: translateY(-7px);
      border-color: rgba(238, 57, 55, 0.34);
      box-shadow: 0 28px 80px rgba(18, 20, 28, 0.18);
    }

    .benefit-card__icon {
      position: relative;
      z-index: 2;
      width: 58px;
      height: 58px;
      border-radius: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background:
        radial-gradient(circle at 30% 20%, rgba(238, 57, 55, 0.22), transparent 55%),
        rgba(238, 57, 55, 0.08);
      border: 1px solid rgba(238, 57, 55, 0.18);
      box-shadow: 0 18px 45px rgba(238, 57, 55, 0.13);
      transition: 0.35s ease;
    }

    .benefit-card__icon svg {
      width: 28px;
      height: 28px;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .benefit-card h3 {
      position: relative;
      z-index: 2;
      margin: 34px 0 0;
      color: var(--text-dark);
      font-family: var(--font);
      font-size: 25px;
      line-height: 1.05;
      letter-spacing: -0.055em;
    }

    .benefit-card p {
      position: relative;
      z-index: 2;
      margin: 14px 0 0;
      color: var(--muted-dark);
      line-height: 1.5;
    }

    @media (max-width: 760px) {
      .benefit-card p {
        font-size: 15px;
      }
    }

    .benefit-card:hover .benefit-card__icon {
      color: var(--white);
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 55%),
        linear-gradient(135deg, var(--accent), var(--accent-2));
      border-color: rgba(238, 57, 55, 0.32);
      box-shadow: var(--shadow-accent);
      transform: rotate(-5deg) scale(1.04);
    }

    .benefit-card--accent {
      color: var(--white);
      border-color: rgba(255, 255, 255, 0.12);
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 207, 90, 0.22), transparent 36%),
        radial-gradient(circle at 100% 100%, rgba(238, 57, 55, 0.34), transparent 42%),
        linear-gradient(135deg, var(--dark-2), var(--dark-4));
    }

    .benefit-card--accent::after {
      border-color: rgba(255, 255, 255, 0.08);
    }

    .benefit-card--accent .benefit-card__icon {
      color: var(--white);
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 55%),
        linear-gradient(135deg, var(--accent), var(--accent-2));
      border-color: rgba(255, 255, 255, 0.14);
    }

    .benefit-card--accent h3 {
      color: var(--white);
    }

    .benefit-card--accent p {
      color: var(--muted);
    }

    @media (max-width: 1180px) {
      .benefits__main {
        grid-template-columns: 1fr;
      }

      .benefits__visual {
        min-height: 360px;
      }

      .benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .benefits__main {
        min-height: auto;
        padding: 22px;
        border-radius: 30px;
      }

      .benefits__main::before {
        inset: 10px;
        border-radius: 24px;
      }

      .benefits__content {
        gap: 0px;
        padding: 16px 0 0;
      }

      .benefits__content h2 {
        font-size: clamp(34px, 12vw, 48px);
        line-height: 0.96;
      }

      .benefits__visual {
        min-height: 310px;
      }

      .benefits-orbit {
        width: min(100%, 300px);
      }

      .benefits-orbit__center {
        width: 124px;
        height: 124px;
        border-radius: 34px;
      }

      .benefits-orbit__center strong {
        font-size: 40px;
      }

      .benefits-orbit__item {
        min-width: 62px;
        min-height: 36px;
        font-size: 12px;
      }

      .benefits__grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .benefit-card {
        min-width: 280px;
        scroll-snap-align: start;
        min-height: auto;
        padding: 24px;
        box-shadow: none;
      }

      .benefit-card h3 {
        margin-top: 26px;
        font-size: 23px;
      }
    }

    /* =========================================================
   09. PORTFOLIO — IMAGE + DOMAIN + VISIBLE TAGS/SITE + HIDDEN DETAILS
========================================================= */
    .portfolio-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
    }

    .filter-btn {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.055);
      color: var(--muted);
      padding: 11px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .filter-btn.is-active,
    .filter-btn:hover {
      color: var(--white);
      background: var(--accent);
      border-color: transparent;
      transform: translateY(-1px);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .portfolio-card {
      position: relative;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045));
      overflow: hidden;
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .portfolio-card {
      --card-accent: #ee3937;
      --card-accent-2: #ff7a45;
      --card-bg-1: rgba(238, 57, 55, 0.28);
      --card-bg-2: rgba(255, 122, 69, 0.22);
      --card-bg-3: rgba(238, 57, 55, 0.16);
      --card-border: rgba(238, 57, 55, 0.36);
      --card-shadow: rgba(238, 57, 55, 0.28);
      --card-soft: rgba(238, 57, 55, 0.18);

      border-color: var(--card-border);
      background:
        radial-gradient(circle at 18% 0%, var(--card-bg-1), transparent 42%),
        radial-gradient(circle at 92% 14%, var(--card-bg-2), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), var(--card-bg-3) 48%, rgba(255, 255, 255, 0.07));
    }

    .portfolio-card:nth-child(6n + 1) {
      --card-accent: #ee3937;
      --card-accent-2: #ff7a45;
      --card-bg-1: rgba(238, 57, 55, 0.34);
      --card-bg-2: rgba(255, 122, 69, 0.28);
      --card-bg-3: rgba(238, 57, 55, 0.18);
      --card-border: rgba(238, 57, 55, 0.44);
      --card-shadow: rgba(238, 57, 55, 0.34);
      --card-soft: rgba(238, 57, 55, 0.22);
    }

    .portfolio-card:nth-child(6n + 2) {
      --card-accent: #8b5cf6;
      --card-accent-2: #f97316;
      --card-bg-1: rgba(139, 92, 246, 0.34);
      --card-bg-2: rgba(249, 115, 22, 0.27);
      --card-bg-3: rgba(139, 92, 246, 0.18);
      --card-border: rgba(139, 92, 246, 0.46);
      --card-shadow: rgba(139, 92, 246, 0.32);
      --card-soft: rgba(139, 92, 246, 0.22);
    }

    .portfolio-card:nth-child(6n + 3) {
      --card-accent: #06b6d4;
      --card-accent-2: #3b82f6;
      --card-bg-1: rgba(6, 182, 212, 0.34);
      --card-bg-2: rgba(59, 130, 246, 0.27);
      --card-bg-3: rgba(6, 182, 212, 0.18);
      --card-border: rgba(6, 182, 212, 0.46);
      --card-shadow: rgba(6, 182, 212, 0.32);
      --card-soft: rgba(6, 182, 212, 0.22);
    }

    .portfolio-card:nth-child(6n + 4) {
      --card-accent: #22c55e;
      --card-accent-2: #a3e635;
      --card-bg-1: rgba(34, 197, 94, 0.32);
      --card-bg-2: rgba(163, 230, 53, 0.24);
      --card-bg-3: rgba(34, 197, 94, 0.17);
      --card-border: rgba(34, 197, 94, 0.44);
      --card-shadow: rgba(34, 197, 94, 0.3);
      --card-soft: rgba(34, 197, 94, 0.21);
    }

    .portfolio-card:nth-child(6n + 5) {
      --card-accent: #ec4899;
      --card-accent-2: #fb7185;
      --card-bg-1: rgba(236, 72, 153, 0.34);
      --card-bg-2: rgba(251, 113, 133, 0.27);
      --card-bg-3: rgba(236, 72, 153, 0.18);
      --card-border: rgba(236, 72, 153, 0.46);
      --card-shadow: rgba(236, 72, 153, 0.32);
      --card-soft: rgba(236, 72, 153, 0.22);
    }

    .portfolio-card:nth-child(6n + 6) {
      --card-accent: #f59e0b;
      --card-accent-2: #ef4444;
      --card-bg-1: rgba(245, 158, 11, 0.34);
      --card-bg-2: rgba(239, 68, 68, 0.27);
      --card-bg-3: rgba(245, 158, 11, 0.18);
      --card-border: rgba(245, 158, 11, 0.46);
      --card-shadow: rgba(245, 158, 11, 0.32);
      --card-soft: rgba(245, 158, 11, 0.22);
    }



    .portfolio-card.is-filtered,
    .portfolio-card.is-hidden-by-limit {
      display: none;
    }

    .portfolio-card:hover,
    .portfolio-card.is-info-open {
      border-color: rgba(255, 255, 255, 0.24);
      box-shadow: 0 34px 100px rgba(0, 0, 0, 0.24);
    }

    .portfolio-card__media {
      position: relative;
      z-index: 2;
      height: 330px;
      flex: 0 0 330px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(238, 57, 55, 0.18), rgba(255, 255, 255, 0.04)),
        #0b0e15;
      overflow: hidden;
      box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
      transform: translateZ(36px);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .portfolio-card:hover .portfolio-card__media {
      transform: translateZ(58px) scale(0.985);
      box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
    }

    .portfolio-card__media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 70% 10%, rgba(238, 57, 55, 0.24), transparent 28%);
    }

    .portfolio-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.05) contrast(1.04);
      transition: transform 0.55s ease;
    }

    .portfolio-card:hover .portfolio-card__media img {
      transform: scale(1.08);
    }

    .portfolio-card__browser {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 3;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 9px;
      border-radius: 16px;
      background: rgba(8, 10, 15, 0.68);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .portfolio-card__browser span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
    }

    .portfolio-card__result {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 4;
      padding: 13px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(8, 10, 15, 0.7);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transform: translateZ(78px);
    }

    .portfolio-card__result strong {
      display: block;
      font-size: 24px;
      line-height: 1;
      letter-spacing: -0.05em;
    }

    .portfolio-card__result span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }

    .portfolio-card__body {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 18px 4px 4px;
      transform: translateZ(44px);
    }

    .portfolio-card__title-link {
      text-decoration: none;
      color: inherit;
      display: inline-block;
    }

    .portfolio-card__title-link h3 {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      font-size: 36px;
      font-family: var(--font);
      transition: color 0.3s ease;
    }

    .portfolio-card__arrow {
      width: 38px;
      height: 38px;
      transition: transform 0.3s ease;
      color: var(--card-accent, currentColor);
    }

    .portfolio-card__title-link:hover .portfolio-card__arrow {
      transform: translate(3px, -3px);
    }

    .portfolio-card__title-link:hover h3 {
      color: var(--card-accent);
    }

    .portfolio-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
      margin-bottom: 0;
      transform: translateZ(52px);
    }

    .portfolio-card__excerpt {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.55;
    }

    .portfolio-card__details {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-6px);
      transition: max-height 0.38s ease, opacity 0.25s ease, transform 0.25s ease, margin-top 0.25s ease;
    }

    .portfolio-card.is-info-open .portfolio-card__details {
      max-height: 460px;
      opacity: 1;
      margin-top: 18px;
      transform: translateY(0);
    }

    .portfolio-card__list {
      display: grid;
      gap: 9px;
    }

    .portfolio-card__list span {
      display: flex;
      gap: 9px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.35;
    }

    .portfolio-card__list span::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(238, 57, 55, 0.13);
    }

    .portfolio-card__details-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .portfolio-card__type {
      color: var(--muted-2);
      font-size: 13px;
    }

    .portfolio-card__visit {
      color: var(--white);
      font-size: 13px;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      transition: color 0.25s ease, border-color 0.25s ease;
    }

    .portfolio-card__visit:hover {
      color: var(--accent-2);
      border-color: var(--accent-2);
    }

    .portfolio-card__actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      padding-top: 20px;
      transform: translateZ(52px);
    }

    .portfolio-card__more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.07);
      color: var(--white);
      padding: 10px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .portfolio-load__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.07);
      color: var(--white);
      padding: 10px 12px;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .portfolio-card__more:hover,
    .portfolio-load__btn:hover {
      background: rgba(255, 255, 255, 0.11);
      border-color: rgba(255, 255, 255, 0.24);
      transform: translateY(-1px);
    }

    .portfolio-card.is-info-open .portfolio-card__more,
    .portfolio-load__btn[aria-expanded="true"] {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border-color: transparent;
    }

    .portfolio-card__site {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: var(--white);
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .portfolio-card__site:hover {
      transform: rotate(8deg) scale(1.04);
      box-shadow: 0 14px 34px rgba(238, 57, 55, 0.26);
    }

    .portfolio-card__site svg {
      width: 24px;
      height: 24px;
    }

    .portfolio-load {
      display: flex;
      justify-content: center;
      margin-top: 26px;
    }

    .portfolio-load__btn {
      min-width: 190px;
      background: linear-gradient(135deg, rgba(238, 57, 55, 0.95), rgba(255, 122, 69, 0.95));
      border-color: transparent;
      box-shadow: 0 18px 44px rgba(238, 57, 55, 0.22);
    }

    .portfolio-load__btn[hidden] {
      display: none;
    }

    @media (max-width: 1180px) {
      .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .portfolio-grid {
        grid-template-columns: 1fr;
      }

      .portfolio-card {
        border-radius: 26px;
      }

      .portfolio-card__media {
        height: 245px;
        flex-basis: 245px;
        border-radius: 20px;
      }

      .portfolio-card h3 {
        font-size: 22px;
      }

      .portfolio-card__details-footer,
      .portfolio-card__actions {
        align-items: flex-start;
      }
    }

    /* =========================================================
       10. PROCESS / LINES
    ========================================================= */
    .process-wrap {
      position: relative;
    }

    .process-line {
      position: absolute;
      left: 7%;
      right: 7%;
      top: 108px;
      height: 120px;
      pointer-events: none;
      opacity: 0.9;
    }

    .process-line svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .process-line path {
      fill: none;
      stroke: url(#processGradient);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 14 12;
      animation: dashMove 2.8s linear infinite;
      filter: drop-shadow(0 0 12px rgba(238, 57, 55, 0.36));
    }

    @keyframes dashMove {
      to {
        stroke-dashoffset: -52;
      }
    }

    .process {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      counter-reset: step;
    }

    .step {
      position: relative;
      padding: 24px;
      min-height: 310px;
      border: 1px solid var(--line-dark);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.7);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      counter-increment: step;
    }

    .step:nth-child(4n+1) {
      -webkit-transform: translate(0) rotate(-1.417deg);
      transform: translate(0) rotate(-1.417deg);
    }

    .step:nth-child(4n+2) {
      -webkit-transform: translate(0) rotate(2.38deg);
      transform: translate(0) rotate(2.38deg);
    }

    .step:nth-child(4n+3) {
      -webkit-transform: translate(0) rotate(-1.417deg);
      transform: translate(0) rotate(-1.417deg);
    }

    .step:nth-child(4n+4) {
      -webkit-transform: translate(0) rotate(2.38deg);
      transform: translate(0) rotate(2.38deg);
    }

    .step::before {
      content: "0" counter(step);
      position: absolute;
      right: 20px;
      top: 16px;
      color: rgba(17, 19, 26, 0.1);
      font-size: 56px;
      line-height: 1;
      letter-spacing: -0.08em;
      font-weight: 950;
    }

    .step__icon {
      position: relative;
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--white);
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 0 10px rgba(238, 57, 55, 0.12), 0 18px 48px rgba(238, 57, 55, 0.34);
      font-weight: 750;
    }

    .step__icon svg {
      width: 28px;
      height: 28px;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .step h3 {
      font-family: var(--font);
      margin-top: 35px;
      font-size: 22px;
      letter-spacing: -0.035em;
    }

    .step p {
      margin-top: 12px;
      color: var(--muted-dark);
      line-height: 1.6;
    }

    @media (max-width: 760px) {
      .step p {
        font-size: 15px;
      }
    }

    @media (max-width: 520px) {
      .step:nth-child(4n+1) {
        -webkit-transform: translate(0) rotate(-1deg);
        transform: translate(0) rotate(-1deg);
      }

      .step:nth-child(4n+2) {
        -webkit-transform: translate(0) rotate(1.38deg);
        transform: translate(0) rotate(1.38deg);
      }

      .step:nth-child(4n+3) {
        -webkit-transform: translate(0) rotate(-1deg);
        transform: translate(0) rotate(-1deg);
      }

      .step:nth-child(4n+4) {
        -webkit-transform: translate(0) rotate(1.38deg);
        transform: translate(0) rotate(1.38deg);
      }
    }

    @media screen and (min-width: 520px) and (max-width: 760px) {
      .step:nth-child(4n+1) {
        -webkit-transform: translate(0) rotate(-0.417deg);
        transform: translate(0) rotate(-0.417deg);
      }

      .step:nth-child(4n+2) {
        -webkit-transform: translate(0) rotate(0.38deg);
        transform: translate(0) rotate(0.38deg);
      }

      .step:nth-child(4n+3) {
        -webkit-transform: translate(0) rotate(-0.417deg);
        transform: translate(0) rotate(-0.417deg);
      }

      .step:nth-child(4n+4) {
        -webkit-transform: translate(0) rotate(0.38deg);
        transform: translate(0) rotate(0.38deg);
      }
    }

    .step__meta {
      display: inline-flex;
      margin-top: 18px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--line-dark);
      color: var(--muted-dark);
      font-size: 12px;
    }

    /* =========================================================
       11. PRICING
    ========================================================= */
    .pricing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .price-card {
      position: relative;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background: rgba(255, 255, 255, 0.055);
      overflow: hidden;
    }

    .price-card--hot {
      background:
        radial-gradient(circle at 80% 0%, rgba(238, 57, 55, 0.24), transparent 35%),
        rgba(255, 255, 255, 0.085);
      box-shadow: var(--shadow);
    }

    .price-card__label {
      --label-main: var(--accent);
      --label-second: var(--accent-2);
      --label-bg: rgba(9, 10, 15, 0.86);
      --label-glow: rgba(238, 57, 55, 0.32);

      position: relative;
      width: fit-content;
      min-width: 140px;
      height: 40px;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: 12px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      color: var(--white);
      font-size: 13px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: -0.008em;
      white-space: nowrap;

      background:
        linear-gradient(var(--label-bg), var(--label-bg)) padding-box,
        linear-gradient(110deg,
          var(--label-main),
          var(--label-second),
          var(--label-main)) border-box;

      overflow: hidden;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.35s ease;
    }

    .price-card__label::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
      opacity: 0.8;
      pointer-events: none;
    }

    .price-card__label::after {
      content: "";
      position: absolute;
      top: 0;
      left: -70%;
      width: 44%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.34),
          transparent);
      transform: skewX(-18deg);
      opacity: 0;
      pointer-events: none;
      transition:
        left 0.75s ease,
        opacity 0.35s ease;
    }

    .price-card__label:hover {
      transform: translateY(-2px);
      box-shadow:
        0 18px 52px var(--label-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .price-card__label:hover::after {
      left: 120%;
      opacity: 1;
    }

    .price-card__label:active {
      transform: scale(0.97);
    }

    .price-card__label--red {
      --label-main: var(--accent);
      --label-second: var(--accent-2);
      --label-bg: rgba(18, 9, 10, 0.9);
      --label-glow: rgba(238, 57, 55, 0.34);
      color: var(--white);
    }

    .price-card__label--blue {
      --label-main: #3b82f6;
      --label-second: #22d3ee;
      --label-bg: rgba(8, 13, 26, 0.9);
      --label-glow: rgba(59, 130, 246, 0.3);
      color: #dbeafe;
    }

    .price-card__label--green {
      --label-main: #22c55e;
      --label-second: #a3e635;
      --label-bg: rgba(7, 19, 12, 0.9);
      --label-glow: rgba(34, 197, 94, 0.28);
      color: #dcfce7;
    }

    .price-card__label--violet {
      --label-main: #8b5cf6;
      --label-second: #ec4899;
      --label-bg: rgba(16, 10, 28, 0.9);
      --label-glow: rgba(139, 92, 246, 0.32);
      color: #ede9fe;
    }

    /* Золото */
    .price-card__label--gold {
      --label-main: var(--accent-3);
      --label-second: var(--accent-2);
      --label-bg: rgba(24, 15, 4, 0.92);
      --label-glow: rgba(255, 207, 90, 0.32);
      color: #ffdf83;
    }

    .price-card h3 {
      margin-top: 22px;
      font-size: 28px;
      font-family: var(--font);
      letter-spacing: -0.008em;
    }

    .price {
      margin-top: 18px;
      font-size: 44px;
      font-weight: 750;
      letter-spacing: -0.008em;
      color: #fff0;
      -webkit-text-stroke: 1px #fff;
      font-family: sans-serif;
    }

    .price span {
      font-size: 15px;
      color: var(--muted-2);
      letter-spacing: 0;
      font-weight: 500;
      -webkit-text-stroke: 0px #fff;
    }

    .price-card ul {
      list-style: none;
      padding: 0;
      margin: 24px 0;
      display: grid;
      gap: 12px;
    }

    .price-card li {
      color: var(--muted);
      line-height: 1.45;
      display: flex;
      gap: 10px;
    }

    .price-card li::before {
      content: "";
      width: 4px;
      height: 4px;
      margin-top: 9px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(238, 57, 55, 0.13);
    }

    @media (max-width: 760px) {
      .price-card li {
        font-size: 13px;
      }
    }

    /* =========================================================
       12. QUIZ
    ========================================================= */
    .quiz {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 18px;
      align-items: stretch;
    }

    .quiz__aside {
      position: relative;
      min-height: 520px;
      padding: 30px;
      border: 1px solid var(--line-dark);
      border-radius: 36px;
      background:
        radial-gradient(circle at 80% 16%, rgba(238, 57, 55, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58));
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .quiz__aside h2 {
      margin-bottom: 16px;
      font-size: clamp(34px, 4.4vw, 64px);
      font-family: var(--font);
      line-height: 0.98;
      letter-spacing: -0.008em;
    }

    .quiz__aside p {
      color: var(--muted-dark);
      line-height: 1.65;
    }

    .quiz-prize {
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 30px;
      padding: 20px;
      border: 1px solid rgba(238, 57, 55, 0.28);
      border-radius: 24px;
      background:
        radial-gradient(circle at 12% 18%, rgba(255, 207, 90, 0.34), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(238, 57, 55, 0.22), transparent 32%),
        rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .quiz-prize::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg,
          transparent 0%,
          transparent 35%,
          rgba(255, 255, 255, 0.65) 50%,
          transparent 65%,
          transparent 100%);
      transform: translateX(-120%);
      animation: quizPrizeShine 4s ease-in-out infinite;
      pointer-events: none;
    }

    .quiz-prize::after {
      content: "🎁";
      position: absolute;
      right: 18px;
      top: 16px;
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff57;
      box-shadow: 0 12px 26px rgba(238, 57, 55, 0.26);
      font-size: 20px;
    }

    .quiz-prize strong {
      position: relative;
      z-index: 1;
      display: block;
      max-width: calc(100% - 58px);
      font-size: 22px;
      font-family: var(--font);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--dark);
      background: linear-gradient(90deg, var(--dark), var(--accent), var(--accent-2), var(--dark));
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: quizPrizeText 5s ease-in-out infinite;
    }

    .quiz-prize span {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 8px;
      color: var(--muted-dark);
      line-height: 1.45;
      font-size: 14px;
    }

    @keyframes quizPrizeShine {
      0% {
        transform: translateX(-120%);
      }

      45%,
      100% {
        transform: translateX(120%);
      }
    }

    @keyframes quizPrizeText {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    @media (max-width: 768px) {
      .quiz-prize {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 24px;
      }

      .quiz__aside p {
        font-size: 15px;
      }

      .quiz-prize strong {
        max-width: calc(100% - 48px);
        font-size: 16px;
      }

      .quiz-prize span {
        font-size: 12px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .quiz-prize::before,
      .quiz-prize strong {
        animation: none;
      }
    }

    .quiz__box {
      padding: 22px;
      border: 1px solid var(--line-dark);
      border-radius: 36px;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
    }

    .quiz-progress {
      display: grid;
      gap: 10px;
      margin-bottom: 22px;
    }

    .quiz-progress__top {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted-dark);
      font-size: 14px;
    }

    .quiz-progress__bar {
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(17, 19, 26, 0.08);
    }

    .quiz-progress__fill {
      width: 20%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      transition: width 0.32s ease;
    }

    .quiz-step {
      display: none;
    }

    .quiz-step.is-active {
      display: block;
      animation: quizFade 0.28s ease;
    }

    @keyframes quizFade {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .quiz-step h3 {
      font-size: clamp(28px, 3vw, 36px);
      font-family: var(--font);
      line-height: 1.04;
      letter-spacing: -0.008em;
    }

    .quiz-step__hint {
      margin: 8px 0 20px;
      color: var(--dark-4);
      font-size: 14px;
      line-height: 1.5;
    }

    .quiz-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 22px;
    }

    .quiz-option {
      position: relative;
      min-height: 112px;
      padding: 18px;
      border: 1px solid var(--line-dark);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.66);
      color: var(--text-dark);
      cursor: pointer;
      text-align: left;
      transition: 0.24s ease;
    }

    .quiz-option::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 16px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(17, 19, 26, 0.22);
      background: rgba(255, 255, 255, 0.72);
      transition: 0.24s ease;
    }

    .quiz-option:hover,
    .quiz-option.is-selected {
      border-color: rgba(238, 57, 55, 0.62);
      background: rgba(238, 57, 55, 0.1);
      transform: translateY(-2px);
    }

    .quiz-option.is-selected::after {
      border-color: var(--accent);
      background:
        radial-gradient(circle at center, var(--accent) 0 42%, transparent 45%),
        rgba(255, 255, 255, 0.72);
      box-shadow: 0 0 0 5px rgba(238, 57, 55, 0.12);
    }

    .quiz-option strong {
      display: block;
      font-size: 18px;
      letter-spacing: 0.008em;
      padding-right: 28px;
    }

    .quiz-option span {
      display: block;
      margin-top: 8px;
      color: var(--muted-dark);
      line-height: 1.4;
      font-size: 14px;
    }

    .quiz-actions {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 24px;
    }

    .quiz-form {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .form__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .field {
      width: 100%;
      min-height: 45px;
      padding: 12px 14px;
      border: 1px solid var(--line-dark);
      border-radius: 18px;
      color: var(--text-dark);
      background: rgba(255, 255, 255, 0.78);
      outline: none;
      transition: 0.25s ease;
    }

    .field--dark {
      color: var(--white);
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.065);
    }

    textarea.field {
      min-height: 124px;
      resize: vertical;
    }

    .field::placeholder {
      color: rgba(17, 19, 26, 0.42);
    }

    .field--dark::placeholder {
      color: rgba(255, 255, 255, 0.42);
    }

    .field:focus {
      border-color: rgba(238, 57, 55, 0.75);
      box-shadow: 0 0 0 4px rgba(238, 57, 55, 0.13);
    }

    /* Contact buttons */

    .contact-method {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.045);
    }

    .quiz-form .contact-method {
      border: 1px solid var(--line-dark);
    }

    .contact-method__title {
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
    }

    .quiz-form .contact-method__title {
      color: rgba(17, 19, 26, 0.42);
    }

    .contact-method__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .contact-choice {
      display: block;
      cursor: pointer;
    }

    .contact-choice input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .contact-choice--telegram {
      --messenger-color: #229ed9;
      --messenger-color-2: #37b7f3;
      --messenger-bg: rgba(34, 158, 217, 0.13);
      --messenger-bg-hover: rgba(34, 158, 217, 0.22);
      --messenger-shadow: rgba(34, 158, 217, 0.35);
      --messenger-icon: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M21.7%204.4%2018.4%2020c-.2%201.1-.9%201.4-1.8.9l-5-3.7-2.4%202.3c-.3.3-.5.5-1%20.5l.4-5.2%209.5-8.6c.4-.4-.1-.6-.6-.2L5.7%2013.4.6%2011.8c-1.1-.3-1.1-1.1.2-1.6L20.6%202.6c.9-.3%201.7.2%201.1%201.8Z'/%3E%3C/svg%3E");
    }

    .contact-choice--viber {
      --messenger-color: #7360f2;
      --messenger-color-2: #8f7cff;
      --messenger-bg: rgba(115, 96, 242, 0.13);
      --messenger-bg-hover: rgba(115, 96, 242, 0.22);
      --messenger-shadow: rgba(115, 96, 242, 0.35);
      --messenger-icon: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M17.5%202.8A12.7%2012.7%200%200%200%2012.1%202h-.2a12.7%2012.7%200%200%200-5.4.8A5.5%205.5%200%200%200%203%206.8c-.6%202.7-.6%205.5%200%208.3.4%201.8%201.6%203.1%203.2%203.8v2.5c0%20.7.8%201.1%201.3.6l2.7-2.5h1.7a12.7%2012.7%200%200%200%205.5-.8%205.5%205.5%200%200%200%203.5-4c.6-2.7.6-5.5%200-8.2a5.5%205.5%200%200%200-3.4-3.7Zm-5.4%2015h-2.4l-1.9%201.8v-2.2l-.7-.2c-1.3-.4-2.1-1.3-2.4-2.6a18.7%2018.7%200%200%201%200-7.4c.3-1.3%201.1-2.2%202.4-2.6%201.7-.6%203.5-.8%205.2-.8%201.7%200%203.5.2%205.1.8%201.3.4%202.1%201.3%202.4%202.6.5%202.4.5%205%200%207.4-.3%201.3-1.1%202.2-2.4%202.6-1.7.5-3.5.7-5.3.6Zm3.8-3.4c-.4.7-1.2%201.2-2.1%201.1-2.8-.3-5.1-2.4-5.8-5.1-.2-.9.2-1.8.9-2.2.3-.2.7-.1.9.2l.9%201.4c.2.3.2.7-.1%201l-.3.4c.5.9%201.2%201.6%202.1%202l.4-.4c.3-.3.7-.3%201-.1l1.5.8c.4.2.5.6.3.9Z'/%3E%3C/svg%3E");
    }

    .contact-choice--whatsapp {
      --messenger-color: #25d366;
      --messenger-color-2: #128c7e;
      --messenger-bg: rgba(37, 211, 102, 0.13);
      --messenger-bg-hover: rgba(37, 211, 102, 0.22);
      --messenger-shadow: rgba(37, 211, 102, 0.35);
      --messenger-icon: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a9.9%209.9%200%200%200-8.5%2015L2.3%2021.5%207%2020.3A10%2010%200%201%200%2012%202Zm0%2018.2a8.1%208.1%200%200%201-4.1-1.1l-.3-.2-2.8.7.8-2.7-.2-.3A8.2%208.2%200%201%201%2012%2020.2Zm4.6-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8%201c-.1.2-.3.2-.5.1a6.7%206.7%200%200%201-3.3-2.9c-.1-.2%200-.4.1-.5l.4-.5c.1-.1.1-.3.2-.4.1-.1%200-.3%200-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2%200-.4.1-.6.3-.2.2-.9.9-.9%202.1s.9%202.4%201%202.5a9.7%209.7%200%200%200%203.8%203.4c.5.2%201%20.4%201.4.5.6.2%201.1.2%201.5.1.5-.1%201.5-.6%201.7-1.2.2-.6.2-1.1.1-1.2-.1-.2-.3-.2-.5-.3Z'/%3E%3C/svg%3E");
    }

    .contact-choice__box {
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--messenger-color);
      border-radius: 18px;
      color: var(--white);
      background: var(--messenger-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      transition: 0.25s ease;
    }

    .quiz-form .contact-choice__box {
      color: #5a5a5a;
    }

    .contact-choice__icon {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      display: inline-flex;
      color: var(--messenger-color);
      transition: 0.25s ease;
    }

    .contact-choice__icon::before {
      content: "";
      width: 100%;
      height: 100%;
      background: currentColor;
      -webkit-mask: var(--messenger-icon) center / contain no-repeat;
      mask: var(--messenger-icon) center / contain no-repeat;
    }

    .contact-choice:hover .contact-choice__box {
      background: var(--messenger-bg-hover);
      transform: translateY(-1px);
    }

    .contact-choice input:checked+.contact-choice__box {
      border-color: var(--messenger-color);
      background: linear-gradient(135deg, var(--messenger-color), var(--messenger-color-2));
      color: #fff;
      box-shadow: 0 14px 38px var(--messenger-shadow);
    }

    .contact-choice input:checked+.contact-choice__box .contact-choice__icon {
      color: #fff;
    }

    .contact-choice input:focus-visible+.contact-choice__box {
      box-shadow: 0 0 0 4px var(--messenger-shadow);
    }

    /* Custom select */

    .custom-select {
      position: relative;
      z-index: 20;
    }

    .custom-select__button {
      width: 100%;
      min-height: 45px;
      padding: 12px 48px 12px 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      color: var(--white);
      background: rgba(255, 255, 255, 0.065);
      outline: none;
      cursor: pointer;
      font-size: 15px;
      line-height: 1.3;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: 0.25s ease;
    }

    .custom-select__button:hover {
      border-color: rgba(238, 57, 55, 0.45);
      background: rgba(255, 255, 255, 0.085);
    }

    .custom-select.is-open .custom-select__button,
    .custom-select__button:focus {
      border-color: rgba(238, 57, 55, 0.75);
      box-shadow: 0 0 0 4px rgba(238, 57, 55, 0.13);
    }

    .custom-select__value {
      color: var(--white);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .custom-select__arrow {
      position: absolute;
      right: 18px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2px solid rgba(255, 255, 255, 0.58);
      border-bottom: 2px solid rgba(255, 255, 255, 0.58);
      transform: translateY(-65%) rotate(45deg);
      transition: 0.25s ease;
      pointer-events: none;
    }

    .custom-select.is-open .custom-select__arrow {
      border-color: var(--accent);
      transform: translateY(-35%) rotate(225deg);
    }

    .custom-select__dropdown {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(16, 19, 27, 0.96);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.98);
      transform-origin: top;
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      overflow: hidden;
    }

    .custom-select.is-open .custom-select__dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .custom-select__option {
      width: 100%;
      min-height: 46px;
      padding: 12px 14px;
      border: 0;
      border-radius: 14px;
      color: rgba(255, 255, 255, 0.78);
      background: transparent;
      cursor: pointer;
      font-size: 14px;
      line-height: 1.35;
      text-align: left;
      transition: 0.22s ease;
    }

    .custom-select__option:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.075);
    }

    .custom-select__option.is-active {
      color: #fff;
      background: linear-gradient(135deg, rgba(238, 57, 55, 0.95), rgba(255, 122, 69, 0.88));
      box-shadow: 0 12px 28px rgba(238, 57, 55, 0.22);
    }

    .form__status {
      min-height: 18px;
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 680px) {
      .form__row {
        grid-template-columns: 1fr;
      }

      .contact-method__grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .contact-choice__box {
        justify-content: center
      }

      .contact-choice__box span:last-child {
        display: none;
      }

      .custom-select__dropdown {
        top: auto;
        margin-top: 8px;
      }
    }

    .form__status {
      min-height: 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .form__status {
      display: none;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(238, 57, 55, 0.13);
      border: 1px solid rgba(238, 57, 55, 0.24);
      color: #9d201e;
      font-size: 14px;
      line-height: 1.4;
    }

    .form__status.is-show {
      display: block;
    }

    .quiz-error {
      display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(238, 57, 55, 0.11);
      border: 1px solid rgba(238, 57, 55, 0.22);
      color: #9d201e;
      font-size: 14px;
    }

    .quiz-error.is-show {
      display: block;
    }

    /* =========================================================
       13. FAQ
    ========================================================= */
    .faq {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 28px;
      align-items: start;
    }


    @media (min-width: 1100px) {
      .faq__aside {
        position: sticky;
        top: 125px;
      }
    }

    .accordion {
      display: grid;
      gap: 12px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.055);
      overflow: hidden;
      transition: 0.25s ease;
    }

    .faq-item.is-open {
      background: rgba(255, 255, 255, 0.085);
      border-color: rgba(238, 57, 55, 0.35);
    }

    .faq-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 20px;
      border: 0;
      background: transparent;
      color: var(--white);
      text-align: left;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.008em;
    }

    .faq-icon {
      position: relative;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: rgba(238, 57, 55, 0.14);
      border: 1px solid rgba(238, 57, 55, 0.28);
      transition: 0.25s ease;
    }

    .faq-icon::before,
    .faq-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 2px;
      border-radius: 99px;
      background: var(--accent);
      transform: translate(-50%, -50%);
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item.is-open .faq-icon {
      background: var(--accent);
    }

    .faq-item.is-open .faq-icon::before,
    .faq-item.is-open .faq-icon::after {
      background: var(--white);
    }

    .faq-item.is-open .faq-icon::after {
      transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
      opacity: 0;
    }

    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.32s ease;
    }

    .faq-content p {
      padding: 0 20px 20px;
      color: var(--muted);
      line-height: 1.65;
    }

    .faq-item.is-open .faq-content {
      max-height: 240px;
    }

    @media (max-width: 760px) {
      .faq-content p {
        font-size: 15px;
      }
    }

    /* =========================================================
       14. CTA FORM
    ========================================================= */
    .cta-form {
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 24px;
      align-items: center;
      padding: 34px;
      border-radius: 38px;
      background: rgba(8, 10, 15, 0.58);
    }

    .cta-form h2 {
      margin-bottom: 16px;
      font-size: clamp(34px, 4.5vw, 64px);
      line-height: 0.98;
      letter-spacing: -0.008em;
    }

    .cta-form p {
      color: var(--muted);
      line-height: 1.65;
      max-width: 720px;
    }

    .lead-form {
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 28px;

      backdrop-filter: blur(18px);
    }


    .popup__dialog .lead-form {
      padding: 0;
      border: none;
      border-radius: 0;
      background: rgb(8 10 15 / 0%);
      backdrop-filter: none;
    }

    .lead-form .form__status {
      color: #ffd0cc;
    }

    .trust-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 15px;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: rgba(255, 255, 255, .55);
    }

    .trust-icon {
      width: 45px;
      height: 45px;
      border-radius: 8px;
      background: rgba(238, 57, 55, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ee3937;
      font-size: 14px;
      flex-shrink: 0;
    }

    .trust-icon svg {
      width: 25px;
      height: 25px;
    }

    /* =========================================================
       15. FOOTER
    ========================================================= */
    .footer {
      position: relative;
      /* background:
        radial-gradient(circle at 18% 0%, rgba(238, 57, 55, 0.12), transparent 34%),
        rgba(0, 0, 0, 0.24); */
      padding: 56px 0 26px;
    }

    .footer::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1440 400'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1.5'%3E%3Cpath d='M0,250 C300,120 450,380 720,250 C990,120 1140,380 1440,250'/%3E%3Cpath d='M0,220 C300,90 450,350 720,220 C990,90 1140,350 1440,220'/%3E%3Cpath d='M0,190 C300,60 450,320 720,190 C990,60 1140,320 1440,190'/%3E%3Cpath d='M0,280 C300,150 450,410 720,280 C990,150 1140,410 1440,280'/%3E%3Cpath d='M0,310 C300,180 450,440 720,310 C990,180 1140,440 1440,310'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center center;
    }

    .footer__top {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 0.85fr 0.9fr;
      gap: 26px;
      padding-bottom: 38px;
    }

    .footer__brand p {
      margin-top: 16px;
      color: var(--muted);
      line-height: 1.65;
      max-width: 390px;
      margin-bottom: 15px;
      font-size: 15px;
    }

    .footer__title {
      display: flex;
      align-items: center;
      -webkit-column-gap: 10px;
      -moz-column-gap: 10px;
      column-gap: 10px;
      color: var(--white);
      font-family: var(--font);
      font-size: 21px;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .footer__title::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--white);
      margin-bottom: 4px;
    }

    .footer__list {
      display: grid;
      gap: 10px;
    }

    .footer__list a,
    .footer__list span {
      color: var(--muted);
      line-height: 1.45;
      transition: 0.22s ease;
    }

    .main-footer__block .footer__list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .main-footer__block .footer__list a {
      position: relative;
      color: var(--muted);
      line-height: 1.45;
      transition: 0.22s ease;
      padding: 10px;
      background: rgba(255, 255, 255, 0.055);
      border-radius: 18px;
      overflow: hidden;
    }

    .main-footer__block .footer__list a::after {
      content: "";
      border-radius: 50%;
      width: 100%;
      min-height: 100%;
      margin-bottom: 72px;
      padding-top: 100%;
      position: absolute;
      transition: margin .4s, border-radius .25s;
      inset: auto 0 0;
      z-index: -1;
      background: linear-gradient(135deg,
          #7c3aed 30%,
          #ee3937 65%,
          #ff7a45 100%);
    }


    @media (any-hover: hover) {
      .main-footer__block .footer__list a:hover::after {
        border-radius: 0;
        margin-bottom: 0
      }
    }

    .footer__list a:hover {
      color: var(--white);
    }

    .footer__cta {
      margin-top: 15px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.055);
    }

    .footer__cta strong {
      display: block;
      font-size: 22px;
      font-family: var(--font);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    .footer__cta p {
      margin-top: 10px;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .footer__cta .btn {
      margin-top: 16px;
    }

    .footer__bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 14px;
    }

    .footer__social {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer__social a {
      color: var(--muted-2);
    }

    .footer__social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 70px;
      height: 70px;
      color: var(--white);
      background: rgba(255, 255, 255, 0.055);
      border-radius: 24px;
      transition: none;
      position: relative;
      overflow: hidden;
    }

    .footer__social-link::after {
      content: "";
      border-radius: 50%;
      width: 100%;
      min-height: 100%;
      margin-bottom: 72px;
      padding-top: 100%;
      position: absolute;
      transition: margin .4s, border-radius .25s;
      inset: auto 0 0;
      z-index: 0;
    }

    .footer__social-link._icon-telegram::after {
      background: #229ed9;
    }

    .footer__social-link._icon-viber::after {
      background: #7360f2;
    }

    .footer__social-link._icon-whatsapp::after {
      background: #25d366;
    }

    @media (any-hover: hover) {
      .footer__social-link:hover::after {
        border-radius: 0;
        margin-bottom: 0
      }

    }

    .footer__social-link svg {
      width: 25px;
      height: 25px;
      z-index: 9;
    }


    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 760px) {
      .footer::before {
        display: none;
      }
    }

    /* =========================================================
       16. RESPONSIVE
    ========================================================= */
    @media (max-width: 1100px) {

      .hero__grid,
      .section__head,
      .value,
      .quiz,
      .faq,
      .cta-form {
        grid-template-columns: 1fr;
      }

      .services,
      .trust-grid,
      .pricing,
      .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .process {
        grid-template-columns: repeat(2, 1fr);
      }

      .process-line {
        display: none;
      }

      .footer__top {
        grid-template-columns: 1fr 1fr;
      }

      .value-radar {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 34px;
      }

      .quiz-prize {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 28px;
      }

      .quiz__aside {
        min-height: auto;
      }
    }

    @media (max-width: 920px) {

      .nav,
      .header__phone,
      .header__actions>.btn {
        display: none;
      }

      .burger {
        display: block;
      }

      .mobile-menu {
        display: block;
      }

      .header__inner {
        border-radius: 28px;
      }

      .hero {
        padding-top: 136px;
      }

      .hero-stage {
        min-height: auto;
      }

      .floating-note {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 14px;
      }
    }

    @media (max-width: 760px) {
      .section {
        padding: 70px 0;
      }

      .hero {
        padding-bottom: 70px;
      }

      .services,
      .value__list,
      .process,
      .quiz-options,
      .form__row,
      .footer__top {
        grid-template-columns: 1fr;
      }

      .universal-slider {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 15px;
      }

      .slider-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--blur-background);
        color: #ffffff;
        border: 1px solid var(--line);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .section--light .slider-arrow {
        background: rgba(255, 255, 255, 0.78);
        color: #000000;
        border: 1px solid var(--line-dark);
      }

      .slider-arrow:active {
        transform: scale(.92)
      }

      .slider-arrow svg {
        width: 20px;
        height: 20px;
      }

      .trust-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .trust-grid::-webkit-scrollbar {
        display: none;
      }

      .trust-card {
        min-width: 280px;
        scroll-snap-align: start;
      }

      .hero__meta {
        display: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
      }

      .meta-pill {
        min-width: 200px;
        font-size: 12px;
        scroll-snap-align: start;
      }

      .portfolio-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .portfolio-card {
        min-width: 310px;
        scroll-snap-align: start;
        min-height: 485px;
      }

      .screen__cards {
        grid-template-columns: 1fr;
      }

      .screen {
        min-height: auto;
      }

      .screen__top {
        min-height: 240px;
      }

      .hero__actions .btn,
      .quiz-actions .btn {
        width: 100%;
      }

      .quiz-actions {
        flex-direction: column-reverse;
      }

      .process-line {
        display: block;
        position: absolute;
        left: 50%;
        right: auto;
        top: 48%;
        width: 1150px;
        pointer-events: none;
        opacity: 0.9;
        -webkit-transform: translateX(-50%) rotate(90deg);
        transform: translateX(-50%) rotate(90deg);
      }

      .pricing {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .price-card {
        min-width: 310px;
        scroll-snap-align: start;
      }

      .price {
        font-size: 32px;
      }

      .price-card h3 {
        font-size: 24px;
      }

      .footer__bottom {
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .container {
        width: min(100% - 24px, var(--container));
      }

      .header {
        top: 10px;
      }

      .logo span:last-child {
        display: none;
      }

      .hero-panel {
        border-radius: 28px;
        padding: 12px;
      }

      .screen {
        border-radius: 22px;
      }

      .portfolio-card,
      .cta-form,
      .quiz__aside,
      .quiz__box {
        padding: 12px;
        border-radius: 26px;
      }

      .lead-form {
        padding: 0px;
        background: none;
        border: none;
        backdrop-filter: blur(0px);
        z-index: 9;
      }

      .portfolio-card__media {
        height: 230px;
        flex-basis: 230px;
      }
    }

    @media (min-width: 760px) {
      .universal-slider {
        display: none;
      }

    }

    /* =========================================================
   17. POPUP
========================================================= */

    /* =========================================================
   17. POPUP
========================================================= */

    body.popup-lock {
      overflow: hidden;
    }

    .popup {
      position: fixed;
      inset: 0;
      z-index: 9999;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .popup.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      backdrop-filter: var(--blur-filter, blur(28px));
      -webkit-backdrop-filter: var(--blur-filter, blur(28px));
    }

    /* .popup__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(238, 57, 55, 0.18), transparent 38%),
    rgba(9, 10, 15, 0.72);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

.popup.is-active .popup__overlay {
  opacity: 1;
  backdrop-filter: var(--blur-filter, blur(28px));
  -webkit-backdrop-filter: var(--blur-filter, blur(28px));
} */

    .popup__dialog {
      position: relative;
      z-index: 2;
      width: min(100%, 640px);
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 34px;
      border: 1px solid var(--line-2);
      border-radius: var(--radius);
      color: var(--text);
      background:
        radial-gradient(circle at 18% 0%, rgba(238, 57, 55, 0.18), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(255, 122, 69, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(23, 27, 38, 0.96), rgba(9, 10, 15, 0.96));
      box-shadow: var(--shadow);
      transform: translateY(22px) scale(0.96);
      opacity: 0;
      transition:
        transform 0.38s cubic-bezier(.2, .8, .2, 1),
        opacity 0.32s ease;
      scrollbar-width: thin;
      scrollbar-color: rgba(238, 57, 55, 0.65) rgba(255, 255, 255, 0.06);
    }

    .popup.is-active .popup__dialog {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Скрол усередині попапа */

    .popup__dialog::-webkit-scrollbar {
      width: 8px;
    }

    .popup__dialog::-webkit-scrollbar-track {
      margin: 22px 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
    }

    .popup__dialog::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background:
        linear-gradient(180deg, var(--accent), var(--accent-2));
    }

    .popup__dialog::-webkit-scrollbar-thumb:hover {
      background:
        linear-gradient(180deg, var(--accent-2), var(--accent));
    }

    .popup__close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 5;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-2);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.075);
      cursor: pointer;
      transition: 0.25s ease;
    }

    .popup__close:hover {
      background: rgba(238, 57, 55, 0.18);
      border-color: rgba(238, 57, 55, 0.5);
      transform: rotate(90deg);
    }

    .popup__close span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 2px;
      border-radius: 10px;
      background: var(--white);
    }

    .popup__close span:first-child {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .popup__close span:last-child {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .popup__head {
      position: relative;
      z-index: 2;
      padding-right: 48px;
      margin-bottom: 22px;
    }

    .popup__badge {
      width: fit-content;
      margin-bottom: 12px;
      padding: 8px 12px;
      border: 1px solid rgba(238, 57, 55, 0.34);
      border-radius: 999px;
      color: var(--white);
      box-shadow: 0 12px 34px rgba(238, 57, 55, 0.22);
      background: rgba(255, 255, 255, 0.06);
      font-size: 13px;
      line-height: 1;
    }

    .popup__title {
      margin: 0 0 10px;
      color: var(--white);
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -0.008em;
    }

    .popup__text {
      max-width: 520px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }

    .popup__content {
      position: relative;
      z-index: 2;
    }

    /* Мобільна адаптація */

    @media (max-width: 680px) {
      .popup {
        padding: 12px;
        align-items: flex-end;
      }

      .popup__dialog {
        width: 100%;
        max-height: calc(100svh - 24px);
        padding: 26px 18px 20px;
        border-radius: 26px;
      }

      .popup__head {
        padding-right: 44px;
      }

      .popup__dialog::-webkit-scrollbar {
        width: 5px;
      }
    }


    .form__status.is-error {
      color: #ffb4b4;
    }

    /* Honeypot field: hidden from users, visible to spam bots */
    .hp-field {
      position: absolute !important;
      left: -9999px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

/* --- section dividers --- */
    .section-divider {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      background: #0b0e15;
    }

    .section-divider svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 70px;
    }

    .section-divider .shape-fill {
      fill: #ffffff;
    }

    .section-divider--to-light {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      background: #ffffff;
    }

    .section-divider--to-light svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 70px;
    }

    .section-divider--to-light .shape-fill {
      fill: #0b0e15;
    }

/* --- hero gradient background --- */
          .GradientBackground {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100% !important;
            height: 100% !important;
            display: block;
            pointer-events: auto;
          }

          @media (max-width: 760px) {
            .GradientBackground::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.3);
              pointer-events: none;
              z-index: 1;
            }
          }


          #webGLApp {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100% !important;
            z-index: 1;
          }



          .color-controls,
          .toggle-adjuster-btn,
          .color-adjuster-panel {
            display: none !important;
          }

          .color-controls {
            position: fixed;
            top: 2rem;
            right: 2rem;
            z-index: 10;
            display: flex;
            gap: 1rem;
            pointer-events: auto;
          }

          .color-btn {
            min-width: 48px;
            height: 48px;
            padding: 0.75rem 1.25rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 24px;
            color: white;
            font-family: "Syne", sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
          }

          .color-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
          }

          .color-btn.active {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.6);
          }

          /* Color Adjuster Panel */
          .color-adjuster-panel {
            position: fixed;
            top: 2rem;
            left: 2rem;
            z-index: 100;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 1.5rem;
            min-width: 320px;
            max-width: 400px;
            pointer-events: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            display: none;
          }

          .color-adjuster-panel.open {
            display: block;
          }

          .color-adjuster-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          }

          .color-adjuster-title {
            color: white;
            font-family: "Syne", sans-serif;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
          }

          .color-adjuster-close {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease;
          }

          .color-adjuster-close:hover {
            opacity: 0.7;
          }

          .color-picker-group {
            margin-bottom: 1.25rem;
          }

          .color-picker-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            color: white;
            font-family: "Inter", sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
          }

          .color-picker-wrapper {
            display: flex;
            gap: 0.75rem;
            align-items: center;
          }

          .color-picker-input {
            width: 60px;
            height: 40px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            cursor: pointer;
            background: none;
            padding: 0;
            -webkit-appearance: none;
            appearance: none;
          }

          .color-picker-input::-webkit-color-swatch-wrapper {
            padding: 0;
          }

          .color-picker-input::-webkit-color-swatch {
            border: none;
            border-radius: 6px;
          }

          .color-value-display {
            flex: 1;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            color: white;
            font-family: "Inter", monospace;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            cursor: text;
            user-select: all;
            transition: all 0.3s ease;
          }

          .color-value-display:hover {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.4);
          }

          .color-value-display:focus {
            outline: none;
            background: rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.5);
          }

          .copy-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            color: white;
            font-family: "Inter", sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
          }

          .copy-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
          }

          .copy-btn.copied {
            background: rgba(76, 175, 80, 0.3);
            border-color: rgba(76, 175, 80, 0.5);
          }

          .color-adjuster-actions {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            gap: 0.75rem;
          }

          .export-btn {
            flex: 1;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 0.75rem;
            color: white;
            font-family: "Syne", sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
          }

          .export-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
          }

          .toggle-adjuster-btn {
            position: fixed;
            top: 2rem;
            left: 2rem;
            z-index: 100;
            padding: 0.75rem 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-family: "Syne", sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border-radius: 8px;
            pointer-events: auto;
          }

          .toggle-adjuster-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
          }

/* --- misc (был style-блок после закрытия body) --- */
  @property --gradient-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: false;
  }