:root{
  --brand:#d50000;
  --ink:#111316;
  --muted:#6b7280;
  --line:rgba(0,0,0,.08);
  --bg:#ffffff;
  --bg-soft:#f7f7fb;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px; overflow-x:hidden;}
[id]{scroll-margin-top:84px}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  color:var(--ink);
  background:var(--bg);
  scroll-behavior:smooth;
  overflow-x:hidden;
}
/* Коли відкрита модалка: блокуємо скрол сторінки без "стрибка" верстки
   (компенсуємо ширину зниклої смуги прокрутки). Блокуємо і html, і body,
   бо залежно від браузера скрол-контейнером може бути будь-який з них. */
html.modal-open{
  overflow:hidden;
}
body.modal-open{
  overflow:hidden;
  padding-right:var(--sbw, 0px);
}
body.modal-open .site-header{
  padding-right:var(--sbw, 0px);
}
img{max-width:100%; display:block}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
a{color:inherit; text-decoration:none}
.icons{
  width: 26px;
  height: 26px;
  margin-right: 5px;
}
.link--span{color: var(--brand); cursor: pointer;}

/* Header */
.site-header{position:fixed; inset:0 0 auto 0; background:#fff; border-bottom:1px solid var(--line); z-index:1000}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap: nowrap; padding:20px 0;}
.header-logo { flex-shrink: 0; display: flex; align-items: center;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:0.2px}
.brand img{height:36px}
.brand span{font-family:'Space Grotesk', Inter, sans-serif; font-size:18px}
.nav{display:flex; flex:1; align-items:center; gap:24px}
.nav ul { list-style: none; display: flex; gap: 2rem; justify-content: flex-end; align-items: center;}
.nav a{font-weight:600; opacity:.95; font-size: clamp(14px, 1.6vw, 16px); white-space: nowrap;}
.nav a:hover{opacity:1; color: var(--brand);  transition: ease-in-out .3s;}
.contact-header{max-width: 350px; display: flex;align-items: center; gap: 8px;}
.contact-header span {white-space: nowrap;}
.header-cabinet a{display: flex; flex-direction: row; align-items: center;}
.header-cabinet a:hover{color: var(--brand); transition: ease-in-out .3s;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--brand); color:#fff; border:none; padding:14px 22px; border-radius:14px; font-weight:800; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 10px 32px rgba(213,0,0,.25)}
.btn:hover{transform:translateY(-1px)}
.btn--light{background:#111; color:#fff; box-shadow:0 10px 24px rgba(17,17,17,.15)}
.btn--ghost{background:transparent; border:1px solid var(--line); padding:10px 14px; border-radius:12px; color:var(--ink)}
.btn--sm{padding:10px 14px; font-weight:700; border-radius:10px}
.btn--block{display:flex; width:100%}
.btn--connect{text-transform: uppercase; font-weight: 600; font-size: 18px; padding: 1.5rem 1.8rem;}
.btn--secondary{display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--muted); color: #fff; border: none; padding: 14px 22px; border-radius: 14px; font-weight: 500; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;}
.burger{display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink)}
.burger span{display:block; height:2px; background:var(--ink); margin:7px; border-radius:1px}
li .dropdown::before{content: "";position: absolute; inset: 0; opacity: 0; visibility: hidden; border-radius: 10px; transition: opacity .2s, visibility .2s;}

/* Drawer (mobile menu) */
.drawer{position:fixed; inset:0; display:none; z-index:1200}
.drawer.open{display:block}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(1px)}
.drawer-panel{position:absolute; inset:0 0 0 auto; width:min(92vw,380px); background:#fff; color:var(--ink); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.drawer-head img{height:28px}
.drawer-close{background:transparent; border:1px solid var(--line); width:36px; height:36px; border-radius:8px}
.drawer-nav{display:grid; gap:10px; padding:12px 16px}
.drawer-link{padding:12px 10px; border-radius:10px; text-decoration:none; font-weight:800}
.drawer-link:hover{background:var(--bg-soft)}

/* Hero */
.hero{position:relative; padding:150px 0 50px; background:radial-gradient(900px 400px at 90% -20%, rgba(213,0,0,0.08), transparent 60%), var(--bg-soft)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:center}
.hero-title{font-family:'Space Grotesk', Inter, sans-serif; font-size:clamp(28px, 6vw, 58px); line-height:1.05; margin:0 0 14px; color: var(--brand)}
.hero-sub{color:#333; font-size:clamp(16px, 2.5vw, 22px); margin:0 0 22px}
.hero-locations{font-size:clamp(16px, 2.5vw, 16px)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-cta .btn{white-space:nowrap}
.hero-list{display:flex; gap:12px; flex-wrap:wrap; padding:0; margin:18px 0 0; list-style:none}
.hero-list li{display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff}
.hero-media{border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 80px rgba(0,0,0,.08)}
.hero-decor{position:absolute; inset:auto 0 -60px 0; background:linear-gradient(180deg, rgba(0,0,0,0.04), transparent); pointer-events:none}

/* Light strip */
.strip{background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 0}
.strip-item{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.strip-item i{color:var(--brand); font-size:18px}
.strip-item b{display:block; font-weight:900}
.strip-item span{display:block; color:var(--muted); font-size:12px}
.strip-item .strip-wrapper{display: flex; flex-direction: row; align-items: center;}
.strip-item .strip-wrapper>div{display: flex; flex-direction: column; margin-left: 10px;}

/* Sections */
.section{padding:90px 0; background:#fff}
.section.alt{background:var(--bg-soft)}
.section-head{text-align:center; margin-bottom:20px}
.section-title{font-size:36px; margin:0 0 8px; font-weight:900; letter-spacing:.2px}
.section-sub{color:#4b5563; margin:0}

/* Tabs */
.tabs {display: flex; justify-content: center; margin-bottom: 30px; gap: 15px; flex-wrap: wrap;}
.tab-button {padding: 10px 20px; border: none; background: #eee; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.3s;}
.tab-button.active {background: var(--brand); color: #fff;}
.tab-content {display: none;}
.tab-content.active {display: block;}

/* Plans */
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.plan-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; position:relative; overflow:hidden}
.plan--accent{box-shadow:0 24px 100px rgba(213,0,0,.12); border-color:rgba(213,0,0,.45)}
.ribbon{position:absolute; top:16px; right:-48px; transform:rotate(35deg); background:var(--brand); color:#fff; font-weight:800; font-size:12px; padding:6px 70px}
.plan-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.plan-head i{color:var(--brand); font-size:22px}
.plan-head h3{margin:0; font-size:22px}
.plan-speed{margin-left:auto; font-weight:900; color:#111; background:#f3f4f8; padding:6px 10px; border-radius:10px; border:1px solid var(--line)}
.plan-list{list-style:none; padding:0; margin:12px 0 16px; display:grid; gap:8px}
.plan-list li{display:flex; align-items:center; gap:10px; color:#1f2937}
.plan-list i{color:var(--brand)}
.plan-price{font-family:'Space Grotesk', Inter, sans-serif; font-size:28px; font-weight:900; margin-bottom: 15px;}
.plan-price span{font-size:14px; color:#6b7280; margin-left:6px}
.plan-description{font-size: 12px; color:#6b7280}

/* Split */
.split{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:50px 0}
.split-media{border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.split-content h3{font-size:28px; margin:0 0 10px}
.checklist{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px}
.checklist li{display:flex; align-items:center; gap:10px}
.split .btn{max-width: 350px; margin: 0 auto;}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{background:#fff; border:1px solid var(--line); padding:22px; border-radius:16px; position:relative}
.step-no{position:absolute; top:-12px; left:-12px; width:32px; height:32px; border-radius:10px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900}
.steps a{color: var(--brand); }

/* FAQ */
.faq details{background:#fff; border:1px solid var(--line); padding:16px 18px; border-radius:14px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:900}
.faq p{color:#111; margin:10px 0 0}

/* CTA */
.cta{background:var(--bg-soft); padding:90px 0; border-top:1px solid var(--line)}
.cta-inner{text-align:center}
.cta h2{font-size:32px; margin:0 0 8px; font-weight:900}
.cta p{color:#374151; margin:0 0 22px}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#fff; color:var(--ink)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:40px 0}
.footer-brand img{height:36px; margin-bottom:10px}
.footer-col h4{margin:0 0 8px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-bottom{border-top:1px solid var(--line); padding:14px 0; font-size:14px; color:#6b7280; text-align:center}
.footer-col ul li{ display: flex; flex-direction: row; align-items: center;}
.location{display: flex; flex-direction: row; align-items: center;}

/* Modal */
:root{ --sbw: 0px; }
.modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  z-index:2000;
  padding:min(24px, 4vh) 16px;
  padding-top:max(min(24px, 4vh), env(safe-area-inset-top));
  padding-bottom:max(min(24px, 4vh), env(safe-area-inset-bottom));
}
.modal.show{display:flex}
.modal-backdrop{position:absolute; inset:0; background:rgba(17,17,17,.55)}
.modal-dialog{
  position:relative;
  width:min(480px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  z-index:1;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* ніякого скролу — вміст або вміщається, або масштабується */
  transform-origin:center center;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:clamp(14px, 3vh, 20px) 20px 0;
  flex-shrink:0;
}
.modal-body{
  padding:0 20px clamp(14px, 3vh, 20px);
}
#modalTitle{margin:0; font-size:clamp(18px, 3vh, 22px); line-height:1.25}
.modal-close{
  flex-shrink:0;
  background:#fff;
  border:1px solid var(--line);
  width:36px; height:36px;
  border-radius:8px;
  cursor:pointer;
}
.form-row{display:grid; gap:6px; margin:clamp(8px, 1.6vh, 12px) 0}
label{font-weight:900; font-size:14px}
input, select{
  height:clamp(42px, 6.5vh, 46px);
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  padding:0 12px;
  font-size:16px; /* запобігає авто-зуму на iOS Safari при фокусі */
  font-family:inherit;
  width:100%;
  max-width:100%;
  appearance:none;
  -webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
input:focus, select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(213,0,0,.12);
}
input.field-error, select.field-error{
  border-color:#e11d48;
  box-shadow:0 0 0 3px rgba(225,29,72,.12);
}
.field-error-msg{
  display:none;
  color:#e11d48;
  font-size:12px;
  font-weight:600;
  margin-top:-2px;
}
.form-row.has-error .field-error-msg{display:block}
.form-note{color:#6b7280; font-size:11px; line-height:1.4; margin-top:10px}
#leadForm .btn{margin-top:4px}

@media (max-width:640px){
  .modal{padding:12px}
  .modal-dialog{
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:14px;
  }
  .modal-head{padding:12px 16px 0}
  .modal-body{padding:0 16px 14px}
}
footer a:hover{color: var(--brand); transition: ease-in-out .15s;}

/* Responsiveness */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr; padding-top:4px}
  .split-grid{grid-template-columns:1fr}
  .hero-content{text-align:center}
  .hero-cta{justify-content:center}
  .section{padding: 50px 15px}
  .header-inner{padding: 20px 15px;}
  .footer-grid{padding: 40px 15px;}
  .split-grid{padding: 40px 15px;}
  .strip{padding: 0 15px;}
}
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-block}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding: 50px 15px}
  .header-inner{padding: 20px 15px;}
  .footer-grid{padding: 40px 15px;}
  .split-grid{padding: 40px 15px;}
  .strip{padding: 0 15px;}
}
@media (max-width: 640px){
  .header-cabinet{display:none}
  .strip-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-title {font-size: 34px;line-height: 1.3;}
  .btn{padding:12px 16px}
  .section{padding: 50px 15px}
  .header-inner{padding: 20px 15px;}
  .footer-grid{padding: 40px 15px;}
  .split-grid{padding: 40px 15px;}
  .strip{padding: 0 15px;}
}

@media (max-width: 480px){
  .navbar {flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 10px;}
  .phone-btn {display: inline-block; font-size: 14px; padding: 8px 10px; white-space: nowrap;}
  .burger {font-size: 22px;}
  .header-inner {flex-direction: row; justify-content: space-between; align-items: center;padding: 15px;}
  .navbar .tabs {flex-wrap: nowrap; overflow-x: auto; font-size: 13px;}
  .navbar .tabs a {padding: 6px 8px; font-size: 13px; white-space: nowrap;}
  .tabs {flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px;}
  .tabs::-webkit-scrollbar { display: none;}
  .hero{padding: 120px 0 50px;}
  .hero-title {font-size: 34px;line-height: 1.2;}
  .hero p {font-size: 15px;}
  .btn {width: 100%; font-size: 15px; padding: 12px;}
  .section {padding: 40px 12px;}
  .cards { grid-template-columns: 1fr;gap: 16px;}
  .footer-grid {grid-template-columns: 1fr; padding: 30px 12px;}
  .burger {display: block; cursor: pointer;}
  .burger span {display: block; height: 3px; background: #000; margin: 4px 0; border-radius: 2px;}
  .hero-list{display:flex;flex-wrap: nowrap;flex-direction: row; align-items: center;}
  .hero-list li{display: block; margin: 0 auto; padding: 8px 5px; font-size: 14px; padding: 10px;}
  .contact-header{width: auto;}
}