*{box-sizing:border-box}
:root{
  --blue-dark:#003e9a;
  --blue:#0b66d0;
  --blue-light:#14b9f3;
  --navy:#0e2f68;
  --text:#102033;
  --muted:#5c7188;
  --bg:#f5fbff;
  --border:#d7e8f8;
  --green:#22c55e;
  --white:#fff;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.8}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:64px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px;color:#294762;font-size:15px;font-weight:700}
.nav-links a:hover{color:var(--blue)}
.nav-cta{background:var(--green);color:#fff;padding:10px 18px;border-radius:999px;font-weight:900;box-shadow:0 10px 22px rgba(34,197,94,.22)}

.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 18%,#48c7ff 0,#0b66d0 35%,#003e9a 78%);color:white;padding:92px 0 72px}
.hero:before{content:"";position:absolute;inset:auto -180px -260px auto;width:620px;height:620px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:white;padding:7px 14px;font-weight:900;font-size:14px}
.badge.light{background:#e9f7ff;border-color:#cfefff;color:var(--blue-dark)}
.hero h1{font-size:clamp(36px,5vw,62px);line-height:1.25;margin:16px 0 18px;letter-spacing:-1px}
.lead{font-size:20px;color:#e9f7ff;margin:0 0 28px;max-width:720px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:14px 25px;font-weight:900;transition:.2s;border:2px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:white;box-shadow:0 14px 34px rgba(11,93,44,.25)}
.btn-outline{background:white;color:var(--blue-dark)}
.btn-outline.white{background:transparent;border-color:rgba(255,255,255,.5);color:white}
.quick-info{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.quick-info span{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);border-radius:999px;padding:8px 12px;font-weight:700;color:#eefbff}

.hero-visual{min-height:430px;position:relative}
.visual-card{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);box-shadow:0 28px 80px rgba(0,0,0,.2);border-radius:34px;min-height:330px;padding:44px;display:flex;align-items:center;justify-content:center}
.ac-unit{position:relative;width:390px;height:130px;background:linear-gradient(180deg,#fff,#e8f4fb);border-radius:24px;box-shadow:0 20px 55px rgba(0,0,0,.22)}
.ac-display{position:absolute;right:32px;top:24px;width:58px;height:20px;background:#cbdae7;border-radius:12px}
.vent{position:absolute;right:35px;left:35px;bottom:28px;height:22px;border-radius:999px;background:#2d475f}
.air-wave{position:absolute;height:5px;border-radius:999px;background:#b7ecff;bottom:-30px;opacity:.85}
.air-wave.one{right:55px;width:160px}
.air-wave.two{right:115px;width:210px;bottom:-58px}
.air-wave.three{right:80px;width:120px;bottom:-86px}
.status-chip{position:absolute;top:36px;right:28px;background:white;color:var(--blue-dark);border-radius:999px;padding:10px 16px;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.16)}
.mini-card{position:absolute;background:white;color:var(--navy);border-radius:22px;padding:14px 18px;box-shadow:0 18px 45px rgba(0,0,0,.16);min-width:150px}
.mini-card strong{display:block;font-size:20px;color:var(--blue-dark)}
.mini-card span{font-size:13px;color:var(--muted)}
.card-home{right:8px;bottom:42px}
.card-central{left:10px;top:34px}
.card-vrf{left:70px;bottom:12px}

.section{padding:74px 0}
.stats-section{padding:28px 0;background:white}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stats div{padding:22px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 12px 38px rgba(0,62,154,.06);text-align:center}
.stats strong{display:block;color:var(--blue-dark);font-size:24px}
.stats span{color:var(--muted)}
.section-head{text-align:center;max-width:780px;margin:0 auto 38px}
.section-head.align-right{text-align:right;margin:0}
.section h2{font-size:clamp(28px,3vw,42px);line-height:1.35;color:var(--blue-dark);margin:14px 0 12px}
.section-head p,.systems-grid p{color:var(--muted);margin:0}

.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card,.system-cards article,.process div,.review-grid article,.contact-card,.why-box{background:white;border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:0 18px 50px rgba(0,62,154,.07)}
.service-icon,.system-icon{width:58px;height:58px;border-radius:18px;background:#eaf8ff;display:grid;place-items:center;font-size:30px;margin-bottom:14px}
.service-card h3,.system-cards h3,.process h3{margin:0 0 8px;color:var(--navy);font-size:21px}
.service-card p,.system-cards p,.process p,.review-grid p,.why-box p,.contact-card p{margin:0;color:var(--muted)}

.systems-section{background:#edf8ff}
.systems-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.system-cards{display:grid;gap:16px}
.system-cards article{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.system-cards article h3,.system-cards article p{grid-column:2}
.system-icon{grid-row:1 / span 2;margin:0}

.process-section{background:white}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.process span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue-dark);color:white;font-weight:900;margin-bottom:14px}

.why-section{background:linear-gradient(135deg,#003e9a,#0b66d0);color:white}
.why-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.why-box,.contact-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);box-shadow:none}
.why-box h2,.contact-card h3{color:white;margin-top:12px}
.why-box p,.contact-card p{color:#eaf8ff}
.why-box ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.why-box li{position:relative;padding-right:28px;color:#f1fbff}
.why-box li:before{content:"✓";position:absolute;right:0;color:#8df6bb;font-weight:900}
.contact-card{display:flex;flex-direction:column;justify-content:center}
.phone-number{display:block;background:white;color:var(--blue-dark);border-radius:18px;padding:16px;text-align:center;font-weight:900;font-size:26px;margin:20px 0}
.full{width:100%}

.areas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.areas span{background:white;border:1px solid var(--border);color:var(--navy);font-weight:900;border-radius:999px;padding:10px 18px;box-shadow:0 10px 30px rgba(0,62,154,.05)}

.reviews-section{background:white}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stars{color:#f6a800;font-size:20px;letter-spacing:2px}
.review-grid strong{display:block;color:var(--blue-dark);margin-top:14px}

.final-cta{padding:70px 0;background:#f5fbff}
.final-box{text-align:center;background:linear-gradient(135deg,#003e9a,#14b9f3);border-radius:36px;padding:48px 26px;color:white;box-shadow:0 25px 70px rgba(0,62,154,.22)}
.final-box h2{font-size:clamp(30px,4vw,46px);margin:16px 0 12px;line-height:1.35}
.final-box p{margin:0 0 24px;color:#eefbff;font-size:18px}

.floating-whatsapp{position:fixed;left:22px;bottom:22px;background:var(--green);color:white;padding:14px 20px;border-radius:999px;font-weight:900;z-index:70;box-shadow:0 16px 38px rgba(0,0,0,.22)}
.footer{background:#061d36;color:#cfe5fa;padding:32px 0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer img{height:70px;background:white;border-radius:18px;padding:5px}
.footer p{margin:10px 0 0}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:white;font-weight:700}

@media(max-width:980px){
  .nav-links{display:none}
  .hero-grid,.systems-grid,.why-grid{grid-template-columns:1fr}
  .service-grid,.process{grid-template-columns:repeat(2,1fr)}
  .hero-visual{min-height:360px}
}
@media(max-width:680px){
  .nav{height:74px}
  .brand img{height:54px}
  .hero{padding:58px 0}
  .hero h1{font-size:34px}
  .lead{font-size:17px}
  .hero-actions .btn{width:100%}
  .stats,.service-grid,.process,.review-grid{grid-template-columns:1fr}
  .visual-card{min-height:260px;padding:22px}
  .ac-unit{width:280px;height:105px}
  .mini-card{display:none}
  .footer-grid{display:block;text-align:center}
  .footer-links{justify-content:center;margin-top:18px}
  .phone-number{font-size:20px}
}

/* --- phone display fix --- */
.ltr-phone{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  letter-spacing:1px;
  text-align:center;
}

/* --- animations --- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(32px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeRight{
  from{opacity:0;transform:translateX(36px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeLeft{
  from{opacity:0;transform:translateX(-36px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes floatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 12px 30px rgba(34,197,94,.22)}
  50%{box-shadow:0 18px 42px rgba(34,197,94,.38)}
}
.animate-in{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease, transform .8s ease;
  will-change:transform, opacity;
}
.animate-in.is-visible{
  opacity:1;
  transform:translateY(0);
}
.hero-enter-left{animation:fadeLeft .95s ease both}
.hero-enter-right{animation:fadeRight 1.05s ease both}
.animate-group > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.animate-group > *.is-visible{
  opacity:1;
  transform:translateY(0);
}
.nav-cta,
.floating-whatsapp,
.contact-card .btn-primary{
  animation:pulseGlow 2.8s ease-in-out infinite;
}
.status-chip,
.card-home,
.card-central,
.card-vrf{
  animation:floatSoft 4s ease-in-out infinite;
}
.card-home{animation-delay:.2s}
.card-central{animation-delay:.6s}
.card-vrf{animation-delay:1s}
.service-card:hover,
.system-cards article:hover,
.review-grid article:hover,
.process div:hover,
.stats div:hover,
.areas span:hover{
  transform:translateY(-6px);
  transition:transform .25s ease;
}

.trust-section{
  background:#ffffff;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.trust-grid article{
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  padding:26px;
  box-shadow:0 18px 50px rgba(0,62,154,.07);
  text-align:center;
}
.trust-grid span{
  width:60px;
  height:60px;
  border-radius:20px;
  background:#eaf8ff;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  font-size:30px;
}
.trust-grid h3{
  margin:0 0 8px;
  color:var(--navy);
}
.trust-grid p{
  margin:0;
  color:var(--muted);
}
.faq-section{
  background:#edf8ff;
}
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.faq-grid details{
  background:white;
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px 22px;
  box-shadow:0 12px 38px rgba(0,62,154,.06);
}
.faq-grid summary{
  cursor:pointer;
  color:var(--blue-dark);
  font-weight:900;
  font-size:18px;
}
.faq-grid p{
  color:var(--muted);
  margin:12px 0 0;
}
.emergency-section{
  padding:44px 0;
  background:#ffffff;
}
.emergency-box{
  background:linear-gradient(135deg,#061d36,#0b66d0);
  color:white;
  border-radius:32px;
  padding:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  box-shadow:0 25px 70px rgba(0,62,154,.18);
}
.emergency-box h2{
  color:white;
  margin:14px 0 8px;
  font-size:clamp(26px,3vw,38px);
}
.emergency-box p{
  margin:0;
  color:#eaf8ff;
}
@media(max-width:980px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .emergency-box{display:block;text-align:center}
  .emergency-box .btn{margin-top:20px}
}
@media(max-width:680px){
  .trust-grid,.faq-grid{grid-template-columns:1fr}
}

/* --- premium visual upgrade v5 --- */
:root{
  --font-main:"Cairo", Tahoma, Arial, sans-serif;
  --font-head:"Tajawal", "Cairo", Tahoma, Arial, sans-serif;
}
body{
  font-family:var(--font-main);
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.nav-links,.btn,.badge,.phone-number{
  font-family:var(--font-head);
}
h1,h2{
  font-weight:900;
  letter-spacing:-.8px;
}
.hero{
  isolation:isolate;
}
.hero-effects{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-effects span{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), rgba(20,185,243,.08) 60%, transparent 70%);
  filter:blur(2px);
  animation:drift 11s ease-in-out infinite;
}
.hero-effects span:nth-child(1){right:8%;top:14%}
.hero-effects span:nth-child(2){left:12%;top:38%;animation-delay:2.2s;transform:scale(.75)}
.hero-effects span:nth-child(3){left:36%;bottom:-50px;animation-delay:4.4s;transform:scale(1.25)}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(28px,-26px,0) scale(1.12)}
}
.headline-gradient{
  background:linear-gradient(90deg,#ffffff 0%,#e9fbff 42%,#b7ecff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.section h2{
  position:relative;
}
.section h2:after{
  content:"";
  display:block;
  width:74px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue-light),var(--blue-dark));
  margin:14px auto 0;
}
.section-head.align-right h2:after{
  margin-right:0;
}
.service-card,.system-cards article,.process div,.review-grid article,.stats div,.trust-grid article,.faq-grid details{
  position:relative;
  overflow:hidden;
}
.service-card:before,.system-cards article:before,.trust-grid article:before,.faq-grid details:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(20,185,243,.09) 45%,transparent 75%);
  transform:translateX(120%);
  transition:transform .65s ease;
  pointer-events:none;
}
.service-card:hover:before,.system-cards article:hover:before,.trust-grid article:hover:before,.faq-grid details:hover:before{
  transform:translateX(-120%);
}
.service-icon,.system-icon,.trust-grid span{
  box-shadow:inset 0 0 0 1px rgba(20,185,243,.25),0 10px 25px rgba(0,62,154,.08);
}
.btn{
  position:relative;
  overflow:hidden;
}
.btn:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:42px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transform:translateX(170px) skewX(-20deg);
  opacity:0;
}
.btn:hover:after{
  opacity:1;
  animation:shine .75s ease;
}
@keyframes shine{
  from{right:-80px}
  to{right:120%}
}
.cool-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:34px;
  pointer-events:none;
}
.cool-particles i{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(183,236,255,.85);
  box-shadow:0 0 18px rgba(183,236,255,.8);
  animation:snowFloat 6s linear infinite;
}
.cool-particles i:nth-child(1){right:18%;bottom:22%;animation-delay:0s}
.cool-particles i:nth-child(2){right:42%;bottom:12%;animation-delay:1.4s}
.cool-particles i:nth-child(3){left:22%;bottom:18%;animation-delay:2.8s}
.cool-particles i:nth-child(4){left:44%;bottom:8%;animation-delay:4s}
@keyframes snowFloat{
  0%{transform:translateY(30px) scale(.7);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(-190px) scale(1.1);opacity:0}
}
.ac-unit{
  animation:acGlow 3.8s ease-in-out infinite;
}
@keyframes acGlow{
  0%,100%{box-shadow:0 20px 55px rgba(0,0,0,.22),0 0 0 rgba(183,236,255,0)}
  50%{box-shadow:0 24px 70px rgba(0,0,0,.25),0 0 42px rgba(183,236,255,.36)}
}
.air-wave{
  animation:airMove 2.6s ease-in-out infinite;
}
.air-wave.two{animation-delay:.25s}
.air-wave.three{animation-delay:.5s}
@keyframes airMove{
  0%,100%{opacity:.55;transform:translateX(0)}
  50%{opacity:1;transform:translateX(-18px)}
}

/* FAQ independent columns: opening one item will not stretch the item beside it */
.faq-independent{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.faq-column{
  display:grid;
  gap:18px;
  align-content:start;
}
.faq-grid details{
  align-self:start;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-grid details[open]{
  border-color:rgba(20,185,243,.65);
  box-shadow:0 18px 48px rgba(0,62,154,.12);
}
.faq-grid summary{
  list-style:none;
  position:relative;
  padding-left:34px;
}
.faq-grid summary::-webkit-details-marker{
  display:none;
}
.faq-grid summary:after{
  content:"⌄";
  position:absolute;
  left:0;
  top:0;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf8ff;
  color:var(--blue-dark);
  transition:transform .25s ease, background .25s ease;
}
.faq-grid details[open] summary:after{
  transform:rotate(180deg);
  background:var(--blue-light);
  color:white;
}
.faq-grid details p{
  animation:faqText .25s ease;
}
@keyframes faqText{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.phone-number{
  font-size:30px;
  letter-spacing:1.5px;
  box-shadow:0 14px 35px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.4);
}
.final-box,.emergency-box{
  position:relative;
  overflow:hidden;
}
.final-box:before,.emergency-box:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.22),transparent 32%),
             radial-gradient(circle at 78% 62%,rgba(183,236,255,.2),transparent 34%);
  animation:drift 12s ease-in-out infinite;
  pointer-events:none;
}
.final-box > *, .emergency-box > *{
  position:relative;
  z-index:1;
}
@media(max-width:680px){
  .faq-independent{grid-template-columns:1fr}
  .headline-gradient{color:white;background:none}
}

.nowrap{
  white-space:nowrap;
  unicode-bidi:isolate;
}


/* --- creative airflow animation v7 --- */
.hero-air-ribbons{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-air-ribbons i{
  position:absolute;
  right:-18%;
  width:60%;
  height:180px;
  border-radius:999px;
  opacity:.16;
  filter:blur(2px);
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(183,236,255,.45), rgba(20,185,243,.08));
  animation:windSweep 11s linear infinite;
}
.hero-air-ribbons i:nth-child(1){
  top:14%;
  animation-duration:12s;
}
.hero-air-ribbons i:nth-child(2){
  top:38%;
  height:150px;
  animation-delay:3s;
  animation-duration:14s;
  opacity:.12;
}
.hero-air-ribbons i:nth-child(3){
  top:64%;
  height:130px;
  animation-delay:6s;
  animation-duration:16s;
  opacity:.1;
}
@keyframes windSweep{
  0%{transform:translateX(0) translateY(0) scale(1)}
  100%{transform:translateX(-170%) translateY(-10px) scale(1.06)}
}

.ac-unit{
  overflow:visible;
}

.airflow-stream{
  position:absolute;
  left:34px;
  right:34px;
  top:92px;
  height:185px;
  pointer-events:none;
  z-index:0;
}

.stream-line{
  position:absolute;
  right:10%;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(191,240,255,.95), rgba(120,212,255,.42), rgba(255,255,255,0));
  filter:blur(.2px);
  transform-origin:right center;
  animation:airFlowMove 2.8s ease-in-out infinite;
}

.line-1{
  top:6px;
  width:78%;
}
.line-2{
  top:46px;
  width:92%;
  animation-delay:.4s;
}
.line-3{
  top:88px;
  width:82%;
  animation-delay:.8s;
}
.line-4{
  top:130px;
  width:70%;
  animation-delay:1.2s;
}

.stream-line:before,
.stream-line:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
}
.stream-line:before{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform:translateX(0);
  animation:airShine 2.3s linear infinite;
}
.stream-line:after{
  top:-18px;
  height:46px;
  opacity:.22;
  filter:blur(14px);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(154,232,255,.8), rgba(255,255,255,0));
}

.stream-mist{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.88), rgba(176,236,255,.38), transparent 72%);
  filter:blur(1px);
  animation:mistFloat 4.4s linear infinite;
}
.mist-1{top:12px; right:34%; animation-delay:.2s}
.mist-2{top:74px; right:46%; animation-delay:1.3s}
.mist-3{top:126px; right:28%; animation-delay:2.4s}

@keyframes airFlowMove{
  0%,100%{
    opacity:.35;
    transform:translateX(0) scaleX(.92);
  }
  50%{
    opacity:1;
    transform:translateX(-18px) scaleX(1);
  }
}

@keyframes airShine{
  0%{transform:translateX(130%)}
  100%{transform:translateX(-130%)}
}

@keyframes mistFloat{
  0%{
    opacity:0;
    transform:translate3d(0, 0, 0) scale(.5);
  }
  20%{
    opacity:.85;
  }
  100%{
    opacity:0;
    transform:translate3d(-120px, 12px, 0) scale(1.35);
  }
}

/* stronger cool look in hero visual */
.visual-card.main-card{
  position:relative;
  backdrop-filter:blur(6px);
}
.visual-card.main-card:before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  pointer-events:none;
}
.visual-card.main-card:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:68%;
  height:36px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(128,220,255,.55), rgba(128,220,255,0) 70%);
  filter:blur(18px);
  pointer-events:none;
}

/* little hover polish */
.hero-visual:hover .stream-line{
  animation-duration:1.9s;
}
.hero-visual:hover .stream-mist{
  filter:blur(0);
}

@media(max-width:680px){
  .hero-air-ribbons i{
    width:85%;
  }
  .airflow-stream{
    top:78px;
    height:145px;
  }
  .stream-line{
    height:10px;
  }
  .stream-line:after{
    top:-14px;
    height:34px;
  }
}


/* --- v8 fixes: abbreviation rendering + FAQ icon polish --- */
.abbr-combo{
  display:inline-block;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
  font-family:"Tajawal","Cairo",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.5px;
}

/* Better rendering inside paragraphs/cards */
.trust-grid p .abbr-combo,
.system-cards p .abbr-combo,
.why-box li .abbr-combo,
.review-grid p .abbr-combo{
  color:var(--blue-dark);
}

/* FAQ icon redesign for RTL */
.faq-grid summary{
  padding-right:52px;
  padding-left:0;
  min-height:32px;
  display:flex;
  align-items:center;
}

.faq-grid summary:after{
  content:"+";
  position:absolute;
  right:0;
  left:auto;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eaf8ff,#d8efff);
  color:var(--blue-dark);
  border:1px solid rgba(11,102,208,.12);
  box-shadow:0 8px 18px rgba(0,62,154,.08);
  font-size:24px;
  font-weight:900;
  line-height:1;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.faq-grid details[open] summary:after{
  content:"−";
  transform:translateY(-50%) rotate(0deg);
  background:linear-gradient(135deg,var(--blue-light),var(--blue));
  color:#fff;
  box-shadow:0 12px 22px rgba(11,102,208,.18);
}

/* Remove old tiny marker feel */
.faq-grid summary::-webkit-details-marker{
  display:none;
}

/* Make FAQ cards more premium */
.faq-grid details{
  border-radius:26px;
}
.faq-grid details:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,62,154,.10);
}

