:root{
  --bg:#f3f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --line:rgba(15,23,42,.10);
  --blue:#2f6fde;
  --blue2:#2a61c9;
  --yellow:#f6c343;
  --shadow:0 18px 45px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 400px at 50% 140px, rgba(47,111,222,.10), transparent 60%),
              var(--bg);
  color:var(--text);
}

/* TOPBAR */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.brand__icon{
  width:28px;height:28px;
  border-radius:8px;
  display:grid;place-items:center;
  background:rgba(47,111,222,.10);
  color:var(--blue);
  font-weight:900;
}
.brand__name{font-weight:800}
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.nav__link{
  text-decoration:none;
  color:inherit;
  opacity:.9;
  padding:8px 10px;
  border-radius:10px;
}
.nav__link:hover{background:rgba(2,6,23,.04)}
.nav__btn{
  border:0;
  background:transparent;
  font:inherit;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  opacity:.9;
}
.nav__btn:hover{background:rgba(2,6,23,.04)}
.chev{opacity:.6; margin-left:4px}

.supportBtn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.supportBtn:hover{background:rgba(2,6,23,.03)}

/* HERO */
.page{padding:18px}
.hero{
  max-width:1100px;
  margin:18px auto 14px;
  text-align:center;
}
.hero h1{
  margin:0 0 6px;
  font-size:30px;
  letter-spacing:-0.02em;
}
.hero p{margin:0; color:var(--muted)}

/* CONTENT */
.content{
  max-width:1100px;
  margin:0 auto;
  padding:14px 0 30px;
}
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:16px;
}
.card__title{
  font-weight:800;
  margin-bottom:12px;
  color:rgba(15,23,42,.86);
}

.card--wide{
  margin-top:18px;
}

/* LEFT FORM */
.field{display:block; margin-bottom:12px}
.field span{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}

input, select{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  background:#fff;
  font-size:15px;
}
input:focus,select:focus{
  border-color: rgba(47,111,222,.55);
  box-shadow: 0 0 0 4px rgba(47,111,222,.12);
}
.inputRow{
  display:grid;
  grid-template-columns: 1fr 56px;
  gap:10px;
  align-items:center;
}
.suffix{
  text-align:center;
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:12px 10px;
  color:var(--muted);
  background:rgba(2,6,23,.02);
}

/* Switches */
.switchRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:rgba(2,6,23,.02);
  margin-bottom:12px;
}
.switchTitle{font-weight:700}
.switch{
  position:relative;
  width:46px;
  height:26px;
}
.switch input{display:none}
.slider{
  position:absolute; inset:0;
  background:rgba(15,23,42,.18);
  border-radius:999px;
  transition:.2s;
}
.slider:before{
  content:"";
  position:absolute;
  width:20px;height:20px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
  box-shadow:0 8px 20px rgba(2,6,23,.18);
}
.switch input:checked + .slider{
  background:rgba(47,111,222,.85);
}
.switch input:checked + .slider:before{
  transform:translateX(20px);
}

.primaryBtn{
  width:100%;
  border:0;
  border-radius:16px;
  padding:13px 14px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  box-shadow: 0 14px 26px rgba(47,111,222,.28);
}
.primaryBtn:hover{filter:brightness(.98)}
.miniNote{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

/* RIGHT RESULT */
.netBadge{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:18px 16px;
  background: linear-gradient(90deg, rgba(47,111,222,.95), rgba(47,111,222,.88));
  color:#fff;
  border:1px solid rgba(47,111,222,.35);
  margin-bottom:12px;
}
.netBadge__num{
  font-size:26px;
  font-weight:900;
}
.netBadge__sub{opacity:.9; font-size:13px}
.netBadge__corner{
  position:absolute;
  right:-30px; top:-30px;
  width:140px; height:140px;
  background: radial-gradient(circle at 35% 35%, var(--yellow), rgba(246,195,67,.15) 55%, transparent 65%);
  transform:rotate(18deg);
}

.rows{display:flex; flex-direction:column; gap:10px}
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:rgba(2,6,23,.02);
}
.row.total{
  background:rgba(47,111,222,.10);
  border-color:rgba(47,111,222,.20);
}
.neg{color:#0f172a}
.pos{color:#16a34a}

.btnRow{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.ghostBtn{
  flex:1;
  border-radius:999px;
  padding:11px 12px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
}
.ghostBtn:hover{background:rgba(2,6,23,.03)}
.ghostBtn:disabled{opacity:.55; cursor:not-allowed}

/* FAQ */
.faq{margin-top:18px}
.qa{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  margin-top:10px;
}
.qa summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa__body{
  margin-top:10px;
  color:var(--muted);
}
/* ==== FIX: прибрати зайву порожнечу зверху ==== */

.hero {
  padding: 28px 16px 22px !important; /* було дуже багато */
  min-height: unset !important;
}

.hero h1 {
  margin-bottom: 8px;
}

.hero p {
  margin-top: 0;
}

/* якщо є загальний page padding */
.page {
  padding-top: 16px !important;
}