:root{
  --max: 1120px;
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.7);
  --muted2:rgba(255,255,255,.55);
  --brand:#22c55e;
  --brand2:#60a5fa;
  --warn:#f59e0b;
  --shadow: 0 22px 70px rgba(0,0,0,.45);
  --shadow2: 0 16px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

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

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(11,18,32,.82);
  border-bottom:1px solid rgba(255,255,255,.08);
}

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

.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(96,165,250,.85));
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  font-weight:900;
}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted2)}

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

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

.pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:700;
  font-size:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  letter-spacing:.1px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(0px)}

.btn--primary{
  border-color:rgba(34,197,94,.55);
  background:linear-gradient(135deg, rgba(34,197,94,.92), rgba(96,165,250,.78));
  box-shadow:0 16px 45px rgba(34,197,94,.18);
}

.btn--ghost{background:transparent}
.btn--soft{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12)}
.btn--block{width:100%}

.icon-btn{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}
.icon-btn__bar{display:block; width:18px; height:2px; background:rgba(255,255,255,.85); margin:4px auto; border-radius:999px}

.mobile{
  display:none;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(11,18,32,.92);
}
.mobile__inner{padding:14px 0; display:grid; gap:10px}
.mobile__link{padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-weight:800}
.mobile__cta{display:grid; gap:10px; margin-top:6px}

.hero{position:relative; padding:48px 0 30px}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.badge__dot{width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px rgba(34,197,94,.15)}

.h1{font-size:44px; line-height:1.05; margin:16px 0 10px; letter-spacing:-.8px}
.lead{font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 18px; max-width:60ch}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 18px}

.trust{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:18px 0 12px}
.trust__item{padding:12px 12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.trust__num{font-weight:900; font-size:18px}
.trust__text{font-size:12px; color:var(--muted2); margin-top:2px}

.contact-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted)}
.contact{font-weight:800}
.contact:hover{color:var(--text)}
.contact-row__sep{color:rgba(255,255,255,.3)}
.contact-row__hint{font-size:12px; color:var(--muted2)}

.hero__card{position:relative}
.hero-card{
  border-radius:var(--radius2);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding:18px;
}
.hero-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.hero-card__title{font-weight:900; font-size:16px}
.hero-card__sub{font-size:12px; color:var(--muted2); margin-top:2px}

.chip{font-weight:900; font-size:12px; padding:8px 10px; border-radius:999px; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); color:rgba(255,255,255,.9)}

.form{display:grid; gap:12px}
.field{display:grid; gap:8px}
.field__label{font-weight:800; font-size:12px; color:var(--muted2)}

.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.input::placeholder{color:rgba(255,255,255,.38)}
.input:focus{border-color:rgba(34,197,94,.55); box-shadow:0 0 0 4px rgba(34,197,94,.16)}

.form__fine{font-size:12px; color:var(--muted2); line-height:1.45}

.section{padding:56px 0}
.section--alt{background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04)}

.section__head{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.section__head > div{min-width:min(620px, 100%)}

.h2{font-size:28px; margin:0 0 6px; letter-spacing:-.4px}
.h3{font-size:16px; margin:0 0 6px; letter-spacing:-.1px}
.muted{color:var(--muted); line-height:1.6}

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

.card{
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow2);
}
.card__icon{width:42px; height:42px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); margin-bottom:10px; font-size:18px}
.card__bottom{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.price{color:var(--muted); font-weight:700}

.link{font-weight:900; color:rgba(255,255,255,.9)}
.link:hover{color:#fff}

.card--accent{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.22)}

.table{border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.table__row{display:grid; grid-template-columns: 1.1fr .55fr 1.35fr; gap:14px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.08)}
.table__row:first-child{border-top:none}
.table__row--head{background:rgba(255,255,255,.06); font-weight:900; color:rgba(255,255,255,.85)}

.note{margin-top:14px; padding:14px 16px; border-radius:20px; border:1px solid rgba(34,197,94,.25); background:rgba(34,197,94,.08)}
.note__title{font-weight:900; margin-bottom:4px}
.note__text{color:var(--muted)}

.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.step{padding:16px; border-radius:22px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05)}
.step__num{width:34px; height:34px; display:grid; place-items:center; border-radius:14px; background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.22); font-weight:1000; margin-bottom:10px}
.step__title{font-weight:1000; margin-bottom:6px}

.cta-band{margin-top:16px; padding:16px; border-radius:24px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.cta-band__title{font-weight:1000; font-size:16px; margin-bottom:2px}
.cta-band__actions{display:flex; gap:10px; flex-wrap:wrap}

.faq{display:grid; gap:10px}
.qa{border-radius:22px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); overflow:hidden}
.qa__q{width:100%; text-align:left; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:transparent; border:none; color:var(--text); font-weight:1000; cursor:pointer}
.qa__a{padding:0 16px 14px; color:var(--muted); line-height:1.7; display:none}
.qa[data-open="true"] .qa__a{display:block}
.qa__chev{color:rgba(255,255,255,.7); font-weight:1000}

.footer{padding:44px 0 22px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.12)}
.footer__grid{display:grid; grid-template-columns: 1.2fr repeat(3, minmax(0,1fr)); gap:14px}
.footer__brand{font-weight:1000; font-size:16px; margin-bottom:6px}
.footer__col{display:grid; gap:8px; align-content:start}
.footer__title{font-weight:1000; color:rgba(255,255,255,.85)}
.footer__link{color:var(--muted)}
.footer__link:hover{color:var(--text)}

.footer__bottom{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(360px, calc(100% - 36px));
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(11,18,32,.92);
  box-shadow: var(--shadow);
  padding:14px 14px;
}
.toast__title{font-weight:1000; margin-bottom:4px}
.toast__text{color:var(--muted)}

@media (max-width: 980px){
  .nav{display:none}
  .icon-btn{display:inline-grid; place-items:center}
  .hero__grid{grid-template-columns:1fr; gap:14px}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .h1{font-size:36px}
  .trust{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .pill{display:none}
  .table__row{grid-template-columns:1fr}
}

.mobile[data-open="true"]{display:block}

/* === 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;
}