/* Slightly stronger text styling on mobile trust cards */
@media(max-width:680px){
  .trust-grid p{
    font-size:15px;
    line-height:1.9;
  }
  .abbr-combo{
    font-size:1.05em;
  }
}

/* --- v9 trust heading + better VRF/VRV badge --- */
.trust-special-card p{
  margin-bottom:14px;
}
.abbr-center-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:8px;
}
.abbr-combo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:10px 18px;
  border-radius:22px;
  background:linear-gradient(180deg,#eefaff 0%, #dff3ff 100%);
  border:1px solid rgba(20,185,243,.35);
  box-shadow:0 10px 24px rgba(0,62,154,.08);
  color:var(--blue-dark);
  font-family:"Poppins","Tajawal","Cairo",Arial,sans-serif;
  font-size:clamp(20px,2vw,28px);
  font-weight:800;
  letter-spacing:.8px;
  line-height:1.2;
  text-align:center;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}
.trust-special-card .abbr-combo{
  margin-inline:auto;
}

/* --- v10 clean VRF/VRV styling --- */
.abbr-center-wrap{
  display:none !important;
}
.abbr-combo{
  display:inline !important;
  min-width:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:inherit !important;
  font-family:inherit !important;
  font-size:1em !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  line-height:inherit !important;
  text-align:inherit !important;
  white-space:nowrap !important;
  unicode-bidi:isolate !important;
}
h2 .abbr-combo,
h3 .abbr-combo,
.lead .abbr-combo,
.stats .abbr-combo,
.system-cards .abbr-combo,
.trust-grid .abbr-combo,
.faq-grid .abbr-combo{
  color:inherit !important;
}

