:root{
  --bg0:#020617;
  --bg1:#040a1c;
  --panel0:#08122b;
  --panel1:#0b1735;
  --card0:#0b1731;
  --card1:#0a1430;
  --ink:#e9eefc;
  --muted:rgba(233,238,252,.72);
  --hair:rgba(255,255,255,.10);
  --hair2:rgba(255,255,255,.07);
  --glow:rgba(66,135,245,.22);
  --glow2:rgba(90,190,255,.14);
  --accent:#2f76ff;
  --accent2:#49b7ff;
  --good:#22c55e;
  --good2:#16a34a;
  --radius:22px;
  --radius2:28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(47,118,255,.18) 0%, rgba(47,118,255,0) 60%),
    radial-gradient(900px 520px at 78% 20%, rgba(73,183,255,.13) 0%, rgba(73,183,255,0) 58%),
    radial-gradient(900px 700px at 60% 90%, rgba(14,165,233,.08) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(180deg,var(--bg0) 0%, var(--bg1) 100%);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.12;
  pointer-events:none;
}

a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:18px}

header{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, rgba(10,20,48,.92) 0%, rgba(6,12,32,.86) 100%);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--hair);
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25) inset;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:14px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{
  width:60px;height:60px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
.brand span{font-weight:900;letter-spacing:.2px}

.burger{
  width:56px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(47,118,255,.10);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.burger-lines{width:22px;height:16px;display:flex;flex-direction:column;justify-content:space-between}
.burger-lines i{display:block;height:2px;background:rgba(233,238,252,.9);border-radius:2px}

nav{display:none;padding:12px 0 18px 0}
nav.open{display:block}
.nav-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:0;padding:0;list-style:none;
}
.nav-list a{
  display:block;text-decoration:none;
  padding:12px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  color:var(--ink);
}
.nav-list a:hover{transform:translateY(-1px);box-shadow:0 22px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(47,118,255,.18) inset}
@media (min-width:980px){.nav-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.nav-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

.menu-overlay{
  position:fixed;inset:0;z-index:35;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.menu-overlay.is-open{opacity:1;pointer-events:auto}

.bottom-menu{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
}
.bottom-menu.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.bottom-menu .container{padding:0 18px 18px 18px}
.bottom-menu-panel{
  max-width:1180px;
  margin:0 auto;
  padding:16px;
  border-radius:28px 28px 0 0;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(11,23,53,.92) 0%, rgba(6,12,32,.92) 100%);
  box-shadow:0 -26px 70px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  max-height:72vh;
  overflow:auto;
}

body.menu-open{overflow:hidden}

main.container{
  margin-top:18px;
  border-radius:var(--radius2);
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(47,118,255,.10) 0%, rgba(47,118,255,0) 60%),
    linear-gradient(180deg, rgba(11,23,53,.72) 0%, rgba(6,12,32,.55) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.08);
}

.breadcrumbs{margin:10px 0 6px 0;color:var(--muted);font-size:14px}
.breadcrumbs a{text-decoration:none;color:var(--muted)}
.breadcrumbs a:hover{text-decoration:underline}

.block{
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:0 22px 58px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.10);
  padding:18px;
  margin:16px 0;
}
.intro h1{margin:0 0 10px 0;font-size:30px;letter-spacing:.2px}
.intro p{margin:0;color:var(--muted);line-height:1.55}

.offer-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
}
.offers{width:100%;display:flex;flex-direction:column;gap:10px}
.offer-row{
  display:flex;gap:10px;align-items:stretch;
  border:2px solid rgba(0,0,0,.22);
  border-radius:18px;
  padding:12px;
  background:#fff;
}
.offer-cell{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.offer-cell img{width:160px;height:50px;object-fit:contain}
.offer-summ{font-weight:800;color:#0b1220}
.offer-btn a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:140px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.20);
  background:linear-gradient(180deg,var(--good) 0%, var(--good2) 100%);
  color:#fff;text-decoration:none;font-weight:900;
  box-shadow:0 14px 22px rgba(0,0,0,.18);
}
.offer-btn a:hover{filter:brightness(1.04)}
@media (max-width:720px){.offer-row{flex-direction:column}.offer-cell{justify-content:center}}

.image-block img{
  width:100%;height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:0 26px 70px rgba(0,0,0,.70);
}

