/* ═══════════════════════════════════════════════════
   برج اللياقة – FITNESS TOWER  |  Full Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --red:    #d72631;
  --red2:   #a01e28;
  --glow:   rgba(215,38,49,.3);
  --black:  #080808;
  --dark:   #111111;
  --card:   #181818;
  --border: rgba(255,255,255,.08);
  --white:  #ffffff;
  --gray:   #aaaaaa;
  --nav-h:  68px;
  --r:      12px;
  --ease:   cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:'Tajawal',Arial,sans-serif; background:var(--black); color:var(--white); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden }
img   { display:block; max-width:100% }
a     { text-decoration:none; color:inherit }
ul    { list-style:none }
input,textarea,button { font-family:inherit }

/* ── Layout ── */
.wrap { max-width:1160px; margin:0 auto; padding:0 1.5rem }

/* ── Sections ── */
.section { padding:5.5rem 0 }
.bg-dark  { background:var(--dark) }
.bg-black { background:var(--black) }

/* ── Section Header ── */
.sec-head { text-align:center; margin-bottom:3.5rem }
.sec-head p { color:var(--gray); font-size:.97rem; max-width:560px; margin:.75rem auto 0 }

.tag {
  display:inline-block;
  font-size:.72rem; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--red);
  border:1px solid rgba(215,38,49,.35);
  border-radius:50px;
  padding:.28rem 1rem;
  margin-bottom:.85rem;
}

h2 {
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:900; color:var(--white); line-height:1.2;
}
h2 span { color:var(--red) }

/* ── Buttons ── */
.btn-red {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--red); color:var(--white);
  font-weight:700; font-size:.95rem; letter-spacing:.4px;
  padding:.82rem 1.9rem; border-radius:9px; border:none; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-red:hover { background:var(--red2); transform:translateY(-2px); box-shadow:0 10px 28px var(--glow) }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--white);
  font-weight:700; font-size:.95rem;
  padding:.82rem 1.9rem; border-radius:9px;
  border:2px solid rgba(255,255,255,.3);
  transition:all .25s var(--ease);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); transform:translateY(-2px) }

.btn-border {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--red);
  font-weight:700; font-size:.9rem;
  padding:.75rem 1.5rem; border-radius:9px;
  border:2px solid var(--red);
  margin-top:1rem;
  transition:all .25s var(--ease);
}
.btn-border:hover { background:var(--red); color:var(--white); transform:translateY(-2px); box-shadow:0 8px 22px var(--glow) }

/* Pulse animation on hero CTA */
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(215,38,49,.6) }
  60%      { box-shadow:0 0 0 16px rgba(215,38,49,0) }
}
.btn-pulse { animation:pulse 2.5s ease-in-out infinite }

/* ═══════════ LOADER ═══════════ */
#loader {
  position:fixed; inset:0; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .5s ease;
}
#loader img { width:180px; height:180px; border-radius:18px; object-fit:contain; margin-bottom:2rem; animation:lPulse 1.3s ease-in-out infinite }
.loader-track { width:200px; height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden }
.loader-fill  { height:100%; background:var(--red); border-radius:3px; animation:lBar 1.5s ease-in-out infinite }
@keyframes lPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.96)} }
@keyframes lBar   { 0%{width:0%} 70%{width:100%} 100%{width:100%} }

/* ═══════════ NAVBAR ═══════════ */
#header {
  position:fixed; top:0; left:0; right:0; z-index:900;
}
#navbar {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); padding:0 1.75rem;
  background:transparent;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
#navbar.solid {
  background:rgba(5,5,5,.97);
  backdrop-filter:blur(18px);
  box-shadow:0 2px 30px rgba(0,0,0,.7);
}
.nav-logo img { height:54px; border-radius:9px; object-fit:contain }

.nav-menu { display:flex; align-items:center; gap:.1rem }
.nav-link {
  color:var(--gray); font-size:.9rem; font-weight:500;
  padding:.45rem .85rem; border-radius:7px;
  transition:color .2s, background .2s;
}
.nav-link:hover, .nav-link.active { color:var(--white); background:rgba(255,255,255,.07) }
.nav-link.active { color:var(--red); background:rgba(215,38,49,.1) }

.nav-cta {
  background:var(--red); color:var(--white);
  font-weight:700; font-size:.88rem; letter-spacing:.4px;
  padding:.55rem 1.2rem; border-radius:8px;
  transition:all .25s var(--ease);
}
.nav-cta:hover { background:var(--red2); transform:translateY(-1px); box-shadow:0 5px 16px var(--glow) }

