/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;font-size:14px;line-height:1.7;color:#444;background:#f0f1f5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ===== TOKENS ===== */
:root{
  --red:#cf2c2c;
  --red-dark:#b01e1e;
  --dark:#333;
  --gray:#7a7a7a;
  --border:#d8d8d8;
  --card:#4a4b50;
  --white:#fff;
  --light:#f0f1f5;
  --shadow:0 2px 8px rgba(0,0,0,.09);
}
.container{max-width:1200px;margin:0 auto;padding:0 1.2rem}

/* ===== HEADER ===== */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:.7rem 0;
  position:sticky;top:0;z-index:300;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Logo */
.logo{display:flex;align-items:center;gap:.5rem;line-height:1}
.logo-icon{width:38px;height:44px;flex-shrink:0}
.logo-texts{display:flex;flex-direction:column}
.logo-brand{font-size:1.85rem;font-weight:800;letter-spacing:-1.5px;line-height:1;color:var(--dark)}
.logo-brand span{color:var(--red)}
.logo-tag{font-size:.62rem;color:var(--gray);letter-spacing:.3px;margin-top:1px}

/* Header phone */
.header-phone{display:flex;align-items:center;gap:.8rem}
.hp-avatar{
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:#e8e8e8;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.hp-text{display:flex;flex-direction:column;align-items:flex-end}
.hp-label{font-size:.6rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:1px}
.hp-number{font-size:1.4rem;font-weight:800;color:var(--dark);letter-spacing:-.5px;line-height:1}
.hp-number a{color:inherit}

/* ===== NAV ===== */
.main-nav{background:var(--white);border-bottom:1px solid var(--border);padding:.45rem 0}
.nav-pill{
  display:flex;width:fit-content;margin:0 auto;
  border:1.5px solid #c8c8c8;border-radius:30px;
  padding:.18rem .3rem;gap:.1rem;
  overflow-x:auto;
}
.nav-pill a{
  padding:.42rem 1.1rem;
  font-size:.8rem;font-weight:600;color:#555;
  white-space:nowrap;border-radius:30px;
  transition:background .15s,color .15s;
}
.nav-pill a:hover,.nav-pill a.active{background:var(--dark);color:var(--white)}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(160deg,#f8f9fc 0%,#edf0f8 100%);
  border-bottom:1px solid var(--border);
  padding:2.5rem 0;
}
.hero-inner{display:flex;align-items:center;gap:2rem}
.hero-text{flex:1;min-width:0}
.hero-text h1{font-size:1.9rem;font-weight:800;color:var(--dark);line-height:1.25;margin-bottom:.5rem}
.hero-text .h1-sub{font-size:.93rem;color:#555;margin-bottom:.15rem}
.hero-text .h1-sub2{font-size:.85rem;color:var(--gray);margin-bottom:1.1rem}
.hero-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--white);border:1.5px solid #555;color:var(--dark);
  padding:.62rem 1.5rem;border-radius:7px;
  font-weight:700;font-size:.95rem;transition:all .15s;
}
.hero-btn:hover{background:var(--dark);color:var(--white);border-color:var(--dark)}
.hero-note{margin-top:.75rem;font-size:.73rem;color:var(--red);font-weight:600}

/* Hero map card */
.hero-map-card{
  flex:0 0 360px;min-height:230px;
  background:var(--white);border-radius:12px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:.5rem;
  position:relative;
}
.hero-map-card svg{width:100%;height:auto}

/* Hero phone overlay */
.hero-phone-overlay{
  position:absolute;top:12px;right:12px;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:.4rem .7rem;display:flex;align-items:center;gap:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.hpo-dot{width:28px;height:28px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.hpo-text{font-size:.65rem;line-height:1.3}
.hpo-text span{display:block;font-size:.75rem;font-weight:800;color:var(--red)}
.hpo-label{font-size:.58rem;color:var(--gray)}

/* ===== SERVICES SECTION ===== */
.services-section{background:var(--white);padding:2.5rem 0;border-bottom:1px solid var(--border)}
.section-head{text-align:center;margin-bottom:1.5rem}
.section-head h2{font-size:1.35rem;font-weight:800;color:var(--dark)}
.section-head .divider{width:55px;height:3px;background:var(--red);margin:.5rem auto 0;border-radius:2px}
.section-sub{text-align:center;color:var(--gray);font-size:.84rem;margin-top:.35rem}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:.6rem;margin-top:1.3rem;
}
.svc-card{
  background:var(--card);color:var(--white);
  border-radius:8px;padding:1.2rem .4rem .9rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-align:center;cursor:pointer;
  transition:background .17s,transform .17s;
  text-decoration:none;
}
.svc-card:hover{background:var(--red);transform:translateY(-2px)}
.svc-card-icon{
  width:54px;height:54px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.svc-card-icon svg{width:48px;height:48px}
.svc-card-label{font-size:.67rem;font-weight:700;line-height:1.35}

.svc-tagline{text-align:center;font-size:.95rem;font-weight:700;margin-top:1.3rem;color:var(--dark)}
.svc-sub{text-align:center;color:var(--red);font-size:.82rem;font-weight:600;margin-top:.25rem}

/* ===== FEATURES SECTION ===== */
.feat-section{background:var(--light);padding:2.5rem 0}
.feat-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-top:1.5rem;
}
.feat-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:1.4rem .8rem 1.2rem;text-align:center;
}
.feat-card-icon{
  width:60px;height:60px;border-radius:50%;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .7rem;color:var(--gray);
}
.feat-card-icon svg{width:28px;height:28px;stroke:var(--gray)}
.feat-card h3{font-size:.78rem;font-weight:700;color:var(--dark);margin-bottom:.35rem}
.feat-card p{font-size:.72rem;color:var(--gray)}