.content-block h2{margin:0 0 10px 0;font-size:22px;letter-spacing:.2px}
.content-block p{margin:0;color:rgba(233,238,252,.92);line-height:1.68}
.content-block ul,.content-block ol{margin:10px 0 0 22px}
.content-block li{margin:8px 0;color:rgba(233,238,252,.92)}

.mini-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;overflow:hidden;border-radius:18px}
.mini-table td,.mini-table th{border:1px solid rgba(255,255,255,.10);padding:10px}
.mini-table th{background:rgba(255,255,255,.06);font-weight:900}

.calc-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.calc-grid label{display:flex;flex-direction:column;gap:6px;font-weight:800}
.calc-grid input{
  padding:12px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  outline:none;
}
.calc-grid input:focus{box-shadow:0 0 0 3px rgba(47,118,255,.22), inset 0 1px 0 rgba(255,255,255,.10)}
@media (max-width:900px){.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calc-result{
  margin-top:14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(47,118,255,.10) 0%, rgba(255,255,255,.03) 100%);
  font-weight:900;
}

.faq details{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  margin:10px 0;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.faq summary{cursor:pointer;font-weight:900}
.faq p{margin:10px 0 0 0;line-height:1.6;color:rgba(233,238,252,.92)}

footer{
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(6,12,32,.75) 0%, rgba(2,6,23,.92) 100%);
}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 0;color:var(--muted)}
.footer-links a{text-decoration:none;color:var(--muted)}
.footer-links a:hover{text-decoration:underline}
.footer-include{padding:0 0 18px 0;color:var(--muted)}

form.block label{display:flex;flex-direction:column;gap:6px;font-weight:900;margin:10px 0}
form.block input, form.block textarea{
  padding:12px 12px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  outline:none;
}
form.block textarea{min-height:160px;resize:vertical}
form.block input:focus, form.block textarea:focus{box-shadow:0 0 0 3px rgba(47,118,255,.22), inset 0 1px 0 rgba(255,255,255,.10)}
form.block button{
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,var(--accent) 0%, var(--accent2) 100%);
  color:#031028;font-weight:1000;letter-spacing:.2px;
  box-shadow:0 18px 44px rgba(0,0,0,.60), 0 0 0 1px rgba(47,118,255,.18) inset;
  cursor:pointer;
}
form.block button:hover{filter:brightness(1.06)}


.bottom-menu .bottom-menu-panel{
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius2);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(47,118,255,.10) 0%, rgba(47,118,255,0) 60%),
    linear-gradient(180deg, rgba(11,23,53,.66) 0%, rgba(6,12,32,.52) 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.08);
  padding:18px;
  margin:18px 0 0 0;
}
.bottom-menu .nav-list{margin-top:0}
.burger{
  width:48px;height:48px;
  border-radius:14px;
  border:2px solid rgba(86,64,32,.40);
  background:linear-gradient(180deg, rgba(253,249,240,.98) 0%, rgba(238,228,208,.98) 100%);
  box-shadow:0 14px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 8px rgba(0,0,0,.08);
}
.burger-lines{width:22px;height:16px}
.burger-lines i{height:3px;background:rgba(60,42,18,.88)}

.menu-overlay{
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}

.bottom-menu{
  left:0;right:0;
  top:88px;
  bottom:auto;
  max-height:calc(100vh - 110px);
  overflow:auto;
  transform:translateY(-18px);
}
.bottom-menu.is-open{
  transform:translateY(0);
}

.bottom-menu .container{padding:16px 14px 18px 14px}

.bottom-menu-panel{
  max-width:920px;
  padding:14px;
  border-radius:22px;
  border:2px solid rgba(86,64,32,.35);
  background:linear-gradient(180deg, rgba(252,247,238,.98) 0%, rgba(240,231,214,.98) 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -4px 10px rgba(0,0,0,.06);
}

.nav-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.nav-list a{
  padding:14px 16px;
  border-radius:18px;
  border:2px solid rgba(86,64,32,.35);
  background:linear-gradient(180deg, rgba(255,252,246,.98) 0%, rgba(240,230,210,.98) 100%);
  color:rgba(33,22,10,.95);
  font-weight:900;
  letter-spacing:.1px;
  box-shadow:0 12px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -4px 10px rgba(0,0,0,.06);
}
.nav-list a:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -4px 10px rgba(0,0,0,.06);
}

@media (max-width:520px){
  .bottom-menu{top:78px;max-height:calc(100vh - 96px)}
  .nav-list a{padding:13px 14px;border-radius:16px}
}