/* --- v12 hero mini-card typography upgrade --- */
.mini-card{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 40px rgba(7,41,84,.18);
}
.mini-card strong{
  display:block;
  font-family:"Tajawal","Cairo",Tahoma,Arial,sans-serif;
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  color:var(--blue-dark);
  margin-bottom:6px;
}
.mini-card span{
  display:block;
  font-family:"Inter","Poppins",Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  color:#6b7e94;
  letter-spacing:.2px;
}
.card-vrf strong,
.card-home strong,
.card-central strong{
  letter-spacing:0;
}
.card-vrf span,
.card-home span,
.card-central span{
  text-transform:none;
}
@media(max-width:680px){
  .mini-card strong{
    font-size:20px;
  }
  .mini-card span{
    font-size:12px;
  }
}


/* --- v13 mobile responsive overhaul --- */
@media(max-width:760px){
  body{
    overflow-x:hidden;
  }

  .container{
    width:min(100% - 28px, 1160px);
  }

  .site-header{
    position:sticky;
  }

  .nav{
    height:66px;
    padding:8px 0;
    gap:10px;
  }

  .brand img{
    height:50px;
    max-width:210px;
    object-fit:contain;
  }

  .nav-cta{
    padding:9px 18px;
    font-size:15px;
    border-radius:18px;
    min-width:96px;
  }

  .hero{
    padding:38px 0 44px;
  }

  .hero-grid{
    display:flex;
    flex-direction:column;
    gap:28px;
    text-align:center;
  }

  .hero-copy{
    width:100%;
  }

  .hero h1{
    font-size:clamp(31px, 8vw, 42px);
    line-height:1.35;
    margin:14px auto 14px;
    max-width:640px;
  }

  .lead{
    font-size:16px;
    line-height:1.9;
    max-width:95%;
    margin-inline:auto;
  }

  .hero-actions{
    justify-content:center;
    gap:10px;
  }

  .hero-actions .btn{
    width:auto;
    min-width:150px;
    padding:12px 16px;
    border-radius:14px;
    font-size:15px;
  }

  .quick-info{
    justify-content:center;
    gap:8px;
    margin-top:18px;
  }

  .quick-info span{
    font-size:14px;
    padding:7px 11px;
  }

  .hero-visual{
    width:100%;
    min-height:0;
    padding-bottom:6px;
  }

  .visual-card{
    min-height:290px;
    padding:22px;
    border-radius:28px;
  }

  .ac-unit{
    width:min(100%, 330px);
    height:112px;
    border-radius:20px;
  }

  .ac-display{
    width:50px;
    height:17px;
    top:20px;
  }

  .vent{
    left:28px;
    right:28px;
    bottom:25px;
    height:19px;
  }

  .airflow-stream{
    top:88px;
    left:20px;
    right:20px;
    height:135px;
  }

  .stream-line{
    height:8px;
  }

  .line-1{top:4px}
  .line-2{top:34px}
  .line-3{top:64px}
  .line-4{top:94px}

  .status-chip{
    top:18px;
    right:18px;
    padding:8px 12px;
    font-size:13px;
  }

  .mini-card{
    min-width:112px;
    padding:10px 12px;
    border-radius:16px;
  }

  .mini-card strong{
    font-size:18px;
    margin-bottom:2px;
  }

  .mini-card span{
    font-size:11px;
  }

  .card-central{
    left:10px;
    top:18px;
  }

  .card-home{
    right:8px;
    bottom:24px;
  }

  .card-vrf{
    left:18px;
    bottom:16px;
  }

  .hero-air-ribbons i{
    width:95%;
    right:-42%;
    height:110px;
  }

  .section{
    padding:52px 0;
  }

  .section-head{
    margin-bottom:26px;
  }

  .section h2{
    font-size:clamp(25px, 6vw, 34px);
    line-height:1.45;
  }

  .stats{
    grid-template-columns:1fr !important;
    gap:12px;
  }

  .stats div{
    padding:18px;
    border-radius:20px;
  }

  .stats strong{
    font-size:22px;
  }

  .service-grid,
  .process,
  .review-grid,
  .trust-grid,
  .faq-independent{
    grid-template-columns:1fr !important;
  }

  .systems-grid,
  .why-grid{
    grid-template-columns:1fr !important;
    gap:22px;
  }

  .section-head.align-right{
    text-align:center;
    margin-inline:auto;
  }

  .section-head.align-right h2:after{
    margin-right:auto;
    margin-left:auto;
  }

  .system-cards article{
    grid-template-columns:auto 1fr;
    text-align:right;
  }

  .system-icon{
    width:54px;
    height:54px;
    border-radius:17px;
    font-size:26px;
  }

  .service-card,
  .system-cards article,
  .process div,
  .review-grid article,
  .contact-card,
  .why-box,
  .trust-grid article,
  .faq-grid details{
    border-radius:22px;
    padding:22px;
  }

  .why-box,
  .contact-card{
    text-align:right;
  }

  .phone-number{
    font-size:22px;
    padding:14px 12px;
  }

  .emergency-box{
    padding:26px 20px;
    border-radius:26px;
  }

  .emergency-box h2{
    font-size:26px;
  }

  .final-box{
    border-radius:28px;
    padding:34px 18px;
  }

  .final-box h2{
    font-size:27px;
  }

  .floating-whatsapp{
    left:14px;
    bottom:14px;
    padding:12px 16px;
    font-size:15px;
  }

  .footer-grid{
    display:block;
    text-align:center;
  }

  .footer img{
    height:62px;
  }

  .footer-links{
    justify-content:center;
    margin-top:18px;
  }
}

