/* ============================================================
   AFRISOLAIRE — Premium Solar Company
   Design: Dark Navy · Solar Gold · Glass Morphism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --solar:       #F7A800;
  --solar-light: #FFD060;
  --solar-dark:  #D4900A;
  --navy:        #0A1628;
  --navy-mid:    #0D2137;
  --navy-light:  #162D50;
  --emerald:     #22C55E;
  --red:         #E30613;
  --text:        #f1f5f9;
  --muted:       #94a3b8;
  --subtle:      #475569;
  --dim:         #334155;
  --deep:        #1e293b;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --shadow:      0 4px 24px rgba(0,0,0,.30);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.40);
  --glow:        0 0 40px rgba(247,168,0,.25), 0 0 80px rgba(247,168,0,.10);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior:smooth;
  scroll-padding-top:80px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:clamp(14px,2.5vw,16px);
}
body {
  background:var(--navy);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  line-height:1.65;
}
body.menu-open {
  overflow:hidden;
  position:fixed;
  width:100%;
}
img { max-width:100%; height:auto; display:block; }
a  { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul,ol { list-style:none; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:var(--solar); border-radius:4px; }
*  { -webkit-tap-highlight-color:transparent; }

/* ── Touch responsiveness ───────────────────────────────────── */
button,
a,
[onclick],
.filter-btn,
.calc-type-btn,
.blog-filter-btn,
.faq-btn,
.testi-btn,
.testi-thumb,
.testi-dot,
.wa-btn,
.wa-x,
.wa-popup-close,
.wa-quick-a,
.wa-open-a,
.wa-popup-btn,
.nav-burger,
.scroll-top-btn,
.footer-top-btn,
.calc-type-btn {
  touch-action: manipulation;
}

/* ── Typography helpers ─────────────────────────────────────── */
.font-arabic { font-family:'Cairo','Arial',sans-serif; }
.text-solar   { color:var(--solar); }
.text-white   { color:#fff; }
.text-muted   { color:var(--muted); }

.text-gradient-solar {
  background:linear-gradient(135deg,#F7A800 0%,#FFD060 50%,#F7A800 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Glass ─────────────────────────────────────────────────── */
.glass {
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
}
.glass-dark {
  background:rgba(10,22,40,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(247,168,0,.15);
}
.glass-solar {
  background:rgba(247,168,0,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(247,168,0,.20);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#F7A800,#D4900A);
  color:var(--navy); font-weight:700; font-size:.88rem;
  padding:13px 30px; border-radius:50px;
  box-shadow:0 6px 28px rgba(247,168,0,.35);
  transition:box-shadow .3s ease, opacity .15s ease;
  min-height:48px; white-space:nowrap;
  position:relative; overflow:hidden;
  cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);
  touch-action:manipulation;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity:0; transition:opacity .3s;
  pointer-events:none; /* never intercept taps — let them reach the <a> */
}
/* touch feedback — all devices */
.btn-primary:active { opacity:.82; }

/* hover effects — pointer devices only (not touch) */
@media(hover:hover) and (pointer:fine) {
  .btn-primary { transition:all .3s ease; }
  .btn-primary:hover::after { opacity:1; }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(247,168,0,.50); }
  .btn-primary:active { transform:translateY(0); opacity:1; }
}

.btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--solar); font-weight:600; font-size:.88rem;
  padding:12px 30px; border-radius:50px;
  border:1.5px solid rgba(247,168,0,.50);
  transition:background .3s ease, border-color .3s ease;
  min-height:48px; white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer; touch-action:manipulation;
}
/* touch feedback — all devices */
.btn-outline:active { background:rgba(247,168,0,.15); border-color:var(--solar); }

/* hover effects — pointer devices only */
@media(hover:hover) and (pointer:fine) {
  .btn-outline { transition:all .3s ease; }
  .btn-outline:hover { background:rgba(247,168,0,.12); border-color:var(--solar); transform:translateY(-2px); }
  .btn-outline:active { background:transparent; transform:translateY(0); }
}

.btn-whatsapp {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#fff; font-weight:700; font-size:.88rem;
  padding:13px 30px; border-radius:50px; min-height:48px;
  transition:background .3s ease, box-shadow .3s ease; white-space:nowrap;
  cursor:pointer;
}
.btn-whatsapp:active { opacity:.85; }
@media(hover:hover) and (pointer:fine) {
  .btn-whatsapp { transition:all .3s ease; }
  .btn-whatsapp:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.4); }
}

.btn-sm { padding:8px 20px; font-size:.8rem; min-height:38px; }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 20px; }
@media(min-width:1024px){ .container { padding:0 40px; } }
.section { padding:72px 0; }
@media(max-width:768px){ .section { padding:52px 0; } }

/* Navbar offset for scrollIntoView — keeps sections below the fixed navbar */
section[id], [id].section { scroll-margin-top: 82px; }

/* ── Section header ─────────────────────────────────────────── */
.section-header { text-align:center; margin-bottom:52px; }
.section-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 20px; border-radius:50px;
  font-size:.78rem; font-weight:600; color:var(--solar); margin-bottom:20px;
}
.section-title {
  font-size:clamp(1.75rem,4vw,2.9rem);
  font-weight:900; line-height:1.1; margin-bottom:14px;
}
.section-sub {
  font-size:.95rem; color:var(--muted);
  line-height:1.75; max-width:540px; margin:0 auto;
}

