/* Нумерованный список с кружками и бирюзовым текстом */
ol.numlist-teal {
  counter-reset: tealnum;
  padding-left: 0;
}
ol.numlist-teal li {
  counter-increment: tealnum;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  color: #ffffff;
  /* font-weight: 500; */
  margin-bottom: 0.7em;
  line-height: 1.6;
  background: rgba(255,255,255,0.08);
  border-radius: 1.2em;
  padding: 0.7em 1em;
  transition: background 0.2s;
}
ol.numlist-teal li::before {
  content: counter(tealnum);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  min-width: 1.7em;
  background: #0fd2b9;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1em;
  margin-top: 0.1em;
  box-shadow: 0 2px 8px 0 rgba(16,224,198,0.10);
  animation: teal-marker-pulse 1.4s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}

/* Анимация для кружков-маркеров в numlist-teal */
@keyframes teal-marker-pulse {
  0% { transform: scale(1); }
  20% { transform: scale(0.88); }
  40% { transform: scale(1.08); }
  60% { transform: scale(0.96); }
  80% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
ol.numlist-teal li:hover::before,
ol.numlist-teal li:focus::before {
  animation: teal-marker-pulse 0.7s cubic-bezier(.4,0,.2,1) infinite;
}

@media (max-width: 575.98px) {
  #details3 .section-title {
    text-align: center !important;
    display: block;
    width: 100%;
  }
}
/* Круглая картинка для блока услуги */
.img-circle {
  border-radius: 50% !important;
  object-fit: cover;
  aspect-ratio: 1/1;
  width: 220px;
  height: 220px;
  box-shadow: 0 4px 24px 0 rgba(16,224,198,0.13);
  background: #0fd2b9;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Стили для гармоничного расположения полей формы обратной связи */
.apa-form .form-control {
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: left;
}
.apa-form .form-label {
  width: 100%;
  text-align: left;
}
/* Курсор pointer для ссылок-карточек направлений */
.card-dark.hover, .card-dark.hover a {
  cursor: pointer;
}
/* --- Мобильная адаптация: картинка hero первой, рамка для блока Подробнее --- */
@media (max-width: 991.98px) {
  .hero-mobile-img {
    order: -1 !important;
    width: 100% !important;
    max-width: 340px;
    margin-bottom: 1.2rem;
    margin-top: 0.5rem;
    display: block;
  }
  .details-mobile-bordered {
    border: 2px solid #0fd2b9;
    border-radius: 18px;
    padding: 1.2rem 1rem;
    background: rgba(16,224,198,0.03);
    margin-top: 1.2rem;
  }
}
/* --- APA-FINANCE форма обратной связи --- */
.apa-form {
  background: rgba(16,224,198,0.07);
  /* border: 1.5px solid #0fd2b9; */
  box-shadow: 0 2px 16px 0 rgba(16,224,198,0.10);
  border-radius: 18px;
  max-width: 420px;
}
.apa-form .form-label {
  color: #0fd2b9;
  font-weight: 600;
  letter-spacing: .01em;
}
.apa-form .form-control {
  background: rgba(0,0,0,0.13);
  color: #fff;
  border: 1px solid #10e0c6;
  border-radius: 10px;
  font-size: 1.08rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.apa-form .form-control:focus {
  border-color: #0fd2b9;
  box-shadow: 0 0 0 2px rgba(16,224,198,0.13);
  background: rgba(0,0,0,0.18);
  color: #fff;
}
.apa-form textarea.form-control {
  min-height: 90px;
  resize: vertical;
}
.apa-form .btn-teal {
  background: linear-gradient(90deg, #0fd2b9 0%, #10e0c6 100%);
  color: #041210;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(16,224,198,0.13);
  font-weight: 700;
  letter-spacing: .01em;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.apa-form .btn-teal:hover, .apa-form .btn-teal:focus {
  background: linear-gradient(90deg, #10e0c6 0%, #0fd2b9 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(16,224,198,0.18);
}
/* Parallax hover effect for image */
.parallax-container {
  perspective: 900px;
  display: inline-block;
}
.parallax-img {
  display: block;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s;
  will-change: transform;
}
.parallax-container:hover .parallax-img {
  box-shadow: 0 12px 48px 0 rgba(15,198,176,0.25), 0 1.5px 8px 0 rgba(0,0,0,0.10);
}
    :root{
      --bg:#0a0d0e; --bg-2:#0f1315; --ink:#0FC6B0; --muted:#a9b5b2;
      --teal:#10e0c6; --teal-2:#0fd2b9; --line:rgba(255,255,255,.08);
      --nav-h:72px;
      --teal-2:#0fd2b9;
      --muted:#b9f1e8;
    }
     .pill{display:inline-block;padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(16,224,198,.45);color:var(--teal);background:rgba(16,224,198,.08);font-weight:700;font-size:.8rem;letter-spacing:.02em}
    .kpi{border:1px solid rgba(16,224,198,.22);background:rgba(16,224,198,.06);border-radius:16px;padding:14px}
    .kpi .lbl{font-size:.8rem;color:var(--muted)}
    .kpi .val{font-weight:800;font-size:1.25rem}
    .benefit{border:1px solid rgba(16,224,198,.18);background:rgba(16,224,198,.05);border-radius:14px;padding:14px;height:100%}
    .benefit .ico{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;background:rgba(16,224,198,.12);border:1px solid rgba(16,224,198,.35);margin-right:.6rem;color:var(--teal)}
    .section-title{color:#fff}
    .section-sub{color:var(--teal-2)}
    .btn-teal{background:var(--teal);border:0;color:#041210}
    .btn-ghost{border:1px solid rgba(16,224,198,.45);color:var(--teal)}
    .img-cover{width:100%;height:auto;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
    .divider{height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.6;border-radius:1px;margin:1.25rem 0 1.75rem}
    @media (min-width:992px){
      .hero-1 .order-img{order:2}
      .hero-1 .order-text{order:1}
      .details-3 .order-img{order:2}
      .details-3 .order-text{order:1}
    }
    /* Анимации появления блоков */
    .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    .fade-in.visible {
      opacity: 1;
      transform: none;
    }

    .fade-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    .fade-left.visible {
      opacity: 1;
      transform: none;
    }

    .fade-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    .fade-right.visible {
      opacity: 1;
      transform: none;
    }

    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    .fade-up.visible {
      opacity: 1;
      transform: none;
    }
    @media (max-width: 991.98px){ :root{ --nav-h: 64px; } }

    html,body{background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
    body{ padding-top: var(--nav-h); }
    html{ scroll-padding-top: var(--nav-h); }

    /* МОИ 
    ===== ОБЩИЕ СТИЛИ ===== */
.container {
  max-width: 1600px !important;
}

    /* Навбар */
    .navbar{backdrop-filter:saturate(140%) blur(8px); background:rgba(8,12,13,.65); border-bottom:1px solid var(--line); min-height: var(--nav-h);}
    .navbar .navbar-brand{font-family:Montserrat; font-weight:800; letter-spacing:.02em}
    .navbar .nav-link{color:#e6fffb}
    .navbar .nav-link.active,.navbar .nav-link:hover{color:var(--teal)}

    /* Герой */
    .hero{
      position:relative; overflow:hidden; min-height:78vh; display:flex; align-items:center;
      /* убираем старый фон секции, чтобы видеть аурору */
      background: transparent !important; background-image: none !important;
    }
    .hero .eyebrow{display:inline-block; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--teal)}

    /* Кнопки */
    .btn-teal{--bs-btn-color:#041210; --bs-btn-bg:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal-2); --bs-btn-hover-border-color:var(--teal-2); --bs-btn-focus-shadow-rgb:16,224,198; border-radius:999px; padding:.8rem 1.25rem; font-weight:700}
    .btn-ghost{--bs-btn-color:#dff8f5; --bs-btn-border-color:var(--line); --bs-btn-hover-bg:rgba(255,255,255,.06); --bs-btn-hover-border-color:var(--line); border-radius:999px; padding:.8rem 1.25rem; font-weight:700}

    /* Разделы/карточки и т.д. */
    .section{padding:84px 0}
    .section-title{margin-bottom:.75rem}
    .section-sub{color:var(--muted)}
    .divider{
      height: 2px !important; 
      background: linear-gradient(90deg, transparent, var(--teal), transparent) !important; 
      margin: 2rem 0 2.5rem !important;
      border-radius: 1px !important;
      opacity: 0.6 !important;
    }

    .card-dark{
      /* background: var(--bg-2) !important;  */
      border-radius: 20px !important; 
      padding: 24px !important;
      border: 1px solid rgba(16,224,198,0.2) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
      transition: all 0.4s ease !important;
      position: relative !important;
      overflow: hidden !important;
    }
    
    .card-dark::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--teal), transparent);
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }
    
    .card-dark.hover{transition: all 0.4s ease !important;}
    .card-dark.hover:hover{
      transform: translateY(-6px) scale(1.02) !important;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
      border-color: rgba(16,224,198,0.4) !important;
      background: linear-gradient(135deg, var(--bg-2) 0%, rgba(16,224,198,0.02) 100%) !important;
    }
    
    .card-dark.hover:hover::before {
      opacity: 1;
    }

    .num{
      width: 48px !important; 
      height: 48px !important; 
      border-radius: 16px !important; 
      display: inline-grid !important; 
      place-items: center !important; 
      font-weight: 800 !important; 
      font-size: 1.2rem !important;
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%) !important;
      color: #041210 !important;
      box-shadow: 0 4px 16px rgba(16,224,198,0.3) !important;
      transition: all 0.3s ease !important;
      font-family: 'Montserrat', sans-serif !important;
    }
    
    .card-dark:hover .num {
      transform: scale(1.1) rotate(5deg) !important;
      box-shadow: 0 6px 20px rgba(16,224,198,0.4) !important;
    }
    .colors_block{
      color:#0fd5bc
    }

    footer{border-top:1px solid var(--line); background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
    #toTop{position:fixed; right:20px; bottom:24px; display:none; z-index:999}

    .faq-accordion .accordion-item{background:var(--bg-2); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:12px}
    .faq-accordion .accordion-button{background:transparent; color:var(--ink); padding:1rem 1.25rem}
    .faq-accordion .accordion-button:not(.collapsed){color:var(--teal); box-shadow:none}
    .faq-accordion .accordion-button:focus{box-shadow:none; border-color:rgba(16,224,198,.35)}
    .faq-accordion .accordion-body{color:var(--muted); padding:1rem 1.25rem; border-top:1px solid var(--line)}
    .faq-cta{background:rgba(16,224,198,.08); border:1px solid rgba(16,224,198,.35); color:#dff7f1}
  
    .navbar-brand img{height:40px; width:auto; display:block}
    @media (min-width: 992px){ .navbar-brand img{height:44px} }
    .nav-actions{display:flex; align-items:center; gap:10px; margin-left:12px}
    .nav-actions .phone{font-weight:700; color:#e6fffb; white-space:nowrap}
    .nav-actions .phone:hover{color:var(--teal)}
    .nav-actions .icon-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:12px; color:#e6fffb; background:transparent}
    .nav-actions .icon-btn:hover{color:var(--teal); border-color:rgba(16,224,198,.35); background:rgba(255,255,255,.06)}
    @media (max-width: 991.98px){ .nav-actions{display:none} }

    .msg-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,.35); transform:translateZ(0); transition:transform .15s ease, box-shadow .15s ease}
    .msg-btn svg{width:20px; height:20px; fill:#fff}
    .msg-btn:hover{transform:translateY(-1px) scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,.45)}
    .msg-wa{background:#25D366}
    .msg-tg{background:#0088cc}

    .nav-search{position:relative; display:flex; align-items:center; margin-left:10px}
    .nav-search .search-input{width:0; opacity:0; padding:.5rem .75rem; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink); transition:width .2s ease, opacity .2s ease, background .2s ease}
    .nav-search .search-input:focus{outline:none; border-color:rgba(16,224,198,.35); background:rgba(255,255,255,.06)}
    .nav-search .search-trigger{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:transparent; color:#e6fffb; margin-left:6px}
    .nav-search .search-trigger:hover{color:var(--teal); border-color:rgba(16,224,198,.35); background:rgba(255,255,255,.06)}
    .nav-search.open .search-input{width:260px; opacity:1}
    .nav-search .clear-btn{position:absolute; right:54px; background:transparent; border:0; color:#9bb; display:none}
    .nav-search.open .clear-btn{display:block}
    @media (max-width: 991.98px){ .nav-actions{display:none} .nav-search{display:none} }

    /* Типографика */
    body{font-size:21px; line-height:1.7}
    h1{font-size:48px; font-weight:700}
    h2{font-size:36px; font-weight:600}
    h3{font-size:28px; font-weight:600}
    .navbar-nav .nav-link, .btn{font-size:18px; font-weight:500}
    p, li{font-size:23px}
    @media (max-width: 767.98px){
      body{font-size:16px}
      h1{font-size:36px}
      h2{font-size:28px}
      h3{font-size:22px}
      .navbar-nav .nav-link, .btn{font-size:16px}
      p, li{font-size:16px}
    }

    /* MEDIA GRID */
    #media .media-tile{position:relative; width:100%; aspect-ratio:16 / 10; border-radius:18px; overflow:hidden; background:var(--bg-2);}
    #media .media-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
    @media (max-width: 575.98px){ #media .media-tile{ aspect-ratio: 4 / 3; } }

    /* ===== AURORA LITE (teal-only, fast) — FIXED LAYERING ===== */
.bg-aurora{
  position:fixed; inset:0; pointer-events:none;
  z-index:0; /* было -1 — из-за этого фон пропадал за body */
  background: radial-gradient(120% 90% at 50% 50%, #0b1320 0%, #070a0d 60%, #06080a 100%);
}

/* крупнее, но всё ещё лёгкие: только радиальные градиенты + transform */
.bg-aurora .blob{
  position:absolute; left:50%; top:50%;
  width:62vmax; height:62vmax; border-radius:50%;
  transform: translate(-50%, -50%);
  opacity:.30;
  background: radial-gradient(circle at 50% 50%,
              rgba(16,224,198,.20) 0%,
              rgba(16,224,198,0) 62%);
  will-change: transform;
}
.bg-aurora .b2{
  width:66vmax; height:66vmax; opacity:.77;
  background: radial-gradient(circle at 50% 50%,
              rgba(15,210,185,.18) 0%,
              rgba(15,210,185,0) 64%);
}

/* мягкий дрейф — короткие смещения (дёшево для GPU) */
.bg-aurora .b1{ animation: drift1 12s ease-in-out infinite; }
.bg-aurora .b2{ animation: drift2 26s ease-in-out infinite; }

@keyframes drift1{
  0%   { transform: translate(-50%,-50%) translate(-8vmin,-5vmin) scale(1.00); }
  50%  { transform: translate(-50%,-50%) translate( 3vmin,  2vmin) scale(1.02); }
  100% { transform: translate(-50%,-50%) translate(-8vmin,-5vmin) scale(1.00); }
}
@keyframes drift2{
  0%   { transform: translate(-50%,-50%) translate( 9vmin,-7vmin) scale(1.00); }
  50%  { transform: translate(-50%,-50%) translate(-3vmin,  6vmin) scale(1.02); }
  100% { transform: translate(-50%,-50%) translate( 9vmin,-7vmin) scale(1.00); }
}

/* Поднимаем контент над слоем ауроры */
header.hero, section, footer { position: relative; z-index: 1; }

/* На мобилках можно скрыть второе пятно, если вдруг нужно ещё быстрее */
@media (max-width: 575.98px){
  .bg-aurora .b2{ display:none; }
}

/* Если хотите, чтобы анимация всегда крутилась даже при системном reduce-motion,
   просто удалите/закомментируйте свой блок @media (prefers-reduced-motion: reduce). */

    /* ===== /AURORA LITE ===== */
/* img {
  filter: saturate(0.5) brightness(1.1) contrast(0.80);
} */
/* Базово — не ломаем переносы */
.svoih5 {
  background-color: #099080 !important;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  text-align: center;
  white-space: normal;
  max-width: 100%;
  display: block;

  /* адаптивный размер шрифта */
  font-size: clamp(1rem, 3vw, 1.7rem);
  line-height: 1.2;
}
/* Мобильная настройка */
@media (max-width: 575.98px) {
  .svoih5 {
    /* адаптивный размер вместо неработающего min-font-size */
  /* font-size: clamp(0.82rem, 2.8vw, 0.95rem) !important; */
    line-height: 1.2 !important;
    padding: 6px 8px !important;
  }

  /* КРИТИЧЕСКОЕ: если внутри flex — дайте элементу сжиматься */
  .svoih5 { min-width: 0; }
  /* или, лучше, на **флекс-родителе** заголовка: */
  .flex-parent-of-title { min-width: 0; }  /* замени на реальный селектор */
}

/* это ок, оставь как есть */
.block-back{
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(16,224,198,0.02) 100%) !important;
}
/* Мобильный размер заголовков с классом .svoih5 */
@media (max-width: 575.98px) {
  h1.svoih5,
  h2.svoih5,
  h3.svoih5,
  h4.svoih5,
  h5.svoih5,
  h6.svoih5 {
    font-size: clamp(0.90rem, 3vw, 1.20rem) !important;
    line-height: 1.22 !important;
    /* на всякий случай — переносы и ограничения ширины */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    display: block !important;
  }
}

.dot {
  width: 25px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow: 0 0 0 3px rgba(56,189,248,.2);
}

.apa-modal-btn{
    width: 100%;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1.5px solid #0fd2b9;
    background: rgba(16,224,198,0.10);
    color: #0fd2b9;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 2px 16px rgba(16,224,198,0.12);
    transition: transform .08s ease, background .15s ease, opacity .15s ease;
  }
  .apa-modal-btn:hover{ background: rgba(16,224,198,0.16); }
  .apa-modal-btn:active{ transform: translateY(1px); opacity: .95; }

  /* ===== APA Modal (redesign like screenshot) ===== */

#feedback-modal .modal__overlay{
  background: rgba(0,0,0,.70);
  padding: 24px;
}

#feedback-modal .modal__container{
  /* УБРАЛ РАМКУ */
  border: 0 !important;

  /* Карточка модалки */
  max-width: 920px;
  width: 100%;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;

  /* Фон как на скрине */
  background: radial-gradient(1200px 600px at 85% 20%, rgba(16,224,198,.18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
              rgba(18, 22, 28, .92);
  box-shadow: 0 16px 70px rgba(0,0,0,.55);
  color: #fff;
}


/* Статус (успех/ошибка) — чтобы выглядел в стиле */
#feedback-modal .apa-form-status{
  border-radius: 14px;
}
/* ===== MicroModal base fix ===== */
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

.modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===== APA Modal — one column ===== */

#feedback-modal .modal__overlay{
  background: rgba(0,0,0,.7);
  padding: 24px;
}

#feedback-modal .modal__container{
  border: 0 !important;
  max-width: 760px;
  width: 100%;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;

  background:
    radial-gradient(800px 400px at 70% 20%, rgba(16,224,198,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(18,22,28,.94);

  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  color: #fff;
}

#feedback-modal .modal__header{
  display: flex;
  justify-content: flex-end;
  padding: 14px 14px 0 14px;
}

#feedback-modal .modal__close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(16,224,198,.35);
  background: rgba(0,0,0,.2);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

#feedback-modal .modal__content{
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 🔥 ЦЕНТР ПО ГОРИЗОНТАЛИ */
  text-align: center;    /* 🔥 ТЕКСТ ПО ЦЕНТРУ */
}


/* Текст */
.apa-modal-h1{
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #86e6da;
}

.apa-modal-sub{
  margin: 0 0 22px 0;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.35;
  max-width: 620px;
}

/* Форма */
.apa-modal-form{
  max-width: 520px;
}

.apa-modal-field{
  margin-bottom: 14px;
}

/* Инпуты */
.apa-modal-input,
.apa-modal-textarea{
  width: 100%;
  height: 54px;
  border-radius: 14px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}

.apa-modal-textarea{
  min-height: 70px;
  padding: 14px 16px;
  resize: vertical;
}

.apa-modal-input::placeholder,
.apa-modal-textarea::placeholder{
  color: rgba(255,255,255,.65);
}

.apa-modal-input:focus,
.apa-modal-textarea:focus{
  border-color: rgba(16,224,198,.8);
  box-shadow: 0 0 0 4px rgba(16,224,198,.14);
}

/* Капча */
.apa-modal-captcha{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

@media (max-width: 520px){
  .apa-modal-captcha{
    grid-template-columns: 1fr;
  }
}

.apa-modal-captcha img{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(16,224,198,.45);
  background: #fff;
}

/* Чекбокс */
.apa-modal-consent{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

.apa-modal-consent input{
  accent-color: #10e0c6;
  margin-top: 3px;
}
 

.apa-modal-btn:hover{ filter: brightness(1.03); }
.apa-modal-btn:active{ transform: translateY(1px); }
button,
.btn,
.btn-teal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.apa-modal-form{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;        /* 🔥 */
}
.apa-modal-h1{
  text-align: center;
}

.apa-modal-sub{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.apa-modal-captcha{
  justify-items: center;
}
/* Центр кнопки в модалке */
.apa-modal-btn-center{
  margin: 20px auto 0;   /* центр по горизонтали */
  width: 100%;
  max-width: 320px;      /* аккуратно, как на лендингах */
}

/* Чуть компактнее форма без капчи */
.apa-modal-form{
  margin-top: 10px;
}
.num.num2{
width: 94px !important;}