@media(max-width:430px){
  .brand img{
    height:46px;
    max-width:184px;
  }

  .nav-cta{
    min-width:88px;
    padding:8px 14px;
    font-size:14px;
  }

  .hero{
    padding-top:32px;
  }

  .hero h1{
    font-size:30px;
  }

  .lead{
    font-size:15px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .hero-actions .btn{
    min-width:0;
    width:100%;
    font-size:14px;
    padding:12px 8px;
  }

  .quick-info{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .quick-info span:last-child{
    grid-column:1 / -1;
  }

  .visual-card{
    min-height:260px;
    padding:18px;
  }

  .ac-unit{
    width:270px;
    height:96px;
  }

  .mini-card{
    min-width:98px;
    padding:8px 10px;
  }

  .mini-card strong{
    font-size:16px;
  }

  .mini-card span{
    font-size:10px;
  }

  .card-central{
    left:6px;
    top:16px;
  }

  .card-home{
    right:6px;
    bottom:18px;
  }

  .card-vrf{
    left:14px;
    bottom:12px;
  }

  .status-chip{
    top:14px;
    right:14px;
    font-size:12px;
  }
}

/* When a mobile browser opens in forced desktop-width mode, keep the hero from becoming too huge */
@media(max-width:760px) and (orientation:portrait){
  .main-card{
    max-width:100%;
  }
}


/* --- v14 real mobile-first hero fix --- */
@media(max-width:760px){

  .site-header{
    background:#ffffff;
    box-shadow:0 8px 24px rgba(0,62,154,.06);
  }

  .nav{
    height:62px;
  }

  .brand{
    max-width:178px;
    overflow:hidden;
  }

  .brand img{
    height:44px !important;
    max-width:178px !important;
    border-radius:14px;
  }

  .nav-cta{
    min-width:auto !important;
    padding:8px 15px !important;
    font-size:14px !important;
    border-radius:999px !important;
  }

  .hero{
    padding:34px 0 34px !important;
    min-height:auto !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    align-items:center !important;
    text-align:center !important;
  }

  .hero-copy{
    order:1;
    padding:0 4px;
  }

  .hero .badge{
    font-size:12px;
    padding:6px 12px;
    margin-bottom:8px;
  }

  .hero h1{
    display:block !important;
    font-size:31px !important;
    line-height:1.35 !important;
    margin:10px auto 12px !important;
    max-width:360px !important;
    letter-spacing:-.3px !important;
  }

  .lead{
    font-size:15.5px !important;
    line-height:1.9 !important;
    max-width:350px !important;
    margin:0 auto 20px !important;
    color:#eefbff !important;
  }

  .lead .abbr-combo{
    font-size:1em !important;
    font-weight:800 !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
  }

  .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
    padding:12px 8px !important;
    font-size:14.5px !important;
    border-radius:14px !important;
  }

  .quick-info{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    max-width:360px !important;
    margin:16px auto 0 !important;
  }

  .quick-info span{
    font-size:13.5px !important;
    padding:7px 8px !important;
    border-radius:16px !important;
  }

  .quick-info span:last-child{
    grid-column:1 / -1;
  }

  .hero-visual{
    order:2;
    min-height:auto !important;
    width:100% !important;
    padding:0 !important;
    margin:0 auto !important;
  }

  .visual-card.main-card{
    min-height:230px !important;
    height:230px !important;
    padding:16px !important;
    border-radius:26px !important;
    max-width:360px !important;
    margin:0 auto !important;
  }

  .ac-unit{
    width:245px !important;
    height:82px !important;
    border-radius:18px !important;
  }

  .ac-display{
    width:44px !important;
    height:15px !important;
    top:17px !important;
    right:26px !important;
  }

  .vent{
    left:24px !important;
    right:24px !important;
    bottom:21px !important;
    height:17px !important;
  }

  .status-chip{
    top:15px !important;
    right:15px !important;
    padding:7px 11px !important;
    font-size:12px !important;
    border-radius:14px !important;
  }

  .mini-card{
    display:none !important;
  }

  .airflow-stream{
    top:70px !important;
    left:18px !important;
    right:18px !important;
    height:108px !important;
  }

  .stream-line{
    height:7px !important;
    opacity:.6;
  }

  .line-1{top:0 !important}
  .line-2{top:28px !important}
  .line-3{top:56px !important}
  .line-4{top:84px !important}

  .stream-mist{
    width:18px !important;
    height:18px !important;
  }

  .cool-particles i{
    width:7px !important;
    height:7px !important;
  }

  .hero-air-ribbons i{
    height:80px !important;
    opacity:.08 !important;
    filter:blur(5px);
  }

  .stats-section{
    padding:20px 0 !important;
  }

  .stats{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .stats div{
    padding:16px 14px !important;
  }

  .stats strong{
    font-size:20px !important;
  }

  .stats span{
    font-size:13px !important;
  }

  .section{
    padding:46px 0 !important;
  }

  .section-head{
    margin-bottom:22px !important;
  }

  .section h2{
    font-size:26px !important;
    line-height:1.45 !important;
  }

  .section-head p{
    font-size:14.5px !important;
    line-height:1.9 !important;
  }

  .service-grid,
  .system-cards,
  .process,
  .review-grid,
  .trust-grid,
  .faq-independent{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .systems-grid,
  .why-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .service-card,
  .system-cards article,
  .process div,
  .review-grid article,
  .why-box,
  .contact-card,
  .trust-grid article,
  .faq-grid details{
    padding:20px !important;
    border-radius:22px !important;
  }

  .floating-whatsapp{
    display:none !important;
  }

  .footer{
    padding-bottom:28px !important;
  }
}

@media(max-width:390px){
  .hero h1{
    font-size:28px !important;
    max-width:320px !important;
  }

  .lead{
    font-size:14.5px !important;
    max-width:320px !important;
  }

  .visual-card.main-card{
    max-width:330px !important;
    height:218px !important;
    min-height:218px !important;
  }

  .ac-unit{
    width:220px !important;
    height:78px !important;
  }

  .brand{
    max-width:156px;
  }

  .brand img{
    max-width:156px !important;
  }
}


/* --- v15 phone update + clearer AC illustration + cleaner mobile hero --- */
.ac-unit{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #f5f9fd 54%, #eef4f9 100%);
  border:1px solid rgba(175,205,231,.85);
  box-shadow:
    0 26px 60px rgba(8,36,72,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -10px 18px rgba(208,226,241,.35);
}
.ac-unit::before{
  content:"";
  position:absolute;
  top:12px;
  left:26px;
  right:26px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(198,212,226,.2), rgba(212,223,234,.8), rgba(198,212,226,.2));
}
.ac-unit::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:14px;
  height:15px;
  border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,#ecf4fa,#dce9f4);
  box-shadow:inset 0 -1px 0 rgba(150,176,200,.45);
}
.ac-display{
  background:linear-gradient(180deg,#dbe7f0,#c4d5e4);
  border:1px solid rgba(185,205,223,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.vent{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    repeating-linear-gradient(
      90deg,
      #1f3f5e 0 18px,
      #2f5474 18px 28px
    );
  border-radius:999px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.08),
    0 5px 14px rgba(12,42,76,.16);
}
.vent::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-3px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
}
.main-card{
  box-shadow:0 30px 80px rgba(0,62,154,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

@media(max-width:760px){
  .hero-effects,
  .hero-air-ribbons{
    display:none !important;
  }

  .hero{
    padding:26px 0 24px !important;
  }

  .hero h1{
    font-size:30px !important;
    line-height:1.35 !important;
    margin:10px auto 10px !important;
    max-width:340px !important;
  }

  .lead{
    font-size:15px !important;
    line-height:1.85 !important;
    max-width:335px !important;
    margin:0 auto 16px !important;
  }

  .hero-actions{
    max-width:340px !important;
    margin:0 auto !important;
  }

  .quick-info{
    max-width:340px !important;
    margin:14px auto 0 !important;
  }

  .quick-info span{
    font-size:13px !important;
  }

  .hero-visual{
    margin-top:6px !important;
  }

  .visual-card.main-card{
    max-width:340px !important;
    height:190px !important;
    min-height:190px !important;
    padding:14px !important;
  }

  .status-chip{
    top:14px !important;
    right:14px !important;
    font-size:12px !important;
    padding:7px 10px !important;
  }

  .ac-unit{
    width:232px !important;
    height:76px !important;
    border-radius:18px !important;
  }
  .ac-unit::before{
    top:10px;
    left:22px;
    right:22px;
    height:5px;
  }
  .ac-unit::after{
    left:20px;
    right:20px;
    bottom:12px;
    height:12px;
    border-radius:0 0 18px 18px;
  }

  .ac-display{
    width:38px !important;
    height:14px !important;
    top:16px !important;
    right:22px !important;
  }

  .vent{
    left:22px !important;
    right:22px !important;
    bottom:20px !important;
    height:14px !important;
  }

  .airflow-stream{
    top:64px !important;
    left:14px !important;
    right:14px !important;
    height:84px !important;
  }

  .stream-line{
    height:6px !important;
    opacity:.68 !important;
  }

  .line-1{top:0 !important}
  .line-2{top:22px !important}
  .line-3{top:44px !important}
  .line-4{top:66px !important}

  .stream-mist{
    width:12px !important;
    height:12px !important;
  }

  .mini-card{
    display:none !important;
  }

  .stats-section{
    padding-top:18px !important;
  }

  .section{
    padding:42px 0 !important;
  }

  .service-card,
  .system-cards article,
  .process div,
  .review-grid article,
  .why-box,
  .contact-card,
  .trust-grid article,
  .faq-grid details{
    padding:18px !important;
  }
}

@media(max-width:390px){
  .hero h1{
    font-size:28px !important;
  }
  .lead{
    font-size:14.5px !important;
  }
  .visual-card.main-card{
    max-width:320px !important;
    height:182px !important;
    min-height:182px !important;
  }
  .ac-unit{
    width:218px !important;
    height:72px !important;
  }
}


/* ===== v16 mobile-friendly cleanup + realistic AC + centered bubbles ===== */
.ac-unit{
  position:relative;
  width:410px;
  height:136px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 58%,#eef5fa 100%);
  border:1px solid rgba(191,211,227,.95);
  border-radius:26px;
  box-shadow:0 26px 60px rgba(0,0,0,.20), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -10px 18px rgba(210,226,239,.40);
  overflow:visible;
}
.ac-unit:before{
  content:"";position:absolute;left:26px;right:26px;top:13px;height:7px;border-radius:999px;
  background:linear-gradient(90deg,rgba(225,233,240,.0),rgba(224,232,238,.95),rgba(225,233,240,.0));
}
.ac-unit:after{
  content:"";position:absolute;left:28px;right:28px;bottom:12px;height:17px;border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,#eaf2f8,#d7e5f1); box-shadow:inset 0 -1px 0 rgba(164,188,209,.45);
}
.ac-display{
  position:absolute;right:28px;top:22px;width:64px;height:24px;border-radius:14px;
  background:linear-gradient(180deg,#dfeaf2,#c3d5e4);
  color:#ffffff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 1px rgba(0,0,0,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(93,121,147,.18);
}
.ac-brand-logo{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:82px;height:auto;opacity:.94;filter:drop-shadow(0 1px 2px rgba(0,62,154,.10));
}
.vent{
  position:absolute;right:35px;left:35px;bottom:26px;height:22px;border-radius:999px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),
    repeating-linear-gradient(90deg,#244767 0 18px,#395a79 18px 31px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.08), 0 6px 14px rgba(17,45,74,.14);
}
.vent:before{content:"";position:absolute;left:0;right:0;top:-3px;height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.mini-card{
  position:absolute;background:rgba(255,255,255,.98);color:var(--navy);border-radius:22px;padding:16px 18px;
  box-shadow:0 18px 45px rgba(0,0,0,.16);min-width:170px;min-height:100px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.mini-card strong{display:block;font-size:21px;line-height:1.1;color:var(--blue-dark);margin:0}
.mini-card span{display:block;font-size:14px;line-height:1.2;color:var(--muted);margin:0}
.card-home{right:0;bottom:38px}
.card-central{left:6px;top:28px}
.card-vrf{left:72px;bottom:2px}

@media(max-width:760px){
  .nav-links{display:none !important}
  .site-header{position:sticky;top:0;z-index:90;background:#fff;backdrop-filter:blur(8px)}
  .nav{height:auto;min-height:74px;padding:10px 0;gap:10px;align-items:center}
  .brand img{height:48px !important;max-width:170px !important;object-fit:contain}
  .nav-cta{padding:10px 18px !important;font-size:16px !important;min-width:auto !important}

  .hero{padding:28px 0 24px !important}
  .hero-grid{display:flex !important;flex-direction:column !important;gap:20px !important;text-align:center !important}
  .hero-copy{order:1;width:100%}
  .hero-visual{order:2;width:100%;min-height:350px !important;padding-bottom:0 !important}

  .hero h1{font-size:28px !important;line-height:1.35 !important;max-width:330px !important;margin:10px auto 12px !important}
  .lead{font-size:15px !important;line-height:1.85 !important;max-width:332px !important;margin:0 auto 16px !important}

  .hero-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;max-width:340px !important;margin:0 auto !important}
  .hero-actions .btn{width:100% !important;min-width:0 !important;padding:13px 8px !important;font-size:15px !important;border-radius:16px !important}

  .quick-info{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;max-width:340px !important;margin:14px auto 0 !important}
  .quick-info span{padding:9px 10px !important;font-size:13px !important;text-align:center}
  .quick-info span:last-child{grid-column:1 / -1}

  .visual-card.main-card{max-width:340px !important;min-height:250px !important;height:250px !important;padding:18px !important;margin:0 auto !important;border-radius:28px !important}
  .ac-unit{width:255px !important;height:88px !important;border-radius:18px !important}
  .ac-unit:before{left:18px;right:18px;top:10px;height:5px}
  .ac-unit:after{left:18px;right:18px;bottom:10px;height:12px;border-radius:0 0 14px 14px}
  .ac-display{right:18px !important;top:14px !important;width:46px !important;height:18px !important;font-size:10px !important}
  .ac-brand-logo{width:54px !important}
  .vent{left:22px !important;right:22px !important;bottom:17px !important;height:16px !important}

  .status-chip{top:14px !important;right:14px !important;padding:8px 12px !important;font-size:12px !important}

  .mini-card{min-width:116px !important;min-height:72px !important;padding:10px 10px !important;border-radius:18px !important;gap:4px !important}
  .mini-card strong{font-size:16px !important}
  .mini-card span{font-size:11px !important;line-height:1.15 !important}
  .card-central{top:8px !important;left:0 !important}
  .card-home{right:0 !important;bottom:22px !important}
  .card-vrf{left:26px !important;bottom:-4px !important}

  .airflow-stream{top:76px !important;left:12px !important;right:12px !important;height:96px !important}
  .stream-line{height:6px !important;opacity:.65 !important}
  .line-1{top:3px !important}.line-2{top:26px !important}.line-3{top:49px !important}.line-4{top:72px !important}
  .stream-mist{width:12px !important;height:12px !important}
  .hero-effects,.hero-air-ribbons{display:none !important}
  .cool-particles{display:none !important}

  .stats{grid-template-columns:1fr !important;gap:10px !important}
  .service-grid,.system-cards,.process,.review-grid,.faq-independent,.trust-grid,.systems-grid,.why-grid{grid-template-columns:1fr !important;display:grid !important;gap:14px !important}
  .floating-whatsapp{display:none !important}
}

@media(max-width:390px){
  .container{width:min(100% - 24px, 1160px) !important}
  .brand img{max-width:150px !important;height:44px !important}
  .hero h1{font-size:26px !important;max-width:300px !important}
  .lead{font-size:14px !important;max-width:300px !important}
  .hero-actions,.quick-info{max-width:310px !important}
  .visual-card.main-card{max-width:312px !important;min-height:232px !important;height:232px !important}
  .ac-unit{width:226px !important;height:78px !important}
  .mini-card{min-width:104px !important;min-height:68px !important;padding:8px 8px !important}
  .mini-card strong{font-size:15px !important}
  .mini-card span{font-size:10.5px !important}
  .card-central{left:-2px !important;top:8px !important}
  .card-home{right:-2px !important;bottom:20px !important}
  .card-vrf{left:18px !important;bottom:-2px !important}
}


/* ===== v17 real mobile polish: compact, readable, close to desktop identity ===== */
@media(max-width:760px){
  html, body{max-width:100%; overflow-x:hidden !important;}
  body{font-size:14px !important;}
  .container{width:calc(100% - 28px) !important; max-width:430px !important;}

  /* Header */
  .site-header{box-shadow:0 8px 18px rgba(0,62,154,.06) !important;}
  .nav{min-height:64px !important; height:64px !important; padding:8px 0 !important;}
  .brand img{height:42px !important; max-width:158px !important;}
  .nav-cta{font-size:14px !important; padding:8px 16px !important; border-radius:999px !important;}

  /* Hero */
  .hero{padding:24px 0 28px !important;}
  .hero-grid{gap:18px !important;}
  .hero .badge{font-size:11px !important; padding:5px 10px !important;}
  .hero h1{font-size:26px !important; line-height:1.32 !important; max-width:330px !important; margin:10px auto 10px !important; letter-spacing:0 !important;}
  .lead{font-size:14px !important; line-height:1.8 !important; max-width:330px !important; margin:0 auto 14px !important; color:#effbff !important;}
  .hero-actions{grid-template-columns:1fr 1fr !important; max-width:328px !important; gap:9px !important;}
  .hero-actions .btn{padding:11px 6px !important; min-height:48px !important; font-size:13.5px !important; border-radius:14px !important;}
  .quick-info{grid-template-columns:1fr 1fr !important; max-width:328px !important; gap:8px !important; margin-top:12px !important;}
  .quick-info span{font-size:12px !important; padding:7px 8px !important; border-radius:14px !important;}
  .quick-info span:last-child{grid-column:1/-1 !important;}

  /* AC visual */
  .hero-visual{min-height:auto !important; margin-top:0 !important;}
  .visual-card.main-card{width:100% !important; max-width:328px !important; height:220px !important; min-height:220px !important; padding:14px !important; border-radius:24px !important;}
  .ac-unit{width:235px !important; height:80px !important; border-radius:17px !important;}
  .ac-unit:before{top:9px !important; left:18px !important; right:18px !important; height:5px !important;}
  .ac-unit:after{left:18px !important; right:18px !important; bottom:10px !important; height:12px !important;}
  .ac-display{right:18px !important; top:14px !important; width:42px !important; height:17px !important; font-size:9.5px !important;}
  .ac-brand-logo{width:50px !important; top:50% !important;}
  .vent{left:20px !important; right:20px !important; bottom:17px !important; height:15px !important;}
  .status-chip{top:12px !important; right:12px !important; padding:7px 10px !important; font-size:11.5px !important;}
  .mini-card{display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; min-width:105px !important; min-height:62px !important; padding:8px !important; border-radius:16px !important; gap:3px !important;}
  .mini-card strong{font-size:14px !important; line-height:1.1 !important; margin:0 !important;}
  .mini-card span{font-size:9.5px !important; line-height:1.1 !important; margin:0 !important;}
  .card-central{left:0 !important; top:6px !important;}
  .card-home{right:0 !important; bottom:12px !important;}
  .card-vrf{left:18px !important; bottom:-5px !important;}
  .airflow-stream{top:70px !important; height:86px !important;}
  .stream-line{height:5px !important;}
  .line-1{top:0 !important}.line-2{top:22px !important}.line-3{top:44px !important}.line-4{top:66px !important}

  /* Sections global */
  .section{padding:36px 0 !important;}
  .section-head{margin-bottom:18px !important; max-width:330px !important;}
  .section h2{font-size:22px !important; line-height:1.38 !important; margin:10px 0 8px !important;}
  .section h2:after{width:56px !important; height:4px !important; margin-top:10px !important;}
  .section-head p,.systems-grid p{font-size:13px !important; line-height:1.75 !important;}
  .badge.light{font-size:11px !important; padding:5px 10px !important;}

  /* Stats */
  .stats-section{padding:18px 0 !important;}
  .stats{grid-template-columns:1fr !important; gap:10px !important;}
  .stats div{padding:14px 12px !important; border-radius:18px !important;}
  .stats strong{font-size:18px !important;}
  .stats span{font-size:12px !important;}

  /* Service cards: compact mobile cards */
  .service-grid{grid-template-columns:1fr !important; gap:12px !important;}
  .service-card{display:grid !important; grid-template-columns:54px 1fr !important; column-gap:14px !important; align-items:center !important; text-align:right !important; padding:16px !important; border-radius:18px !important; min-height:0 !important;}
  .service-icon{grid-row:1 / span 2 !important; width:50px !important; height:50px !important; border-radius:15px !important; font-size:24px !important; margin:0 !important;}
  .service-card h3{font-size:17px !important; margin:0 0 4px !important; line-height:1.35 !important;}
  .service-card p{font-size:13px !important; line-height:1.65 !important; margin:0 !important;}

  /* Systems */
  .systems-grid{grid-template-columns:1fr !important; gap:16px !important;}
  .section-head.align-right{text-align:center !important;}
  .system-cards{grid-template-columns:1fr !important; gap:12px !important;}
  .system-cards article{grid-template-columns:50px 1fr !important; gap:12px !important; padding:16px !important; border-radius:18px !important;}
  .system-icon{width:48px !important; height:48px !important; font-size:22px !important; border-radius:15px !important;}
  .system-cards h3{font-size:17px !important; margin:0 0 3px !important;}
  .system-cards p{font-size:13px !important; line-height:1.65 !important;}

  /* Process */
  .process{grid-template-columns:1fr 1fr !important; gap:10px !important;}
  .process div{padding:14px !important; border-radius:18px !important; text-align:center !important;}
  .process span{width:34px !important; height:34px !important; margin:0 auto 8px !important; font-size:13px !important;}
  .process h3{font-size:16px !important; margin-bottom:4px !important;}
  .process p{font-size:12.5px !important; line-height:1.6 !important;}

  /* Emergency CTA */
  .emergency-section{padding:24px 0 !important;}
  .emergency-box{padding:20px 16px !important; border-radius:22px !important; text-align:center !important;}
  .emergency-box h2{font-size:21px !important; line-height:1.45 !important;}
  .emergency-box p{font-size:13px !important; line-height:1.7 !important;}
  .emergency-box .btn{margin-top:14px !important; min-height:46px !important;}

  /* Why/trust blue section compact */
  .why-section{padding:36px 0 !important;}
  .why-grid{grid-template-columns:1fr !important; gap:14px !important;}
  .why-box,.contact-card{padding:18px !important; border-radius:22px !important;}
  .why-box h2{font-size:22px !important; line-height:1.42 !important;}
  .why-box p,.contact-card p{font-size:13px !important; line-height:1.75 !important;}
  .why-box ul{gap:10px !important; margin-top:14px !important;}
  .why-box li{font-size:13px !important; line-height:1.7 !important; padding-right:22px !important;}
  .phone-number{font-size:19px !important; padding:12px 10px !important;}

  /* Trust and FAQ */
  .trust-grid{grid-template-columns:1fr !important; gap:12px !important;}
  .trust-grid article{padding:16px !important; border-radius:18px !important;}
  .trust-grid span{width:48px !important; height:48px !important; font-size:22px !important; margin-bottom:10px !important;}
  .trust-grid h3{font-size:17px !important; margin-bottom:4px !important;}
  .trust-grid p{font-size:13px !important; line-height:1.65 !important;}
  .faq-independent{grid-template-columns:1fr !important; gap:10px !important;}
  .faq-column{gap:10px !important;}
  .faq-grid details{padding:14px !important; border-radius:16px !important;}
  .faq-grid summary{font-size:14px !important; min-height:30px !important; padding-right:42px !important;}
  .faq-grid summary:after{width:30px !important; height:30px !important; font-size:20px !important;}
  .faq-grid p{font-size:13px !important; line-height:1.65 !important;}

  /* Final CTA and footer */
  .final-cta{padding:32px 0 !important;}
  .final-box{padding:24px 16px !important; border-radius:22px !important;}
  .final-box h2{font-size:22px !important; line-height:1.42 !important;}
  .final-box p{font-size:13px !important; line-height:1.7 !important;}
  .footer{padding:24px 0 !important;}
  .footer img{height:52px !important;}
  .footer p,.footer-links a{font-size:12px !important;}
}

@media(max-width:390px){
  .container{width:calc(100% - 22px) !important;}
  .hero h1{font-size:24px !important; max-width:300px !important;}
  .lead{font-size:13.5px !important; max-width:300px !important;}
  .hero-actions,.quick-info{max-width:306px !important;}
  .visual-card.main-card{max-width:306px !important; height:210px !important; min-height:210px !important;}
  .ac-unit{width:215px !important; height:74px !important;}
  .mini-card{min-width:96px !important; min-height:58px !important;}
  .mini-card strong{font-size:13px !important;}
  .mini-card span{font-size:9px !important;}
  .card-vrf{left:12px !important; bottom:-4px !important;}
  .service-card,.system-cards article{padding:14px !important;}
  .section h2{font-size:21px !important;}
}


/* ===== v18 final mobile tuning ===== */
@media(max-width:760px){
  .site-header{
    box-shadow:0 6px 22px rgba(0,62,154,.06) !important;
  }

  .nav{
    min-height:64px !important;
    padding:8px 0 !important;
  }

  .brand img{
    height:42px !important;
    max-width:165px !important;
  }

  .nav-cta{
    padding:8px 16px !important;
    font-size:15px !important;
  }

  .hero{
    padding:22px 0 22px !important;
  }

  .hero-grid{
    gap:16px !important;
  }

  .hero .badge{
    font-size:11.5px !important;
    padding:5px 10px !important;
  }

  .hero h1{
    font-size:27px !important;
    line-height:1.34 !important;
    max-width:320px !important;
    margin:8px auto 8px !important;
  }

  .lead{
    font-size:14px !important;
    line-height:1.75 !important;
    max-width:318px !important;
    margin:0 auto 14px !important;
  }

  .hero-actions{
    max-width:320px !important;
    gap:8px !important;
  }

  .hero-actions .btn{
    padding:11px 8px !important;
    font-size:14px !important;
    border-radius:14px !important;
  }

  .quick-info{
    max-width:320px !important;
    gap:7px !important;
    margin-top:12px !important;
  }

  .quick-info span{
    font-size:12.3px !important;
    padding:7px 8px !important;
    border-radius:14px !important;
  }

  .hero-visual{
    min-height:300px !important;
    margin-top:0 !important;
  }

  .visual-card.main-card{
    max-width:318px !important;
    height:214px !important;
    min-height:214px !important;
    padding:14px !important;
    border-radius:24px !important;
  }

  .ac-unit{
    width:218px !important;
    height:72px !important;
    border-radius:16px !important;
  }

  .ac-unit:before{
    left:18px !important;
    right:18px !important;
    top:9px !important;
    height:4px !important;
  }

  .ac-unit:after{
    left:18px !important;
    right:18px !important;
    bottom:9px !important;
    height:10px !important;
  }

  .ac-display{
    right:16px !important;
    top:13px !important;
    width:40px !important;
    height:16px !important;
    font-size:9px !important;
  }

  .ac-brand-logo{
    width:46px !important;
  }

  .vent{
    left:20px !important;
    right:20px !important;
    bottom:16px !important;
    height:14px !important;
  }

  .status-chip{
    top:12px !important;
    right:12px !important;
    padding:6px 10px !important;
    font-size:11.5px !important;
  }

  .mini-card{
    min-width:100px !important;
    min-height:60px !important;
    padding:7px 8px !important;
    border-radius:15px !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .mini-card strong{
    font-size:14px !important;
    line-height:1.05 !important;
  }

  .mini-card span{
    font-size:9.6px !important;
    line-height:1.12 !important;
  }

  .card-central{
    left:-2px !important;
    top:4px !important;
  }

  .card-home{
    right:-2px !important;
    bottom:14px !important;
  }

  .card-vrf{
    left:18px !important;
    bottom:-3px !important;
  }

  .airflow-stream{
    top:60px !important;
    height:78px !important;
  }

  .stream-line{
    height:5px !important;
  }

  .line-1{top:2px !important}
  .line-2{top:21px !important}
  .line-3{top:40px !important}
  .line-4{top:59px !important}

  .stats-section{
    padding:16px 0 !important;
  }

  .stats div{
    padding:14px !important;
    border-radius:18px !important;
  }

  .stats strong{
    font-size:19px !important;
  }

  .stats span{
    font-size:12px !important;
  }

  .section{
    padding:36px 0 !important;
  }

  .section-head{
    margin-bottom:18px !important;
  }

  .section h2{
    font-size:24px !important;
  }

  .service-card,
  .system-cards article,
  .process div,
  .review-grid article,
  .why-box,
  .contact-card,
  .trust-grid article,
  .faq-grid details{
    padding:16px !important;
    border-radius:18px !important;
  }
}

@media(max-width:390px){
  .brand img{
    height:40px !important;
    max-width:145px !important;
  }

  .nav-cta{
    padding:7px 13px !important;
    font-size:14px !important;
  }

  .hero h1{
    font-size:25px !important;
    max-width:292px !important;
  }

  .lead{
    font-size:13.5px !important;
    max-width:292px !important;
  }

  .hero-actions,
  .quick-info{
    max-width:292px !important;
  }

  .visual-card.main-card{
    max-width:292px !important;
    height:198px !important;
    min-height:198px !important;
  }

  .ac-unit{
    width:198px !important;
    height:66px !important;
  }

  .ac-brand-logo{
    width:40px !important;
  }

  .mini-card{
    min-width:92px !important;
    min-height:56px !important;
  }

  .mini-card strong{
    font-size:13px !important;
  }

  .mini-card span{
    font-size:9px !important;
  }
}