/* Hamburger */
#menuBtn {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; background:transparent;
  border:1px solid var(--border); border-radius:9px; cursor:pointer;
  transition:background .2s;
}
#menuBtn:hover { background:rgba(255,255,255,.07) }
#menuBtn span {
  width:20px; height:2px; background:var(--white); border-radius:2px;
  display:block; margin:0 auto;
  transition:transform .3s, opacity .3s;
}
#menuBtn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
#menuBtn.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
#menuBtn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Drawer */
#drawer {
  display:none; flex-direction:column; gap:.2rem;
  padding:.75rem 1.25rem 1.5rem;
  background:rgba(4,4,4,.98);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
}
#drawer.open { max-height:420px; display:flex }
#drawer a {
  color:var(--gray); font-size:.95rem; font-weight:500;
  padding:.72rem 1rem; border-radius:8px;
  transition:all .2s;
}
#drawer a:hover { color:var(--white); background:rgba(255,255,255,.06) }
.drawer-cta {
  margin-top:.5rem;
  background:var(--red) !important;
  color:var(--white) !important;
  font-weight:700 !important;
  text-align:center;
}

/* ═══════════ HERO ═══════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding-top:var(--nav-h);
  background:
    radial-gradient(ellipse 65% 55% at 25% 50%, rgba(215,38,49,.1) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 80% 20%, rgba(215,38,49,.07) 0%, transparent 60%),
    var(--black);
}

/* Decorative rings */
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(215,38,49,.12);
}
.r1 { width:700px; height:700px; top:-250px; right:-200px; animation:spin 30s linear infinite }
.r2 { width:500px; height:500px; bottom:-180px; left:-100px; border-color:rgba(215,38,49,.08); animation:spin 22s linear infinite reverse }
.r3 { width:300px; height:300px; top:20%; left:10%; border-color:rgba(255,255,255,.04); animation:spin 16s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }

/* Animated vertical lines */
.hero-line { position:absolute; width:1px; height:100%; background:linear-gradient(to bottom, transparent, rgba(215,38,49,.2), transparent) }
.l1 { left:20%; animation:glow 3s ease-in-out 0s   infinite }
.l2 { left:50%; animation:glow 3s ease-in-out .8s  infinite }
.l3 { left:80%; animation:glow 3s ease-in-out 1.6s infinite }
@keyframes glow { 0%,100%{opacity:.2} 50%{opacity:.9} }

/* Hero content */
.hero-inner { position:relative; z-index:2; text-align:center; padding:4rem 1.5rem 7rem; max-width:900px }

.hero-logo {
  width:210px; height:210px; border-radius:20px; object-fit:contain;
  margin:0 auto 2rem;
  box-shadow:0 10px 50px rgba(215,38,49,.35), 0 0 0 1px rgba(215,38,49,.2);
  animation:heroLogoIn 1s var(--ease) both;
}
@keyframes heroLogoIn { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:none} }

.hero-badge {
  display:inline-block;
  font-size:.75rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--red); border:1px solid rgba(215,38,49,.4); border-radius:50px;
  padding:.28rem 1rem; margin-bottom:1.4rem;
  animation:up 1s var(--ease) .15s both;
}

.hero-title {
  margin-bottom:1rem;
  animation:up 1s var(--ease) .3s both;
}
.ht-ar {
  display:block;
  font-size:clamp(2rem,5.5vw,3.8rem);
  font-weight:900; color:var(--white); line-height:1.15;
}
.ht-en {
  display:block;
  font-size:clamp(1.5rem,4vw,2.8rem);
  font-weight:900; color:var(--red); letter-spacing:3px; margin-top:.3rem;
}

.hero-sub  { font-size:1.1rem; font-weight:600; color:var(--white); margin-bottom:.75rem; animation:up 1s var(--ease) .42s both }
.hero-desc { font-size:.97rem; color:var(--gray); max-width:660px; margin:0 auto 2.25rem; line-height:1.9; animation:up 1s var(--ease) .54s both }

.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:up 1s var(--ease) .65s both }

@keyframes up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

/* Hero wave */
.hero-wave { position:absolute; bottom:-1px; left:0; right:0; height:90px; line-height:0 }
.hero-wave svg { display:block; width:100%; height:100% }

/* ═══════════ ABOUT ═══════════ */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.about-text .tag { margin-bottom:.65rem }
.about-text h2   { margin-bottom:1.25rem }
.about-text p    { color:#ddd; font-size:1rem; margin-bottom:1.1rem; line-height:1.88 }
.about-text .btn-red { margin-top:.5rem }

.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
.stat-box {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:1.8rem 1.2rem; text-align:center;
  transition:border-color .25s, transform .25s;
}
.stat-box:hover { border-color:rgba(215,38,49,.35); transform:translateY(-4px) }
.stat-box strong { display:block; font-size:2.4rem; font-weight:900; color:var(--red); line-height:1; margin-bottom:.5rem }
.stat-box span   { font-size:.82rem; color:var(--gray); font-weight:500 }

/* ═══════════ STATS BAR ═══════════ */
.statsbar { background:var(--red); padding:2.75rem 0 }
.statsbar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center }
.sb-item strong { display:block; font-size:2.5rem; font-weight:900; color:#fff; line-height:1; margin-bottom:.4rem }
.sb-item span   { font-size:.88rem; color:rgba(255,255,255,.88); font-weight:500 }

/* ═══════════ SERVICES – PREMIUM ═══════════ */

/* ── Hero Service Cards (01, 02) ── */
.srv-hero {
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2.75rem 2.5rem;
  margin-bottom:1.6rem;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.srv-hero:hover {
  transform:translateY(-6px);
  border-color:rgba(215,38,49,.35);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(215,38,49,.08);
}

/* Corner glow */
.srv-hero-glow {
  position:absolute; top:-60px; right:-60px;
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(215,38,49,.18) 0%, transparent 70%);
  pointer-events:none;
  transition:opacity .4s;
}
.srv-hero:hover .srv-hero-glow { opacity:1.4 }

/* Big number */
.srv-hero-num {
  position:absolute; top:12px; left:18px;
  font-size:5.5rem; font-weight:900; line-height:1;
  color:rgba(215,38,49,.07);
  pointer-events:none;
  letter-spacing:-3px;
  transition:color .4s;
}
.srv-hero:hover .srv-hero-num { color:rgba(215,38,49,.14) }

/* Badge */
.srv-badge {
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:2px;
  color:var(--red); text-transform:uppercase;
  background:rgba(215,38,49,.1);
  border:1px solid rgba(215,38,49,.25);
  border-radius:50px;
  padding:.3rem 1rem;
  margin-bottom:1.3rem;
}

/* Body layout */
.srv-hero-body {
  display:flex; align-items:flex-start; gap:2rem;
  position:relative; z-index:1;
}

/* Icon */
.srv-hero-icon {
  flex-shrink:0;
  width:72px; height:72px;
  background:rgba(215,38,49,.1);
  border:1px solid rgba(215,38,49,.2);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  transition:background .3s, transform .3s, box-shadow .3s;
}
.srv-hero:hover .srv-hero-icon {
  background:rgba(215,38,49,.2);
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 8px 24px rgba(215,38,49,.2);
}

/* Text block */
.srv-hero-text { flex:1 }
.srv-hero-text h3 {
  font-size:1.35rem; font-weight:800; color:var(--white);
  margin-bottom:.8rem;
}
.srv-hero-text p {
  font-size:.95rem; color:#ccc; line-height:1.85;
  margin-bottom:.6rem;
}
.srv-hero-text strong { color:var(--red) }

/* Tag line */
.srv-hero-tag {
  display:inline-block;
  margin-top:.7rem;
  background:rgba(215,38,49,.08);
  border:1px solid rgba(215,38,49,.18);
  border-radius:8px;
  padding:.5rem 1rem;
  font-size:.88rem; font-weight:600;
  color:var(--red);
}

/* Alt style (2nd hero card – flipped glow) */
.srv-hero-alt .srv-hero-glow {
  right:auto; left:-60px;
  background:radial-gradient(circle, rgba(215,38,49,.14) 0%, transparent 70%);
}
.srv-hero-alt .srv-hero-num {
  left:auto; right:18px;
}

/* Decorative left bar on hero cards */
.srv-hero::before {
  content:''; position:absolute; top:0; right:0;
  width:4px; height:100%;
  background:linear-gradient(to bottom, var(--red), transparent);
  opacity:.6;
  transition:opacity .3s;
}
.srv-hero:hover::before { opacity:1 }
.srv-hero-alt::before { right:auto; left:0 }

/* ── Grid – Cards 3–6 ── */
.srv-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  margin-top:.2rem;
}

.srv-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2.2rem 1.8rem 2rem;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.srv-card:hover {
  transform:translateY(-8px);
  border-color:rgba(215,38,49,.3);
  box-shadow:0 24px 48px rgba(0,0,0,.45), 0 0 30px rgba(215,38,49,.06);
}

/* Card number */
.srv-card-num {
  position:absolute; top:10px; left:14px;
  font-size:3.5rem; font-weight:900; line-height:1;
  color:rgba(215,38,49,.06);
  pointer-events:none;
  letter-spacing:-2px;
  transition:color .35s;
}
.srv-card:hover .srv-card-num { color:rgba(215,38,49,.14) }

/* Card icon */
.srv-card-icon {
  width:56px; height:56px;
  background:rgba(215,38,49,.1);
  border:1px solid rgba(215,38,49,.15);
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  margin-bottom:1.2rem;
  transition:background .3s, transform .3s, box-shadow .3s;
}
.srv-card:hover .srv-card-icon {
  background:rgba(215,38,49,.2);
  transform:scale(1.1) rotate(-5deg);
  box-shadow:0 6px 18px rgba(215,38,49,.18);
}

.srv-card h3 {
  font-size:1.08rem; font-weight:700; color:var(--white);
  margin-bottom:.7rem;
}
.srv-card p {
  font-size:.91rem; color:var(--gray); line-height:1.8;
}

/* Animated bottom line */
.srv-card-line {
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--red2));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.srv-card:hover .srv-card-line {
  transform:scaleX(1);
  transform-origin:left;
}

/* ═══════════ VISION ═══════════ */
.vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-bottom:3.5rem }

.vision-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:2.5rem 2rem; position:relative; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.vision-card::before {
  content:''; position:absolute; top:0; right:0;
  width:4px; height:100%;
  background:linear-gradient(to bottom, var(--red), var(--red2));
}
.vision-card:hover { border-color:rgba(215,38,49,.3); transform:translateY(-5px) }
.vc-icon { font-size:2.2rem; margin-bottom:1rem }
.vision-card h3 { font-size:1.25rem; font-weight:800; color:var(--red); margin-bottom:.9rem }
.vision-card p  { color:#ddd; line-height:1.85; font-size:.97rem }

/* Why box */
.why-box { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2.5rem }
.why-box h3 { font-size:1.55rem; font-weight:800; color:var(--white); text-align:center; margin-bottom:2rem }
.why-box h3 span { color:var(--red) }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem }
.why-row {
  display:flex; align-items:center; gap:1rem;
  background:rgba(215,38,49,.05); border:1px solid rgba(215,38,49,.12);
  border-radius:9px; padding:1rem 1.2rem;
  transition:background .25s, border-color .25s, transform .25s;
}
.why-row:hover { background:rgba(215,38,49,.1); border-color:rgba(215,38,49,.3); transform:translateY(-3px) }
.why-tick {
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:rgba(215,38,49,.15); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:900;
  transition:background .25s, color .25s;
}
.why-row:hover .why-tick { background:var(--red); color:#fff }
.why-row span { color:#e0e0e0; font-size:.93rem; font-weight:500 }

/* ═══════════ CONTACT ═══════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:3.5rem; align-items:start }

.contact-info { display:flex; flex-direction:column }
.ci-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.6rem }
.ci-icon {
  flex-shrink:0; width:48px; height:48px;
  background:rgba(215,38,49,.1); border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  transition:background .25s, transform .25s;
}
.ci-item:hover .ci-icon { background:rgba(215,38,49,.22); transform:scale(1.08) }
.ci-item div strong { display:block; color:var(--white); font-size:.88rem; margin-bottom:.2rem }
.ci-item div a { color:var(--gray); font-size:.9rem; transition:color .2s }
.ci-item div a:hover { color:var(--red) }

.contact-form {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:2.25rem;
}
.contact-form h3 { font-size:1.18rem; font-weight:700; margin-bottom:1.6rem }
.field { margin-bottom:1.2rem }
.field label { display:block; font-size:.82rem; font-weight:600; color:var(--gray); margin-bottom:.45rem; letter-spacing:.3px }
.field input,
.field textarea {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:9px; padding:.78rem 1rem; color:var(--white);
  font-size:.94rem; outline:none;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.field input:focus,
.field textarea:focus {
  border-color:rgba(215,38,49,.5);
  background:rgba(215,38,49,.04);
  box-shadow:0 0 0 3px rgba(215,38,49,.1);
}
.field textarea { resize:vertical; min-height:130px }
.contact-form .btn-red { width:100%; padding:.92rem; font-size:.97rem; margin-top:.25rem }
#successMsg {
  display:none; margin-top:1rem;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3);
  color:#4ade80; padding:.9rem 1rem; border-radius:9px;
  text-align:center; font-weight:600; font-size:.92rem;
}

/* ═══════════ NAV STORE BUTTON ═══════════ */
.nav-store {
  color:var(--white); font-weight:600; font-size:.85rem;
  padding:.45rem .9rem; border-radius:7px;
  border:1px solid var(--border);
  transition:all .25s var(--ease);
}
.nav-store:hover { border-color:var(--red); color:var(--red) }

/* ═══════════ FOOTER ═══════════ */
footer { background:#040404; border-top:1px solid rgba(255,255,255,.06); padding:3.5rem 0 0 }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.06) }

.footer-logo { height:70px; width:70px; border-radius:11px; object-fit:contain; margin-bottom:1rem }
.footer-company { color:var(--white); font-size:.95rem; font-weight:700; margin-bottom:.5rem }
.footer-unified,.footer-email { color:var(--gray); font-size:.85rem; margin-bottom:.35rem }
.footer-unified a,.footer-email a { color:var(--red); transition:color .2s }
.footer-unified a:hover,.footer-email a:hover { color:#fff }

.footer-social { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem }
.footer-social a {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:9px; color:var(--gray); font-size:.82rem; font-weight:500;
  transition:all .25s;
}
.footer-social a:hover { background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); box-shadow:0 6px 16px var(--glow) }
.footer-social a span { display:inline }

.footer-col h4 { color:var(--white); font-size:.92rem; font-weight:700; margin-bottom:1.2rem; letter-spacing:.4px }

.footer-links ul li { margin-bottom:.5rem }
.footer-links ul li a { color:var(--gray); font-size:.88rem; transition:color .2s }
.footer-links ul li a:hover { color:var(--red) }

.footer-copy {
  text-align:center; padding:1.5rem; color:var(--gray); font-size:.8rem; letter-spacing:.3px;
}

/* ═══════════ WHATSAPP FLOATING BUTTON ═══════════ */
.whatsapp-float {
  position:fixed;
  bottom:28px;
  left:28px;
  z-index:800;
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5);
  animation:waPulse 2s ease-in-out infinite;
  transition:transform .25s, box-shadow .25s;
}
.whatsapp-float:hover {
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(37,211,102,.6);
  animation:none;
}
@keyframes waPulse {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5) }
  50%      { box-shadow:0 4px 20px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0) }
}
.wa-tooltip {
  position:absolute;
  left:72px; bottom:50%; transform:translateY(50%);
  background:#111; color:#fff;
  font-size:.82rem; font-weight:600;
  padding:.4rem .85rem; border-radius:7px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.whatsapp-float:hover .wa-tooltip { opacity:1 }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1024px){
  .about-grid      { grid-template-columns:1fr; gap:2.5rem }
  .srv-grid        { grid-template-columns:repeat(2,1fr) }
  .footer-grid     { grid-template-columns:1fr 1fr }
  .footer-brand    { grid-column:1/-1 }
}
@media(max-width:768px){
  .section         { padding:3.5rem 0 }
  .nav-menu, .nav-cta, .nav-store { display:none }
  #menuBtn         { display:flex }
  .srv-hero        { padding:2rem 1.5rem }
  .srv-hero-body   { flex-direction:column; gap:1.2rem }
  .srv-hero-icon   { width:58px; height:58px }
  .srv-hero-text h3{ font-size:1.15rem }
  .srv-hero-num    { font-size:4rem }
  .srv-grid        { grid-template-columns:1fr }
  .vision-grid     { grid-template-columns:1fr }
  .contact-grid    { grid-template-columns:1fr }
  .statsbar-grid   { grid-template-columns:repeat(2,1fr) }
  .hero-logo       { width:170px; height:170px }
  .hero-btns .btn-red, .hero-btns .btn-ghost { min-width:170px }
  .footer-grid     { grid-template-columns:1fr; gap:2rem }
  .footer-brand    { grid-column:unset }
  .whatsapp-float  { width:54px; height:54px; bottom:20px; left:20px }
  .whatsapp-float svg { width:24px; height:24px }
  .wa-tooltip      { display:none }
}
@media(max-width:560px){
  .srv-hero        { padding:1.5rem 1.2rem }
  .srv-hero-num    { font-size:3rem; top:8px }
  .srv-hero-icon   { width:50px; height:50px }
  .srv-hero-icon svg { width:30px; height:30px }
  .srv-card        { padding:1.8rem 1.4rem }
  .srv-card-num    { font-size:2.5rem }
  .about-stats     { grid-template-columns:1fr 1fr }
  .statsbar-grid   { grid-template-columns:1fr 1fr }
  .hero-logo       { width:150px; height:150px; border-radius:15px }
  .hero-btns       { flex-direction:column; align-items:center }
  .hero-btns a     { width:100%; max-width:300px }
}