/* ==========================================================================
   الحصن الأزرق العقارية — Landing Page
   الهوية البصرية مأخوذة من: 3-Resources/Referance/Thebluefort
   ========================================================================== */

:root{
  /* ---- ألوان الهوية الرسمية ---- */
  --navy:      #002754;
  --navy-2:    #0A3568;
  --navy-deep: #001B3B;
  --gold:      #D9A630;
  --gold-soft: #F3E3BC;
  --gold-deep: #8A640F;
  --ink:       #222831;
  --sky:       #0077B6;
  --gray:      #E8EAED;
  --bg:        #F6F7F9;
  --card:      #FFFFFF;
  --line:      #E2E5EA;
  --muted:     #5C6470;
  --body:      #3D4450;

  /* ---- مسافات الهوية (16 / 24 / 32) ---- */
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;

  --hdr-h: 66px;
  --radius: 16px;
  --wrap: 1160px;

  --shadow-sm: 0 2px 10px rgba(0,39,84,.06);
  --shadow-md: 0 12px 30px rgba(0,39,84,.10);
  --shadow-lg: 0 20px 50px rgba(0,39,84,.16);

  /* نقشة الشبكة المعمارية من دليل الهوية */
  --pattern: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Almarai', 'Segoe UI', Tahoma, sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--body);
  line-height:1.75;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ color:var(--navy); line-height:1.25; font-weight:800; }
p{ text-wrap:pretty; }

/* أيقونات SVG موحّدة الأسلوب */
svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--s2);
}

.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--s2);
  background:var(--navy); color:#fff; padding:10px 18px;
  border-radius:0 0 10px 10px; font-weight:700; font-size:.9rem; z-index:999;
}
.skip:focus{ inset-block-start:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:sticky; inset-block-start:0; z-index:100;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-block-end:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.hdr.is-stuck{ box-shadow:0 6px 20px rgba(0,39,84,.08); }

.hdr-in{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--s2);
  height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s1);
}

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img{ height:40px; width:auto; }

.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{
  font-size:1.02rem; font-weight:800; color:var(--navy);
  letter-spacing:-.01em; white-space:nowrap;
}
.brand-txt b em{ font-style:normal; color:var(--gold); }
.brand-txt i{
  font-style:normal; font-weight:700;
  font-size:.52rem; letter-spacing:.14em;
  color:var(--muted); margin-block-start:3px; white-space:nowrap;
}

/* ---- التنقل ---- */
.nav{ display:flex; align-items:center; gap:6px; }

.nav-link{
  position:relative;
  font-size:.95rem; font-weight:700; color:var(--navy);
  padding:8px 13px; border-radius:9px;
  white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav-link::after{
  content:""; position:absolute;
  inset-block-end:2px; inset-inline-start:14px; inset-inline-end:14px;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .25s ease;
}
.nav-link:hover{ color:var(--gold-deep); }
.nav-link:hover::after,
.nav-link.is-active::after{ transform:scaleX(1); }

.nav-contact{ display:none; }

/* ---- أدوات الهيدر ---- */
.hdr-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.hdr-phone{
  display:none; align-items:center; gap:8px;
  font-size:.9rem; font-weight:700; color:var(--navy);
  padding:8px 14px; border:1px solid var(--line); border-radius:30px;
  background:#fff; transition:border-color .2s, color .2s, box-shadow .2s;
}
.hdr-phone .ico{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }
.hdr-phone .num{ letter-spacing:.02em; }
.hdr-phone:hover{ border-color:var(--gold); color:var(--gold-deep); box-shadow:var(--shadow-sm); }

.hdr-wa{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:var(--gold);
  transition:background .2s, transform .2s;
}
.hdr-wa svg{ width:21px; height:21px; fill:currentColor; stroke:none; }
.hdr-wa:hover{ background:var(--gold); color:var(--navy); transform:translateY(-2px); }

.burger{
  display:grid; place-content:center; gap:5px;
  width:42px; height:42px; border-radius:10px;
  background:var(--navy); border:none; cursor:pointer; padding:0;
}
.burger span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:var(--gold); transition:transform .28s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height: calc(100svh - var(--hdr-h));
  display:flex; align-items:center;
  padding-block: 72px 96px;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero-bg{ position:absolute; inset:0; z-index:-3; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }

.hero-veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to left, rgba(0,20,45,.94) 0%, rgba(0,27,59,.86) 42%, rgba(0,27,59,.55) 75%, rgba(0,27,59,.42) 100%),
    linear-gradient(to top, rgba(0,20,45,.9) 0%, transparent 55%);
}
.hero-pattern{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--pattern);
  background-size:44px 44px;
  mask-image:linear-gradient(to top, transparent, #000 40%);
  -webkit-mask-image:linear-gradient(to top, transparent, #000 40%);
}

.hero-in{ position:relative; text-align:start; }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.8rem; font-weight:700; color:var(--gold);
  background:rgba(217,166,48,.1);
  border:1px solid rgba(217,166,48,.5);
  padding:7px 16px; border-radius:30px;
  margin-block-end:var(--s2);
  line-height:1.6;
}
.badge i{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.badge b{ font-weight:800; letter-spacing:.03em; }

.hero h1{
  color:#fff;
  font-size:clamp(1.85rem, 6.4vw, 3.55rem);
  line-height:1.28;
  max-width:17ch;
  letter-spacing:-.01em;
}

.tagline{
  margin-block-start:var(--s1);
  color:var(--gold);
  font-weight:700;
  font-size:clamp(1rem, 3.4vw, 1.35rem);
  padding-block-start:var(--s1);
  border-block-start:1px solid rgba(255,255,255,.18);
  display:inline-block;
}

.hero-lead{
  margin-block-start:var(--s1);
  color:#C7D3E3;
  font-size:clamp(.95rem, 2.6vw, 1.06rem);
  line-height:1.9;
  max-width:56ch;
}

.hero-strip{
  position:absolute; inset-inline:0; inset-block-end:0; height:5px;
  background:linear-gradient(90deg, var(--gold), #F0CD7A, var(--gold));
}

/* ---- الأزرار ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:inherit; font-weight:800; font-size:1rem;
  padding:14px 30px; border-radius:10px; border:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg{ width:18px; height:18px; transition:transform .25s ease; }
.btn-gold{
  background:var(--gold); color:var(--navy);
  box-shadow:0 10px 26px rgba(217,166,48,.28);
  margin-block-start:var(--s3);
}
.btn-gold:hover{ background:#E9B843; transform:translateY(-3px); box-shadow:0 14px 32px rgba(217,166,48,.38); }
/* في RTL اتجاه التقدّم لليسار */
.btn-gold:hover svg{ transform:translateX(-5px); }

/* ==========================================================================
   الأقسام العامة
   ========================================================================== */
.sec{ padding-block: clamp(56px, 9vw, 104px); }
.sec-alt{ background:var(--card); border-block:1px solid var(--line); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:800; letter-spacing:.09em;
  color:var(--gold-deep); text-transform:uppercase;
  margin-block-end:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); flex-shrink:0; }
.eyebrow-light{ color:var(--gold); }

.sec-head{ max-width:62ch; margin-block-end:clamp(32px, 5vw, 52px); }
.sec-head h2,
.about-txt h2,
.cta h2{ font-size:clamp(1.45rem, 4.6vw, 2.15rem); }
.sec-lead{ margin-block-start:12px; color:var(--muted); font-size:1rem; }

/* ==========================================================================
   من نحن
   ========================================================================== */
.about-grid{ display:grid; gap:clamp(28px, 5vw, 56px); align-items:center; }
.about-txt p{ margin-block-start:var(--s1); font-size:1rem; line-height:1.95; max-width:60ch; }
.about-txt h2{ margin-block-end:6px; }

.about-img{
  position:relative;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.about-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.about-img::after{
  content:""; position:absolute;
  inset-block-end:0; inset-inline:0; height:5px;
  background:linear-gradient(90deg, var(--gold), #F0CD7A);
}

/* ==========================================================================
   خدماتنا
   ========================================================================== */
.svc-grid{
  display:grid; gap:var(--s1);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}

.svc{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s2);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc:hover{
  transform:translateY(-5px);
  border-color:rgba(217,166,48,.55);
  box-shadow:var(--shadow-md);
}
.svc-ic{
  display:grid; place-items:center;
  width:50px; height:50px; padding:13px;
  border-radius:13px;
  background:var(--navy); color:var(--gold);
  margin-block-end:var(--s1);
  transition:background .25s ease, color .25s ease;
}
.svc:hover .svc-ic{ background:var(--gold); color:var(--navy); }
.svc h3{ font-size:1.06rem; margin-block-end:8px; font-weight:800; }
.svc p{ font-size:.9rem; line-height:1.85; color:var(--muted); }

/* ==========================================================================
   لماذا الحصن الأزرق
   ========================================================================== */
.why-grid{
  display:grid; gap:var(--s1);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.why{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-block-start:4px solid var(--gold);
  padding:var(--s2);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.why:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.why-ic{
  display:grid; place-items:center;
  width:52px; height:52px; padding:13px;
  border-radius:50%;
  background:var(--gold-soft); color:var(--gold-deep);
  margin-block-end:var(--s1);
}
.why h3{ font-size:1.08rem; margin-block-end:8px; }
.why p{ font-size:.92rem; line-height:1.9; color:var(--muted); }
.why p b{ color:var(--navy); font-weight:800; letter-spacing:.02em; }

/* ==========================================================================
   CTA الختامي
   ========================================================================== */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy);
  padding-block: clamp(60px, 9vw, 104px);
  text-align:center;
}
.cta-pattern{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--pattern);
  background-size:44px 44px;
}
.cta::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:5px;
  background:linear-gradient(90deg, var(--gold), #F0CD7A, var(--gold));
}
.cta-in{ display:flex; flex-direction:column; align-items:center; }
.cta h2{ color:#fff; max-width:20ch; }
.cta p{
  margin-block-start:14px; color:#C7D3E3;
  font-size:1rem; line-height:1.9; max-width:52ch;
}
.cta-btns{
  margin-block-start:var(--s3);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s1);
}
.cta-btns .btn-gold{ margin-block-start:0; }
.cta-tel{
  display:inline-flex; align-items:center;
  font-weight:700; font-size:1rem; color:#fff;
  padding:13px 26px; border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  transition:border-color .2s, color .2s, background .2s;
}
.cta-tel:hover{ border-color:var(--gold); color:var(--gold); background:rgba(217,166,48,.08); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-deep); color:#C7D3E3;
  padding-block: clamp(44px, 6vw, 64px) 0;
}
.ftr-pattern{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--pattern);
  background-size:40px 40px;
}

.ftr-top{
  display:grid; gap:clamp(30px, 5vw, 48px);
  padding-block-end:clamp(32px, 5vw, 44px);
}

.ftr-logo{
  display:grid; place-items:center;
  width:132px; padding:12px 14px;
  background:#fff; border-radius:14px;
  margin-block-end:var(--s1);
}
.ftr-logo img{ width:100%; height:auto; }
.ftr-tag{ color:var(--gold); font-weight:700; font-size:.98rem; }
.ftr-fal{
  display:inline-block; margin-block-start:12px;
  font-size:.8rem; color:#9FB2C9;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px; padding:6px 12px;
}
.ftr-fal b{ color:var(--gold); font-weight:800; letter-spacing:.03em; }

.ftr-col h4{
  color:#fff; font-size:.98rem; font-weight:800;
  padding-block-end:10px; margin-block-end:var(--s1);
  border-block-end:2px solid var(--gold);
  display:inline-block;
}
.ftr-social-h{ margin-block-start:var(--s2); }

.ftr-list li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.9rem; line-height:1.8;
  margin-block-end:12px;
}
.li-ic{ width:17px; height:17px; color:var(--gold); flex-shrink:0; margin-block-start:6px; }
.li-ic svg{ fill:none; stroke:currentColor; }
.ftr-list a{ transition:color .2s; }
.ftr-list a:hover{ color:var(--gold); }

.ftr-links{ display:flex; flex-direction:column; gap:9px; }
.ftr-links a{
  font-size:.9rem; position:relative;
  padding-inline-start:14px;
  transition:color .2s, padding-inline-start .2s;
}
.ftr-links a::before{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:.7em;
  width:6px; height:6px; border-radius:50%;
  background:rgba(217,166,48,.5); transition:background .2s;
}
.ftr-links a:hover{ color:var(--gold); padding-inline-start:18px; }
.ftr-links a:hover::before{ background:var(--gold); }

.social{ display:flex; flex-wrap:wrap; gap:10px; }
.soc{
  display:grid; place-items:center;
  width:38px; height:38px; padding:9px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#C7D3E3;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.soc:hover{
  background:var(--gold); border-color:var(--gold);
  color:var(--navy); transform:translateY(-3px);
}

.ftr-btm{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:center;
  padding-block:var(--s1);
  border-block-start:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:#8FA3BB; text-align:center;
}

/* سطر إشعار الكوكيز — يأخذ سطرًا مستقلاً تحت حقوق النشر */
.ftr-privacy{ flex-basis:100%; font-size:.72rem; color:#71869F; line-height:1.7; }

/* ---- زر واتساب العائم ---- */
.wa-float{
  position:fixed; z-index:90;
  inset-block-end:20px; inset-inline-end:20px;
  width:52px; height:52px; padding:12px;
  display:grid; place-items:center;
  background:var(--gold); color:var(--navy);
  border-radius:50%;
  box-shadow:0 10px 26px rgba(0,39,84,.35);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s, transform .3s, visibility .3s, background .2s;
}
.wa-float svg{ fill:currentColor; stroke:none; }
.wa-float.is-on{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-float:hover{ background:var(--navy); color:var(--gold); }

/* ==========================================================================
   حركة الظهور — خفيفة
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- الجوال والتابلت: القائمة منسدلة ---- */
@media (max-width: 1179px){
  .nav{
    position:absolute; inset-block-start:100%; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff;
    border-block-end:1px solid var(--line);
    box-shadow:0 18px 32px rgba(0,39,84,.12);
    padding:10px var(--s2) var(--s2);
    transform:translateY(-14px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .nav-link{
    padding:13px 4px; border-radius:0;
    border-block-end:1px solid var(--line);
    font-size:1rem;
  }
  .nav-link::after{ inset-inline-start:4px; inset-inline-end:auto; width:30px; }
  .nav-contact{
    display:flex; align-items:center; gap:10px;
    margin-block-start:var(--s1);
  }
  .nav-contact .hdr-phone{ display:inline-flex; flex:1; justify-content:center; }
  .nav-contact .hdr-wa{ flex-shrink:0; }
}

/* ---- الجوال: الهاتف وواتساب يظلّان ظاهرَين في الهيدر كأيقونتين ---- */
@media (max-width: 699px){
  .hdr-actions .hdr-phone{
    display:grid; place-items:center;
    width:40px; height:40px; padding:0;
    border-radius:50%; border:1.5px solid var(--navy);
  }
  .hdr-actions .hdr-phone .num{ display:none; }
  .hdr-actions .hdr-phone .ico{ width:18px; height:18px; color:var(--navy); }
  .hdr-actions .hdr-phone:hover .ico{ color:var(--gold-deep); }
  .nav-contact .hdr-wa{ display:none; }
  .nav-contact .hdr-phone{ flex:1 1 auto; }

  /* الهيرو: الصورة تظهر في الأعلى والنص فوق تدرّج داكن في الأسفل */
  .hero{ align-items:flex-end; padding-block: 170px 52px; }
  .hero-bg img{ object-position:center 72%; }
  .hero-veil{
    background:linear-gradient(to bottom,
      rgba(0,20,45,.58) 0%, rgba(0,27,59,.46) 26%,
      rgba(0,27,59,.90) 62%, rgba(0,20,45,.97) 100%);
  }
  .hero-pattern{
    mask-image:linear-gradient(to bottom, transparent, #000 55%);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 55%);
  }
}

/* ---- تابلت: زر الهاتف الكامل داخل الهيدر ---- */
@media (min-width: 700px) and (max-width: 1179px){
  .hdr-actions .hdr-phone{ display:inline-flex; }
  .nav-contact{ display:none; }
}

@media (max-width: 479px){
  .brand-txt b{ font-size:.9rem; }
  .brand-txt i{ font-size:.46rem; letter-spacing:.1em; }
  .brand img{ height:34px; }
  .brand{ gap:8px; }
}
@media (max-width: 359px){
  .brand-txt i{ display:none; }
}

/* ---- تابلت ---- */
@media (min-width: 700px){
  :root{ --hdr-h:76px; }
  .brand img{ height:46px; }
  .brand-txt b{ font-size:1.12rem; }
  .brand-txt i{ font-size:.56rem; }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .hero-bg img{ object-position:center 58%; }
}

/* ---- ديسكتوب: تخطيط الأقسام ---- */
@media (min-width: 960px){
  .hero{ padding-block: 96px 120px; }
  .about-grid{ grid-template-columns: 1.05fr .95fr; }
  .ftr-top{ grid-template-columns: 1.25fr 1fr 1fr; }
}

/* ---- ديسكتوب: القائمة الأفقية ----
   العتبة هنا 1180 وليست 960 لأن القائمة تضم ستة تبويبات
   وتحتاج مساحة أكبر حتى لا تلتف على سطرين. */
@media (min-width: 1180px){
  .hdr-in{ gap:var(--s1); }
  .nav-link{ padding:8px 10px; }
  .hdr-actions .hdr-phone{ display:inline-flex; }
  .burger{ display:none; }
  .nav-contact{ display:none; }
}

@media (min-width: 1100px){
  /* الخدمات السبع: أربع في الصف الأول وثلاث موسّطة في الصف الثاني */
  .svc-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
  .svc{ flex:0 0 calc((100% - 3 * var(--s1)) / 4); }
}

/* ---- تقليل الحركة ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---- الطباعة ---- */
@media print{
  .hdr,.wa-float,.burger{ display:none !important; }
  body{ background:#fff; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ==========================================================================
   إضافات: شارة الترخيص القابلة للضغط + بيانات التواصل في الفوتر
   ========================================================================== */

.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;
}

/* ---- شارة فال في الهيرو ---- */
.badge-link{
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.badge-link:hover,
.badge-link:focus-visible{
  background:rgba(217,166,48,.2);
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(217,166,48,.22);
}
.badge-ex{
  width:12px; height:12px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.75;
}
.badge-link:hover .badge-ex{ opacity:1; }

/* ---- رقم فال داخل بطاقة "لماذا" ---- */
.fal-link{
  color:inherit;
  border-block-end:1px dashed rgba(217,166,48,.7);
  transition:color .2s, border-color .2s;
}
.fal-link b{ color:var(--navy); }
.fal-link:hover{ border-color:var(--gold); }
.fal-link:hover b{ color:var(--gold-deep); }

/* ---- شارة فال في الفوتر ---- */
a.ftr-fal{
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, background .2s;
}
a.ftr-fal svg{
  width:12px; height:12px; flex-shrink:0;
  fill:none; stroke:var(--gold); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
a.ftr-fal:hover{
  border-color:rgba(217,166,48,.6);
  background:rgba(217,166,48,.08);
}

/* ---- بيانات التواصل بعناوين ---- */
.li-txt{ display:flex; flex-direction:column; gap:2px; }
.li-txt b{
  font-size:.78rem; font-weight:800; color:#C7D3E3;
  letter-spacing:.01em;
}
.li-txt a{ font-weight:700; }

.soc[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* ---- أزرار الـ CTA: بدون أيقونة وبعرض متساوٍ ---- */
.btn-plain{ gap:0; }
.cta-btns .btn-plain,
.cta-btns .cta-tel{ min-width:190px; justify-content:center; text-align:center; }

/* شارة ترخيص فال أسفل زر "تواصل معنا" */
.hero-badge-below{
  display:flex;
  width:fit-content;
  margin-block-start:var(--s2);
  margin-block-end:0;
}