:root{
  --navy:#0B2A4A;
  --navy2:#163B63;
  --orange:#FF7A00;
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#5b6776;
  --card:#f5f7fb;
  --border:#e6eaf2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand img{height:38px;width:auto}
.brand .name{display:flex;flex-direction:column;line-height:1}
.brand .name span:first-child{font-size:16px}
.brand .name span:last-child{font-size:12px;color:var(--muted);font-weight:600}
.navlinks{display:flex;gap:14px;flex-wrap:wrap}
.navlinks a{font-weight:650;color:var(--muted)}
.navlinks a:hover{color:var(--navy)}
.cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:12px;border:1px solid var(--border);
  font-weight:750;letter-spacing:.2px;gap:10px;
}
.btn.primary{background:var(--orange);border-color:var(--orange);color:white}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost:hover{background:#f2f4f9}

.hero{
  background:radial-gradient(1200px 450px at 40% 0%, #dfe9ff 0%, rgba(255,255,255,0) 65%),
             linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  padding:44px 0 20px;
}
.heroGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.kicker{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--navy);background:#eaf1ff;border:1px solid #d9e6ff;padding:7px 10px;border-radius:999px}
.kicker b{color:var(--orange)}
h1{margin:14px 0 10px;font-size:38px;line-height:1.08;letter-spacing:-.6px}
.lead{font-size:18px;color:var(--muted);max-width:60ch;line-height:1.5}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 22px}
.badge{background:white;border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-weight:700;color:var(--navy)}
.heroCard{
  background:white;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 28px rgba(11,42,74,.08);
}
.heroCard img{display:block;width:100%;height:auto}
.heroCard .p{padding:14px 14px 16px}
.heroCard .p .big{font-weight:850;font-size:16px;color:var(--navy)}
.heroCard .p .small{color:var(--muted);margin-top:6px;line-height:1.45}

.section{padding:34px 0}
.section h2{font-size:26px;margin:0 0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.45}
.list{display:grid;gap:10px;margin-top:10px}
.listItem{display:flex;gap:10px;align-items:flex-start}
.tick{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:#eaf1ff;border:1px solid #d9e6ff;display:grid;place-items:center;color:var(--navy);font-weight:900}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

.pricing{
  background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.priceBox{
  background:white;border:1px solid var(--border);border-radius:18px;padding:18px;
  box-shadow:0 10px 28px rgba(11,42,74,.06);
}
.priceRow{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border)}
.priceRow:last-child{border-bottom:none}
.priceRow b{color:var(--navy)}
.note{color:var(--muted);font-size:14px;line-height:1.45;margin-top:10px}

.footer{padding:26px 0;color:var(--muted)}
.footer .foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px}
.small{font-size:13px}
.phone{font-size:22px;font-weight:900;color:var(--navy)}


/* Viber button */
.btn.viber{
  background:#E11D48;
  border-color:#E11D48;
  color:#fff;
}
.btn.viber:hover{filter:brightness(.95)}


/* Calculator */
.calcWrap{background:white;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(11,42,74,.06);}
.calcRow{display:grid;grid-template-columns:28px 1fr 140px 180px;gap:10px;align-items:start;padding:12px 10px;border-bottom:1px dashed var(--border)}
.calcRow:last-child{border-bottom:none}
.calcRow .desc{font-weight:750;color:var(--navy)}
.calcRow .price{justify-self:end;font-weight:950;color:var(--navy)}
.calcRow input[type="number"]{width:100%;padding:10px 10px;border-radius:10px;border:1px solid var(--border);font-weight:800}
.calcTop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.totalBox{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.totalBox .label{color:var(--muted);font-weight:800}
.totalBox .total{font-size:28px;font-weight:1000;color:var(--navy)}
.smallmuted{color:var(--muted);font-size:13px;line-height:1.4}

/* Calculator UX improvements */
.calcWrap{position:relative}
.calcRow{
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  border-radius:14px;
  padding:12px 10px;
  border:1px solid transparent;
}
.calcRow:hover{background:#ffffff; box-shadow:0 8px 18px rgba(11,42,74,.06); transform:translateY(-1px)}
.calcRow.isChecked{
  background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);
  border-color:var(--border);
}
.calcRow .desc{cursor:pointer}
.calcHint{color:var(--muted); font-size:13px; line-height:1.35}
.kmWrap{display:flex; gap:8px; align-items:center; justify-content:flex-end}
.kmWrap .unit{color:var(--muted); font-weight:900}
.kmWrap input{max-width:120px}
.calcSectionTitle{margin:16px 0 8px;font-weight:1000;color:var(--navy);letter-spacing:.2px}
.calcTop{
  position:sticky;
  top:70px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 12px;
  z-index:2;
}
.calcFilters{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.calcSearch{
  flex:1 1 240px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  font-weight:800;
}
.pill{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.pill.active{background:#eaf1ff; border-color:#d9e6ff; color:var(--navy)}


/* Testimonials */
.tcard{
  background:white;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 28px rgba(11,42,74,.05);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stars{font-weight:950;color:var(--navy);letter-spacing:.5px}
.ttext{margin:0;color:var(--muted);line-height:1.5}
.tauthor{font-weight:900;color:var(--navy)}
.ctaCard{background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);}
.tbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}


@media (max-width:900px){
  .heroGrid{grid-template-columns:1fr}
  h1{font-size:32px}
  .grid3{grid-template-columns:1fr}
  .twoCol{grid-template-columns:1fr}
  .navlinks{display:none}
  .cta{width:100%}
  .cta .btn{flex:1 1 auto}
  .calcTop{position:static; top:auto}
  .calcFilters{gap:8px}
  .pill{padding:7px 9px}
  .calcSearch{flex:1 1 100%}
  .calcRow{
    grid-template-columns:28px 1fr;
    grid-template-rows:auto auto auto;
    gap:8px 10px;
    padding:12px 10px;
  }
  .calcRow .desc{grid-column:2; grid-row:1}
  .calcRow .price{grid-column:2; grid-row:2; justify-self:start}
  .calcRow > div:last-child{grid-column:2; grid-row:3}
  .kmWrap{justify-content:flex-start}
  .kmWrap input{max-width:160px}
}
@media (max-width:420px){
  h1{font-size:28px}
  .phone{font-size:20px}
  .btn{width:100%}
}



/* ===== Mobile Pro Pack (2026-02-18) ===== */
@media (max-width: 900px){
  .container{padding:0 14px}
  .section{padding:22px 0}
  h1{font-size:28px; line-height:1.12}
  .lead{font-size:16px; line-height:1.55}
  .kicker{font-size:12px; padding:6px 10px}
  .badges{gap:8px; margin:12px 0 14px}
  .badge{padding:7px 10px; font-size:13px}

  .topbar{position:sticky}
  .nav{gap:10px}
  .brand img{height:34px}
  .cta{width:100%}
  .cta .btn{flex:1 1 auto; min-width:0; padding:12px 12px}

  .hero{padding:22px 0 12px}
  .heroGrid{gap:14px}
  .heroCard{border-radius:16px}
  .heroCard .p{padding:12px}

  .card{border-radius:16px; padding:14px}
  .grid3{gap:12px}
  .twoCol{gap:12px}

  .priceBox{padding:14px; border-radius:16px}
  .priceRow{padding:9px 0}

  /* Calculator - clearer on mobile */
  .calcTop{position:static; top:auto; padding:12px; border-radius:16px}
  .calcSearch{width:100%}
  .calcFilters{gap:8px}
  .pill{padding:8px 10px; font-size:13px}

  .calcRow{
    display:grid;
    grid-template-columns:28px 1fr;
    grid-template-rows:auto auto auto;
    gap:8px 10px;
    padding:12px 10px;
    border-radius:16px;
  }
  .calcRow .desc{grid-column:2; grid-row:1; font-size:14px}
  .calcRow .price{grid-column:2; grid-row:2; justify-self:start; font-size:14px}
  .calcRow > div:last-child{grid-column:2; grid-row:3}
  .kmWrap{justify-content:flex-start}
  .kmWrap input{max-width:170px}
  .calcHint{margin-top:6px}
}

@media (max-width: 420px){
  h1{font-size:26px}
  .btn{width:100%}
  .phone{font-size:20px}
}



/* ===== Header mobile tuning (logo bigger, buttons smaller) ===== */
@media (max-width: 900px){
  .nav{
    align-items:center;
    gap:10px;
    padding:10px 0;
  }
  .brand{
    gap:10px;
  }
  .brand img{
    height:44px;   /* bigger logo */
    width:auto;
  }
  .brand .name span:first-child{font-size:16px}
  .brand .name span:last-child{font-size:11px}

  /* Make CTA area compact and stack nicely */
  .cta{
    width:auto;
    gap:8px;
  }
  .cta .btn{
    padding:9px 10px;     /* smaller buttons */
    border-radius:12px;
    font-size:13px;
    line-height:1.1;
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Very small phones: keep layout clean */
@media (max-width: 420px){
  .brand img{height:42px}
  .cta{
    width:100%;
  }
  .cta .btn{
    flex:1 1 33%;
    padding:9px 8px;
    font-size:12px;
  }
}

/* Calculator bottom total (mobile) */
.calcBottomBar{display:none}
@media (max-width:900px){
  .calcBottomBar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding:12px 12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(10px);
    position:sticky;
    bottom:10px;
    z-index:3;
    box-shadow:0 12px 26px rgba(11,42,74,.12);
  }
  .calcBottomBar .label{color:var(--muted); font-weight:900}
  .calcBottomBar .total{font-size:22px; font-weight:1000; color:var(--navy)}
}

/* Calculator dropdown groups */
.calcGroup{border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden;margin-top:12px}
.calcGroupHead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);
  border:0;
  cursor:pointer;
  font-weight:1000;
  color:var(--navy);
}
.calcGroupHead .meta{display:flex;align-items:center;gap:10px}
.calcGroupHead .count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:22px;padding:0 8px;border-radius:999px;
  background:#eaf1ff;border:1px solid #d9e6ff;color:var(--navy);
  font-size:12px;font-weight:1000;
}
.calcGroupHead .chev{transition:transform .16s ease}
.calcGroup.open .chev{transform:rotate(180deg)}
.calcGroupBody{
  max-height:0;
  overflow:hidden;
  transition:max-height .22s ease;
}
.calcGroup.open .calcGroupBody{max-height:2000px;}
/* rows inside groups - remove dashed separators at group edges */
.calcGroupBody .calcRow{border-bottom:1px dashed var(--border)}
.calcGroupBody .calcRow:last-child{border-bottom:none}

/* On desktop keep groups open by default for faster scanning */
@media (min-width: 901px){
  .calcGroup.closed{display:block}
  .calcGroupBody{max-height:2000px}
  .calcGroupHead .chev{display:none}
}



/* How it works */
.howGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.howStep{
  display:flex;gap:12px;align-items:flex-start;
  background:white;border:1px solid var(--border);border-radius:16px;padding:14px;
  box-shadow:0 10px 28px rgba(11,42,74,.05);
}
.howStep .num{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:#eaf1ff;border:1px solid #d9e6ff;color:var(--navy);
  display:grid;place-items:center;font-weight:1000;
}
.howStep .title{font-weight:950;color:var(--navy);margin-bottom:4px}
.howStep .text{color:var(--muted);line-height:1.45}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* About gallery */
.aboutGallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.aboutGallery img{
  width:100%;height:190px;object-fit:cover;border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(11,42,74,.06);
}
.aboutGallery a:hover img{transform:translateY(-1px);transition:transform .12s ease}

/* Coverage */
.coverage{background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

@media (max-width:900px){
  .howGrid{grid-template-columns:1fr}
  .aboutGallery{grid-template-columns:1fr}
  .aboutGallery img{height:210px}
}



/* ===== Desktop header fix (one row, bigger logo, VIBER + Калкулатор together) ===== */
@media (min-width: 901px){
  .nav{
    flex-wrap:nowrap;
    align-items:center;
    gap:14px;
  }
  .brand{flex:0 0 auto}
  .brand img{height:48px;width:auto}
  .navlinks{flex:1 1 auto; justify-content:center}
  .cta{
    flex:0 0 auto;
    flex-wrap:nowrap;
    gap:10px;
  }
  .cta .btn{
    padding:10px 12px;
    white-space:nowrap;
  }
  /* Keep VIBER next to Калкулатор (independent of HTML order) */
  .cta a[href^="viber://"]{order:2}
  .cta a[href="#calculator"], .cta a[href="/#calculator"]{order:3}
  .cta a[href^="tel:"]{order:1}
}



/* ===== Desktop nav: one row, bigger menu items ===== */
@media (min-width: 901px){
  .nav{flex-wrap:nowrap}
  .navlinks{
    display:flex;
    flex-wrap:nowrap;
    gap:18px;
    justify-content:center;
    white-space:nowrap;
  }
  .navlinks a{
    font-size:15px;
    font-weight:800;
    color:var(--navy);
    opacity:.9;
  }
  .navlinks a:hover{opacity:1}
}