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

/* ============================================================
   Certified Hub — Modern Redesign (overrides Web Maker styles)
   ============================================================ */
:root{
  --wm-primary:#1e6ef5;
  --wm-secondary:#0b1f4d;
  --wm-accent:#22b8f0;
  --wm-dark:#0a1424;
  --wm-light:#f3f7ff;
  --wm-font-heading:'Sora','Cairo',system-ui,sans-serif;
  --wm-font-body:'Tajawal','Sora',system-ui,sans-serif;
  --wm-font:var(--wm-font-body);
  --ch-grad:linear-gradient(135deg,#1e6ef5 0%,#22b8f0 100%);
  --ch-grad-soft:linear-gradient(135deg,rgba(30,110,245,.12),rgba(34,184,240,.12));
  --ch-border:rgba(11,31,77,.09);
  --ch-shadow:0 6px 24px -8px rgba(11,31,77,.10),0 20px 50px -30px rgba(11,31,77,.18);
  --ch-shadow-lg:0 18px 44px -14px rgba(11,31,77,.22),0 40px 90px -50px rgba(30,110,245,.45);
}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,
html[lang=ar] .brand-text strong,html[lang=ar] .footer-brand strong{font-family:'Cairo',system-ui,sans-serif}

body{font-size:1.02rem;letter-spacing:.01em;background:#fff}
::selection{background:rgba(34,184,240,.28)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#eef3fc}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1e6ef5,#22b8f0);border-radius:99px;border:3px solid #eef3fc}

/* ---------- Typography ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4{letter-spacing:0}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem);line-height:1.16}
h2{font-size:clamp(1.75rem,4.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:700}
.lead{font-size:1.18rem;line-height:1.85}

/* ---------- Layout / sections ---------- */
.section{padding-block:clamp(3.5rem,8.5vw,6.5rem)}
.section::before,.section::after{content:none}
.section-light{background:
  radial-gradient(55% 75% at 92% 0%,rgba(34,184,240,.10),transparent 60%),
  radial-gradient(45% 65% at 0% 100%,rgba(30,110,245,.08),transparent 60%),
  var(--wm-light)}
.section-dark{background:
  radial-gradient(65% 90% at 88% 8%,rgba(34,184,240,.20),transparent 55%),
  radial-gradient(55% 75% at 0% 100%,rgba(30,110,245,.22),transparent 60%),
  linear-gradient(160deg,#0b1f4d 0%,#0a1424 70%)}
.section-dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.section-dark .card:hover{border-color:rgba(34,184,240,.45)}
.section-head{margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{max-width:760px}
@media(min-width:900px){.split{gap:4rem}}
.container{max-width:1180px}

/* ---------- Eyebrow pill ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--wm-font-heading);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--wm-primary);
  background:#fff;border:1px solid var(--ch-border);box-shadow:0 4px 14px -6px rgba(11,31,77,.12);
  padding:.45rem 1rem;border-radius:999px;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ch-grad);flex:none;
  box-shadow:0 0 0 4px rgba(34,184,240,.16)}
html[lang=ar] .eyebrow{letter-spacing:0;font-size:.92rem}
.section-dark .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#9fdcff}

/* ---------- Header ---------- */
.site-header{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ch-border);box-shadow:0 6px 24px -18px rgba(11,31,77,.35)}
.brand-text strong{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.brand-text small{font-size:.72rem;color:var(--wm-primary);font-weight:600}
.brand img{height:46px}
.main-nav a{font-weight:600;border-radius:10px}
@media(min-width:992px){.main-nav a:hover{background:var(--ch-grad-soft);color:var(--wm-primary)}
.main-nav a[aria-current=page]{color:var(--wm-primary)}}
.wm-lang-toggle{border:1px solid var(--ch-border);background:#fff;box-shadow:0 4px 12px -6px rgba(11,31,77,.15)}
.wm-lang-toggle:hover{background:var(--ch-grad);border-color:transparent}

/* ---------- Buttons ---------- */
.btn{font-weight:700;letter-spacing:.01em;padding:.85rem 1.7rem;position:relative}
.btn-primary{background:var(--ch-grad);color:#fff;box-shadow:0 12px 26px -10px rgba(30,110,245,.65)}
.btn-primary:hover{background:var(--ch-grad);filter:brightness(1.07);transform:translateY(-3px);
  box-shadow:0 18px 34px -12px rgba(30,110,245,.7)}
.btn-secondary{background:var(--wm-accent);color:#062033;box-shadow:0 12px 26px -12px rgba(34,184,240,.7)}
.btn-secondary:hover{background:#fff;color:var(--wm-secondary);transform:translateY(-3px)}
.btn-outline{border-width:1.5px}
.btn-outline:hover{transform:translateY(-3px)}
.cta-band .btn-primary{background:#fff;color:var(--wm-secondary);box-shadow:0 12px 26px -12px rgba(0,0,0,.4)}
.cta-band .btn-primary:hover{background:var(--wm-accent);color:#062033}

/* ---------- Hero (home) ---------- */
.hero.hero-home{min-height:clamp(600px,94vh,860px);overflow:hidden;border-radius:0 0 44px 44px;
  background-color:var(--wm-dark);isolation:isolate}
.hero.hero-home::before{background:
  linear-gradient(105deg,rgba(7,18,36,.96) 0%,rgba(11,31,77,.88) 38%,rgba(11,31,77,.55) 68%,rgba(30,110,245,.35) 100%)}
html[lang=ar] .hero.hero-home::before{background:
  linear-gradient(255deg,rgba(7,18,36,.96) 0%,rgba(11,31,77,.88) 38%,rgba(11,31,77,.55) 68%,rgba(30,110,245,.35) 100%)}
.hero.hero-home::after{height:110px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06) 55%,rgba(255,255,255,.14))}
.hero-home .hero-fx::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(159,220,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(159,220,255,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 32%,#000,transparent);
  mask-image:radial-gradient(75% 75% at 50% 32%,#000,transparent)}
.hero-home h1{font-weight:800;max-width:820px;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.hero-home p{font-size:1.22rem;max-width:640px;opacity:.95}
.hero-home .eyebrow{color:#bfe6ff;background:rgba(159,220,255,.08);border-color:rgba(159,220,255,.28);
  box-shadow:none;backdrop-filter:blur(8px)}
.hero-home .eyebrow::before{background:var(--wm-accent);box-shadow:0 0 12px var(--wm-accent)}
.hero-home .btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px)}
.hero-home .btn-outline:hover{background:#fff;color:var(--wm-secondary)}
.hero-network{opacity:.55}
@media(max-width:639px){.hero.hero-home{border-radius:0 0 30px 30px}}

/* ---------- Page banners (subpages) ---------- */
.hero.page-banner{min-height:340px;border-radius:0 0 36px 36px;overflow:hidden;background-color:var(--wm-dark)}
.hero.page-banner::before{background:linear-gradient(105deg,rgba(7,18,36,.94),rgba(11,31,77,.82) 55%,rgba(30,110,245,.45))}
html[lang=ar] .hero.page-banner::before{background:linear-gradient(255deg,rgba(7,18,36,.94),rgba(11,31,77,.82) 55%,rgba(30,110,245,.45))}
.hero.page-banner h1{font-size:clamp(1.9rem,4.6vw,3rem)}

/* ---------- Cards ---------- */
.card{border:1px solid var(--ch-border);border-radius:22px;padding:2rem;background:#fff;
  box-shadow:var(--ch-shadow);gap:.55rem;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.card::before{content:"";position:absolute;inset-inline:1.6rem;top:0;height:3px;border-radius:0 0 6px 6px;
  background:var(--ch-grad);opacity:0;transform:scaleX(.4);transform-origin:center;transition:all .35s}
.card:hover{transform:translateY(-8px);box-shadow:var(--ch-shadow-lg);border-color:rgba(30,110,245,.3)}
.card:hover::before{opacity:1;transform:scaleX(1)}
.card h3{color:var(--wm-secondary)}
.card p{line-height:1.8}
.card .wm-img{border-radius:22px 22px 0 0;margin:-2rem -2rem 1.25rem}
.card-link{font-weight:700;gap:.5rem}
.card-link .arrow{transition:transform .25s}
.card-link:hover .arrow{transform:translateX(4px)}
html[lang=ar] .card-link:hover .arrow{transform:scaleX(-1) translateX(4px)}
.icon-box{width:60px;height:60px;border-radius:18px;background:var(--ch-grad);margin-bottom:1rem;
  box-shadow:0 12px 24px -10px rgba(30,110,245,.6);transition:transform .35s}
.card:hover .icon-box{transform:rotate(-6deg) scale(1.06)}
.icon-box svg{width:28px;height:28px}
.cta-card{background:linear-gradient(150deg,#1e6ef5,#0b1f4d 80%);border:0;box-shadow:var(--ch-shadow-lg)}
.cta-card::before{display:none}
.cta-card h3{color:#fff}
.step-num{width:48px;height:48px;border-radius:16px;background:var(--ch-grad);
  box-shadow:0 10px 20px -8px rgba(30,110,245,.55)}

/* ---------- Lists / badges ---------- */
.icon-list .tick{background:var(--ch-grad);box-shadow:0 6px 14px -6px rgba(30,110,245,.5)}
.badge{background:var(--ch-grad-soft);color:var(--wm-primary);border:1px solid rgba(30,110,245,.18)}
.who-for{border-inline-start:0;border-radius:16px;background:#fff;border:1px solid var(--ch-border);
  box-shadow:var(--ch-shadow);position:relative;overflow:hidden}
.who-for::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--ch-grad)}

/* ---------- Photos / map ---------- */
.wm-img{border-radius:22px;box-shadow:var(--ch-shadow)}
.wm-img[data-wm-shape=tall]{border-radius:22px}
.map-frame{border-radius:22px;border:1px solid var(--ch-border);box-shadow:var(--ch-shadow)}

/* ---------- Forms ---------- */
.form{border-radius:22px;border:1px solid var(--ch-border);box-shadow:var(--ch-shadow)}
.field input,.field textarea,.field select{border-radius:12px;background:#f6f9ff;border:1.5px solid rgba(11,31,77,.14)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wm-primary);
  box-shadow:0 0 0 4px rgba(34,184,240,.2)}
body .wmf-newsletter_signup{background:#fff;border:1px solid var(--ch-border);border-radius:22px;
  box-shadow:var(--ch-shadow);padding:32px 26px}
body .wmf-newsletter_signup button{background:var(--ch-grad);border-radius:12px;
  box-shadow:0 12px 24px -10px rgba(30,110,245,.6)}
body .wmf-newsletter_signup input[type="email"],body .wmf-newsletter_signup input[type="tel"]{
  border-radius:12px;background:#f6f9ff;border:1.5px solid rgba(11,31,77,.14)}

/* ---------- FAQ ---------- */
details.faq{border-radius:16px;border:1px solid var(--ch-border);box-shadow:0 4px 18px -10px rgba(11,31,77,.12);
  transition:border-color .25s,box-shadow .25s}
details.faq[open]{border-color:rgba(30,110,245,.35);box-shadow:var(--ch-shadow)}
.faq-chips a{border-radius:999px;border:1px solid var(--ch-border);transition:all .2s}
.faq-chips a:hover{background:var(--ch-grad);border-color:transparent;transform:translateY(-2px)}
.faq-list details.faq summary::after{background:var(--ch-grad-soft);border-radius:10px}
.faq-list details.faq[open] summary::after{background:var(--ch-grad)}

/* ---------- CTA band ---------- */
.cta-band{background-image:linear-gradient(115deg,#1e6ef5 0%,#0b1f4d 55%,#22b8f0 130%);
  border-radius:36px;margin-inline:max(1rem,calc((100% - 1180px)/2));position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 70%);mask-image:linear-gradient(120deg,#000,transparent 70%)}
.cta-band h2{letter-spacing:-.02em}

/* ---------- Footer ---------- */
.site-footer{background:
  radial-gradient(70% 120% at 100% 0%,rgba(30,110,245,.22),transparent 60%),
  radial-gradient(50% 90% at 0% 100%,rgba(34,184,240,.10),transparent 60%),#0a1424;
  border-top:1px solid rgba(159,220,255,.12)}
.site-footer h4{font-size:1rem;letter-spacing:.02em}
.site-footer h4::after{width:30px;height:3px;background:var(--ch-grad);border-radius:99px}
.footer-brand strong{font-weight:800}
.social a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:all .25s}
.social a:hover{background:var(--ch-grad);transform:translateY(-3px)}
.footer-bottom{border-top-color:rgba(159,220,255,.12)}

/* ---------- Floating buttons ---------- */
.wmx-wa{box-shadow:0 10px 26px -6px rgba(37,211,102,.55);transition:transform .25s}
.wmx-wa:hover{transform:scale(1.1) translateY(-2px)}

/* ---------- Page transitions ---------- */
.ch-pt{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(70% 90% at 80% 10%,rgba(34,184,240,.25),transparent 55%),
  linear-gradient(150deg,#0b1f4d,#0a1424 65%,#123a7a);
  transform:translateY(0);transition:transform .55s cubic-bezier(.75,0,.2,1)}
.ch-pt.ch-pt-out{transform:translateY(-101%)}
.ch-pt.ch-pt-pre{transition:none;transform:translateY(101%)}
.ch-pt-inner{display:flex;flex-direction:column;align-items:center;gap:16px;transition:opacity .3s}
.ch-pt img{width:96px;height:96px;object-fit:contain;border-radius:24px;background:#fff;padding:12px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.06);
  animation:chPtPulse 1.4s ease-in-out infinite}
.ch-pt-bar{width:120px;height:3px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.ch-pt-bar::before{content:"";display:block;height:100%;width:40%;border-radius:99px;
  background:var(--ch-grad);animation:chPtBar 1.1s ease-in-out infinite}
.ch-pt.ch-pt-out .ch-pt-inner{opacity:0}
@keyframes chPtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes chPtBar{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
@media(prefers-reduced-motion:reduce){.ch-pt{display:none!important}}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .card,.card::before,.icon-box,.btn,.social a{transition:none!important}
}