:root{
  --max: 1120px;
  --bg:#0b0d12;
  --bg2:#0e1118;
  --card:#121727;
  --text:#e9edf5;
  --muted:#a6b0c3;
  --line:rgba(255,255,255,.10);
  --primary:#ff4d8d;
  --primary2:#ff7aa9;
  --ok:#42d392;
  --shadow:0 14px 60px rgba(0,0,0,.45);
  --r:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background:rgba(11,13,18,.68);
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(255,77,141,.95), rgba(255,122,169,.65));
  box-shadow:0 10px 26px rgba(255,77,141,.25);
}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav{display:flex;gap:18px;align-items:center}
.nav__link{color:var(--muted);font-weight:500}
.nav__link:hover{color:var(--text)}

.header__actions{display:flex;align-items:center;gap:12px}

.phone{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.phone__label{font-size:12px;color:var(--muted)}
.phone__value{font-weight:700}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px;
  padding:11px 14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn:active{transform:translateY(0)}

.btn--primary{
  border:none;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 14px 34px rgba(255,77,141,.22);
}
.btn--primary:hover{box-shadow:0 18px 44px rgba(255,77,141,.28)}

.btn--ghost{background:rgba(255,255,255,.04)}

.btn--sm{padding:9px 12px;border-radius:12px;font-size:14px}
.btn--block{width:100%;justify-content:center;display:inline-flex}

.burger{
  display:none;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.burger__line{display:block;height:2px;background:var(--text);margin:6px 10px;border-radius:999px;opacity:.9}

.mobile{border-top:1px solid var(--line);background:rgba(11,13,18,.85)}
.mobile__inner{display:grid;gap:14px;padding:14px 0 18px}
.mobile__link{color:var(--muted);font-weight:600}
.mobile__phone{font-weight:800}
.mobile__cta{width:100%}

.hero{padding:46px 0 26px}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:center}

.badge{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(66,211,146,.10);
  border:1px solid rgba(66,211,146,.25);
  color:#bff3da;
  font-weight:600;
  font-size:13px;
}

.hero__title{margin:14px 0 10px;font-size:44px;line-height:1.05;letter-spacing:-.6px}
.hero__subtitle{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.55}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 18px}

