/* ======================= AIR QUALITY — ViewTech Blue Theme ======================= */
*{box-sizing:border-box}
.aqx{
  /* matches your site’s deep-navy + sky-blue palette */
  --ink:#EAF2FF;                 /* text */
  --soft:#9DB4C9;                /* muted text */
  --bg:#0b1220;                  /* page */
  --paper:#0b1427;               /* cards */
  --line:rgba(142,212,255,.14);  /* borders */
  --brand:#2EA9FF;               /* sky blue */
  --brand-2:#8ED4FF;             /* pale blue */

  --radius:16px;
  --shadow-lg:0 26px 55px rgba(0,0,0,.55);
  --shadow-md:0 16px 34px rgba(0,0,0,.50);
  --shadow-sm:0 10px 22px rgba(0,0,0,.45);

  --btn-shadow:       0 16px 26px rgba(21,151,255,.28), 0 10px 18px rgba(1,8,20,.45), inset 0 1px 0 rgba(255,255,255,.22);
  --btn-shadow-hover: 0 22px 36px rgba(21,151,255,.36), 0 12px 20px rgba(1,8,20,.48), inset 0 1px 0 rgba(255,255,255,.24);

  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}
.aqx-wrap{width:min(1180px,92vw);margin:0 auto;padding:clamp(32px,4vw,56px) 0}

/* Headings & helpers */
.hd{margin-bottom:12px}
.hd h2{margin:0 0 6px;font-weight:800;font-size:clamp(24px,3.2vw,40px)}
.hd p{margin:0;color:var(--soft)}
.hd.center{text-align:center}

.btn{ display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn.pri{background:linear-gradient(180deg,#49BCFF 0%, #1597FF 100%);color:#fff;border:0;box-shadow:var(--btn-shadow)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.btn.pri:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(46,169,255,.28),var(--btn-shadow-hover)}
.btn.ghost{color:var(--brand-2);border:1px solid var(--brand-2);background:rgba(255,255,255,.03);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:rgba(116,192,255,.12)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.tag{display:inline-block;background:rgba(142,212,255,.18);color:#E6F6FF;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* ================= HERO ================= */
.aqx-hero{
  background:
    radial-gradient(1200px 360px at 22% -10%, rgba(46,169,255,.14), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0a1626 85%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.4vw,42px);align-items:center}
.aqx-hero h1{margin:12px 0 6px;font-size:clamp(28px,4.6vw,56px);font-weight:900;letter-spacing:-.01em}
.aqx-hero p{margin:0 0 12px;color:var(--soft);max-width:66ch}
.chipbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:rgba(255,255,255,.04)}
.chip:hover{color:var(--brand-2);border-color:rgba(46,169,255,.35)}
.hero-card{background:#0d182d;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
.hero-media{background:var(--img) center/cover no-repeat;aspect-ratio:16/10}
.hero-card__body{padding:16px}
.hero-card__body p{color:var(--soft)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ================= QUICK TILES ================= */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:grid;gap:6px;padding:16px;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.tile .ico{font-size:22px}
.tile strong{font-size:16px}
.tile p{margin:0;color:var(--soft);font-size:13px}
.tile:hover{border-color:rgba(46,169,255,.35)}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* ================= DUCTS ================= */
.split{display:grid;gap:clamp(18px,3.2vw,40px);align-items:center}
.photo{aspect-ratio:4/3;border-radius:20px;border:1px solid var(--line);background:var(--img) center/cover no-repeat;box-shadow:var(--shadow-md)}
.ring{border-radius:50%;aspect-ratio:1/1}
.steps{list-style:none;margin:10px 0 12px;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:rgba(116,192,255,.28)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#0b1427;box-shadow:var(--shadow-sm)}
.dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#49BCFF,#1597FF);color:#03101e;font-weight:900;box-shadow:0 6px 14px rgba(46,169,255,.38)}
.steps h4{margin:0 0 2px}
.steps p{margin:0;color:var(--soft)}
.note{border:1px dashed rgba(142,212,255,.35);border-radius:14px;background:#0f1b2f;padding:12px}
.note ul{margin:6px 0 0 18px}
@media (max-width:900px){.split,.split.reverse{grid-template-columns:1fr}}

/* ================= UV ================= */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.pills span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#0c1730}
.faq{border:1px solid var(--line);border-radius:14px;background:#0b1427;padding:10px 12px;margin:8px 0;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;color:#bfe2ff}
.faq p{margin:8px 0 0;color:var(--soft)}

/* ================= HUMIDITY ================= */
.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-md)}
.check{margin:0;padding:0;list-style:none}
.check li{position:relative;padding-left:20px;margin:6px 0;color:var(--soft)}
.check li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,#49BCFF,#1597FF)}
@media (max-width:900px){.compare{grid-template-columns:1fr}}

/* ================= CLEANERS ================= */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid4 .card h4{margin:0 0 6px}
.grid4 .card p{margin:0;color:var(--soft)}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}

.merv{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:16px}
.merv .bar{height:14px;border-radius:999px;background:rgba(116,192,255,.12);border:1px solid var(--line);overflow:hidden}
.merv .bar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#a7f3d0,#67e8f9,#38bdf8)}
