/* ... (Ваш CSS без изменений) ... */
    :root{
      --bg:#0f1222;
      --panel:#141733;
      --muted:#aab2d5;
      --text:#f4f6ff;
      --accent:#88f;
      --accent-2:#77e0c6;
      --danger:#ff7a7a;
      --ok:#67d38c;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
    }
    *{box-sizing:border-box}
    html,body{margin:0; padding:0; background:linear-gradient(180deg,var(--bg),#0a0c1a 60%); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";}
    a{color:inherit}
    .container{width:min(1120px,92vw); margin-inline:auto}
    .pill{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border:1px solid #3b3f66; border-radius:999px; color:#cbd2ff; background:rgba(136,136,255,.08)}
    header{padding:28px 0}
    header .brand{font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:.6rem}
    .logo{width:28px;height:28px;border-radius:8px;background: radial-gradient(120% 120% at 20% 10%, var(--accent), var(--accent-2) 60%, transparent 61%), #1a1f4f; box-shadow:var(--shadow)}
    .hero{padding:36px 0 24px}
    .hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px}
    .headline{font-size: clamp(28px, 4.4vw, 52px); line-height:1.06; margin:16px 0 8px;}
    .sub{font-size: clamp(16px, 1.6vw, 18px); color:var(--muted); line-height:1.5}
    .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 12px}
    .btn{appearance:none; border:0; border-radius:12px; padding:14px 18px; font-weight:600; cursor:pointer; transition:.2s transform, .2s box-shadow; box-shadow: var(--shadow)}
    .btn:hover{transform: translateY(-1px)}
    .btn:active{transform: translateY(0)}
    .btn.primary{background: linear-gradient(135deg,var(--accent),#6b8bff); color:#0a0c1a}
    .btn.secondary{background: #1b1f40; color:#dfe4ff; border:1px solid #33385f}
    .price-tag{font-weight:800; font-size:22px; letter-spacing:.2px;}
    .strike{opacity:.6; text-decoration:line-through}
    .card{background:linear-gradient(180deg,#15193a,#11142b); border:1px solid #2b3166; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .check{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background:rgba(103,211,140,.15); color:#b7ffcf; font-size:14px}
    .hero-illus{border-radius:18px; background: radial-gradient(120% 120% at 20% 10%, rgba(120,160,255,.35), rgba(0,0,0,.0) 60%), #0e1130; border:1px solid #2a2f59; padding:18px;}
    .illus-pane{background:#0b0e26; border:1px dashed #3b3f6a; border-radius:12px; padding:12px; font-size: clamp(12px, 1.2vw, 18px); color:#cdd3ff}
    .illus-pane strong{color:#fff}
    .countdown{display:flex; gap:12px; margin-top:18px;}
    .timer{display:grid; place-items:center; min-width:86px; padding:10px 8px; background:#0c102b; border:1px solid #2a2f5e; border-radius:12px}
    .timer .num{font-size:28px; font-weight:800}
    .timer .lab{font-size:12px; color:#a9b1df}
    .section{padding:46px 0}
    .pricing{display:grid; grid-template-columns: repeat(2,1fr); gap:18px}
    .how_works{grid-template-columns: repeat(3,1fr)}
    .plan{position:relative}
    .plan .badge{position:absolute; top:12px; right:12px; font-size:12px}
    .plan h3{margin:6px 0 8px}
    .plan ul{margin:12px 0 0; padding-left:18px; color:#c9cef0}
    .plan li{margin:8px 0}
    .timeline{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
    .step{padding:16px}
    .step h4{margin:6px 0 8px}
    details{border:1px solid #313769; border-radius:12px; padding:12px 14px; background:#0b0f2a}
    details+details{margin-top:10px}
    summary{cursor:pointer; font-weight:800}
    footer{padding:36px 0 64px; color:#9aa2d4; font-size:14px}
    footer a{color:#d9deff}
    #intake{display:none}
    form .row{display:grid; gap:10px; grid-template-columns: 1fr}
    input, select, textarea{width:100%; background:#0b0f2a; color:#fff; border:1px solid #343966; border-radius:10px; padding:12px}
    label{font-size:14px; color:#b9c0ef}
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 12, 26, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .modal-content {
      background: linear-gradient(180deg, #15193a, #11142b);
      border: 1px solid #2b3166;
      border-radius: var(--radius);
      padding: 30px;
      width: 90%;
      max-width: 500px;
      box-shadow: var(--shadow);
      transform: translateY(20px);
      transition: transform 0.3s ease;
      position: relative;
    }
    .modal-overlay.active .modal-content {
      transform: translateY(0);
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .modal-header h2 {
      margin: 0;
      font-size: 24px;
    }
    .close-modal {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .close-modal:hover {
      color: var(--text);
    }
    .modal-form {
      display: grid;
      gap: 20px;
    }
    .form-group {
      display: grid;
      gap: 8px;
    }
    .form-group label {
      font-size: 14px;
      color: #b9c0ef;
      font-weight: 500;
    }
    .form-group input {
      background: #0b0f2a;
      color: #fff;
      border: 1px solid #343966;
      border-radius: 10px;
      padding: 14px;
      font-size: 16px;
    }
    .form-group input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
    .btn.buy-btn {
      background: linear-gradient(135deg, var(--accent), #6b8bff);
      color: #0a0c1a;
      border: none;
      border-radius: 12px;
      padding: 14px 24px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: 0.2s transform, 0.2s box-shadow;
      box-shadow: var(--shadow);
    }
    .btn.buy-btn:hover {
      transform: translateY(-1px);
    }
    .btn.buy-btn:active {
      transform: translateY(0);
    }
    .plan-name {
      text-align: center;
      font-size: 18px;
      color: var(--accent-2);
      margin-bottom: 10px;
      font-weight: 600;
    }
    .plan-price {
      text-align: center;
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 20px;
    }
    @media (max-width: 900px){
      .hero-grid{grid-template-columns: 1fr}
      .pricing{grid-template-columns: 1fr}
      .timeline{grid-template-columns: 1fr}
      .timer{min-width:70px}
    }

    /* --- CSS Спиннер --- */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3); /* Полупрозрачный белый цвет */
  border-radius: 50%;
  border-top-color: #fff; /* Цвет активной части */
  animation: spin 1s ease-in-out infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ------------------- */

/* (Убедитесь, что у .btn.buy-btn есть правильные стили, если их нет) */
.btn.buy-btn {
  background: linear-gradient(135deg, var(--accent), #6b8bff);
  color: #0a0c1a;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s transform, 0.2s box-shadow;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.buy-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.client_img{
    width: 250px;
    height: 260px;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
}

.link_pdf{
    color: #6b8bff;
    text-decoration: none;
}
.illus-pane ul{
    line-height: 1.5;
}

.illus-pane ul li {
    margin-top: 15px;
}
.illus-pane > strong {
font-size: clamp(12px, 1.5vw, 26px);
display: block;
margin-bottom: 20px;
margin-top: 10px;
}

#faq details p{
    padding-top: 5px;
    padding-left: 17px;
}