.hero__trust{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
.trust{padding:14px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.trust__value{font-weight:800;font-size:18px}
.trust__label{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.35}

.hero__visual{position:relative}
.visual{
  position:relative;
  height:420px;
  border-radius:var(--r);
  background:radial-gradient(600px 240px at 30% 20%, rgba(255,77,141,.18), transparent 62%),
             radial-gradient(600px 280px at 80% 70%, rgba(66,211,146,.10), transparent 60%),
             rgba(255,255,255,.03);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.visual__blob{
  position:absolute;
  inset:auto -20% -30% -10%;
  height:70%;
  border-radius:999px;
  background:radial-gradient(circle at 30% 40%, rgba(255,77,141,.45), rgba(255,122,169,.12) 55%, transparent 70%);
  filter:blur(2px);
}
.visual__flower{
  position:absolute;
  right:-12px;
  top:-18px;
  width:230px;
  height:230px;
  color:rgba(255,122,169,.20);
  transform:rotate(10deg);
}
.visual__card{
  position:absolute;
  left:18px;
  top:18px;
  width:min(280px, calc(100% - 36px));
  padding:14px 14px;
  border-radius:16px;
  background:rgba(18,23,39,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.visual__title{color:var(--muted);font-weight:600;font-size:13px}
.visual__price{font-weight:900;font-size:28px;margin:8px 0 2px}
.visual__desc{color:var(--muted);font-size:13px}

.section{padding:54px 0}
.section--alt{background:transparent;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.section__title{margin:0;font-size:28px;letter-spacing:-.3px}
.section__subtitle{margin:0;color:var(--muted);max-width:620px;line-height:1.55}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 18px}
.chip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:700;
  cursor:pointer;
}
.chip.is-active{background:rgba(255,77,141,.14);border-color:rgba(255,77,141,.32);color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}

.card{
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(18,23,39,.55);
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.card__media{
  height:150px;
  background:
    radial-gradient(240px 120px at 20% 20%, hsla(var(--hue), 90%, 65%, .40), transparent 65%),
    radial-gradient(260px 150px at 80% 70%, hsla(calc(var(--hue) + 40), 90%, 70%, .18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:12px 12px;
}
.card__tag{
  position:absolute;left:12px;top:12px;
  padding:6px 10px;border-radius:999px;
  background:rgba(11,13,18,.55);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;font-size:12px;
}
.card__mediaText{font-weight:800}
.card__body{padding:14px 12px 14px}
.card__row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card__title{margin:0;font-size:16px}
.card__price{font-weight:900}
.card__desc{margin:8px 0 12px;color:var(--muted);line-height:1.45;font-size:14px}
.card__actions{display:flex;gap:10px;flex-wrap:wrap}

.cta{
  margin-top:18px;
  border-radius:var(--r);
  border:1px solid rgba(255,77,141,.22);
  background:radial-gradient(700px 240px at 20% 30%, rgba(255,77,141,.18), transparent 60%),
             rgba(18,23,39,.45);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 16px;
  flex-wrap:wrap;
}
.cta__title{margin:0 0 4px;font-size:18px}
.cta__text{margin:0;color:var(--muted);line-height:1.5}
.cta__actions{display:flex;gap:10px;flex-wrap:wrap}

.steps{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:18px}
.step{display:flex;gap:12px;padding:14px 14px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.step__num{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:rgba(255,77,141,.16);border:1px solid rgba(255,77,141,.28)}
.step__title{font-weight:800;margin-bottom:6px}
.step__text{color:var(--muted);line-height:1.5;font-size:14px}

.benefits{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:14px}
.benefit{padding:14px 14px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.benefit__title{font-weight:900;margin-bottom:6px}
.benefit__text{color:var(--muted);line-height:1.5;font-size:14px}

.reviews{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:18px}
.review{margin:0;padding:14px 14px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.review__stars{color:#ffd166;font-weight:900;letter-spacing:2px}
.review__text{margin:10px 0 10px;color:var(--text);line-height:1.55}
.review__author{color:var(--muted);font-weight:700}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.qa{border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:12px 12px}
.qa__q{cursor:pointer;font-weight:900}
.qa__q::marker{color:rgba(255,255,255,.35)}
.qa__a{margin-top:10px;color:var(--muted);line-height:1.55}

.contacts{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch}
.contactList{display:grid;gap:10px;margin-top:14px}
.contactItem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.contactItem__k{color:var(--muted);font-weight:700}
.contactItem__v{font-weight:900}
.contacts__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.map{height:100%;min-height:260px;border-radius:var(--r);background:radial-gradient(800px 300px at 40% 30%, rgba(66,211,146,.14), transparent 60%), rgba(255,255,255,.03);border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center;padding:18px;text-align:center}
.map__pin{width:12px;height:12px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 10px rgba(255,77,141,.16), 0 0 0 22px rgba(255,77,141,.08);position:absolute;top:38%;left:52%}
.map__text{font-weight:900;font-size:18px}
.map__hint{color:var(--muted);margin-top:6px;line-height:1.5}

.footer{border-top:1px solid var(--line);background:rgba(11,13,18,.75)}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 0;flex-wrap:wrap}
.footer__meta{color:var(--muted);margin-top:8px;line-height:1.45;font-size:13px}
.footer__links{display:flex;gap:14px;flex-wrap:wrap}
.footer__link{color:var(--muted);font-weight:700}
.footer__link:hover{color:var(--text)}

.modal{position:fixed;inset:0;display:none;z-index:100}
.modal.is-open{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal__panel{
  position:relative;
  width:min(560px, calc(100% - 26px));
  margin:70px auto 0;
  border-radius:20px;
  background:rgba(18,23,39,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.modal__title{font-weight:900}
.iconBtn{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer;color:var(--text)}

.form{padding:14px 14px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field__label{color:var(--muted);font-weight:700;font-size:13px}
.field__input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,13,18,.55);
  color:var(--text);
  outline:none;
}
.field__input:focus{border-color:rgba(255,77,141,.38);box-shadow:0 0 0 4px rgba(255,77,141,.12)}
.field__input--area{resize:vertical;min-height:92px}
.form__fineprint{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.45}

.toast{padding:14px 14px}
.toast__title{font-weight:900;margin-bottom:6px}
.toast__text{color:var(--muted);line-height:1.5}

.details{padding:14px 14px}
.details__price{font-weight:900;font-size:22px;margin-bottom:6px}
.details__desc{color:var(--muted);line-height:1.55;margin-bottom:12px}
.details__meta{display:grid;gap:10px;margin-bottom:14px}
.metaRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 10px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10)}
.metaRow__k{color:var(--muted);font-weight:700}
.metaRow__v{font-weight:800;text-align:right}

@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-block}
  .phone{display:none}
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .visual{height:360px}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .steps{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
  .modal__panel{margin:18px auto 0}
}

@media (max-width: 560px){
  .container{width:min(1120px, calc(100% - 26px))}
  .hero__title{font-size:34px}
  .hero__trust{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}

/* === DEMO SITE watermark (auto) === */
body::before {
  content: "DEMO SITE";
  position: fixed;
  left: clamp(12px, calc((100vw - min(var(--max), (100vw - 2.5rem))) / 4), 96px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-weight: 800;
  letter-spacing: 0.28em;
  font-size: 45px;
  text-transform: uppercase;
  opacity: 0.2;
  color: rgba(255, 255, 255, 0.9);
  mix-blend-mode: difference;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  user-select: none;
  z-index: 90;
}