:root {
        --bg: #0f172a;
        --surface: #111827;
        --card: #0b1222;
        --text: #e5e7eb;
        --muted: #9aa4b2;
        --primary: #22c55e;
        --accent: #38bdf8;
        --ring: rgba(34, 197, 94, 0.25);
        --border: #1f2937;
        --radius: 16px;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        --container: 1200px;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
        color: var(--text);
        background: radial-gradient(
            1200px 600px at 80% -10%,
            rgba(56, 189, 248, 0.15),
            transparent
          ),
          radial-gradient(
            1000px 500px at -10% 10%,
            rgba(34, 197, 94, 0.15),
            transparent
          ),
          var(--bg);
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }
      .container {
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 20px;
      }
      /* Header */
      header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(17, 24, 39, 0.7);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
      }
      .brand {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .brand .logo {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
      }
      .brand h1 {
        font-size: 18px;
        margin: 0;
        letter-spacing: 0.3px;
      }
      .geo {
        font-size: 12px;
        color: var(--muted);
      }
      nav ul {
        display: flex;
        gap: 18px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .cta {
        background: var(--primary);
        color: #08130a;
        padding: 10px 16px;
        border-radius: 12px;
        font-weight: 600;
        border: 1px solid #16a34a;
        box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
      }
      .cta:hover {
        transform: translateY(-1px);
      }
      /* Burger */
      .burger {
        display: none;
        gap: 6px;
        flex-direction: column;
        cursor: pointer;
        margin-right: 10px;
      }
      .burger span {
        width: 26px;
        height: 3px;
        background: #e5e7eb;
        border-radius: 2px;
        transition: 0.2s;
      }
      @media (max-width: 900px) {
        nav ul {
          display: none;
          position: absolute;
          left: 0;
          top: 64px;
          width: 100%;
          background: #0f172a;
          border-bottom: 1px solid var(--border);
          flex-direction: column;
          padding: 14px 20px;
        }
        nav ul.open {
          display: flex;
        }
        .burger {
          display: flex;
        }
      }
      /* Hero */
      .hero {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--border);
      }
      .hero .wrap {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 36px;
        align-items: center;
        padding: 64px 0;
      }
      .badge {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        background: rgba(56, 189, 248, 0.12);
        color: #c7e9ff;
        border: 1px solid rgba(56, 189, 248, 0.35);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
      }
      .hero h2 {
        font-size: 44px;
        line-height: 1.1;
        margin: 14px 0 12px;
      }
      .hero p {
        color: var(--muted);
        font-size: 18px;
      }
      .hero-actions {
        margin-top: 18px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .btn {
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: linear-gradient(180deg, #121a2c, #0c1323);
        box-shadow: var(--shadow);
      }
      .btn-ghost {
        background: transparent;
        border-color: #22304a;
      }
      .stats {
        display: flex;
        gap: 22px;
        margin-top: 18px;
        color: #cbd5e1;
        font-size: 14px;
      }
      .hero .image {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid #1e293b;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
      }
      .hero .image img {
        aspect-ratio: 4/3;
        object-fit: cover;
      }
      @media (max-width: 900px) {
        .hero .wrap {
          grid-template-columns: 1fr;
          padding: 34px 0;
        }
        .hero h2 {
          font-size: 34px;
        }
      }
      /* Sections */
      section {
        padding: 54px 0;
        border-bottom: 1px solid var(--border);
      }
      .section-title {
        font-size: 28px;
        margin: 0 0 14px;
      }
      .muted {
        color: var(--muted);
      }
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
      @media (max-width: 900px) {
        .grid-3,
        .grid-2 {
          grid-template-columns: 1fr;
        }
      }
      .card {
        background: linear-gradient(180deg, #0d1424, #0a111f);
        border: 1px solid #172033;
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: var(--shadow);
      }
      .card h3 {
        margin: 0 0 8px;
      }
      .chip {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: #0b1a2c;
        border: 1px solid #1d3559;
        color: #c9d7ee;
        font-size: 12px;
      }
      .list {
        display: grid;
        gap: 10px;
      }
      .list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }
      .list svg {
        flex: 0 0 18px;
        margin-top: 3px;
      }
      /* Cases */
      .case {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
      .case .before,
      .case .after {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #1f2d4a;
      }
      .case .tag {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #0b1a2c;
        border: 1px solid #244061;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
      }
      .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      .gallery img {
        width: 300px;
        height: 200px;
      }

      @media (max-width: 1000px) {
        .gallery {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .testimonial {
        display: flex;
        gap: 14px;
      }
      .avatar {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: linear-gradient(135deg, #38bdf8, #22c55e);
      }
      /* Pricing */
      .pricing {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .price {
        font-size: 28px;
        font-weight: 700;
      }
      /* Process */
      .steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
      }
      .step {
        background: #0c1424;
        border: 1px solid #1a2744;
        padding: 14px;
        border-radius: 14px;
      }
      @media (max-width: 900px) {
        .steps {
          grid-template-columns: 1fr 1fr;
        }
      }
      /* FAQ */
      details {
        background: #0c1424;
        border: 1px solid #1a2744;
        border-radius: 14px;
        padding: 14px;
      }
      details + details {
        margin-top: 10px;
      }
      /* Form */
      form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      form .full {
        grid-column: 1/-1;
      }
      /* intl-tel-input: чтобы телефон был как остальные */
      .iti {
        width: 100%;
      }
      .iti input {
        width: 100%;
      }
      .iti__country-list {
        z-index: 9999;
      } /* выпадашка поверх всего */
      input,
      select,
      textarea {
        width: 100%;
        padding: 12px 12px;
        border-radius: 12px;
        border: 1px solid #1d2b47;
        background: #081224;
        color: #e5e7eb;
        outline: none;
      }
      input:focus,
      select:focus,
      textarea:focus {
        box-shadow: 0 0 0 6px var(--ring);
        border-color: #2a8251;
      }
      .consent {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 14px;
        color: #cbd5e1;
      }
      .consent input[type="checkbox"] {
        margin-top: 4px;
        width: auto;
        height: auto;
      }
      .submit {
        background: var(--primary);
        color: #05140a;
        border: 1px solid #16a34a;
        padding: 14px 16px;
        border-radius: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      /* Footer & cookie */
      footer {
        padding: 28px 0;
        background: #0b1222;
        border-top: 1px solid var(--border);
        color: #cbd5e1;
      }
      .foot {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 18px;
      }
      @media (max-width: 900px) {
        .foot {
          grid-template-columns: 1fr;
        }
      }
      .cookiebar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        background: #0c1424;
        border: 1px solid #1a2744;
        border-radius: 14px;
        padding: 16px;
        display: flex; /* было: display:none в JS при показе */
        align-items: center;
        gap: 16px;
        justify-content: space-between;
        flex-wrap: wrap; /* чтобы на очень узких экранах текст переносился */
        z-index: 60;
      }
      .cookiebar > strong {
        margin-right: 4px;
      }
      .cookiebar p {
        margin: 0;
        flex: 1 1 auto;
      }
      .cookiebar .actions {
        margin: 0 0 0 auto; /* уводим блок кнопок вправо */
        display: flex;
        gap: 10px;
      }
      .btn-small {
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid #2b3b57;
        background: #16263b; /* светлее */
        color: #e5e7eb;
        cursor: pointer;
        transition: filter 0.15s, transform 0.05s;
      }
      .btn-small:hover {
        filter: brightness(1.12);
      }
      .btn-small:active {
        transform: translateY(1px);
      }
      #cookieDecline {
        background: #1b2a44;
        border-color: #314768;
      }
      #cookieAccept {
        background: #1f7f45; /* светлее зелёный */
        border-color: #2fb36a;
        color: #06140a;
      }