/* =========================================================
   قالب "استوديو العزل" — عوازل صوت الدمام | عوازل صوت الخبر
   نسخة محسّنة: ألوان فاتحة مريحة واحترافية + تباين نصوص مضبوط
   لوحة الألوان: أزرق كحلي احترافي + أزرق بنفسجي طاقة الصوت
                + تركوازي هادئ (هدوء/نظافة) على خلفية رمادية-زرقاء فاتحة جداً
   ملاحظة الإصلاح الأساسي: كان الهيرو يستخدم نصاً أبيض/فاتح فوق خلفية
   فاتحة أصلاً، ما جعل النص "باهتاً" وصعب القراءة. تم توحيد الخلفيات
   الفاتحة مع نصوص داكنة عالية التباين، وأُبقيت الأقسام الداكنة
   (البانر الداخلي والفوتر) مع نص أبيض متباين بوضوح.
   نفس أسماء الأصناف (classes) الأصلية — استبدال مباشر دون تعديل HTML
   ========================================================= */
:root{
  --navy:#1e2a47;            /* كحلي احترافي هادئ: العناوين والعناصر الداكنة */
  --navy-dark:#141d33;
  --blue:#4a5fd9;            /* أزرق-بنفسجي طاقة الصوت: اللون الأساسي للأكشن */
  --blue-dark:#3846b0;
  --teal:#0d9488;            /* تركوازي هادئ: لمسة نظافة وهدوء ثانوية */
  --teal-dark:#0a746a;
  --teal-soft:#e6f7f5;
  --whatsapp:#25d366;
  --bg-soft:#f7f8fc;         /* رمادي-أزرق فاتح جداً ومريح: خلفية الصفحة */
  --panel:#eef1f9;
  --surface:#ffffff;
  --ink:#1c2438;             /* نص أساسي داكن: تباين عالٍ وواضح */
  --ink-dim:#525b74;         /* نص ثانوي: يبقى مقروءاً بوضوح على الخلفيات الفاتحة */
  --line:#e4e8f2;
  --card-radius:16px;        /* حواف ناعمة مستديرة — تحاكي نعومة إسفنج العزل */
  --font: "Tajawal", "Tahoma", sans-serif;
  --font-display: "Almarai", "Tajawal", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; font-family:var(--font); background:var(--bg-soft); color:var(--ink); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.container{ max-width:1180px; margin-inline:auto; padding-inline:20px; }

/* ---------- خط العناوين المميز ---------- */
.hero-text h1, .section-title, .why-title, .service-title, .article-title,
.brand-logo-box .brand-name, .footer-contact-title, .ng-page-hero h1,
.share-title, .sub-title, .hero-logo-card .logo-word{
  font-family:var(--font-display);
}

/* ---------- Grid helpers ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:960px){ .grid-3, .grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* خلفية "إسفنج العزل الصوتي" الهرمي — نسيج خفيف جداً وهادئ */
.diamond-bg{
  background-color:var(--panel);
  background-image:
    linear-gradient(135deg, rgba(74,95,217,.07) 25%, transparent 25%),
    linear-gradient(225deg, rgba(74,95,217,.07) 25%, transparent 25%),
    linear-gradient(45deg, rgba(13,148,136,.06) 25%, transparent 25%),
    linear-gradient(315deg, rgba(13,148,136,.06) 25%, transparent 25%);
  background-position:32px 0, 32px 0, 0 0, 0 0;
  background-size:64px 64px;
}

/* شريط حلقات صوتية رفيع — العنصر المُوقّع لهذا التصميم */
.ng-hazard-strip{
  height:8px; width:100%;
  background:linear-gradient(90deg, var(--navy) 0%, var(--blue) 45%, var(--teal) 75%, var(--navy) 100%);
}

/* ---------- Top bar ---------- */
.ng-topbar{
  background:#fff; padding:14px 0; position:sticky; top:0; z-index:500;
  box-shadow:0 2px 14px rgba(28,36,56,.08);
  border-bottom:3px solid var(--blue);
}
.ng-topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand-logo-box{ display:flex; align-items:center; gap:12px; }
.brand-logo-box img{ width:52px; height:52px; object-fit:contain; border-radius:12px; background:var(--navy); padding:4px; }
.brand-logo-box .brand-name{ color:var(--navy); font-weight:800; font-size:15.5px; margin-bottom:2px; }
.brand-logo-box .brand-phone{ color:var(--blue-dark); font-weight:800; font-size:14.5px; }

.nav-scroll{ display:flex; align-items:center; gap:4px; overflow-x:auto; white-space:nowrap; flex:1; }
.nav-scroll a{ flex:0 0 auto; color:#454f68; font-weight:600; padding:8px 12px; border-radius:10px; transition:.2s; font-size:14.5px; }
.nav-scroll a:hover, .nav-scroll a.is-active{ background:rgba(74,95,217,.09); color:var(--blue-dark); }
.nav-scroll a.home-link{ color:var(--navy); font-weight:800; }
.nav-scroll::-webkit-scrollbar{ height:5px; }
.nav-scroll::-webkit-scrollbar-thumb{ background:#ccc; border-radius:10px; }
@media (max-width:900px){ .nav-scroll{ display:none; } }

.menu-btn{
  display:none; background:linear-gradient(135deg, var(--blue), var(--navy)); color:#fff;
  border:none; border-radius:12px; width:46px; height:46px; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(74,95,217,.3); font-size:18px; flex:none;
}
@media (max-width:900px){ .menu-btn{ display:flex; } }

/* ---------- Sidebar ---------- */
.ng-sidebar{
  position:fixed; top:0; inset-inline-end:-280px; width:280px; height:100%; background:#fff;
  box-shadow:-8px 0 25px rgba(0,0,0,.12); transition:inset-inline-end .3s ease; z-index:999; padding:24px 20px; overflow-y:auto;
  border-inline-start:4px solid var(--blue);
}
.ng-sidebar.is-open{ inset-inline-end:0; }
.ng-sidebar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ng-sidebar h5{ color:var(--navy); font-weight:800; margin:0; font-size:17px; }
.ng-sidebar__close{ background:var(--line); border:none; width:34px; height:34px; border-radius:50%; color:var(--navy); font-size:15px; }
.ng-sidebar a{ display:block; padding:12px 6px; color:#333; border-bottom:1px solid #eee; font-weight:500; }
.ng-sidebar a:hover{ background:#f1f3fb; color:var(--blue-dark); }

.ng-overlay{
  position:fixed; inset:0; background:rgba(20,29,51,.5); display:none; z-index:998;
}
.ng-overlay.is-open{ display:block; }

/* ---------- Hero — خلفية فاتحة ومريحة مع نص داكن عالي التباين ---------- */
.ng-hero{
  padding:60px 0; position:relative; overflow:hidden;
  background:
    repeating-radial-gradient(circle at 85% 12%, rgba(74,95,217,.05) 0 2px, transparent 2px 26px),
    radial-gradient(65% 65% at 85% 10%, rgba(74,95,217,.14) 0%, transparent 62%),
    radial-gradient(70% 70% at 6% 100%, rgba(13,148,136,.13) 0%, transparent 62%),
    linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 55%, #f1f3fb 100%);
}
.ng-hero-slide{ display:none; }
.ng-hero-slide.is-active{ display:block; }

.hero-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; position:relative; z-index:2; }
@media (max-width:860px){ .hero-row{ grid-template-columns:1fr; } }

.hero-logo-card{
  background:#fff; border-radius:var(--card-radius); padding:40px 30px; text-align:center;
  box-shadow:0 16px 40px rgba(74,95,217,.14); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden; border:1px solid var(--line);
}
/* شريط موجات صوتية علوي (equalizer) */
.hero-logo-card::before{
  content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:8px;
  background:linear-gradient(90deg, var(--blue), var(--teal));
}
.hero-logo-card img{ max-width:200px; margin-bottom:10px; }
.hero-logo-card .logo-word{ color:var(--navy); font-weight:800; font-size:20px; margin-top:10px; }

.hero-text{ text-align:center; }
@media (min-width:861px){ .hero-text{ text-align:right; } }
.hero-text h1{ color:var(--navy); font-weight:900; font-size:clamp(26px,4vw,36px); }

.ng-divider{ display:flex; align-items:center; margin:16px 0 20px; }
.ng-divider.centered{ justify-content:center; }
.ng-divider span{ height:2px; width:60px; background:linear-gradient(90deg, var(--blue), var(--teal)); }
.ng-divider i{ color:var(--teal-dark); font-size:19px; margin:0 14px; }

.sub-title{ color:var(--teal-dark); font-weight:800; font-size:19px; margin-bottom:14px; }
.desc{ line-height:1.9; color:var(--ink-dim); font-size:15.5px; }

.hero-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
@media (min-width:861px){ .hero-actions{ justify-content:flex-end; } }
@media (max-width:860px){ .hero-actions{ justify-content:center; } }

.btn-call, .btn-whatsapp, .ng-btn{
  border:none; border-radius:30px; padding:12px 26px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 18px rgba(28,36,56,.14); transition:.25s;
}
.btn-call{ background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; }
.btn-call:hover{ color:#fff; transform:translateY(-2px); }
.btn-whatsapp{ background:linear-gradient(135deg, var(--whatsapp), #1ebe5d); color:#fff; }
.btn-whatsapp:hover{ color:#fff; transform:translateY(-2px); }
.ng-btn-outline{ background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.ng-btn-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.hero-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.hero-dots button{ width:28px; height:4px; border-radius:3px; border:none; background:rgba(30,42,71,.18); padding:0; cursor:pointer; transition:.2s; }
.hero-dots button.is-active{ background:var(--teal); width:40px; }

/* ---------- Section titles ---------- */
.section-title{ text-align:center; color:var(--navy); font-weight:800; font-size:26px; margin-bottom:4px; }
.section-lead{ text-align:center; color:var(--ink-dim); font-size:15px; max-width:620px; margin:0 auto 8px; }

/* ---------- Services ---------- */
.ng-services{ padding:36px 0 40px; }

.service-card{
  background:#fff; border-radius:var(--card-radius); overflow:hidden;
  box-shadow:0 12px 30px rgba(28,36,56,.08); transition:transform .3s, box-shadow .3s;
  position:relative;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(28,36,56,.14); }
/* أيقونة "موجات صوت" مصغّرة في الزاوية — إشارة لطبيعة العمل الصوتية */
.service-card::before{
  content:""; position:absolute; top:14px; inset-inline-start:14px; width:26px; height:15px; z-index:2;
  background:repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 7px);
  opacity:.85; border-radius:2px;
}
.service-img{ overflow:hidden; aspect-ratio:4/3; }
.service-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.service-card:hover .service-img img{ transform:scale(1.06); }
.service-body{ padding:16px 14px 22px; text-align:center; }
.service-title{ color:var(--navy); font-weight:800; font-size:18px; margin-bottom:14px; }
.service-btn{
  background:linear-gradient(135deg, var(--navy), var(--navy-dark)); color:#fff; border-radius:30px;
  padding:10px 22px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
}
.service-btn:hover{ color:#fff; filter:brightness(1.2); }

/* ---------- Offers styled as article cards ---------- */
.ng-offers{ padding:20px 0 44px; }

.article-card{
  background:#fff; border-radius:var(--card-radius); overflow:visible;
  box-shadow:0 12px 30px rgba(28,36,56,.08); height:100%; position:relative;
}
.article-img-wrap{ position:relative; border-radius:var(--card-radius) var(--card-radius) 0 0; overflow:hidden; aspect-ratio:16/10; }
.article-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.article-badge{
  position:absolute; top:12px; inset-inline-end:12px; background:var(--teal); color:#fff;
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px;
}
.article-avatar{
  position:absolute; bottom:-24px; inset-inline-start:50%; transform:translateX(50%);
  width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:0 6px 14px rgba(28,36,56,.18); border:3px solid #fff;
}
.article-body{ padding:34px 18px 22px; text-align:center; }
.article-title{ color:var(--ink); font-weight:800; font-size:16.5px; line-height:1.5; margin-bottom:12px; }
.article-desc{ color:var(--ink-dim); font-size:14px; line-height:1.8; margin-bottom:14px; }
.article-more{ color:var(--blue-dark); font-weight:700; font-size:14px; }
.article-more:hover{ color:var(--blue); }

/* ---------- Why us ---------- */
.ng-why-us{ padding:44px 0 20px; text-align:center; }
.why-title{ color:var(--navy); font-size:27px; font-weight:800; margin-bottom:8px; }

.why-card{
  background:var(--panel); border-radius:var(--card-radius); padding:34px 22px;
  box-shadow:0 6px 18px rgba(28,36,56,.06); height:100%;
  border-top:4px solid var(--teal);
}
.why-icon-circle{
  width:62px; height:62px; border-radius:50%; background:var(--navy); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 18px;
  box-shadow:0 0 0 4px rgba(13,148,136,.14);
}
.why-card h4{ color:var(--navy); font-weight:800; margin-bottom:12px; font-size:17px; }
.why-card p{ color:var(--ink-dim); line-height:1.8; font-size:14.5px; }

/* ---------- Share ---------- */
.ng-share{ text-align:center; padding:10px 0 40px; }
.share-title{ color:var(--navy); font-weight:800; font-size:21px; margin-bottom:20px; }
.share-icons{ display:flex; justify-content:center; gap:16px; }
.share-icons a{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; box-shadow:0 6px 14px rgba(28,36,56,.14);
}
.share-icons a.wa{ background:var(--whatsapp); }
.share-icons a.tw{ background:var(--teal); }
.share-icons a.fb{ background:var(--navy); }

/* ---------- Keywords tag cloud ---------- */
.ng-keywords{ padding:20px 0 10px; text-align:center; }
.ng-keywords a{
  display:inline-block; margin:5px; padding:8px 16px; background:var(--panel); border-radius:20px;
  color:var(--navy); font-size:13px; font-weight:600; transition:.25s;
}
.ng-keywords a:hover{ background:var(--blue); color:#fff; }

/* ---------- Breadcrumb / page hero (inner pages) — بانر داكن قصير بتباين عالٍ ومقصود ---------- */
.ng-page-hero{
  background:
    repeating-radial-gradient(circle at 90% 10%, rgba(255,255,255,.05) 0 2px, transparent 2px 24px),
    radial-gradient(90% 55% at 100% -10%, rgba(74,95,217,.35) 0%, transparent 55%),
    radial-gradient(90% 55% at 0% 115%, rgba(13,148,136,.28) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-dark), var(--navy));
  padding:52px 0 40px; position:relative; overflow:hidden;
}
.ng-page-hero h1{ color:#fff; font-size:clamp(24px,3.4vw,34px); font-weight:800; }
.ng-page-hero p{ color:#dbe0f2; margin-top:10px; max-width:680px; }
.ng-breadcrumbs{ font-size:13px; color:#7fe0d6; margin-bottom:14px; display:flex; gap:6px; flex-wrap:wrap; }
.ng-breadcrumbs a{ color:#dbe0f2; }
.ng-breadcrumbs a:hover{ color:#fff; }

/* ---------- Filters / pagination (works gallery) ---------- */
.ng-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.ng-filter-pill{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); font-size:13.5px; font-weight:700; color:var(--navy); background:#fff; }
.ng-filter-pill:hover{ border-color:var(--blue); color:var(--blue-dark); }
.ng-filter-pill.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.ng-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; }
.ng-pagination a, .ng-pagination span{
  min-width:40px; height:40px; padding-inline:10px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); font-weight:700; font-size:13.5px; color:var(--navy);
}
.ng-pagination .is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ng-pagination .is-disabled{ opacity:.35; pointer-events:none; }

/* ---------- Gallery (works) ---------- */
.ng-gallery-item{ border-radius:14px; overflow:hidden; aspect-ratio:4/3; position:relative; box-shadow:0 10px 26px rgba(28,36,56,.14); cursor:zoom-in; }
.ng-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ng-gallery-item:hover img{ transform:scale(1.07); }
.ng-gallery-item__overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,29,51,.85) 0%, rgba(20,29,51,0) 55%);
  display:flex; align-items:flex-end; padding:12px; opacity:0; transition:opacity .25s ease;
}
.ng-gallery-item:hover .ng-gallery-item__overlay{ opacity:1; }
.ng-gallery-item__overlay span{ color:#fff; font-size:13px; font-weight:700; }

/* ---------- Lightbox ---------- */
.ng-lightbox{ position:fixed; inset:0; background:rgba(12,17,30,.94); z-index:1100; display:none; align-items:center; justify-content:center; padding:30px; }
.ng-lightbox.is-open{ display:flex; }
.ng-lightbox img{ max-width:min(1000px,92vw); max-height:86vh; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.ng-lightbox__close, .ng-lightbox__nav{
  position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px;
}
.ng-lightbox__close{ top:20px; inset-inline-end:20px; }
.ng-lightbox__prev{ inset-inline-start:20px; top:50%; transform:translateY(-50%); }
.ng-lightbox__next{ inset-inline-end:20px; top:50%; transform:translateY(-50%); }

/* ---------- Forms (contact) ---------- */
.ng-card{ background:#fff; border-radius:var(--card-radius); box-shadow:0 12px 30px rgba(28,36,56,.08); padding:28px; border-top:4px solid var(--blue); }
.ng-field{ margin-bottom:18px; }
.ng-field label{ display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.ng-field input, .ng-field select, .ng-field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-family:inherit; font-size:14.5px; color:var(--ink);
}
.ng-field input:focus, .ng-field select:focus, .ng-field textarea:focus{ border-color:var(--blue); }
.ng-field textarea{ min-height:110px; resize:vertical; }
.ng-alert{ padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:14px; font-weight:700; }
.ng-alert-ok{ background:var(--teal-soft); color:var(--teal-dark); }
.ng-alert-err{ background:#fdecec; color:#b3261e; }
.ng-info-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.ng-info-row i{ width:38px; height:38px; border-radius:10px; background:rgba(74,95,217,.09); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.ng-info-row h4{ font-size:14.5px; color:var(--navy); margin-bottom:2px; }
.ng-info-row p, .ng-info-row a{ font-size:14px; color:var(--ink-dim); }

/* ---------- Footer ---------- */
.footer-dark{
  background:
    radial-gradient(90% 60% at 10% 110%, rgba(74,95,217,.22) 0%, transparent 55%),
    radial-gradient(90% 60% at 90% 110%, rgba(13,148,136,.2) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-dark), #0c1122);
  color:#fff; padding:50px 0;
}
.footer-map iframe, .footer-map .map-placeholder{ width:100%; height:280px; border:0; border-radius:14px; filter:saturate(.95) contrast(1.02); }
.footer-contact-title{ color:#5eead4; font-weight:800; font-size:23px; margin-bottom:16px; }
.footer-contact-text{ color:#dbe0f2; line-height:1.9; margin-bottom:20px; }
.footer-icon-row{ display:flex; gap:12px; margin-bottom:18px; }
.footer-icon-row span{ color:#dbe0f2; font-weight:700; align-self:center; }
.footer-icons{ display:flex; gap:10px; }
.footer-icons a{ width:42px; height:42px; border-radius:10px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; }
.footer-icons a:hover{ filter:brightness(1.15); }
.footer-links{ margin-top:18px; }
.footer-links a{ color:#b9c1de; font-size:13.5px; display:inline-block; margin-inline-end:14px; margin-bottom:8px; }
.footer-links a:hover{ color:#fff; }

.copyright-bar{ background:#fff; text-align:center; padding:16px; font-size:13.5px; color:var(--ink-dim); }
.copyright-bar strong{ color:var(--blue-dark); }

@media (max-width:860px){
  .footer-dark .grid-2{ grid-template-columns:1fr; }
  .footer-contact-title, .footer-contact-text, .footer-icon-row, .footer-icons{ text-align:center; justify-content:center; }
}

/* ---------- Floating buttons ---------- */
.fab-wrap{ position:fixed; bottom:24px; inset-inline-start:20px; z-index:900; display:flex; flex-direction:column; align-items:center; gap:12px; }
.fab-wrap.is-hidden{ display:none; }
.fab-circle{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; box-shadow:0 8px 18px rgba(28,36,56,.24); border:none; }
.fab-circle.call{ background:var(--blue); }
.fab-circle.wat{ background:var(--whatsapp); }
.fab-circle.close{ background:var(--navy); font-size:16px; cursor:pointer; }
@media (max-width:767px){ .fab-wrap{ bottom:18px; inset-inline-start:14px; } }

/* ---------- Reveal on scroll ---------- */
.ng-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.ng-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- 404 ---------- */
.ng-error-page{ min-height:55vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 20px; }
.ng-error-page h1{ font-size:clamp(56px,9vw,110px); color:var(--blue); font-weight:900; }