/* Base */
:root{
  --blue:#e6f2ff;
  --blue-strong:#2a73d9;
  --blue-ink:#0f3d70;
  --text:#111;
  --muted:#666;
  --white:#fff;
  --card:#f7f9fc;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --radius:16px;
  --max: 980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:850px}
.section{padding:64px 0}
.section--blue{background:var(--blue)}
.section--alt{background:#fafcff}
.section__title{font-size:32px;line-height:1.2;margin:0 0 20px;color:var(--blue-ink)}
.muted{color:var(--muted)}

/* Header */
.header{position:sticky;top:0;background:var(--white);box-shadow:var(--shadow);z-index:10}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo__placeholder{width:120px;height:40px;border:2px dashed #9cc;padding:6px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6aa}
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav__link{padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--blue-ink);font-weight:600}
.nav__link:hover{background:var(--blue)}
.nav__link--cta{background:var(--blue-strong);color:#fff}
.nav__link--cta:hover{filter:brightness(.95)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--blue) 0%, #fff 100%)}
.hero__title{font-size:40px;line-height:1.15;margin:0 0 12px;color:var(--blue-ink)}
.hero__subtitle{font-size:18px;margin:0 0 20px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:2px solid transparent;cursor:pointer;text-decoration:none;font-weight:700;box-shadow:var(--shadow);transition:transform .05s ease,box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue-strong);color:#fff}
.btn--primary:hover{filter:brightness(.97)}
.btn--ghost{background:#fff;border-color:var(--blue-strong);color:var(--blue-strong)}
.btn--ghost:hover{background:#f5f9ff}

/* Lists and features */
.bullets{display:grid;gap:10px;margin:0;padding:0 0 0 20px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:16px}
.feature{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.feature__icon{font-size:28px}
.feature__title{margin:6px 0 8px}

/* Program */
.program{display:grid;gap:10px;margin:0;padding:0 0 0 22px}
.program li{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}

/* Quiz */
.quiz .quiz__q{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.quiz label{display:block;margin:6px 0}
.quiz__result{display:none;margin-top:16px;padding:14px;border-radius:12px}
.quiz__result--good{background:#eafbea;color:#114d11}
.quiz__result--medium{background:#fff7e6;color:#6a4b00}
.quiz__result--bad{background:#ffecec;color:#7a1111}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.price{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.price--highlight{border:2px solid var(--blue-strong)}
.price__value{font-size:28px;font-weight:800;margin:8px 0}

/* Form */
.form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form input[type="text"], .form input[type="tel"], .form input[type="date"]{
  width:100%;padding:12px 14px;border:1.5px solid #cfe2ff;border-radius:12px;outline:none;
}
.form input[type="text"]:focus, .form input[type="tel"]:focus, .form input[type="date"]:focus{border-color:var(--blue-strong);box-shadow:0 0 0 4px rgba(42,115,217,.12)}
.fieldset{grid-column:1/-1;border:1.5px solid #cfe2ff;border-radius:12px;padding:10px 12px}
.fieldset legend{padding:0 6px;font-weight:700;color:var(--blue-ink)}
.radio{display:block;margin:6px 0}
.form__actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}

/* Carousel */
.carousel{position:relative;display:flex;align-items:center;gap:8px}
.carousel__track{overflow:hidden;display:flex;scroll-behavior:smooth}

/* карточка слайда фиксированной ширины */
.slide{
  flex: 0 0 280px;
  width: 280px;
  margin:6px;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.slide figcaption{padding:10px;color:#333}

/* слот под скрин: держим пропорцию телефона, без фиксированной высоты */
.screenshot-slot{
  width:100%;
  aspect-ratio: 9 / 16;
  height:auto;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  background:linear-gradient(135deg,#eef6ff,#dfeeff);
  border-bottom:1px solid #dbe7ff;
  display:block;
}

/* само изображение заполняет слот без искажений */
.screenshot-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:14px 14px 0 0;
}

.carousel__ctrl{border:none;background:#fff;width:40px;height:40px;border-radius:50%;box-shadow:var(--shadow);cursor:pointer;font-size:28px;line-height:1}
.carousel__ctrl:hover{filter:brightness(.98)}

/* Адаптив: на узких экранах ширина слайда ≈ ширина экрана */
@media (max-width:480px){
  .slide{
    flex-basis: 78vw;
    width: 78vw;
  }
}

/* FAQ */
.faq{background:#fff;border-radius:12px;padding:12px;margin:8px 0;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;color:var(--blue-ink)}

/* Footer — по центру */
.footer{background:#f0f6ff;padding:24px 0;color:#2b4a73;text-align:center}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.modal__dialog{position:relative;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px;max-width:520px;width:92%}
.modal__title{margin-top:0;color:var(--blue-ink)}
.modal__close{position:absolute;top:8px;right:10px;border:none;background:#fff;border-radius:10px;width:32px;height:32px;box-shadow:var(--shadow);cursor:pointer}

/* Utilities */
@media (max-width:560px){
  .hero__title{font-size:30px}
  .nav{gap:4px}
  .nav__link{padding:8px 10px}
}

/* лого-картинка */
/*.logo__img{
  height:64px;   /* высота под вашу шапку */
/*  width:auto;
  display:block;
}
@media (max-width:560px){
  .logo img{
    height:36px !important;
  }
}*/

@media (max-width: 768px) {
  .header__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .logo img {
    display: block;
    margin: 0 auto;
    height: 60px; /* можешь отрегулировать */
    width: auto;
  }

  .nav {
    display: none; /* можно убрать меню, если перекрывает экран */
  }
}