/*file name: ventilation-systems_style.css*/

/* =========================
   BASE RESET
========================= */
*{margin:0;padding:0;}
body{  --primary-dark: #2563eb;background:var(--bg);color:var(--dark);line-height:1.7;}
section{width: 100%;padding:50px 10px;}
.container{width: 100%;max-width:var(--max-width);margin:auto;}
h1,h2,h3{color:var(--dark);line-height:1.15;font-weight:800;}
h1{font-size:clamp(42px,6vw,72px);margin-bottom:24px;}
h2{font-size:clamp(30px,4vw,48px);margin-bottom:22px;}
h3{font-size:22px;margin-bottom:14px;}
p{color:var(--muted);margin-bottom:16px;}
ul{list-style:none;padding-left:0;}
li{margin-bottom:10px;}


/* =========================
   HERO
========================= */
.hero {
  min-height: 90vh;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(
    rgba(15,23,42,0.75),
    rgba(15,23,42,0.75)
  );
  z-index:1;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.85);
}

.background-image-hero {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-label {
  display: inline-block;
  font-size: 14px;
  opacity: .8;
  margin-bottom: 12px;
}

.hero-subtitle {
  max-width: 850px;
  margin: 20px auto;
  color: rgba(255,255,255,.85);
}

.hero-list {
  list-style: none;
  max-width: 700px;
  margin: 20px auto;
}

.hero-list li {
  background: rgba(255,255,255,.08);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
}

/* buttons */
.hero-btn {
  padding: 16px 28px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.hero-btn:hover {
  transform: translateY(-2px);
}

/* stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}

.stat {
  background: rgba(255,255,255,.06);
  padding: 14px;
  border-radius: 12px;
}

/* =========================
   SECTION HEADER
========================= */
.section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-label {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================
   GRIDS (RESPONSIVE FIXED)
========================= */
.systems-grid,
.advantages-grid,
.process-grid,
.pricing-grid,
.cities-grid,
.brands-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

/* adaptive instead of fixed repeat(4,1fr) */
.systems-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.advantages-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.process-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cities-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center;
}

.brands-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  text-align: center;
}

.brand-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  min-height:120px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.3s;
  text-decoration:none;
}

.brand-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.brand-card img{
  width:100%;
  max-width:140px;
  height:60px;
  object-fit:contain;
  display:block;
}

/* =========================
   CARDS (UNIFIED SYSTEM)
========================= */
.system-card,
.price-card,
.process-card,
.case-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  transition: .25s;
}

.price-card h3{
  color:var(--dark);
}

.price-card p{
  color:var(--primary-dark);
  font-weight:700;
  font-size:24px;
}
.section-dark .price-card h3{
  color:var(--dark);
}

.section-dark .price-card p{
  color:var(--primary-dark);
  font-weight:700;
  font-size:24px;
}

.system-card:hover,
.price-card:hover,
.case-card:hover,
.process-card:hover {
  transform: translateY(-4px);
}

/* dark variant */
.advantage-card {
  background: #111c33;
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
}

/* =========================
   SECTION DARK
========================= */
.section-dark {
  background: var(--dark);
  color: #fff;
}

.section-dark p {
  color: rgba(255,255,255,.75);
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

/* =========================
   LINKS GRID (CITIES)
========================= */
.cities-grid a {
  display: block;
  padding: 12px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  transition: .2s;
}

.cities-grid a:hover {
  background: #1e293b;
}

/* =========================
   FAQ
========================= */
.faq-item {
  background: rgba(255,255,255,.05);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  .hero {
    text-align: left;
    padding: 80px 10px;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 {
    font-size: 32px;
  }
}