:root{
  --bg:#0b1020; --card:#121a33; --ink:#e9eefc; --muted:#a9b3d5;
  --brand:#5b8cff; --brand-2:#22d3ee; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px; --radius-lg:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Noto Kufi Arabic";
  color:var(--ink);
  background:linear-gradient(180deg,#0b1020 0%, #0b1228 55%, #0e1533 100%);
}
a{color:var(--brand); text-decoration:none}
.container{width:min(1200px, 92vw); margin:0 auto}
header{position:sticky; top:0; z-index:50; background:rgba(11,16,32,.7); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0}
.logo{display:flex; gap:10px; align-items:center; color:var(--ink)}
.logo-badge{width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); font-weight:700}
nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
nav a{color:var(--ink); opacity:.9}
nav a:hover{opacity:1}
.cta{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081022; font-weight:700; box-shadow:var(--shadow)}
.cta:hover{filter:brightness(1.05)}
.ghost{background:#121a33; color:var(--ink); border:1px solid rgba(255,255,255,.15)}
.small{padding:6px 10px; border-radius:10px; font-weight:600}
.menu-btn{display:none; border:1px solid rgba(255,255,255,.12); background:#0b132b; color:var(--ink); padding:10px 12px; border-radius:10px}
.lang-switch{display:flex; gap:8px}
.chip{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border:1px dashed rgba(255,255,255,.2); border-radius:999px; font-size:14px; color:var(--muted); background:#0b132b}
.chip[aria-pressed="true"]{border-style:solid; color:var(--ink)}

@media (max-width:900px){
  nav ul{display:none}
  .menu-btn{display:inline-flex}
  .nav.open nav ul{display:flex; flex-direction:column; position:absolute; left:4vw; right:4vw; top:64px; background:#0b132b; padding:16px; border-radius:14px; gap:10px; box-shadow:var(--shadow)}
}

/* Hero */
.hero{padding:80px 0 40px}
.tag{display:inline-flex; gap:8px; align-items:center; color:#0b132b; background:linear-gradient(90deg,var(--brand),var(--brand-2)); padding:6px 12px; border-radius:999px; font-weight:700}
.grid{display:grid; gap:26px}
.hero h1{font-size: clamp(28px, 5vw, 56px); line-height:1.05; margin:14px 0 14px}
.hero p{color:var(--muted); font-size: clamp(16px, 2.3vw, 20px)}
.hero-cta{display:flex; gap:14px; margin-top:16px}
@media (min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.pad{padding:18px}
.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:26px}
.stat{padding:14px 16px}
.stat small{color:var(--muted)}
.cards{display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin:24px 0}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px; transition: transform .2s ease, background .2s ease}
.card:hover{transform: translateY(-2px); background:#141f3c}
.card h3{margin:8px 0 6px}
.eyebrow{display:inline-block; font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted)}
section{padding:56px 0}
section h2{font-size: clamp(22px, 4vw, 38px); margin:0 0 10px}
section p.lead{color:var(--muted); font-size:18px; margin-top:0}
.svc{display:grid; gap:18px}
@media (min-width:900px){ .svc{grid-template-columns: 1fr 1fr} }
.check{color:var(--ok); margin-right:6px}
.certs{display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))}
.cert{padding:18px}
.contact-wrap{display:grid; gap:24px}
@media (min-width:900px){ .contact-wrap{grid-template-columns:1.1fr .9fr} }
form{display:grid; gap:12px}
label{font-size:14px}
input, select, textarea{width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0b132b; color:var(--ink)}
textarea{min-height:130px}
.note{color:var(--muted); font-size:14px}
.success{display:none; padding:12px; border:1px solid rgba(34,197,94,.4); background:rgba(34,197,94,.1); border-radius:12px; color:#a7f3d0}
footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08); background:#0b132b}
.foot-grid{display:grid; gap:22px}
@media (min-width:900px){ .foot-grid{grid-template-columns: 1.5fr 1fr 1fr 1fr} }
.subtle{color:var(--muted)}
.foot-links{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px}

/* Back to top */
#toTop{position:fixed; right:18px; bottom:18px; display:none; padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081022; border:none; font-weight:700; box-shadow:var(--shadow)}

/* Dialog styles */
dialog{max-width:min(900px, 92vw); border:none; border-radius:16px; padding:0; background:#0b132b; color:var(--ink)}
.policy-head{padding:22px 22px 6px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1)}
.policy-body{padding:18px 22px 22px; max-height:70vh; overflow:auto}

/* RTL tweaks */
html[dir="rtl"] body{font-family: "Noto Kufi Arabic", Tahoma, Arial, ui-sans-serif}
html[dir="rtl"] .logo{flex-direction:row-reverse; text-align:start}
html[dir="rtl"] nav ul{flex-direction:row-reverse}
html[dir="rtl"] .hero-cta{flex-direction:row-reverse}
html[dir="rtl"] .stat{text-align:start}
html[dir="rtl"] .foot-grid{direction:rtl}
html[dir="rtl"] .contact-wrap{direction:rtl}

/* Ensure certificate cards keep action buttons aligned at the bottom */
.cert{display:flex; flex-direction:column; min-height:280px}
.cert p:last-of-type{margin-top:auto}
.cert a.cta{align-self:flex-start}