/* ========================================================================
   SEO Amman — premium UI overrides (nav fix + hero + polish)
   Loaded AFTER site.css. Logical properties => RTL works automatically.
   ======================================================================== */

:root{ --sa-ink:#0b1220; --sa-blue:#2f6bff; --sa-cyan:#38d9ff; --sa-line:#e7ecf5; }

/* horizontal-overflow guard (clip is sticky-safe, unlike overflow:hidden) */
html,body{ overflow-x:clip; max-width:100%; }
body{ width:100%; position:relative; }
img,svg,video,iframe,table,pre{ max-width:100%; }
*{ min-width:0; }

/* image logo */
.nav-logo .brand-logo-img{ height:40px; width:auto; display:block; }
.mobile-menu-bar .brand-logo-img{ height:38px; width:auto; }
@media(max-width:520px){ .nav-logo .brand-logo-img{ height:34px; } }

/* ---------- NAVIGATION (clean, robust, LTR + RTL) ---------- */
.nav{ background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--sa-line); position:sticky; top:0; z-index:200; }
.nav-inner{ max-width:1220px; margin:0 auto; display:flex; align-items:center;
  gap:6px; padding:12px 24px; }
.nav-logo{ font-weight:800; font-size:1.35rem; letter-spacing:-.02em; text-decoration:none;
  color:var(--sa-ink); display:flex; align-items:center; white-space:nowrap; }
.nav-logo span{ color:var(--sa-blue); }
.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0;
  padding:0; margin-inline-start:auto; }
.nav-links > li{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:5px; padding:8px 12px;
  border-radius:9px; font-size:.92rem; font-weight:600; color:#31405a;
  text-decoration:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:background .15s,color .15s; }
.nav-link:hover{ color:var(--sa-blue); background:#f2f6ff; }
.nav-link svg{ width:13px; height:13px; opacity:.6; }
.nav-link-accent{ color:var(--sa-blue); }
.nav .nav-cta{ background:var(--sa-blue); color:#fff; padding:9px 18px; border-radius:10px;
  font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap; border:1px solid var(--sa-blue);
  box-shadow:0 6px 16px rgba(47,107,255,.28); transition:transform .15s,box-shadow .15s; }
.nav .nav-cta:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px rgba(47,107,255,.34); }
/* dropdowns */
.nav-dropdown-panel{ position:absolute; top:calc(100% + 8px); inset-inline-start:0;
  min-width:230px; background:#fff; border:1px solid var(--sa-line); border-radius:14px;
  box-shadow:0 16px 40px rgba(12,22,38,.14); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.18s; z-index:210; }