/* ===== CTA BAR ===== */
.cta-bar{background:var(--red);padding:1.1rem 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cta-inner span{color:var(--white);font-size:1rem;font-weight:700}
.cta-btn{
  background:var(--white);color:var(--red) !important;
  padding:.55rem 1.3rem;border-radius:50px;
  font-weight:800;font-size:.92rem;
  display:flex;align-items:center;gap:.45rem;
}
.cta-btn:hover{opacity:.88}

/* ===== REVIEWS ===== */
.reviews-section{background:var(--white);padding:2.5rem 0}
.reviews-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:1.5rem}
.review-card{border:1px solid var(--border);border-radius:8px;padding:1rem}
.review-stars{color:#f4b400;font-size:.9rem;margin-bottom:.35rem}
.review-name{font-size:.8rem;font-weight:700;color:var(--dark);margin-bottom:.4rem}
.review-text{font-size:.74rem;color:var(--gray)}

/* ===== MOBILE APP - not used ===== */

/* ===== FOOTER ===== */
.site-footer{background:#3c3c3c;color:#bbb;padding:2.5rem 0 0}
.footer-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;
  padding-bottom:2rem;border-bottom:1px solid #555;
}
.footer-col h4{
  color:var(--white);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:.8rem;
}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.35rem}
.footer-col ul li::before{content:'» ';color:#777}
.footer-col ul li a{font-size:.76rem;color:#aaa;transition:color .15s}
.footer-col ul li a:hover{color:var(--white)}
.footer-bottom{padding:1.1rem 0;text-align:center}
.footer-bottom p{font-size:.72rem;color:#888;margin-bottom:.3rem}

/* ===== STICKY PHONE ===== */
.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:var(--red);padding:.65rem;
}
.sticky-bar a{
  color:var(--white);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
body{padding-bottom:48px}

/* ===== INNER PAGE CHROME ===== */
.page-outer{padding:1.5rem 0}
.page-box{
  background:var(--white);border-radius:6px;
  box-shadow:var(--shadow);overflow:hidden;
}
.page-inner{padding:1.8rem 2rem}
.page-inner>h1{
  font-size:1.22rem;font-weight:800;color:var(--dark);
  padding-bottom:.9rem;margin-bottom:1.3rem;
  border-bottom:1.5px solid var(--border);
}

/* Content bordered box */
.c-box{
  border:1px solid var(--border);border-radius:6px;
  padding:1.4rem 1.5rem;margin-bottom:1.2rem;
}
.c-box p{font-size:.85rem;color:#555;margin-bottom:.85rem;text-align:justify}
.c-box p:last-child{margin-bottom:0}
.c-box h2{font-size:.88rem;font-weight:700;color:var(--dark);margin:.9rem 0 .4rem}
.c-box h3{font-size:.84rem;font-weight:700;color:var(--dark);margin:.8rem 0 .35rem}

/* Two-column layout */
.c-cols{display:flex;gap:1.5rem;align-items:flex-start}
.c-text{flex:1;min-width:0}
.c-img{flex:0 0 300px}
.c-img img{width:100%;border:1px solid var(--border);border-radius:5px}
.c-img-center{text-align:center;margin-bottom:1.2rem}
.c-img-center img{max-width:290px;margin:0 auto;border:1px solid var(--border);border-radius:5px}

/* Page red CTA — full width, rounded */
.page-cta-big{
  background:var(--red);border-radius:8px;
  padding:1.4rem 1.5rem;margin:1.3rem 0;
  text-align:center;
}
.page-cta-big .pcta-phone{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(0,0,0,.25);color:var(--white);
  padding:.5rem 1.3rem;border-radius:50px;
  font-weight:800;font-size:1.05rem;margin-bottom:.5rem;
}
.page-cta-big .pcta-label{color:var(--white);font-size:.95rem;font-weight:600}

/* Page red CTA — horizontal (Kombi style) */
.page-cta-row{
  background:var(--red);border-radius:8px;
  padding:1rem 1.5rem;margin:1.3rem 0;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;
}
.page-cta-row span{color:var(--white);font-weight:700;font-size:.95rem}
.page-cta-row a{
  background:var(--dark);color:var(--white) !important;
  padding:.5rem 1.2rem;border-radius:50px;
  font-weight:800;font-size:.88rem;
  display:flex;align-items:center;gap:.45rem;
}

/* Inline gray phone bar */
.phone-bar{
  background:#f5f5f5;border:1px solid var(--border);border-radius:6px;
  padding:.8rem 1.2rem;margin:1.1rem 0;
  font-size:.85rem;font-weight:600;color:var(--dark);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.phone-bar a{color:var(--red);font-weight:800;font-size:.9rem}

/* Section subtitle heading */
.s-label{
  font-size:.72rem;font-weight:800;letter-spacing:1px;
  color:var(--dark);text-transform:uppercase;
  margin:1.8rem 0 .8rem;
  padding-bottom:.4rem;border-bottom:2px solid var(--border);
}

/* Features mini row */
.feat-mini-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;
  padding:1.5rem 0;border-top:1px solid var(--border);margin-top:1rem;
}
.fm-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:80px;text-align:center}
.fm-icon{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray);
}
.fm-icon svg{width:22px;height:22px;stroke:var(--gray)}
.fm-label{font-size:.65rem;font-weight:700;color:var(--gray)}

/* Device icon mini cards */
.dev-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.dev-card{
  background:var(--card);color:var(--white);
  border-radius:8px;padding:.75rem .7rem;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  min-width:100px;flex:1;text-align:center;
  text-decoration:none;transition:background .15s;
}
.dev-card:hover{background:var(--red)}
.dev-card>svg{width:38px;height:38px}
.dev-card span{font-size:1.45rem}
.dev-card small{font-size:.63rem;font-weight:700;line-height:1.35}

/* City / district grid */
.city-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.3rem .6rem;
}
.city-list a{
  font-size:.8rem;color:#555;padding:.15rem 0;display:block;transition:color .13s;
}
.city-list a:hover{color:var(--red);text-decoration:underline}

/* Brand grid */
.brand-box{border:1px solid var(--border);border-radius:6px;padding:1.5rem}
.brand-box h2{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.brand-box>p{font-size:.82rem;color:var(--gray);margin-bottom:1.1rem}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.3rem}
.brand-link{font-size:.82rem;color:#555;padding:.22rem .4rem;border-radius:3px;display:block;transition:color .13s,background .13s}
.brand-link:hover{color:var(--red);background:#fff0f0}

/* Breadcrumb */
.breadcrumb{font-size:.74rem;color:var(--gray);margin-bottom:.85rem}
.breadcrumb a{color:var(--gray)}
.breadcrumb a:hover{color:var(--red);text-decoration:underline}
.breadcrumb span{margin:0 .3rem}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-title{font-size:.97rem;font-weight:700;margin-bottom:1rem}
.ci-item{display:flex;gap:.7rem;margin-bottom:.9rem}
.ci-dot{
  width:32px;height:32px;border-radius:50%;
  background:var(--dark);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;margin-top:.1rem;
}
.ci-label{font-size:.72rem;color:var(--gray)}
.ci-val{font-size:1.05rem;font-weight:800;color:var(--dark)}
.ci-sub{font-size:.71rem;color:var(--gray)}
.contact-meta{font-size:.76rem;color:#888;margin-top:.9rem}
.contact-meta div{display:flex;gap:.5rem;margin-bottom:.28rem}
.contact-meta label{color:#bbb;min-width:100px}
.map-box{border:1px solid var(--border);border-radius:5px;overflow:hidden;height:280px;background:#e5e8f0;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:2rem}
.cf-wrap{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:1.5rem}
.cf-head{background:#c0c0c0;color:var(--white);padding:.6rem 1rem;font-weight:700;font-size:.82rem}
.cf-body{padding:1.1rem;display:grid;gap:.75rem}
.cf-row label{font-size:.76rem;font-weight:600;display:block;margin-bottom:.3rem}
.cf-row input,.cf-row textarea{
  width:100%;border:1px solid var(--border);border-radius:3px;
  padding:.42rem .65rem;font-family:inherit;font-size:.81rem;outline:none;
  transition:border-color .13s;
}
.cf-row input:focus,.cf-row textarea:focus{border-color:#888}
.cf-row textarea{min-height:88px;resize:vertical}
.btn-send{
  background:#9e9e9e;color:var(--white);border:none;
  padding:.45rem 1.4rem;border-radius:3px;font-size:.81rem;font-weight:700;cursor:pointer;
}
.btn-send:hover{background:var(--dark)}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .c-cols{flex-direction:column-reverse}
  .c-img{flex:0 0 auto;width:100%}
  .nav-pill{overflow-x:auto;width:100%;border-radius:0;border-left:0;border-right:0}
}
@media(max-width:700px){
  .hero-inner{flex-direction:column}
  .hero-map-card{display:none}
  .hero-text h1{font-size:1.45rem}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{flex-direction:column;text-align:center}
  .page-cta-row{flex-direction:column;align-items:flex-start}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .page-inner{padding:1.2rem}
  .hp-avatar{display:none}
  .city-list{grid-template-columns:repeat(2,1fr)}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .dev-card{min-width:80px}
  .reviews-grid{grid-template-columns:1fr}
}