:root{
      --bg:#0b0b0f;
      --card:#121218;
      --muted:#8a8d93;
      --text:#e8e8ea;
      --red:#ea0000;
      --red-600:#c70000;
      --line:#1d1f27;
      --ok:#16c77a;
      --radius:18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
      background: radial-gradient(1200px 800px at 70% -10%, rgba(234,0,0,.08), transparent 60%),
                  radial-gradient(1000px 600px at -10% 110%, rgba(234,0,0,.06), transparent 60%),
                  var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .wrap{max-width:980px; margin:0 auto; padding:24px 16px; min-height:100vh; background: radial-gradient(1200px 800px at 70% -10%, rgba(234,0,0,.08), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(234,0,0,.06), transparent 60%), var(--bg);}

    /* Header */
    .header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;}
    .brand{display:flex; align-items:center; gap:14px;}
    .logo{
      width:48px; height:48px; border-radius:12px; background:#14141c; border:1px solid #1b1c24;
      display:block; object-fit:contain; box-shadow:var(--shadow);
    }
    .brand h1{margin:0; font-size:18px; font-weight:600; color:#fff;}
    .brand p{margin:0; color:var(--muted); font-size:12px}

    /* Card */
    .card{
      background: linear-gradient(180deg, rgba(234,0,0,.045), transparent 35%), var(--card);
      border:1px solid var(--line); border-bottom-color: transparent; border-radius: var(--radius);
      box-shadow: var(--shadow); overflow:hidden;
    }

    /* Progress */
    .progress{width:100%; height:8px; background:#0e0f14; border-bottom:1px solid var(--line); position:relative;}
    .progress__bar{
      position:absolute; left:0; top:0; bottom:0; width:0%;
      background: linear-gradient(90deg, var(--red), #ff1a2d);
      box-shadow: 0 0 20px rgba(234,0,0,.35);
      transition: width .45s cubic-bezier(.22,.8,.2,1);
    }

    .content{padding:20px 20px 24px;}

    /* Steps */
    .step{display:none; opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease;}
    .step.active{display:block; opacity:1; transform:none;}
    .step h2{margin:8px 0 10px; font-weight:700; letter-spacing:.2px;}
    .h1{font-size:28px; line-height:1.15; margin:0; color:#fff;}
    .lead{color:#cfd0d4; font-size:16px; line-height:1.55; margin:12px 0 16px;}
    .muted{color:var(--muted); font-size:13px;}

    .hero{
      display:grid; gap:16px; padding:18px; border:1px solid var(--line); border-radius:16px;
      background:
        radial-gradient(800px 400px at 100% 0%, rgba(234,0,0,.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent),
        #0f0f14;
    }

    .hero-image {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      max-height: 280px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hero-image:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 40px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
    }
    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.3s ease;
    }
    .hero-image:hover img {
      transform: scale(1.02);
    }

    /* Мобильная версия: уменьшаем высоту в 1.5 раза */
    @media (max-width: 767px) {
      .hero-image {
        max-height: 187px;
      }
    }

    .hero-content {
      display: grid;
      gap: 16px;
    }

    @media (min-width: 1200px) {
      .hero {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: center;
      }
      .hero-image { order: 2; max-height: 350px; }
      .hero-content { order: 1; }
    }

    .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
    @media (max-width:780px){.grid{grid-template-columns:1fr}}

    label{display:block; font-size:13px; color:#cfd0d4; margin:6px 0 8px;}
    input[type="text"], input[type="tel"], input[type="email"]{
      width:100%; background:#0e0f14; color:#fff; border:1px solid #20222b; border-radius:14px; padding:14px 14px;
      outline:none; transition:border .2s ease, background .2s ease, box-shadow .2s ease;
      font-size:16px;
    }
    /* Совместимость с intl-tel-input */
    .iti{width:100%}
    .iti__country-list{
      z-index:10000;
      background:#0e0f14;
      border:1px solid #20222b;
      border-radius:14px;
      box-shadow:0 8px 24px rgba(0,0,0,.35);
      max-height:400px;
    }
    .iti__country{color:#e8e8ea}
    .iti__dial-code{color:#9aa0ab}
    .iti__country.iti__highlight, .iti__country:hover{background:#11131a}
    .iti__divider{border-top-color:#1d1f27}

    /* Кастомный список подсказок под полем адреса */
    input[list]::-webkit-calendar-picker-indicator { display: none; }
    .autocomplete-wrapper{position:relative}
    .autocomplete-suggestions{
      position:fixed;
      margin-top:4px;
      max-height:400px;
      overflow-y:auto;
      background:#0e0f14;
      border:1px solid #20222b;
      border-radius:14px;
      box-shadow:0 8px 24px rgba(0,0,0,.35);
      z-index:9999;
    }
    .autocomplete-suggestion{
      padding:12px 14px;
      cursor:pointer;
      border-bottom:1px solid #1d1f27;
      color:#e8e8ea;
      font-size:14px;
      transition:background-color .2s ease;
    }
    .autocomplete-suggestion:last-child{border-bottom:none}
    .autocomplete-suggestion:hover, .autocomplete-suggestion.active{background:#11131a}
    input::placeholder{color:#7f8490}
    input:focus{
      border-color:#2f3340; background:#11131a;
      box-shadow: 0 0 0 3px rgba(234,0,0,.15);
    }

    .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
    .hint{font-size:12px; color:var(--muted)}
    .required{color:var(--red); margin-left:6px}

    .actions{display:flex; justify-content:flex-end; gap:12px; margin-top:14px}
    .btn{
      appearance:none; border:none; cursor:pointer;
      padding:14px 18px; border-radius:14px; font-weight:600; font-size:16px;
      transition: transform .06s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease;
    }
    .btn:active{transform:translateY(1px)}
    .btn.primary{
      background: linear-gradient(180deg, var(--red), var(--red-600)); color:#fff;
      box-shadow: 0 10px 24px rgba(234,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
      padding: 14px 48px;
    }

    /* Мобильная версия: кнопка на всю ширину */
    @media (max-width: 767px) {
      .btn.primary {
        width: 100%;
        padding: 16px 20px;
      }
    }
    .btn.secondary{
      background:#171922; color:#e3e3e6; border:1px solid #232633;
    }
    .btn.ghost{
      background:transparent; color:#cbd0d8; border:1px dashed #2b2e3a;
    }
    .btn[disabled]{opacity:.5; cursor:not-allowed}

    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{
      padding:8px 12px; border-radius:24px; font-size:13px; border:1px solid #232633; background:#121420; color:#cbd0d8; cursor:pointer;
    }
    .chip:hover{border-color:#2d3140}

    /* Регалии компании */
    .achievements{
      display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0;
      padding:16px; border-radius:16px;
      background: #101015;
      border:1px solid var(--line);
    }
    .achievement{text-align:center}
    .achievement-number{
      font-size:24px; font-weight:700; color:#fff; margin-bottom:4px;
    }
    .achievement-text{
      font-size:12px; color:var(--muted); line-height:1.3;
    }

    /* Мобильная версия регалий */
    @media (max-width: 767px) {
      .achievements{grid-template-columns:repeat(2,1fr); gap:12px; margin:16px 0;}
      .achievement-number{font-size:20px;}
      .achievement-text{font-size:11px;}
    }

    .success{
      text-align:center; padding:40px 16px 24px;
    }
    .success h3{margin:0 0 8px; font-size:24px}
    .success p{margin:0 0 14px; color:#cfd0d4}
    .success .success-text{color:#fff; font-weight:700}

    /* Confetti canvas */
    #confetti{position:fixed; inset:0; pointer-events:none; z-index:9999}

    /* Footer mini */
    .footnote{margin-top:16px; font-size:12px; color:#9aa0ab; background:transparent; border:none}
    .footnote a{color:#fff; text-decoration:underline}
    .footnote a:visited{color:#fff; text-decoration:underline}

    /* Мобильная версия футера с управляемым переносом */
    .br-500{display:none}
    @media (max-width: 500px) { .br-500{display:inline} }

    /* Spinner загрузки */
    .spinner{display:inline-block; width:1em; height:1em; border:2px solid rgba(255,255,255,.3); border-radius:50%; border-top-color:#fff; animation:spin 1s ease-in-out infinite; vertical-align:middle}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Уникальные классы сообщений */
    .success-message{color:#fff; font-weight:700}
    .error-message{color:#ff2a41}

    /* Ошибка отправки */
    .error-modal{position:fixed; inset:0; z-index:10000; transform:scale(1); opacity:0; visibility:hidden; display:none; align-items:center; justify-content:center; transition:opacity .25s ease, visibility .25s ease;}
    .error-modal.active{display:flex; opacity:1; visibility:visible;}
    .error-modal__backdrop{position:absolute; inset:0; background:rgba(9,9,12,.78); backdrop-filter:blur(4px);}
    .error-modal__dialog{position:relative; background:#14141c; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:28px 28px 32px; max-width:360px; width:calc(100% - 32px); box-shadow:0 20px 60px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:16px; text-align:center;}
    .error-modal__icon{font-size:48px; line-height:1; color:#ff5a6b; font-weight:600;}
    .error-modal__title{margin:0; font-size:22px; color:#fff;}
    .error-modal__message{margin:0; color:#cfd0d4; font-size:15px; line-height:1.5;}
    .error-modal__close{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.08); background:rgba(20,20,28,.8); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;}
    .error-modal__close::before,.error-modal__close::after{content:''; position:absolute; width:14px; height:2px; background:#fff; border-radius:1px;}
    .error-modal__close::before{transform:rotate(45deg);} 
    .error-modal__close::after{transform:rotate(-45deg);} 
    .error-modal__close:hover{background:rgba(255,255,255,.08);}
    .error-modal__action{margin-top:4px; width:100%;}