:root{
  --blue:#1e73be;
  --blue-dark:#1560a9;
  --orange:#ff6b35;
  --muted:#f4f7fb;
  --text:#222;
  --card:#fff;
  --radius:12px;
  /* Hero block height for desktop (adjusted to requested 500px) */
  --hero-min-height:500px;
  --hero-min-height-md:396px; /* ~10% reduced from 440px */
  --hero-min-height-sm:324px; /* ~10% reduced from 360px */
}
*{box-sizing:border-box}
body{font-family:'Poppins',Inter,Arial,Helvetica,sans-serif;margin:0;color:var(--text);background:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{background:var(--muted);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:relative}
.logo img{height:48px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.main-nav a{color:var(--text);text-decoration:none;font-weight:600}
.main-nav .nav-phone{display:none}

/* Submenu styles (desktop hover + mobile toggle) */
.has-submenu{position:relative}
.has-submenu > a{display:inline-flex;align-items:center;gap:8px}
.has-submenu .submenu{
  position:absolute;
  left:50%;
  top:110%;
  min-width:260px;
  background:var(--card);
  border-radius:12px;
  padding:6px 4px; /* slightly tighter padding */
  box-shadow:0 8px 30px rgba(2,6,23,0.08);
  z-index:45;
  visibility:hidden;
  opacity:0;
  transform:translate(-50%,-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  display:flex;
  flex-direction:column;
  gap:4px; /* reduced vertical gap between items */
}
.has-submenu:hover .submenu{visibility:visible;opacity:1;transform:translate(-50%,0)}
.has-submenu .submenu li{padding:6px 10px;border-radius:6px} /* smaller vertical padding */
.has-submenu .submenu a{color:var(--text);font-weight:400;display:block;line-height:1.25} /* normal weight + tighter line-height */
.has-submenu .submenu a:hover{color:var(--blue);background:linear-gradient(90deg,rgba(30,115,190,0.03),transparent)}

/* Animated submenu open for mobile when .open class is added */
.has-submenu .submenu.open{visibility:visible;opacity:1;transform:translateY(0);animation:submenu-in .18s ease-out}
@keyframes submenu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* arrow indicator for submenu */
.submenu-arrow{display:inline-block;width:10px;height:10px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(-45deg);margin-left:8px;transition:transform .18s ease,color .18s}
.has-submenu:hover > a .submenu-arrow{transform:rotate(90deg);border-color:var(--blue)}
.has-submenu > a .submenu-arrow.arrow-open{transform:rotate(90deg);border-color:var(--blue)}

.header-cta .phone{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600;line-height:1}

/* menu toggle (hamburger) - hidden on desktop, visible on small screens */
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:transparent;border:0;cursor:pointer;color:var(--text)}
.menu-toggle .menu-icon svg{width:20px;height:20px;display:block}

.hero{position:relative;padding:0;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.95));overflow:hidden;min-height:var(--hero-min-height);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:url('../img/hero.jpg');background-size:cover;background-position:center;opacity:0.35;filter:brightness(0.95);z-index:0;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0.85), rgba(255,255,255,0.95));z-index:1;pointer-events:none}
.hero-inner{position:relative;z-index:3;text-align:center;padding:40px 20px;max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-title{color:var(--blue);font-size:48px;margin:0 0 12px;text-transform:uppercase;letter-spacing:1px}
.hero-sub{margin:0 0 20px;color:#555;font-size:18px}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:600;line-height:1}
.btn-primary{background:var(--orange);color:#fff}
.btn-outline{border:2px solid var(--blue);color:var(--blue);background:transparent}

.about{padding:50px 0}
.section-title{font-size:28px;text-align:center;margin:0 0 10px}
.section-title.blue{color:var(--blue)}
.section-lead{text-align:center;color:#6b7280;margin:0 0 28px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.feature-card{background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(18,38,63,0.06);text-align:left}
.feature-card .icon{width:56px;height:56px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}
.feature-card .icon img{width:28px;height:28px}
.feature-card h3{margin:0 0 6px}
.feature-card p{margin:0;color:#666}

.services{padding:40px 0 60px}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.service{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(18,38,63,0.04);display:flex;flex-direction:column;gap:12px}
.service-icon{width:52px;height:52px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.service-icon img{width:28px;height:28px}
.service h4{margin:0 0 8px}
.service p{margin:0;color:#6b7280}

.cta{background:var(--blue);color:#fff;padding:46px 0;text-align:center}
.cta .hero-actions{justify-content:center}
.cta .btn-outline{border-color:#fff;color:#fff}

/* SEO block styles */
.seo-block{padding:34px 0;background:linear-gradient(180deg,#ffffff,#fbfdff);color:#16324a}
.seo-block .seo-title{font-size:22px;margin:0 0 12px;color:var(--blue)}
.seo-block h3{font-size:18px;margin:14px 0 8px;color:var(--blue-dark)}
.seo-block p{color:#334155;line-height:1.6;margin:0 0 12px}
.seo-block ul{margin:0 0 12px 20px;color:#334155}
.seo-block li{margin:6px 0}

/* FAQ styles */
.faq-block{padding:28px 0;background:#fff}
.faq-block h2{font-size:20px;color:var(--blue);margin:0 0 12px}
.faq-item{border-top:1px solid #eef3f7;padding:12px 0}
.faq-q{background:transparent;border:0;padding:8px 0;font-size:16px;font-weight:600;color:#0b4a8a;cursor:pointer;width:100%;text-align:left}
.faq-a{display:none;padding-top:6px;color:#334155;line-height:1.6}
.faq-item.open .faq-a{display:block}

/* Tighter spacing and typography to match screenshot */
.hero-inner{max-width:920px;padding:84px 20px}
.hero-title{font-size:48px;letter-spacing:0.2px}
.lead{color:#6b7280;margin-top:8px;font-size:18px}
.included-grid{grid-template-columns:repeat(2,1fr)}

.site-footer{background:linear-gradient(180deg,#0f5aa0,#0b4a8a);color:#e8f4ff;padding:36px 0 14px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.footer-logo{height:40px;margin-bottom:12px}
.footer-col h4{margin:0 0 10px}
.footer-col p, .footer-col li{color:#d7eafc}
.footer-services{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.footer-services a{color:#d7eafc;text-decoration:none;padding:4px 0;display:inline-block;line-height:1.15;transition:color .12s ease}
.footer-services a:hover{color:#ffffff}

.footer-address{margin-top:12px;color:#d7eafc}
.footer-address .address-value{color:#e8f4ff;margin-top:6px;font-weight:600}

.footer-hours{display:flex;flex-direction:column;gap:6px}
.footer-hours .hours-row{color:#d7eafc}
.footer-hours .hours-value{color:#e8f4ff;font-weight:600;margin-left:6px}
.footer-contacts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.footer-contact-link{display:inline-flex;align-items:center;gap:10px;color:#e8f4ff;text-decoration:none;background:rgba(255,255,255,0.03);padding:8px 10px;border-radius:10px;transition:all .15s ease}
.footer-contact-link img{width:18px;height:18px;flex:0 0 18px}
.footer-contact-link span{font-weight:600;color:#fff}
.footer-contact-link:hover{background:rgba(255,255,255,0.09);transform:translateY(-2px)}
.footer-socials{display:flex;gap:8px;margin-top:8px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:transparent;border:0;padding:4px;transition:transform .12s ease;opacity:0.95}
.social-link img{width:20px;height:20px;display:block;object-fit:contain}
.social-link:hover{transform:translateY(-2px) scale(1.03);opacity:1}
.footer-address{margin-top:12px;color:#d7eafc}
.footer-address .address-value{color:#e8f4ff;margin-top:6px;font-weight:600}
.footer-address .address-link{color:#e8f4ff;font-weight:600;text-decoration:none}
.footer-address .address-link:hover{text-decoration:underline}
.footer-col ul{list-style:none;padding:0;margin:0}
.bottom-note{padding:18px 0;color:#bfdaf4;font-size:14px;text-align:center}

@media (max-width:900px){
  .features,.services-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-title{font-size:40px}
  .hero{min-height:var(--hero-min-height-md)}
}
@media (max-width:560px){
  .main-nav{display:none}
  .header-inner{gap:12px}
  /* prevent header elements from wrapping to the next line */
  .header-inner{flex-wrap:nowrap}
  .logo{flex:0 0 auto}
  .header-cta{flex:0 0 auto}
  .features,.services-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-title{font-size:32px}
  .hero{min-height:var(--hero-min-height-sm)}
  .hero-inner{padding:24px}
  .footer-contacts{gap:6px}

  /* Header CTA adjustments on small screens: slightly smaller and shifted left */
  .header-cta .phone{
    /* reduce size ~10% */
    padding:9px 13px; /* was 10px 14px */
    font-size:90%;
    /* shift left a bit to align visually with compact header */
    margin-left:-14px;
    /* add right margin so button is not flush to the screen edge */
    margin-right:28px;
    /* avoid wrapping of phone text */
    white-space:nowrap;
  }

  /* small-screen specific rules kept in separate breakpoint (<=560px) */
}

/* Show hamburger and mobile nav for screens narrower than 750px. The dropdown is constrained
   to the container width (header-inner is positioned relative). */
@media (max-width:750px){
  .menu-toggle{display:inline-flex;margin-left:6px;color:var(--text)}
  /* position hamburger absolutely inside header container so it never overflows */
  .menu-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
  .main-nav{display:none}
  /* hide phone CTA on small screens (mobile) as requested */
  .header-cta .phone{display:none}
  /* show phone inside mobile nav */
  .main-nav .nav-phone{display:block}

  /* when menu open, show mobile nav as dropdown inside header container */
  body.menu-open .main-nav{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--card);
    padding:12px 20px;
    box-shadow:0 10px 30px rgba(2,6,23,0.08);
    z-index:50;
    border-radius:0 0 12px 12px;
  }
  /* stack nav items */
  body.menu-open .main-nav ul{flex-direction:column;gap:12px}
  body.menu-open .main-nav a{display:block;padding:10px 0;color:var(--text)}
}
/* Show header phone between 750px and 500px (to the left of hamburger), hide below 500px */
@media (max-width:750px) and (min-width:500px){
  .header-cta .phone{
    display:inline-flex;
    position:absolute;
    right:64px; /* leave room for hamburger (20px right + 40px width + 6px gap ~66px) */
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
    margin-right:0;
    z-index:55;
  }
}
@media (max-width:499px){
  .header-cta .phone{display:none}
}

/* Reduce font size for call buttons (tel links) and 'Оставить заявку' anchors across the site,
   excluding the header phone (which uses class .phone). */
a.btn[href^="tel:"]:not(.phone),
a.btn[href="#contacts"],
a.btn[href*="#contacts"]{
  font-size:90%;
}

/* Modal styles for request form */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1200}
.modal[aria-hidden="true"]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.55);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;background:var(--card);padding:20px;border-radius:12px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(2,6,23,0.18);z-index:2}
.modal-dialog h3{margin:0 0 12px}
.modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}
.modal .form-row{margin-bottom:12px}
.modal label{display:block;font-size:14px;color:#203047}
.modal input[type="text"],.modal input[type="tel"]{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6}
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;margin-right:8px}

/* Make service checkboxes layout inline within the modal */
fieldset.form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:0;padding:0;margin:0 0 12px}
fieldset.form-row legend{margin-right:8px;font-weight:600}
/* make checkboxes slightly larger for touch targets */
.checkbox-inline input[type="checkbox"]{transform:scale(1.05);margin:0 6px 0 0;width:18px;height:18px}

.modal-dialog{max-height:90vh;overflow:auto}
body.modal-open{overflow:hidden}

@media (max-width:560px){
  .modal-dialog{margin:16px;padding:14px;border-radius:10px}
}

@media (max-width:420px){
  /* Stack services vertically on very small screens for readability */
  fieldset.form-row{flex-direction:column;align-items:flex-start;gap:8px}
  fieldset.form-row legend{margin-bottom:6px}
  .checkbox-inline{display:flex;align-items:center;margin-right:0;margin-bottom:6px}
  .checkbox-inline input[type="checkbox"]{transform:scale(1.15)}

  /* Make modal fill more of the screen comfortably on very small devices */
  .modal-dialog{width:calc(100% - 32px);max-width:none;padding:12px}
}

/* Styles for buy page (included-costs, cards, brands, blue CTA) */
.included{padding:42px 0}
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.included-item{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(18,38,63,0.04);text-align:left;font-weight:600}

.included-item .included-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#f7fbff;border-radius:10px;margin-right:12px;vertical-align:middle}
.included-item img{width:22px;height:22px;display:block}

/* Item inner layout used on service pages (icon + text) */
.included-item .item-inner{display:flex;align-items:center;gap:12px}
.included-item .item-icon{width:44px;height:44px;border-radius:10px;background:#fff5f2;border:1px solid rgba(255,107,53,0.06);display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:700}
.included-item .item-icon::after{content:"✓";font-size:16px;line-height:1}
.included-item .item-body{font-weight:600;color:#16324a}

.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.card{background:var(--card);padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(18,38,63,0.05);display:flex;align-items:flex-start;gap:14px}
.card h3{margin:0 0 8px}
.card p{margin:0;color:#6b7280}
.card-body{font-weight:600;color:#16324a}
.card-icon{width:52px;height:52px;border-radius:12px;background:#f7fbff;display:flex;align-items:center;justify-content:center;flex:0 0 52px}
.card-icon img{width:26px;height:26px;display:block}

.card-icon{width:56px;height:56px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.card-icon img{width:28px;height:28px}

.content-block .card{max-width:980px;margin:22px auto;padding:28px;border-radius:14px;box-shadow:0 14px 40px rgba(18,38,63,0.06)}

.important-note{margin:20px 0}
.important-note .important-inner{display:flex;gap:16px;align-items:flex-start;background:#fff5f2;border:1px solid rgba(255,107,53,0.06);padding:18px;border-radius:12px}
.important-note .important-icon{width:44px;height:44px;border-radius:44px;background:#fff0ee;color:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700}
.important-note .important-body p{margin:6px 0 0;color:#6b3330}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.steps-grid .step{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border-radius:10px;box-shadow:0 8px 24px rgba(18,38,63,0.04)}
.steps-grid .step-num{width:36px;height:36px;border-radius:50%;background:var(--muted);color:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700}
.steps-grid .step-text{font-weight:600;color:#16324a}

.seo-panel{padding:36px 0;background:linear-gradient(180deg,#fbfdff,#ffffff)}
.seo-panel .seo-box{background:var(--card);padding:28px;border-radius:14px;box-shadow:0 12px 36px rgba(18,38,63,0.06)}
.seo-panel h2{margin:0 0 12px;color:var(--blue)}
.seo-panel p, .seo-panel li{color:#334155;line-height:1.6}

.brands-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.brand-item{background:#ffffff;padding:8px 12px;border-radius:999px;color:#0b4a8a;border:1px solid rgba(11,74,138,0.07);font-weight:700;box-shadow:0 6px 18px rgba(11,74,138,0.04)}

.blue-cta{background:linear-gradient(180deg,var(--blue-dark),var(--blue));color:#fff;padding:56px 0;text-align:center;margin-top:28px}
.blue-cta .btn-light{background:#fff;color:var(--blue);border-radius:8px;padding:10px 18px;font-weight:700}
.blue-cta .btn-outline{border-color:#fff;color:#fff}

/* Hero adjustments to match screenshot spacing */
.hero{min-height:var(--hero-min-height)}
.hero-inner{padding:80px 20px}
.hero-title{font-size:54px}
.hero-sub{font-size:20px}

@media (max-width:900px){
  .included-grid{grid-template-columns:repeat(2,1fr)}
  .cards-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .included-grid{grid-template-columns:1fr}
  .cards-row{grid-template-columns:1fr}
  .brand-item{padding:8px 10px}
}

/* Responsive tweaks for services and steps */
@media (max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
}