/* ── Card hover ─────────────────────────────────────────────── */
.card-hover {
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-hover:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 52px rgba(0,0,0,.38), 0 0 0 1px rgba(247,168,0,.2);
  border-color:rgba(247,168,0,.28) !important;
}
@media(hover:none){ .card-hover:hover { transform:none; } }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left {
  opacity:0; transform:translateX(-36px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity:0; transform:translateX(36px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity:0; transform:scale(.9);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal-scale.visible { opacity:1; transform:scale(1); }

.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s} .d5{transition-delay:.40s} .d6{transition-delay:.48s}

/* ── @keyframes ─────────────────────────────────────────────── */
@keyframes float {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
@keyframes pulse-solar {
  0%,100%{ box-shadow:0 0 0 0 rgba(247,168,0,.4); }
  50%{ box-shadow:0 0 0 20px rgba(247,168,0,0); }
}
@keyframes rotate-slow {
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@keyframes fade-in-up {
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes scale-in {
  from{ opacity:0; transform:scale(.88); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes shimmer {
  0%  { background-position:-200% 0; }
  100%{ background-position: 200% 0; }
}

.animate-float       { animation:float 5s ease-in-out infinite; }
.animate-pulse-solar { animation:pulse-solar 2s infinite; }

/* ─────────────────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:all .45s ease;
}
#navbar.scrolled {
  background:rgba(10,22,40,.93);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(247,168,0,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.nav-inner {
  height:70px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; text-decoration:none;
}
.nav-logo-text { font-weight:900; font-size:1.15rem; letter-spacing:-.02em; line-height:1; color:#fff; }
.nav-logo-text .r { color:#E30613; }
.nav-logo-text .g { color:#F7A800; }

.nav-links { display:none; align-items:center; gap:2px; }
@media(min-width:1024px){ .nav-links { display:flex; } }
.nav-links a {
  position:relative; padding:8px 14px;
  font-size:.82rem; font-weight:500; color:var(--muted);
  transition:color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:14px; right:14px;
  height:1.5px; background:var(--solar);
  transform:scaleX(0); transition:transform .3s; transform-origin:left;
}
.nav-links a:hover,
.nav-links a.active { color:#fff; }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }

.nav-cta { display:none; align-items:center; gap:14px; }
@media(min-width:1024px){ .nav-cta { display:flex; } }
.nav-phone { font-size:.82rem; font-weight:600; color:var(--muted); transition:color .2s; }
.nav-phone:hover { color:var(--solar); }

/* Devis Gratuit button — visible in navbar on mobile only */
.nav-devis-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; font-size:.75rem; font-weight:700;
  min-height:38px; border-radius:50px; white-space:nowrap;
  margin-left:auto; margin-right:8px;
}
@media(min-width:1024px){ .nav-devis-btn { display:none; } }

.nav-burger {
  display:flex; flex-direction:column; gap:5px;
  width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:10px; transition:background .2s;
}
@media(min-width:1024px){ .nav-burger { display:none; } }
.nav-burger:hover { background:rgba(255,255,255,.07); }
.nav-burger span {
  display:block; width:22px; height:2px;
  background:var(--muted); border-radius:2px; transition:all .3s;
}
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display:flex; flex-direction:column;
  background:rgba(10,22,40,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.07);
  padding:0 16px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .3s ease, padding .3s ease;
}
.nav-mobile.open { max-height:480px; opacity:1; padding:12px 16px 16px; }
.nav-mobile a {
  padding:13px 16px; font-size:.88rem; font-weight:500;
  color:var(--muted); border-radius:12px; transition:all .2s;
}
.nav-mobile a:hover { color:var(--solar); background:rgba(247,168,0,.07); }
.nav-mobile .btn-primary { margin-top:10px; width:100%; }

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */
#hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(247,168,0,.12) 0%, transparent 62%),
    radial-gradient(ellipse at 82% 45%, rgba(34,197,94,.08)  0%, transparent 62%),
    linear-gradient(160deg,#0A1628 0%,#0D2137 42%,#0A1628 100%);
}
.hero-grid-bg {
  position:absolute; inset:0; opacity:.025; pointer-events:none;
  background-image:linear-gradient(rgba(247,168,0,1) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(247,168,0,1) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-orb-a {
  position:absolute; top:-18%; right:-8%;
  width:600px; height:600px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(247,168,0,.15) 0%,transparent 70%);
  animation:float 8s ease-in-out infinite;
}
.hero-orb-b {
  position:absolute; bottom:-12%; left:-8%;
  width:500px; height:500px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(34,197,94,.10) 0%,transparent 70%);
  animation:float 10s ease-in-out infinite reverse;
}
.hero-container {
  position:relative; z-index:10;
  padding-top:96px; padding-bottom:56px; width:100%;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 20px; border-radius:50px;
  font-size:.78rem; font-weight:600; color:var(--solar);
  margin-bottom:26px;
  animation:fade-in-up .6s ease both;
}
.hero-badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--emerald);
  flex-shrink:0; animation:pulse-solar 2s infinite;
}
.hero-title {
  font-size:clamp(2.1rem,5.5vw,4.8rem);
  font-weight:900; line-height:1.07; letter-spacing:-.025em;
  margin-bottom:14px;
  animation:fade-in-up .7s .08s ease both;
}
.hero-ar {
  font-family:'Cairo',sans-serif; font-size:1.02rem; font-weight:600;
  color:rgba(247,168,0,.82);
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px; max-width:560px;
  letter-spacing:.03em;
  animation:fade-in-up .6s .18s ease both;
}
.hero-ar::before,
.hero-ar::after {
  content:''; height:1px; flex:1;
}
.hero-ar::before { background:linear-gradient(to right, transparent, rgba(247,168,0,.35)); }
.hero-ar::after  { background:linear-gradient(to left,  transparent, rgba(247,168,0,.35)); }
@media(max-width:480px){
  .hero-ar { font-size:.88rem; gap:10px; max-width:100%; }
}
.hero-desc {
  font-size:clamp(.92rem,2vw,1.1rem); color:var(--muted);
  line-height:1.8; max-width:570px; margin-bottom:34px;
  animation:fade-in-up .6s .26s ease both;
}
.hero-desc strong { color:var(--solar); font-weight:600; }

.hero-actions {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px;
  animation:fade-in-up .6s .34s ease both;
}
@media(max-width:480px){
  .hero-actions {
    flex-direction:column; gap:10px;
    /* Kill the animation entirely on mobile — animation-fill-mode:both keeps
       the element in a GPU compositing layer whose hit-test rect stays stale
       (offset by 28 px) on Android Chrome, making the buttons un-tappable. */
    animation:none;
    opacity:1;
    transform:none;
  }
  .hero-actions > a.btn-primary,
  .hero-actions > a.btn-outline {
    display:flex;
    width:100%; justify-content:center; min-height:52px;
    touch-action:manipulation;
    pointer-events:auto;
    position:relative; z-index:5;
  }
}
@media(max-width:420px){
  .hero-actions > a.btn-primary,
  .hero-actions > a.btn-outline { padding-top:15px; padding-bottom:15px; }
}

/* Kill ALL hero fade-in-up animations on mobile.
   animation-fill-mode:both holds each element in a GPU compositing layer
   whose hit-test rect stays stale (offset 28 px down) on Android Chrome.
   The stale rect of .hero-desc sits directly over the buttons, swallowing
   taps. Setting animation:none makes every element paint immediately at its
   real layout position with no compositing layer. */
@media(max-width:768px){
  .hero-badge,
  .hero-title,
  .hero-ar,
  .hero-desc,
  .hero-actions,
  .hero-trust,
  .hero-stats {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

.hero-trust {
  display:flex; flex-wrap:wrap; gap:18px; margin-bottom:56px;
  animation:fade-in-up .6s .42s ease both;
}
.hero-trust-item {
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; color:var(--subtle);
}
.hero-trust-icon { color:var(--emerald); }

.hero-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:680px;
  animation:fade-in-up .8s .5s ease both;
}
@media(min-width:560px){ .hero-stats { grid-template-columns:repeat(4,1fr); } }
.hero-stat {
  border-radius:18px; padding:18px 14px; text-align:center;
}
.hero-stat-icon { font-size:1.4rem; margin-bottom:5px; }
.hero-stat-value { font-size:1.45rem; font-weight:900; line-height:1; margin-bottom:4px; }
.hero-stat-label { font-size:.68rem; color:var(--subtle); font-weight:500; line-height:1.3; }
.hero-fade-bottom {
  position:absolute; bottom:0; left:0; right:0; height:120px;
  background:linear-gradient(to top,var(--navy),transparent);
  pointer-events:none;
}

/* ── Hero solar panels decoration ─────────────────────────── */
.hero-panels-bg {
  position:absolute; right:0; top:0; bottom:0;
  width:60%; pointer-events:none; z-index:1; overflow:hidden;
}
.hero-panels-bg::after {
  content:''; position:absolute; inset:0; z-index:5;
  pointer-events:none;
  background:
    linear-gradient(to right, var(--navy) 0%, rgba(10,22,40,.7) 28%, transparent 58%),
    linear-gradient(to bottom, var(--navy) 0%, transparent 13%, transparent 84%, var(--navy) 100%);
}
.hero-panel-a, .hero-panel-b {
  position:absolute;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 56px,
      rgba(6,12,22,.93) 56px, rgba(6,12,22,.93) 59px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0, transparent 46px,
      rgba(6,12,22,.93) 46px, rgba(6,12,22,.93) 49px
    ),
    repeating-linear-gradient(
      148deg,
      rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 28px,
      transparent 28px, transparent 56px
    ),
    linear-gradient(155deg, #1e4d80, #15396a 40%, #0d2944 80%, #081c34 100%);
  border:3px solid #1c3d62;
  border-radius:7px;
  box-shadow:0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-panel-a {
  width:295px; height:435px;
  top:7%; left:6%;
  transform:rotate(-10deg);
  z-index:2;
}
.hero-panel-b {
  width:295px; height:435px;
  top:28%; left:42%;
  transform:rotate(-10deg);
  opacity:.55; z-index:1;
}
@media(max-width:1024px){
  .hero-panels-bg { width:52%; opacity:.65; }
}
@media(max-width:768px){
  .hero-panels-bg {
    display:block;
    width:100%; left:0; right:0;
    top:auto; bottom:0; height:55%;
    opacity:.38;
  }
  .hero-panels-bg::after {
    background:
      linear-gradient(to bottom, var(--navy) 0%, rgba(10,22,40,.75) 30%, transparent 62%),
      linear-gradient(to top,    var(--navy) 0%, transparent 30%),
      linear-gradient(to right,  var(--navy) 0%, transparent 18%),
      linear-gradient(to left,   var(--navy) 0%, transparent 18%);
  }
  .hero-panel-a {
    width:210px; height:310px;
    top:8%; left:8%;
    transform:rotate(-10deg);
  }
  .hero-panel-b {
    width:210px; height:310px;
    top:20%; left:48%;
    transform:rotate(-10deg);
    opacity:.5;
  }
}

/* ─────────────────────────────────────────────────────────────
   SERVICES
───────────────────────────────────────────────────────────── */
#services {
  background:linear-gradient(160deg,#0A1628 0%,#0D2137 50%,#0A1628 100%);
}
.services-grid {
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media(min-width:600px){ .services-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .services-grid { grid-template-columns:repeat(3,1fr); } }

.service-card {
  border-radius:24px; padding:26px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  cursor:pointer;
}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 52px rgba(0,0,0,.38);
}
.service-icon-wrap {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:18px;
  transition:transform .3s;
}
.service-card:hover .service-icon-wrap { transform:scale(1.1) rotate(-4deg); }
.service-title { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:3px; }
.service-title-ar {
  font-family:'Cairo',sans-serif; font-size:.7rem;
  color:var(--dim); direction:rtl; text-align:right; margin-bottom:12px;
}
.service-desc { font-size:.78rem; color:var(--subtle); line-height:1.7; margin-bottom:16px; }
.service-features { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.service-feature {
  display:flex; align-items:center; gap:7px; font-size:.72rem; color:var(--subtle);
}
.service-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.service-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.78rem; font-weight:600;
  transition:gap .25s;
}
.service-card:hover .service-link { gap:9px; }

.service-cta-card {
  border-radius:24px; padding:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(247,168,0,.18);
  background:rgba(247,168,0,.06);
  backdrop-filter:blur(16px);
  min-height:260px;
}
.service-cta-card h3 { font-size:1.1rem; font-weight:900; color:#fff; margin-bottom:10px; }
.service-cta-card p  { font-size:.8rem; color:var(--muted); line-height:1.65; margin-bottom:20px; }

/* ─────────────────────────────────────────────────────────────
   STATS
───────────────────────────────────────────────────────────── */
#stats {
  background:linear-gradient(135deg,#0D2137 0%,#0A1628 50%,#0D2137 100%);
  position:relative; overflow:hidden;
}
#stats::before,#stats::after {
  content:''; position:absolute; border-radius:50%; opacity:.05;
  background:radial-gradient(circle,#F7A800,transparent);
}
#stats::before { left:-160px; top:50%; transform:translateY(-50%); width:360px; height:360px; }
#stats::after  { right:-160px; top:50%; transform:translateY(-50%); width:360px; height:360px; }
.stats-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media(min-width:768px)  { .stats-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px) { .stats-grid { grid-template-columns:repeat(6,1fr); } }
.stat-card {
  border-radius:18px; padding:20px 14px; text-align:center;
}
.stat-icon  { font-size:1.7rem; margin-bottom:9px; }
.stat-value { font-size:1.7rem; font-weight:900; line-height:1; margin-bottom:6px; }
.stat-label { font-size:.7rem; color:var(--subtle); font-weight:500; line-height:1.4; }
.stat-label-ar {
  font-family:'Cairo',sans-serif; font-size:.62rem; color:var(--dim);
  direction:rtl; margin-top:3px;
}

/* ─────────────────────────────────────────────────────────────
   CALCULATOR
───────────────────────────────────────────────────────────── */
#calculator {
  background:var(--navy-mid); position:relative; overflow:hidden;
}
#calculator::before {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:700px; height:380px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse,rgba(247,168,0,.07) 0%,transparent 70%);
}
.calc-grid {
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media(min-width:1024px){ .calc-grid { grid-template-columns:1fr 1fr; } }

.calc-card {
  border-radius:26px; padding:28px;
}
@media(max-width:480px){ .calc-card { padding:20px; } }

.calc-field { margin-bottom:18px; }
.calc-label {
  display:block; font-size:.76rem; font-weight:600;
  color:var(--muted); margin-bottom:8px;
}
.calc-input, .calc-select {
  width:100%;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11);
  border-radius:13px; padding:13px 16px;
  color:#fff; font-family:inherit; font-size:.92rem; outline:none;
  transition:border-color .2s, background .2s;
}
.calc-input:focus, .calc-select:focus {
  border-color:rgba(247,168,0,.5);
  background:rgba(247,168,0,.04);
}
.calc-input::placeholder { color:var(--dim); }
.calc-select { background-color:var(--navy); cursor:pointer; }

.calc-type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.calc-type-btn {
  padding:11px 6px; border-radius:12px;
  font-size:.74rem; font-weight:600; font-family:inherit;
  border:1px solid rgba(255,255,255,.09); color:var(--subtle);
  cursor:pointer; transition:all .2s; min-height:44px; background:transparent;
}
.calc-type-btn:hover { border-color:rgba(255,255,255,.22); color:#fff; }
.calc-type-btn.active { background:rgba(247,168,0,.14); border-color:var(--solar); color:var(--solar); }

/* Results */
#calc-placeholder {
  border-radius:26px; padding:40px 22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:440px;
}
.calc-placeholder-icon { font-size:3.5rem; margin-bottom:18px; animation:float 4s ease-in-out infinite; }
.calc-placeholder-title { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:10px; }
.calc-placeholder-sub { font-size:.78rem; color:var(--subtle); max-width:240px; margin-bottom:22px; }
.calc-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
.calc-chip {
  padding:9px 4px; border-radius:11px;
  font-size:.68rem; font-weight:600; color:var(--solar); text-align:center;
}

#calc-results { display:none; }
.calc-result-main {
  border-radius:26px; padding:26px; text-align:center; margin-bottom:14px;
}
.calc-result-label { font-size:.76rem; color:var(--subtle); margin-bottom:7px; }
.calc-result-big   { font-size:2.8rem; font-weight:900; line-height:1; margin-bottom:4px; }
.calc-result-sub   { font-size:.78rem; color:var(--subtle); margin-bottom:18px; }

.progress-wrap  { margin-top:4px; }
.progress-meta  { display:flex; justify-content:space-between; font-size:.7rem; color:var(--subtle); margin-bottom:6px; }
.progress-track { height:9px; background:rgba(255,255,255,.08); border-radius:9px; overflow:hidden; }
.progress-fill  {
  height:100%; border-radius:9px;
  background:linear-gradient(90deg,#F7A800,#FFD060);
  width:0; transition:width 1.3s ease;
}

.calc-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-bottom:14px; }
.calc-metric-card { border-radius:14px; padding:14px; }
.calc-metric-icon  { font-size:.9rem; margin-bottom:7px; }
.calc-metric-value { font-size:1.05rem; font-weight:900; color:#fff; margin-bottom:2px; }
.calc-metric-label { font-size:.65rem; color:var(--subtle); }

/* ─────────────────────────────────────────────────────────────
   PROJECTS
───────────────────────────────────────────────────────────── */
#projects {
  background:linear-gradient(160deg,#0A1628 0%,#0D2137 50%,#0A1628 100%);
}
.project-filters {
  display:flex; gap:9px; overflow-x:auto; scrollbar-width:none;
  -ms-overflow-style:none; padding-bottom:4px; margin-bottom:36px;
}
.project-filters::-webkit-scrollbar { display:none; }
.filter-btn {
  flex-shrink:0; padding:9px 22px; border-radius:50px;
  font-size:.78rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:all .2s; min-height:38px;
  border:1px solid rgba(255,255,255,.09); color:var(--subtle); background:transparent;
}
.filter-btn:hover { border-color:rgba(247,168,0,.35); color:var(--solar); }
.filter-btn.active { background:var(--solar); color:var(--navy); border-color:var(--solar); box-shadow:var(--glow); }

.projects-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:600px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .projects-grid { grid-template-columns:repeat(3,1fr); } }

.project-card {
  border-radius:22px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 52px rgba(0,0,0,.38);
  border-color:rgba(247,168,0,.28);
}
@media(hover:none){ .project-card:hover { transform:none; } }
.project-visual {
  height:170px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.project-emoji {
  font-size:4.5rem; opacity:.25;
  transition:opacity .3s, transform .3s;
}
.project-card:hover .project-emoji { opacity:.45; transform:scale(1.1); }
.project-visual-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.55));
  opacity:0; transition:opacity .3s;
}
.project-card:hover .project-visual-overlay { opacity:1; }
.project-badge-type {
  position:absolute; top:11px; left:11px;
  font-size:.66rem; font-weight:700;
  padding:4px 11px; border-radius:50px;
}
.project-badge-city {
  position:absolute; top:11px; right:11px;
  display:flex; align-items:center; gap:4px;
  font-size:.66rem; font-weight:600;
  padding:4px 11px; border-radius:50px;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85); backdrop-filter:blur(4px);
}
.project-info { padding:18px; }
.project-title { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:14px; }
.project-metrics {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:6px; text-align:center;
}
.project-metric-value { font-size:.82rem; font-weight:800; line-height:1; margin-bottom:2px; }
.project-metric-label { font-size:.62rem; color:var(--dim); }
.project-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.project-savings { font-size:.78rem; font-weight:600; }

/* ─────────────────────────────────────────────────────────────
   WHY US
───────────────────────────────────────────────────────────── */
#why { background:var(--navy-mid); }
.why-grid {
  display:grid; grid-template-columns:1fr; gap:52px; align-items:center;
}
@media(min-width:1024px){ .why-grid { grid-template-columns:1fr 1fr; } }

.why-text .section-badge { text-align:left; }
.why-text .section-title { text-align:left; }
.why-text .section-sub { margin:0 0 28px; text-align:left; }
.why-checklist { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.why-check-item { display:flex; align-items:center; gap:11px; font-size:.85rem; color:var(--muted); }
.why-check-icon {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,168,0,.12); border:1px solid rgba(247,168,0,.28);
  color:var(--solar); font-size:.7rem;
}
.why-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.why-card { border-radius:18px; padding:18px; }
.why-card-icon {
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:13px; transition:transform .3s;
}
.why-card:hover .why-card-icon { transform:scale(1.1) rotate(-5deg); }
.why-card-title    { font-size:.85rem; font-weight:700; color:#fff; margin-bottom:3px; }
.why-card-title-ar { font-family:'Cairo',sans-serif; font-size:.66rem; color:var(--dim); direction:rtl; margin-bottom:8px; }
.why-card-desc     { font-size:.72rem; color:var(--subtle); line-height:1.6; }

/* ─────────────────────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────────────────────── */
#testimonials {
  background:linear-gradient(160deg,#0A1628 0%,#0D2137 50%,#0A1628 100%);
}
.testi-wrap { max-width:840px; margin:0 auto; }
.testimonial-slide { display:none; }
.testimonial-slide.active { display:block; animation:scale-in .4s ease both; }
.testi-card { border-radius:26px; padding:30px; margin-bottom:22px; }
@media(max-width:480px){ .testi-card { padding:20px; } }
.testi-quote { font-size:2.2rem; color:rgba(247,168,0,.22); line-height:1; margin-bottom:18px; }
.testi-text {
  font-size:clamp(.92rem,2vw,1.06rem); color:#fff;
  font-weight:500; line-height:1.8; margin-bottom:14px;
}
.testi-text-ar {
  font-family:'Cairo',sans-serif; font-size:.82rem;
  color:var(--subtle); direction:rtl; text-align:right; margin-bottom:22px;
}
.testi-author-row {
  display:flex; flex-direction:column; gap:14px;
}
@media(min-width:560px){
  .testi-author-row { flex-direction:row; align-items:center; justify-content:space-between; }
}
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.testi-name  { font-weight:700; color:#fff; font-size:.95rem; }
.testi-role  { font-size:.76rem; color:var(--subtle); margin-top:2px; }
.testi-stars { display:flex; gap:2px; margin-top:4px; color:var(--solar); font-size:.72rem; }
.testi-savings-badge { border-radius:14px; padding:12px 20px; text-align:center; flex-shrink:0; }
.testi-savings-label { font-size:.66rem; color:var(--subtle); margin-bottom:3px; }
.testi-savings-value { font-size:1.3rem; font-weight:900; }

.testi-nav {
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:22px;
}
.testi-btn {
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:var(--subtle); transition:all .2s; font-size:.9rem; cursor:pointer;
  background:transparent; min-width:44px; min-height:44px;
}
.testi-btn:hover { border-color:rgba(247,168,0,.5); color:var(--solar); }
.testi-dots { display:flex; gap:2px; align-items:center; }
.testi-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.2); cursor:pointer; transition:all .3s;
  padding:18px;
  background-clip:content-box;
  box-sizing:content-box;
}
.testi-dot.active {
  width:26px; background:var(--solar); border-radius:4px;
  background-clip:content-box;
}

.testi-thumbs {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
@media(min-width:560px){ .testi-thumbs { grid-template-columns:repeat(4,1fr); } }
.testi-thumb {
  padding:13px 10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.07); text-align:left;
  cursor:pointer; transition:all .2s;
  background:transparent; font-family:inherit;
}
.testi-thumb:hover { border-color:rgba(255,255,255,.18); }
.testi-thumb.active { background:rgba(247,168,0,.07); border-color:rgba(247,168,0,.28); }
.testi-thumb-avatar { font-size:1.4rem; margin-bottom:5px; }
.testi-thumb-name   { font-size:.76rem; font-weight:600; color:#fff; }
.testi-thumb-city   { font-size:.66rem; color:var(--subtle); }

/* ─────────────────────────────────────────────────────────────
   FAQ
───────────────────────────────────────────────────────────── */
#faq { background:var(--navy-mid); }
.faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item {
  border-radius:16px; border:1px solid rgba(255,255,255,.07); overflow:hidden;
  transition:border-color .3s;
}
.faq-item.open { border-color:rgba(247,168,0,.28); }
.faq-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:18px 22px; text-align:left; cursor:pointer;
  font-family:inherit; background:transparent; border:none;
}
@media(max-width:480px){ .faq-btn { padding:15px 16px; } }
.faq-q-fr {
  font-size:.88rem; font-weight:600; color:#fff; transition:color .2s; display:block;
}
.faq-item.open .faq-q-fr { color:var(--solar); }
.faq-btn:hover .faq-q-fr { color:var(--solar); }
.faq-q-ar {
  font-family:'Cairo',sans-serif; font-size:.68rem;
  color:var(--dim); direction:rtl; text-align:right; margin-top:3px; display:block;
}
.faq-icon {
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); color:var(--subtle);
  font-size:1.1rem; transition:all .3s;
}
.faq-item.open .faq-icon { background:var(--solar); color:var(--navy); transform:rotate(45deg); }
.faq-body {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .3s ease;
}
.faq-item.open .faq-body { opacity:1; }
.faq-answer {
  padding:0 22px 18px; font-size:.82rem; color:var(--muted); line-height:1.8;
  border-top:1px solid rgba(255,255,255,.06); padding-top:14px; margin:0 22px;
}
@media(max-width:480px){
  .faq-answer { margin:0 16px; padding:13px 0 15px; }
}

