:root{
  --bg:#070614;
  --text:#eef0ff;
  --muted:rgba(238,240,255,.75);
  --shadow:0 22px 70px rgba(0,0,0,.58);
}
*{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:
    radial-gradient(900px 520px at 20% 10%, rgba(255,90,200,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 18%, rgba(80,160,255,.18), transparent 58%),
    radial-gradient(900px 520px at 60% 85%, rgba(255,220,90,.10), transparent 62%),
    linear-gradient(180deg, #0b0930, var(--bg));
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
.small{font-size:12px}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(7,6,20,.55);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand__logo{width:28px;height:28px}
.brand__name{letter-spacing:.2px}
.nav{display:flex;gap:18px}
.nav a{color:rgba(255,255,255,.82);font-weight:700}
.nav a:hover{color:#fff}
.topbar__actions{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:38px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);border-radius:12px}
.burger span{display:block;height:2px;background:rgba(255,255,255,.92);margin:7px 10px}
.mobile{border-top:1px solid rgba(255,255,255,.08);background:rgba(7,6,20,.75)}
.mobile__inner{padding:14px 0;display:flex;flex-direction:column;gap:10px}
.mobile__inner a{font-weight:800;color:rgba(255,255,255,.86)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  background:rgba(255,255,255,.03);
  transition:transform .16s ease, filter .16s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn--pill{padding:9px 14px}
.btn--big{padding:12px 18px}
.btn--ghost{background:rgba(0,0,0,.22)}
.btn--dark{background:rgba(0,0,0,.28)}
.btn--hot{border-color:rgba(255,170,80,.35);background:linear-gradient(90deg, rgba(255,80,210,.92), rgba(255,200,80,.92))}

/* HERO */
.hero{
  position:relative;
  min-height:92vh;
  padding:86px 0 64px;
  background:url("./hero.jpg") center/cover no-repeat;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 620px at 55% 28%, rgba(0,0,0,.06), rgba(0,0,0,.58)),
    linear-gradient(180deg, rgba(7,6,20,.08), rgba(7,6,20,.74));
  pointer-events:none;
}
.hero__content{
  position:relative;z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:calc(92vh - 150px);
}
.hero__left{
  max-width:720px;
  padding-top:36px;
}
.hero__h1{
  margin:0;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-1px;
  text-shadow:0 18px 60px rgba(0,0,0,.72);
}
.hero__script{
  margin-top:12px;
  font-family:Pacifico, cursive;
  font-size:34px;
  color:rgba(255,195,90,.95);
  text-shadow:0 14px 45px rgba(0,0,0,.70);
}
.hero__sub{
  margin:14px 0 18px;
  max-width:60ch;
  color:rgba(255,255,255,.82);
  font-weight:600;
  text-shadow:0 12px 45px rgba(0,0,0,.70);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}

/* Status (как в утверждённом примере — внизу слева) */
.status{
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  padding:16px 16px 12px;
  width:340px;
}
.status--hero{
  position:absolute;
  left:18px;
  bottom:18px;
}
.status__title{font-weight:900;letter-spacing:.8px;font-size:12px;color:rgba(255,255,255,.72);margin-bottom:10px}
.status__row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.status__row:last-child{border-bottom:none}
.status__k{color:rgba(255,255,255,.72);font-weight:700}
.status__v{font-weight:900}
.status__v--ok{color:rgba(120,255,170,.95)}
.status__v--good{color:rgba(255,220,120,.95)}
.status__v--hot{color:rgba(255,195,90,.95)}

/* Sections */
.section{padding:48px 0}
.section__title{text-align:center;margin:0;font-size:22px;letter-spacing:.25em;font-weight:900}
.section__subtitle{text-align:center;margin-top:10px;color:rgba(255,255,255,.70);font-weight:600}

/* Cards: не режем */
.cards{margin-top:22px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.card{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);box-shadow:0 18px 55px rgba(0,0,0,.45);overflow:hidden}
.card__media{aspect-ratio:10/7;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:10px}
.card__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.card__body{padding:14px}
.card__h{margin:0 0 8px;font-weight:900;font-size:20px}
.card__p{margin:0;color:rgba(255,255,255,.74);line-height:1.45}
.card__btn{display:inline-flex;margin-top:12px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);font-weight:800}
.card--pink{box-shadow:0 18px 55px rgba(255,80,210,.10), 0 18px 55px rgba(0,0,0,.40)}
.card--blue{box-shadow:0 18px 55px rgba(80,170,255,.10), 0 18px 55px rgba(0,0,0,.40)}

/* Steps */
.steps{margin-top:22px;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.step{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);padding:14px;box-shadow:0 16px 45px rgba(0,0,0,.40);display:grid;gap:6px}
.step__n{font-weight:900;font-size:26px}
.step__t{font-weight:900}
.step__d{color:rgba(255,255,255,.72);font-weight:600}
.step--a .step__n{color:rgba(255,195,90,.95)}
.step--b .step__n{color:rgba(255,100,220,.95)}
.step--c .step__n{color:rgba(255,210,120,.95)}
.step--d .step__n{color:rgba(255,170,80,.95)}

/* Reviews */
.reviews{margin-top:22px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.review{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);padding:14px;box-shadow:0 18px 55px rgba(0,0,0,.40)}
.review__top{display:flex;gap:10px;align-items:center}
.review__av{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.14);object-fit:cover}
.review__name{font-weight:900}
.review__role{font-size:12px;color:rgba(255,255,255,.70);font-weight:700}
.review__text{margin:12px 0 10px;color:rgba(255,255,255,.80);font-weight:600;line-height:1.5}
.stars{color:rgba(255,200,120,.95);letter-spacing:.12em}

/* Contact */
.contact{margin-top:22px;display:grid;grid-template-columns:1.3fr .7fr;gap:14px;align-items:start}
.form{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);padding:14px;box-shadow:0 18px 55px rgba(0,0,0,.40);display:grid;gap:10px}
.input{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(7,6,20,.55);color:var(--text);outline:none}
.input:focus{border-color:rgba(255,195,90,.45)}
.input--area{resize:vertical;min-height:120px}
.contacts{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(0,0,0,.22);backdrop-filter:blur(10px);padding:14px;box-shadow:0 18px 55px rgba(0,0,0,.40)}
.contacts__title{font-weight:900;margin-bottom:10px}
.contacts__item{color:rgba(255,255,255,.78);font-weight:700;margin:10px 0}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:rgba(120,255,170,.95);margin-right:8px}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;background:rgba(7,6,20,.55)}
.footer__inner{display:flex;justify-content:space-between;gap:10px;align-items:center}

@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-block}
  .hero{min-height:unset;padding:86px 0 110px}
  .hero__h1{font-size:44px}
  .hero__script{font-size:28px}
  .status--hero{left:18px;right:18px;width:auto}
  .cards,.steps,.reviews{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}