.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown.is-open .nav-dropdown-panel{
  opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-item{ display:block; padding:9px 12px; border-radius:9px; font-size:.9rem;
  font-weight:500; color:#31405a; text-decoration:none; white-space:nowrap; }
.nav-dropdown-item:hover{ background:#f2f6ff; color:var(--sa-blue); }
.nav-toggle{ display:none; margin-inline-start:auto; background:none; border:0; cursor:pointer; color:var(--sa-ink); }
@media(max-width:1080px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
/* mobile menu — full-screen overlay above nav + fab, with header + close */
.mobile-menu{ position:fixed; inset:0; background:#fff; z-index:500; display:flex; flex-direction:column;
  -webkit-overflow-scrolling:touch; }
.mobile-menu[hidden]{ display:none; }
.mobile-menu-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--sa-line); flex:0 0 auto; background:#fff; }
.mobile-menu-bar .nav-logo{ font-size:1.3rem; }
.mobile-menu-close{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px;
  background:#f2f6ff; border:0; color:var(--sa-ink); cursor:pointer; flex:0 0 auto; }
.mobile-menu-close:hover{ background:#e6eeff; }
.mobile-menu-scroll{ flex:1 1 auto; overflow-y:auto; padding:8px 18px 40px; display:block; }
/* accordion */
.mm-acc{ border-bottom:1px solid var(--sa-line); }
.mm-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 4px; font-size:1.05rem; font-weight:800; color:var(--sa-ink); cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent; }
.mm-summary::-webkit-details-marker{ display:none; }
.mm-chev{ width:18px; height:18px; color:var(--sa-blue); transition:transform .2s; flex:0 0 auto; }
.mm-acc[open] .mm-chev{ transform:rotate(180deg); }
.mm-acc-body{ display:flex; flex-direction:column; padding:2px 4px 12px; }
.mm-acc-body a{ display:block; padding:11px 8px; color:#31405a; text-decoration:none; font-weight:600;
  font-size:.98rem; border-radius:9px; }
.mm-acc-body a:active,.mm-acc-body a:hover{ background:#f2f6ff; color:var(--sa-blue); }
.mm-direct{ display:flex; align-items:center; padding:16px 4px; font-size:1.05rem; font-weight:800;
  color:var(--sa-ink); text-decoration:none; border-bottom:1px solid var(--sa-line); }
.mm-direct:active{ color:var(--sa-blue); }
.mobile-menu-cta{ display:block; text-align:center; margin-top:22px; background:var(--sa-blue); color:#fff !important;
  padding:16px; border-radius:12px; font-weight:800; font-size:1.02rem; box-shadow:0 10px 24px rgba(47,107,255,.32); }

/* ---------- PREMIUM HERO ---------- */
.hero-pro{ position:relative; overflow:hidden; color:#eaf1ff;
  background:radial-gradient(1100px 600px at 78% -10%,#1c3f8f 0%,transparent 60%),
             linear-gradient(160deg,#0a1836 0%,#0b1428 55%,#0a1020 100%); }
.hero-pro::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(700px 400px at 75% 10%,#000,transparent 75%); }
.hero-pro-inner{ position:relative; max-width:1220px; margin:0 auto; padding:76px 24px 88px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
@media(max-width:960px){ .hero-pro-inner{ grid-template-columns:1fr; gap:36px; padding:52px 22px 60px; } }
.hero-pill{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700;
  letter-spacing:.02em; color:#bcd3ff; background:#ffffff14; border:1px solid #ffffff26;
  padding:7px 14px; border-radius:999px; }
.hero-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--sa-cyan); box-shadow:0 0 12px var(--sa-cyan); }
.hero-pro h1{ font-size:clamp(2.3rem,5vw,3.7rem); line-height:1.05; letter-spacing:-.025em;
  font-weight:800; margin:20px 0 0; text-wrap:balance; color:#fff; }
.hero-pro h1 .accent{ background:linear-gradient(90deg,var(--sa-cyan),#7aa8ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-tag{ font-size:1.15rem; font-weight:700; color:#dbe6ff; margin:18px 0 0; }
.hero-pro .hero-sub{ font-size:1.06rem; line-height:1.7; color:#a9bde0; max-width:52ch; margin:14px 0 0; }
.hero-actions-pro{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn-pro{ background:linear-gradient(90deg,var(--sa-blue),#4f9cff); color:#fff; padding:14px 26px;
  border-radius:12px; font-weight:700; text-decoration:none; box-shadow:0 12px 30px rgba(47,107,255,.4);
  transition:transform .15s; }
.btn-pro:hover{ transform:translateY(-2px); }
.btn-ghost{ background:#ffffff12; color:#fff; padding:14px 24px; border-radius:12px; font-weight:700;
  text-decoration:none; border:1px solid #ffffff2e; transition:background .15s; }
.btn-ghost:hover{ background:#ffffff22; }
.hero-strip{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:.86rem;
  color:#8ea6d4; font-weight:600; }
.hero-strip span{ display:inline-flex; align-items:center; gap:7px; }
.hero-strip span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sa-cyan); }

/* GSC dashboard card */
.gsc-card{ background:linear-gradient(180deg,#101f3d,#0c1730); border:1px solid #ffffff1f;
  border-radius:20px; padding:20px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.gsc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gsc-head .t{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#7f97c4; font-weight:700; }
.gsc-head .h{ font-size:1.02rem; font-weight:700; color:#fff; margin-top:2px; }
.gsc-badge{ font-size:.7rem; font-weight:700; color:#0a1020; background:var(--sa-cyan);
  padding:5px 10px; border-radius:999px; white-space:nowrap; }
.gsc-shot{ margin-top:14px; border-radius:12px; overflow:hidden; border:1px solid #ffffff14; background:#fff; }
.gsc-shot img{ display:block; width:100%; height:auto; }
.gsc-rows{ margin-top:14px; display:grid; gap:8px; }
.gsc-row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px;
  background:#ffffff0a; border:1px solid #ffffff12; border-radius:12px; padding:11px 13px; }
.gsc-flag{ width:30px; height:30px; border-radius:8px; background:#ffffff14; color:#cfe0ff;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; }
.gsc-name{ font-size:.9rem; font-weight:700; color:#eaf1ff; line-height:1.2; }
.gsc-name small{ display:block; color:#8299c2; font-weight:500; font-size:.76rem; margin-top:1px; }
.gsc-up{ font-size:.78rem; font-weight:800; color:#31d18a; background:#31d18a1c; padding:4px 9px; border-radius:8px; white-space:nowrap; }
.gsc-metric{ text-align:end; }
.gsc-metric b{ color:#fff; font-size:.98rem; font-weight:800; }
.gsc-metric small{ display:block; color:#8299c2; font-size:.72rem; }
.gsc-foot{ margin-top:13px; display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; color:#7f97c4; }
.gsc-foot .v{ display:inline-flex; align-items:center; gap:6px; }
.gsc-foot .v::before{ content:"✓"; color:var(--sa-cyan); font-weight:800; }

/* top trust bar */
.trust-bar{ background:#0a1428; color:#9fb6e2; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  text-align:center; padding:8px 16px; }
.trust-bar b{ color:var(--sa-cyan); }

/* ---------- light-section polish ---------- */
.home-service-card{ border:1px solid var(--sa-line); border-radius:16px; padding:22px 22px 20px;
  background:#fff; transition:transform .16s,box-shadow .16s,border-color .16s; text-decoration:none; display:block; }
a.home-service-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(12,22,38,.1); border-color:#c9d8ff; }
.home-service-title{ font-size:1.08rem; font-weight:700; color:var(--sa-ink); margin:0 0 6px; }
.home-service-desc{ font-size:.92rem; color:#5a6b85; line-height:1.6; margin:0; }
.home-services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:26px; }
.section-title{ font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; font-weight:800; color:var(--sa-ink); text-wrap:balance; }
.eyebrow{ color:var(--sa-blue); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; }
.home-check-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; max-width:760px; }
.home-check-list li{ position:relative; padding-inline-start:32px; color:#31405a; line-height:1.6; }
.home-check-list li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0;
  width:22px; height:22px; border-radius:6px; background:#eaf1ff; color:var(--sa-blue);
  font-weight:800; display:grid; place-items:center; font-size:.8rem; }
.cta{ background:linear-gradient(135deg,#0a1836,#12244d); color:#fff; border-radius:22px;
  padding:44px 32px; text-align:center; }
.cta-title{ font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin:0 0 8px; }
.cta p{ color:#b9c9ea; }

/* stat row (results/proof) - clean equal columns */
.sa-statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0 6px; }
@media(max-width:760px){ .sa-statrow{ grid-template-columns:repeat(2,1fr); } }
.sa-stat{ background:#fff; border:1px solid var(--sa-line); border-radius:14px; padding:20px 16px; text-align:center; }
.sa-stat-k{ font-size:1.7rem; font-weight:800; color:var(--sa-blue); letter-spacing:-.02em; line-height:1.1; }
.sa-stat-l{ font-size:.86rem; color:#5a6b85; margin-top:4px; }
/* proof cards row */
.lp-proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:22px; }
@media(max-width:760px){ .lp-proof-grid{ grid-template-columns:1fr; } }
.lp-proof-card{ background:#fff; border:1px solid var(--sa-line); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(12,22,38,.06); }
.lp-browser-chrome{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#f2f6ff; border-bottom:1px solid var(--sa-line); }
.lp-browser-dot{ width:9px; height:9px; border-radius:50%; background:#cbd5e1; }
.lp-browser-url{ margin-inline-start:10px; font-size:.76rem; color:#5a6b85; font-family:var(--mono,monospace); }
.lp-browser-img{ display:block; width:100%; height:auto; }
.lp-proof-body{ padding:16px 18px; }
.lp-proof-title{ font-size:1rem; font-weight:700; color:var(--sa-ink); margin:0 0 5px; }
.lp-proof-text{ font-size:.9rem; color:#5a6b85; line-height:1.6; margin:0; }

/* rich prose sections (expert copy + internal links) */
.prose{ max-width:760px; }
.prose p{ font-size:1.06rem; line-height:1.8; color:#3a4a63; margin:0 0 16px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--sa-blue); font-weight:600; text-decoration:none; border-bottom:1.5px solid #c9d8ff; }
.prose a:hover{ border-bottom-color:var(--sa-blue); }
.spl-lang-ar .prose p{ line-height:1.95; }
/* inline content links → brand blue (scoped to text containers only, so buttons/cards/nav keep their own colors) */
.prose a,.section-desc a,.faq-a a,.post-body a,.contact-lines a{ color:var(--sa-blue); font-weight:600; }
.prose a:hover,.section-desc a:hover,.faq-a a:hover,.post-body a:hover{ text-decoration:underline; }

/* ---------- FREE AUDIT REQUEST FORM (bold, high-contrast) ---------- */
.audit-card{ max-width:560px; margin:0 auto; background:#fff; border:1px solid #d5e0f5; border-radius:20px;
  padding:30px 28px; box-shadow:0 26px 60px -30px rgba(20,50,120,.5); }
.audit-card-title{ font-size:1.5rem; font-weight:800; color:var(--sa-ink); margin:0 0 8px; letter-spacing:-.02em; }
.audit-card-sub{ font-size:1rem; color:#43526d; line-height:1.65; margin:0 0 22px; }
.audit-form{ display:grid; gap:16px; }
.audit-form label{ display:grid; gap:7px; font-weight:700; color:var(--sa-ink); font-size:.95rem; }
.audit-form .tool-in{ width:100%; padding:14px 15px; border:2px solid #cdd9ef; border-radius:12px;
  font:inherit; font-size:1rem; background:#fff; color:var(--sa-ink); transition:border-color .15s,box-shadow .15s; }
.audit-form .tool-in::placeholder{ color:#9aa8c2; }
.audit-form .tool-in:focus{ outline:none; border-color:var(--sa-blue); box-shadow:0 0 0 4px rgba(47,107,255,.18); }
.audit-send{ display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:4px;
  background:#25d366; color:#fff; font-weight:800; font-size:1.05rem; padding:15px 22px; border-radius:12px;
  text-decoration:none; box-shadow:0 12px 26px rgba(37,211,102,.4); transition:transform .15s,box-shadow .15s; }
.audit-send:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(37,211,102,.5); }
.audit-send svg{ flex:0 0 auto; }
.audit-hint{ margin:2px 0 0; font-size:.92rem; font-weight:700; min-height:1.2em; }
.audit-hint.err{ color:#d9342b; }
.audit-hint.ok{ color:#1a9c56; }

/* ---------- FLOATING WHATSAPP (with label) ---------- */
.whatsapp-fab{ position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:300;
  display:inline-flex; align-items:center; gap:10px; background:#25d366; color:#fff;
  padding:11px 18px 11px 12px; border-radius:999px; text-decoration:none; font-weight:800; font-size:.95rem;
  box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .16s, box-shadow .16s;
  animation:wa-pulse 2.6s ease-in-out infinite; }
html[dir=rtl] .whatsapp-fab{ padding:11px 12px 11px 18px; }
.whatsapp-fab:hover{ color:#fff; transform:translateY(-2px) scale(1.02); box-shadow:0 16px 38px rgba(37,211,102,.55); }
.whatsapp-fab-ic{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:#ffffff26; flex:0 0 auto; }
.whatsapp-fab-label{ white-space:nowrap; }
@keyframes wa-pulse{ 0%,100%{ box-shadow:0 12px 30px rgba(37,211,102,.45); } 50%{ box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 10px rgba(37,211,102,0); } }
@media (prefers-reduced-motion:reduce){ .whatsapp-fab{ animation:none; } }
@media (max-width:520px){ .whatsapp-fab-label{ display:none; } .whatsapp-fab{ padding:12px; } html[dir=rtl] .whatsapp-fab{ padding:12px; } }