.faq-cta {
  max-width:780px; margin:20px auto 0;
  border-radius:18px; padding:26px 28px; text-align:center;
}
.faq-cta-title { font-weight:700; color:#fff; margin-bottom:7px; }
.faq-cta-sub   { font-size:.8rem; color:var(--subtle); margin-bottom:18px; }

/* ─────────────────────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────────────────────── */
#contact {
  background:linear-gradient(160deg,#0A1628 0%,#0D2137 50%,#0A1628 100%);
}
.contact-grid {
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media(min-width:1024px){ .contact-grid { grid-template-columns:1fr 1fr; } }

.contact-form-card { border-radius:26px; padding:28px; }
@media(max-width:480px){ .contact-form-card { padding:20px; } }
.contact-card-title {
  font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:22px;
  display:flex; align-items:center; gap:9px;
}
.contact-card-title-icon {
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,168,0,.15); font-size:.9rem; flex-shrink:0;
}

.form-row-2 { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
@media(min-width:480px){ .form-row-2 { grid-template-columns:1fr 1fr; } }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.form-group:last-child { margin-bottom:0; }
.form-label { font-size:.74rem; font-weight:600; color:var(--subtle); }
.form-control {
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px; padding:12px 15px;
  color:#fff; font-family:inherit; font-size:.86rem; outline:none;
  transition:border-color .2s, background .2s;
}
.form-control:focus { border-color:rgba(247,168,0,.45); background:rgba(247,168,0,.04); }
.form-control::placeholder { color:var(--dim); }
.form-select { background-color:var(--navy); cursor:pointer; }
.form-textarea { resize:none; min-height:96px; }

.form-sent { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 20px; }
.form-sent.show { display:flex; }
.form-sent-icon  { font-size:2.8rem; margin-bottom:14px; }
.form-sent-title { font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:8px; }
.form-sent-sub   { font-size:.82rem; color:var(--subtle); max-width:260px; }

.contact-info-list { display:flex; flex-direction:column; gap:12px; }
.contact-info-link {
  display:flex; align-items:center; gap:14px;
  padding:17px 18px; border-radius:16px;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.contact-info-link:hover { transform:translateX(4px); }
.contact-info-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.contact-info-label { font-size:.68rem; color:var(--subtle); margin-bottom:2px; }
.contact-info-value { font-weight:600; color:#fff; font-size:.88rem; }

.contact-wa-card {
  border-radius:18px; padding:26px; text-align:center;
  border:1px solid rgba(34,197,94,.22);
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.04));
  margin-top:12px;
}
.contact-wa-icon  { font-size:2.2rem; margin-bottom:10px; }
.contact-wa-title { font-weight:700; color:#fff; margin-bottom:5px; }
.contact-wa-sub   { font-size:.78rem; color:var(--subtle); margin-bottom:16px; }

/* Spinner */
.spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(10,22,40,.4); border-top-color:var(--navy);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
footer {
  background:linear-gradient(180deg,#0A1628 0%,#06111f 100%);
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-grid {
  display:grid; grid-template-columns:1fr; gap:32px;
  padding:56px 0 36px;
}
@media(min-width:600px) { .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; } }

.footer-brand-desc { font-size:.78rem; color:var(--dim); line-height:1.75; margin-bottom:10px; max-width:280px; }
.footer-brand-ar   { font-family:'Cairo',sans-serif; font-size:.68rem; color:#1e293b; direction:rtl; margin-bottom:18px; }
.footer-contacts   { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.footer-contact-a  {
  display:flex; align-items:center; gap:7px;
  font-size:.76rem; color:var(--subtle); transition:color .2s;
}
.footer-contact-a:hover { color:var(--solar); }
.footer-brand { }
.footer-socials { display:flex; gap:9px; margin-top:16px; }
.social-icon,
.footer-socials a {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, filter .2s, color .2s;
  border:1px solid rgba(255,255,255,.1); color:var(--muted);
  font-size:.88rem;
}
.social-icon:hover,
.footer-socials a:hover { transform:scale(1.12); filter:brightness(1.3); color:#fff; border-color:rgba(247,168,0,.3); }

.footer-col-title,
.footer-heading { font-weight:700; font-size:.82rem; color:#fff; margin-bottom:14px; letter-spacing:.03em; text-transform:uppercase; }
.footer-link-list,
.footer-links  { display:flex; flex-direction:column; gap:9px; list-style:none; padding:0; }
.footer-link,
.footer-links a { font-size:.76rem; color:var(--dim); transition:color .2s; }
.footer-link:hover,
.footer-links a:hover { color:var(--solar); }

.footer-bottom {
  padding:18px 0; border-top:1px solid rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:10px;
  align-items:center; text-align:center;
}
@media(min-width:600px){
  .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; }
}
.footer-copy,
.footer-bottom p { font-size:.72rem; color:var(--subtle); }
.footer-copy .ar { font-family:'Cairo',sans-serif; }
.footer-top-btn {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  color:var(--dim); cursor:pointer; transition:all .2s; background:transparent; font-size:.85rem;
  min-width:44px; min-height:44px;
}
.footer-top-btn:hover { border-color:rgba(247,168,0,.4); color:var(--solar); }

/* ─────────────────────────────────────────────────────────────
   WHATSAPP FLOAT
───────────────────────────────────────────────────────────── */
#wa-float {
  position:fixed; bottom:16px; right:16px; z-index:999;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
@media(min-width:640px){ #wa-float { bottom:26px; right:26px; } }

.wa-popup {
  background:rgba(10,22,40,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:18px;
  width:calc(100vw - 32px); max-width:290px;
  box-shadow:0 16px 56px rgba(0,0,0,.5);
  transform:scale(.88) translateY(16px); opacity:0; pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin:bottom right;
}
.wa-popup.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.wa-popup-head,
.wa-popup-header {
  display:flex; align-items:center; gap:10px;
  padding-bottom:13px; margin-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.wa-avatar,
.wa-popup-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(37,211,102,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--emerald);
}
.wa-name,
.wa-popup-name   { font-weight:700; font-size:.85rem; color:#fff; }
.wa-status,
.wa-popup-status { font-size:.66rem; color:var(--emerald); display:flex; align-items:center; gap:4px; }
.wa-status-dot { width:5px; height:5px; background:var(--emerald); border-radius:50%; animation:pulse-solar 2s infinite; }
.wa-x,
.wa-popup-close { margin-left:auto; color:var(--dim); cursor:pointer; font-size:.9rem; transition:color .2s; padding:10px; background:transparent; border:none; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.wa-x:hover,
.wa-popup-close:hover { color:#fff; }

.wa-bubbles,
.wa-popup-body { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.wa-bubble {
  background:rgba(255,255,255,.07); border-radius:13px 13px 13px 3px;
  padding:9px 13px; font-size:.76rem; color:#fff; max-width:88%;
}
.wa-bubble-ar {
  font-family:'Cairo',sans-serif; direction:rtl; text-align:right;
  background:rgba(247,168,0,.09); border-radius:13px 13px 3px 13px;
  color:var(--solar); align-self:flex-end;
}
.wa-quick { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.wa-quick-a {
  display:block; font-size:.72rem; color:var(--subtle);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:9px; padding:7px 11px; transition:all .2s; text-decoration:none;
}
.wa-quick-a:hover { background:rgba(247,168,0,.09); border-color:rgba(247,168,0,.28); color:var(--solar); }

.wa-open-a,
.wa-popup-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; background:#25D366; color:#fff; font-weight:700; font-size:.82rem;
  padding:11px; border-radius:12px; transition:opacity .2s; text-decoration:none;
}
.wa-open-a:hover,
.wa-popup-btn:hover { opacity:.9; }

.wa-btn {
  position:relative; width:58px; height:58px; border-radius:50%;
  background:#25D366; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(37,211,102,.44);
  transition:transform .2s, box-shadow .2s;
}
.wa-btn:hover { transform:scale(1.09); box-shadow:0 12px 34px rgba(37,211,102,.6); }
.wa-btn:active { transform:scale(.97); }
.wa-btn-ping {
  position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.28; animation:pulse-solar 2s infinite;
}
.wa-btn svg { width:28px; height:28px; fill:#fff; position:relative; z-index:1; }
.wa-badge {
  position:absolute; top:-2px; right:-2px;
  width:19px; height:19px; background:#EF4444; border-radius:50%;
  font-size:.58rem; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--navy);
}

/* ─────────────────────────────────────────────────────────────
   BLOG PAGE
───────────────────────────────────────────────────────────── */
.page-hero {
  position:relative;
  padding:clamp(100px,14vw,140px) 0 clamp(48px,7vw,72px);
  text-align:center; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(247,168,0,.10) 0%,transparent 60%),
    linear-gradient(160deg,#0A1628 0%,#0D2137 40%,#0A1628 100%);
}
.page-hero h1,
.page-hero-title {
  font-size:clamp(1.8rem,4.5vw,3rem); font-weight:900; color:#fff;
  margin-bottom:12px; line-height:1.15;
}
.page-hero p,
.page-hero-sub  { color:var(--muted); font-size:.95rem; line-height:1.7; max-width:560px; margin:0 auto 32px; }
.page-hero .ar {
  font-family:'Cairo',sans-serif; font-size:.9rem;
  color:rgba(247,168,0,.5); direction:rtl; margin-top:6px;
}

.blog-filters {
  position:relative;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; margin:0 auto; justify-content:center;
  flex-wrap:wrap; max-width:800px;
}
.blog-filters::-webkit-scrollbar { display:none; }

.filter-pill {
  position:absolute; z-index:0;
  background:linear-gradient(135deg,#F7A800,#D4900A);
  border-radius:50px; pointer-events:none;
  box-shadow:0 4px 22px rgba(247,168,0,.45);
  transition:left .3s cubic-bezier(.4,0,.2,1),
             top  .3s cubic-bezier(.4,0,.2,1),
             width .3s cubic-bezier(.4,0,.2,1),
             height .3s cubic-bezier(.4,0,.2,1);
  will-change:left,top,width;
}

.blog-filter-btn {
  flex-shrink:0; padding:8px 20px; border-radius:50px; cursor:pointer;
  font-size:.82rem; font-weight:600; font-family:'Inter',sans-serif;
  background:rgba(255,255,255,.06); color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  transition:color .2s ease, background .2s ease, border-color .2s ease;
  position:relative; z-index:1;
}
.blog-filter-btn:hover { background:rgba(247,168,0,.12); color:var(--solar); border-color:rgba(247,168,0,.25); }
.blog-filter-btn.active {
  background:transparent; color:#0A1628;
  border-color:transparent; font-weight:700;
  box-shadow:none;
}

/* Article page */
.article-section {
  padding:clamp(100px,14vw,140px) 0 clamp(48px,7vw,72px);
  background:
    radial-gradient(ellipse at 70% 30%,rgba(247,168,0,.07) 0%,transparent 55%),
    var(--navy);
}

.blog-grid {
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media(min-width:600px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .blog-grid { grid-template-columns:repeat(3,1fr); } }

.blog-card {
  border-radius:20px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(0,0,0,.36);
  border-color:rgba(247,168,0,.24);
}
.blog-img {
  height:160px; display:flex; align-items:center; justify-content:center;
  font-size:4rem; opacity:.8; position:relative; overflow:hidden;
}
.blog-content { padding:18px; }
.blog-cat {
  display:inline-block; font-size:.66rem; font-weight:700;
  padding:3px 10px; border-radius:50px;
  background:rgba(247,168,0,.1); color:var(--solar); margin-bottom:10px;
}
.blog-card h3 {
  font-size:.9rem; font-weight:700; color:#fff; margin-bottom:8px; line-height:1.45;
}
.blog-excerpt { font-size:.76rem; color:var(--subtle); line-height:1.65; margin-bottom:12px; }
.blog-meta {
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:.68rem; color:var(--dim);
  padding-top:12px; border-top:1px solid rgba(255,255,255,.06);
}

/* ─────────────────────────────────────────────────────────────
   REDIRECT PAGE
───────────────────────────────────────────────────────────── */
.redirect-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.redirect-box,
.redirect-card {
  text-align:center; max-width:480px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:48px 32px;
}
.redirect-icon  { font-size:3rem; margin-bottom:16px; display:flex; justify-content:center; }
.redirect-title { font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:10px; }
.redirect-sub   { font-size:.88rem; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.redirect-hint  { font-size:.78rem; color:var(--subtle); margin-bottom:24px; }
.redirect-links { display:flex; flex-direction:column; gap:12px; }
@media(min-width:400px){ .redirect-links { flex-direction:row; justify-content:center; } }

/* ── Scroll-to-top float btn ─────────────────────────────────── */
.scroll-top-btn {
  width:46px; height:46px; border-radius:50%;
  background:rgba(13,33,55,.92); border:1.5px solid rgba(247,168,0,.35);
  color:var(--solar); font-size:1.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transform:scale(.75);
  transition:opacity .3s ease, transform .3s ease, background .2s, border-color .2s;
}
.scroll-top-btn.visible { opacity:1; pointer-events:auto; transform:scale(1); }
.scroll-top-btn:hover { background:rgba(247,168,0,.18); border-color:var(--solar); }

/* ── Misc ───────────────────────────────────────────────────── */
.gradient-text { background:linear-gradient(135deg,#F7A800,#FFD060); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 20px; border-radius:50px;
  font-size:.78rem; font-weight:600; color:var(--solar);
  background:rgba(247,168,0,.08); border:1px solid rgba(247,168,0,.2);
  margin-bottom:20px;
}
.badge-dot { width:7px; height:7px; border-radius:50%; background:var(--solar); flex-shrink:0; animation:pulse-solar 2s infinite; }
.scroll-x-hide { overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.scroll-x-hide::-webkit-scrollbar { display:none; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Mobile polish ──────────────────────────────────────────── */
@media(max-width:480px) {
  .calc-type-btn { padding:9px 12px; font-size:.76rem; }
  .section-title { font-size:clamp(1.4rem,6vw,2rem); }
  .blog-filters { justify-content:flex-start; }
  .footer-grid { gap:24px; }
  .page-hero { padding:90px 0 40px; }
  .redirect-card, .redirect-box { padding:36px 20px; }
}