/* Sau Zhurek — лендинг сопровождения. Бренд: navy + сердечный coral. */

:root {
  --navy:        #0e1b2c;
  --navy-2:      #16273d;
  --surface:     #ffffff;
  --surface-2:   #f4f7fb;
  --ink:         #16273d;
  --ink-soft:    #5a6b80;
  --accent:      #e6395a;
  --accent-deep: #c41e43;
  --teal:        #1f9d8f;
  --line:        #e3e9f1;
  --wa:          #25d366;

  --radius:   20px;
  --radius-sm:12px;
  --shadow:   0 18px 50px -22px rgba(14,27,44,.35);
  --maxw:     1080px;

  --h1: clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
  --h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
  --space: clamp(3rem, 2rem + 4vw, 6rem);
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 700;
  padding: .95rem 1.6rem; border-radius: var(--radius-sm);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 10px 24px -12px rgba(196,30,67,.7); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { color: #fff; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.btn-wa { background: linear-gradient(135deg, var(--wa), #128c4f); }

/* --- HERO --- */
.hero {
  background:
    radial-gradient(900px 500px at 80% -10%, #1d3a5c 0, transparent 60%),
    linear-gradient(160deg, var(--navy), #0b1622);
  color: #fff;
  padding: clamp(3rem, 2rem + 6vw, 7rem) 1.25rem clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.badge {
  display: inline-block; font-size: .82rem; font-weight: 600;
  color: #ffd0da; background: rgba(230,57,90,.16);
  border: 1px solid rgba(230,57,90,.4);
  padding: .35rem .8rem; border-radius: 99px; margin-bottom: 1.4rem;
}
.hero-title { font-size: var(--h1); line-height: 1.05; letter-spacing: -.02em; }
.hero-title span { color: var(--accent); }
.hero-sub { max-width: 620px; color: #c3d0e0; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); margin: 1.3rem 0 2rem; }
.hero-sub b { color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.chip {
  font-size: .82rem; color: #c3d0e0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: .35rem .75rem; border-radius: 99px;
}

/* --- Секции --- */
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--space) 1.25rem; }
.section-title { font-size: var(--h2); letter-spacing: -.01em; line-height: 1.12; }
.section-lead { color: var(--ink-soft); font-size: 1.1rem; margin-top: .8rem; max-width: 640px; }

.section-dark, .section-soft, .section-trust, .section-final { max-width: none; }
.section-dark { background: var(--navy); color: #fff; }
.section-dark .section-title { color: #fff; }
.section-soft { background: var(--surface-2); }
.section-trust { background: linear-gradient(160deg, #fdeff2, #fff); }
.section-final { background: var(--navy); color: #fff; text-align: center; }
.section-final .section-title { color: #fff; }
.section-final .section-lead { margin: .8rem auto 0; }
.section-dark > *, .section-soft > *, .section-trust > *, .section-final > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* --- Карточки "для кого" --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-top: 2rem; }
.card-item { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; transition: transform .15s var(--ease), border-color .15s; }
.card-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-icon { font-size: 2rem; }
.card-title { font-weight: 700; margin: .6rem 0 .25rem; }
.card-text { color: var(--ink-soft); font-size: .92rem; }

/* --- Проблема --- */
.problem-list { list-style: none; margin: 2rem 0 1.5rem; display: grid; gap: 1rem; }
.problem-list li { position: relative; padding-left: 1.8rem; color: #c3d0e0; font-size: 1.05rem; }
.problem-list li::before { content: '✕'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.punch { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); font-weight: 700; line-height: 1.3; border-left: 4px solid var(--accent); padding-left: 1.2rem; }

/* --- Что входит --- */
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.incl-item { display: flex; gap: .9rem; }
.incl-check { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #eafaf3; color: var(--teal); display: grid; place-items: center; font-weight: 800; }
.incl-title { font-weight: 700; }
.incl-text { color: var(--ink-soft); font-size: .95rem; }

/* --- Этапы --- */
.steps { display: grid; gap: 1rem; margin-top: 2rem; }
.step-item { display: flex; gap: 1.1rem; background: var(--surface); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.step-n { flex: 0 0 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; font-weight: 800; font-size: 1.3rem; display: grid; place-items: center; }
.step-title { font-weight: 700; }
.step-text { color: var(--ink-soft); font-size: .95rem; }

/* --- Тарифы --- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2.2rem; }
.plan { position: relative; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 2rem 1.6rem; display: flex; flex-direction: column; }
.plan-hl { border: 2px solid var(--accent); background: linear-gradient(180deg, #fff, #fdeff2); box-shadow: var(--shadow); }
.plan-flag { position: absolute; top: -13px; left: 1.6rem; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 99px; }
.plan-name { font-size: 1.7rem; font-weight: 800; }
.plan-price { font-size: 1.6rem; font-weight: 800; color: var(--accent-deep); margin-top: .2rem; }
.plan-tag { color: var(--ink-soft); margin: .3rem 0 1.2rem; }
.plan-features { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.plan-features li { position: relative; padding-left: 1.6rem; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.plan-note { color: var(--accent-deep); font-weight: 600; font-size: .92rem; margin-bottom: 1.2rem; }
.plan .btn { margin-top: auto; }

/* --- Доверие --- */
.trust-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.trust-list li { position: relative; padding-left: 2rem; font-weight: 600; }
.trust-list li::before { content: '♥'; position: absolute; left: 0; color: var(--accent); }

/* --- FAQ --- */
.faq { margin-top: 2rem; display: grid; gap: .8rem; }
.faq-item { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .4rem 1.2rem; }
.faq-q { cursor: pointer; font-weight: 700; padding: .9rem 0; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; float: right; color: var(--accent); font-weight: 800; }
details[open] .faq-q::after { content: '–'; }
.faq-a { color: var(--ink-soft); padding-bottom: 1rem; }

/* --- Форма --- */
.lead-form { max-width: 460px; margin: 2rem auto 0; display: grid; gap: .7rem; }
.field { padding: .95rem 1.1rem; border: 1.5px solid #2c4360; background: var(--navy-2); color: #fff; border-radius: var(--radius-sm); font: inherit; font-size: 1rem; }
.field::placeholder { color: #7d90a8; }
.field:focus { outline: none; border-color: var(--accent); }
.thanks { color: #d7f7e3; font-size: 1.05rem; }
.disclaimer { color: #8da0b6; font-size: .85rem; margin-top: 1rem; }

/* --- Футер --- */
.foot { background: #0b1622; color: #8da0b6; text-align: center; padding: 2.5rem 1.25rem; display: grid; gap: .5rem; }
.foot a { color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }