/* =============================================================
   ABOAMOUD THEME v4 — assets/css/main.css
   RTL Arabic | PHP 8.3 | No plugin dependency
   ============================================================= */

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

/* ── Variables ─────────────────────────────────────── */
:root {
  --p:    #0d5fa5;
  --p-d:  #0a4f8a;
  --p-xs: #07375f;
  --dark: #03101d;
  --navy: #0f172a;
  --s9:   #0f172a;
  --s8:   #1e293b;
  --s7:   #334155;
  --s6:   #475569;
  --s5:   #64748b;
  --s3:   #cbd5e1;
  --s1:   #f1f5f9;
  --s0:   #f8fafc;
  --cyan: #a5f3fc;
  --acc:  #7dd3fc;
  --w:    #ffffff;
  --mw:   1152px;
  --px:   1.5rem;
  --r:    6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2x: 32px;
  --sh-card: 0 14px 40px rgba(6,38,65,.10);
  --sh-lg:   0 20px 55px rgba(13,95,165,.13);
  --sh-btn:  0 10px 28px rgba(13,95,165,.36);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--ff, 'Cairo', 'Segoe UI', Tahoma, sans-serif);
  background: #fff;
  color: var(--navy);
  direction: rtl;
  text-align: right;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }
ul,ol { list-style: none; }
button{ font-family: inherit; cursor: pointer; }

/* ── Layout helpers ────────────────────────────────── */
.w   { max-width: var(--mw); margin-inline: auto; padding-inline: var(--px); }
.sec { padding-block: 5rem; }
.sec-sm { padding-block: 3.5rem; }

/* ── Scroll Reveal ─────────────────────────────────── */
.r0 { opacity:0; transform:translateY(30px);
      transition: opacity .7s cubic-bezier(.22,1,.36,1),
                  transform .7s cubic-bezier(.22,1,.36,1); }
.r0.on  { opacity:1; transform:none; }
.r0.d1  { transition-delay:.10s; }
.r0.d2  { transition-delay:.20s; }
.r0.d3  { transition-delay:.30s; }
.r0.d4  { transition-delay:.40s; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.65rem; border-radius: var(--r);
  font-size: 1rem; font-weight: 700; line-height: 1;
  border: 2px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .2s, box-shadow .3s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }

.btn-p  { background: var(--p);    color: #fff; box-shadow: var(--sh-btn); }
.btn-p:hover  { background: var(--p-d); color: #fff; }

.btn-ow { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ow:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn-dk { background: var(--navy); color: #fff; }
.btn-dk:hover { background: var(--p); color: #fff; }

.btn-ghost {
  background: transparent; color: var(--s7);
  border-color: var(--s3); font-size: .9rem;
}
.btn-ghost:hover { border-color: var(--p); color: var(--p); }

/* ── Section Title ─────────────────────────────────── */
.stitle h2 {
  font-size: clamp(1.65rem, 3.5vw, 2.65rem);
  font-weight: 900; line-height: 1.12; color: var(--navy);
}
.stitle p {
  margin-top: .9rem;
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  line-height: 1.85; color: var(--s6); max-width: 700px;
}
.stitle.lt h2 { color: #fff; }
.stitle.lt p  { color: var(--s1); }

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.abm-hdr {
  position: sticky; top: 0; z-index: 999;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.45);
  transition: box-shadow .3s;
}
.abm-hdr.on { box-shadow: 0 4px 24px rgba(0,0,0,.09); }

.hdr-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.hdr-logo {
  font-size: 1.6rem; font-weight: 900;
  color: var(--p); letter-spacing: .03em;
  transition: color .2s;
}
.hdr-logo:hover { color: var(--p-d); }

/* Desktop nav */
.hdr-nav { display: flex; align-items: center; gap: .15rem; }
.hdr-nav a {
  padding: .42rem .82rem; border-radius: var(--r);
  font-size: .88rem; font-weight: 600; color: var(--s7);
  transition: background .2s, color .2s;
}
.hdr-nav a:hover, .hdr-nav a.cur { background: var(--p); color: #fff; }

/* Social icons */
.hdr-social { display: flex; align-items: center; gap: .5rem; }
.hdr-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--s1); color: var(--s7);
  transition: background .2s, color .2s, transform .2s;
}
.hdr-social a:hover { transform: translateY(-2px); }
.hdr-social a.fb:hover  { background: #1877f2; color: #fff; }
.hdr-social a.ig:hover  { background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%); color: #fff; }
.hdr-social a.tk:hover  { background: #010101; color: #fff; }
.hdr-social a svg { width: 16px; height: 16px; fill: currentColor; }

/* Hamburger */
.hdr-burger {
  display: none;
  background: none; border: 1.5px solid var(--s3);
  border-radius: var(--r-md); padding: .42rem .75rem;
  font-size: .8rem; font-weight: 600; color: var(--s7);
  gap: .4rem; align-items: center;
}
.hdr-burger span { font-size: 1rem; }

/* Mobile nav */
.hdr-mob {
  display: none; flex-direction: column; gap: .2rem;
  padding-bottom: .75rem;
}
.hdr-mob.open { display: flex; }
.hdr-mob a {
  padding: .6rem .85rem; border-radius: var(--r-md);
  font-size: .9rem; font-weight: 600; color: var(--s7);
  transition: background .2s;
}
.hdr-mob a:hover { background: var(--s1); }
/* Mobile social row */
.hdr-mob-social {
  display: flex; gap: .6rem; padding: .5rem .85rem 0;
}
.hdr-mob-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--s1); color: var(--s7);
  transition: background .2s, color .2s;
}
.hdr-mob-social a svg { width: 16px; height: 16px; fill: currentColor; }
.hdr-mob-social a.fb:hover { background: #1877f2; color: #fff; }
.hdr-mob-social a.ig:hover { background: #d6249f; color: #fff; }
.hdr-mob-social a.tk:hover { background: #010101; color: #fff; }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.abm-hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center; overflow: hidden;
  background: #0b1f30;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-out infinite alternate;
}
.hero-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(24,138,221,.5), transparent 38%),
    radial-gradient(circle at 15% 78%, rgba(0,184,212,.3), transparent 42%),
    linear-gradient(120deg, rgba(4,22,38,.88), rgba(8,38,66,.72));
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) .6px, transparent .6px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light; pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2; color: #fff;
  max-width: 860px; padding-block: 6rem;
}
.hero-eye {
  font-size: .8rem; font-weight: 700; letter-spacing: .35em;
  color: #dbeafe; margin-bottom: 1.2rem;
}
.hero-content h1 {
  font-size: clamp(1.9rem, 5vw, 4.1rem);
  font-weight: 900; line-height: 1.08; margin-bottom: 1.2rem;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.85; color: var(--s1);
  max-width: 680px; margin-bottom: 1.5rem;
}
.hero-specs {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin-bottom: 2.2rem; font-size: .88rem;
  font-weight: 600; color: var(--s1);
}
.hero-specs span::before { content: '✓  '; color: var(--acc); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ── Water Divider ─────────────────────────────────── */
.water-div {
  position: relative; height: 96px; overflow: hidden;
  background: linear-gradient(135deg, var(--dark) 0%, #072946 50%, var(--p) 100%);
}
.water-line { position: absolute; inset: 0; margin: auto; width: 72px; height: 100%; }
.w-faucet {
  position: absolute; top: 8px; right: 20px;
  width: 32px; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #7dd3fc, #bae6fd);
  box-shadow: 0 0 24px rgba(125,211,252,.55);
}
.w-drop {
  position: absolute; top: 22px; right: 30px;
  width: 7px; height: 7px; border-radius: 99px;
  background: #bae6fd; opacity: 0;
  animation: wDrop 1.7s linear infinite;
}
.w-drop.d2 { right: 26px; animation-delay: .4s; }
.w-drop.d3 { right: 34px; animation-delay: .85s; }

/* ── Dark BG sections ──────────────────────────────── */
.dk-sec {
  position: relative; overflow: hidden;
  background: var(--navy);
}
.dk-sec .dk-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-sec .dk-ov   { position: absolute; inset: 0; }
.dk-sec .dk-body { position: relative; z-index: 2; }

/* ── Border list ───────────────────────────────────── */
.blist { display: grid; gap: .8rem; margin-top: 2rem; }
.blist p {
  border-right: 4px solid var(--p);
  padding-right: 1rem;
  font-size: 1rem; font-weight: 600; color: var(--navy);
}
.blist.lt p { border-color: rgba(165,243,252,.8); color: #fff; }

/* ── Chips ─────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
.chip {
  border-radius: 99px; border: 1px solid rgba(13,95,165,.24);
  padding: .55rem 1.1rem; background: rgba(13,95,165,.06);
  font-size: .9rem; font-weight: 700; color: var(--s7);
}

/* ── Product cards ─────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 2.5rem; }
.prod-card {
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); padding: 1.4rem;
  backdrop-filter: blur(8px);
  transition: transform .3s, box-shadow .3s;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.prod-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: .7rem; }
.prod-card p  { font-size: .92rem; line-height: 1.8; color: var(--s1); }

/* ── About grid ────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.about-eyebrow { font-size: .73rem; font-weight: 700; letter-spacing: .2em; color: var(--p); margin-bottom: .7rem; }
.about-text h2 { font-size: clamp(1.65rem,3.5vw,2.6rem); font-weight: 900; line-height: 1.12; margin-bottom: 1.2rem; }
.about-text p  { font-size: 1rem; line-height: 1.85; color: var(--s6); margin-bottom: .9rem; }
.about-card {
  border-radius: var(--r-xl); border: 1px solid rgba(13,95,165,.15);
  background: #fff; padding: 2rem; box-shadow: var(--sh-lg);
}
.about-card h3  { font-size: 1.3rem; font-weight: 900; margin-bottom: 1.4rem; }
.val-item {
  border-right: 4px solid var(--p); padding-right: 1rem;
  margin-bottom: .9rem; font-size: .93rem;
  line-height: 1.75; color: var(--s6);
}
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.stat-n { font-size: 2.6rem; font-weight: 900; color: var(--p); line-height: 1; }
.stat-l { font-size: .8rem; font-weight: 600; color: var(--s5); margin-top: .4rem; }

/* ── Catalog grid ──────────────────────────────────── */
.cat-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.25rem; }
.cat-btn {
  border-radius: 99px; border: 1.5px solid rgba(13,95,165,.22);
  padding: .42rem 1.15rem; font-size: .86rem; font-weight: 700;
  background: #fff; color: var(--p);
  transition: background .22s, color .22s, border-color .22s;
  font-family: inherit;
}
.cat-btn:hover, .cat-btn.on { background: var(--p); color: #fff; border-color: var(--p); }

.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
.cat-card {
  border-radius: 1.5rem; border: 1px solid rgba(13,95,165,.13);
  background: #fff; box-shadow: var(--sh-card); overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: 0 24px 55px rgba(5,37,64,.17); }
.cat-img { position: relative; height: 195px; overflow: hidden; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.cat-card:hover .cat-img img { transform: scale(1.08); }
.cat-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,14,30,.08) 0%, rgba(7,41,71,.65) 100%);
  transition: opacity .28s;
}
.cat-card:hover .cat-ov { opacity: .85; }
.bubs { position: absolute; inset: 0; pointer-events: none; }
.bub {
  position: absolute; bottom: 10px;
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(207,250,254,.9); opacity: 0;
}
.cat-card:hover .bub { animation: bubUp 1.25s ease-out infinite; }
.bub.b1 { right: 18px; }
.bub.b2 { right: 32px; animation-delay: .18s; }
.bub.b3 { right: 48px; animation-delay: .34s; }

.cat-body { padding: 1.05rem; }
.cat-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cat-badge { border-radius: 99px; background: rgba(13,95,165,.1); padding: .18rem .65rem; font-size: .7rem; font-weight: 700; color: var(--p); }
.cat-code  { font-size: .75rem; font-weight: 900; color: var(--s7); letter-spacing: .05em; }
.cat-card h3 { font-size: .96rem; font-weight: 900; line-height: 1.4; margin-bottom: .55rem; }
.cat-specs { font-size: .78rem; line-height: 1.75; color: var(--s7); margin-bottom: .55rem; }
.cat-specs b { color: var(--navy); }
.cat-sum { font-size: .78rem; line-height: 1.7; color: var(--s6); margin-bottom: .8rem; }
.cat-wa {
  display: inline-flex; border-radius: var(--r); border: 1.5px solid rgba(13,95,165,.26);
  background: #f5faff; padding: .38rem .85rem;
  font-size: .78rem; font-weight: 700; color: var(--p);
  font-family: inherit; transition: background .22s, color .22s;
}
.cat-wa:hover { background: var(--p); color: #fff; }

/* ── Blog cards ────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.blog-card .blog-img { overflow: hidden; border-radius: 18px; margin-bottom: .95rem; }
.blog-card .blog-img img { width: 100%; height: 195px; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-img img { transform: scale(1.05); }
.blog-card h3 { font-size: 1.05rem; font-weight: 900; line-height: 1.45; margin-bottom: .55rem; }
.blog-card h3 a { color: var(--navy); transition: color .25s; }
.blog-card h3 a:hover { color: var(--p); }
.blog-card p   { font-size: .88rem; line-height: 1.75; color: var(--s6); }

/* ── Contact cards ─────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.15rem; margin-top: 2.25rem; }
.contact-card {
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); padding: 1.2rem;
  backdrop-filter: blur(8px);
}
.c-label { font-size: .78rem; color: var(--cyan); margin-bottom: .45rem; }
.c-val   { font-size: 1.15rem; font-weight: 900; color: #fff; }
.c-val a { color: inherit; transition: color .2s; }
.c-val a:hover { color: var(--cyan); }

/* ── Page hero ─────────────────────────────────────── */
.pg-hero {
  position: relative; overflow: hidden;
  min-height: 22rem; display: flex; align-items: center;
}
.pg-hero > img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-hero-ov     { position: absolute; inset: 0; }
.pg-hero-body   { position: relative; z-index: 2; padding-block: 4rem; }

/* ── About page ────────────────────────────────────── */
.about-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2.5rem; }
.principle { border-top: 4px solid var(--p); padding-top: 1rem; }
.principle h3 { font-size: 1.15rem; font-weight: 900; margin-bottom: .6rem; }
.principle p  { font-size: .93rem; line-height: 1.85; color: var(--s6); }
.milestones   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.milestone {
  border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); padding: 1.35rem; backdrop-filter: blur(6px);
}
.milestone-n { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--cyan); margin-bottom: .5rem; }
.milestone p  { font-size: .93rem; line-height: 1.8; color: var(--s1); }

/* ── Contact form ──────────────────────────────────── */
.form-wrap {
  border-radius: var(--r-2x); border: 1px solid rgba(13,95,165,.18);
  background: rgba(255,255,255,.94); padding: 2.25rem;
  box-shadow: var(--sh-lg); backdrop-filter: blur(8px);
}
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ff label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--s7); margin-bottom: .38rem;
}
.ff input, .ff select, .ff textarea {
  width: 100%; border-radius: var(--r-md);
  border: 1.5px solid var(--s3); background: #fff;
  padding: .68rem .95rem; font-size: .92rem;
  color: var(--navy); font-family: inherit;
  direction: rtl; outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.ff input:focus, .ff select:focus, .ff textarea:focus {
  border-color: var(--p); box-shadow: 0 0 0 3px rgba(13,95,165,.13);
}
.ff textarea { height: 8.5rem; resize: vertical; }
.ff-full { grid-column: 1 / -1; }

/* ── Privacy page ──────────────────────────────────── */
.privacy-body h1 { font-size: 2rem; font-weight: 900; margin-bottom: 2rem; }
.priv-section { border-radius: var(--r-xl); border: 1px solid rgba(13,95,165,.12); background: #fff; padding: 1.75rem; box-shadow: 0 8px 24px rgba(2,22,45,.06); margin-bottom: 1.25rem; }
.priv-section h2 { font-size: 1.2rem; font-weight: 900; margin-bottom: 1rem; }
.priv-section p  { font-size: .95rem; line-height: 1.85; color: var(--s7); margin-bottom: .75rem; }
.priv-section p:last-child { margin-bottom: 0; }

/* ── CTA dark ──────────────────────────────────────── */
.cta-dk {
  position: relative; background: var(--s8); overflow: hidden;
}
.cta-dk::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(13,95,165,.44), transparent 46%);
}
.cta-dk::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) .6px, transparent .6px);
  background-size: 3px 3px; mix-blend-mode: soft-light; opacity: .38;
}
.cta-dk .w { position: relative; z-index: 2; }
.cta-dk h2 { font-size: clamp(1.45rem,3vw,2.25rem); font-weight: 900; color: #fff; margin-bottom: 1rem; }
.cta-dk p  { font-size: 1rem; line-height: 1.85; color: var(--s1); max-width: 660px; margin-bottom: 2rem; }

/* ── Footer ────────────────────────────────────────── */
.abm-ftr { border-top: 1px solid #e2e8f0; background: var(--s0); }
.ftr-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem; padding-block: 1.75rem;
  font-size: .82rem; color: var(--s6);
}
.ftr-copy  { }
.ftr-seo   { text-align: center; font-size: .78rem; }
.ftr-social { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; }
.ftr-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--s1); color: var(--s7);
  transition: background .2s, color .2s, transform .2s;
}
.ftr-social a:hover { transform: translateY(-2px); }
.ftr-social a.fb:hover { background: #1877f2; color: #fff; }
.ftr-social a.ig:hover { background: #d6249f; color: #fff; }
.ftr-social a.tk:hover { background: #010101; color: #fff; }
.ftr-social a svg { width: 16px; height: 16px; fill: currentColor; }

/* ── WhatsApp FAB ──────────────────────────────────── */
.wa-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 9999;
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: 99px; padding: .58rem .88rem;
  background: linear-gradient(140deg, var(--p) 0%, var(--p-d) 55%, var(--p-xs) 100%);
  color: #fff; font-weight: 800; font-family: inherit;
  text-decoration: none;
  animation: fabGlow 2.3s ease-in-out infinite;
  transition: transform .2s; isolation: isolate;
}
.wa-fab:hover  { transform: scale(1.05); color: #fff; }
.wa-fab-ring {
  position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid rgba(147,226,255,.7);
  animation: fabRing 2s ease-out infinite;
  pointer-events: none; z-index: -1;
}
.wa-fab-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 99px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  flex-shrink: 0;
}
.wa-fab-icon svg { width: 20px; height: 20px; fill: currentColor; }
.wa-fab-lbl { font-size: .86rem; line-height: 1; white-space: nowrap; }

/* ── Keyframes ─────────────────────────────────────── */
@keyframes heroZoom { 0%{transform:scale(1)} 100%{transform:scale(1.08)} }
@keyframes wDrop {
  0%  {transform:translateY(0) scale(.85);opacity:0}
  15% {opacity:1} 85%{opacity:1}
  100%{transform:translateY(62px) scale(1.25);opacity:0}
}
@keyframes bubUp {
  0%  {transform:translateY(26px) scale(.9);opacity:0}
  25% {opacity:.9}
  100%{transform:translateY(-18px) scale(1.18);opacity:0}
}
@keyframes fabRing {
  0%  {transform:scale(1);opacity:.65}
  70% {transform:scale(1.38);opacity:0}
  100%{transform:scale(1.38);opacity:0}
}
@keyframes fabGlow {
  0%,100%{box-shadow:0 10px 24px rgba(13,95,165,.38)}
  50%    {box-shadow:0 12px 32px rgba(13,95,165,.52),0 0 28px 5px rgba(34,197,94,.16)}
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1024px){
  .prod-grid      { grid-template-columns:1fr 1fr }
  .cat-grid       { grid-template-columns:1fr 1fr }
  .about-grid     { grid-template-columns:1fr }
  .about-principles{ grid-template-columns:1fr 1fr }
}
@media (max-width:768px){
  :root{ --px:1.1rem }
  .hdr-nav,.hdr-social { display:none }
  .hdr-burger  { display:inline-flex }
  .hero-specs  { flex-direction:column;gap:.45rem }
  .prod-grid        { grid-template-columns:1fr }
  .contact-grid     { grid-template-columns:1fr }
  .cat-grid         { grid-template-columns:1fr }
  .blog-grid        { grid-template-columns:1fr }
  .about-principles { grid-template-columns:1fr }
  .milestones       { grid-template-columns:1fr }
  .fg               { grid-template-columns:1fr !important }
  /* Contact page two-col layout → single col */
  .contact-page-body { grid-template-columns:1fr !important }
  /* Stats inside about card */
  .stats-row        { grid-template-columns:repeat(3,1fr) }
  .ftr-inner   { grid-template-columns:1fr;text-align:center }
  .ftr-social  { justify-content:center }
  .wa-fab      { gap:0;padding:.58rem }
  .wa-fab-lbl  { display:none }
}
@media (max-width:480px){
  .stats-row   { grid-template-columns:1fr 1fr }
}