:root {
  --navy: #061f4a;
  --navy-2: #0a356d;
  --teal: #05a9a8;
  --teal-2: #19c3c0;
  --ink: #15253a;
  --muted: #647184;
  --line: #dce5eb;
  --soft: #f4f8fa;
  --paper: #ffffff;
  --radius: 22px;
  --shadow: 0 20px 55px rgba(6,31,74,.10);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  direction: rtl;
  color: var(--ink);
  background: #fff;
  font-family: Tahoma, Arial, system-ui, sans-serif;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; top: -60px; right: 18px; z-index: 999; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 18px; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(220,229,235,.85); backdrop-filter: blur(16px); }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 30px; }
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 174px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.main-nav a { padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 700; color: #34445a; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: #eef8f8; color: var(--navy); }
.header-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; color: #fff; background: var(--navy); border-radius: 12px; font-weight: 800; font-size: 14px; }
.header-cta:hover { background: var(--teal); }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 12px; color: var(--navy); cursor: pointer; }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#fff 0%,#f5fafb 65%,#eaf8f8 100%); border-bottom: 1px solid var(--line); }
.hero::before { content:""; position:absolute; inset:0; background: url('../images/massdar-hero.webp') center/cover no-repeat; opacity:.23; }
.hero::after { content:'”'; position:absolute; left:3%; top:-80px; font-size:420px; font-family: Georgia,serif; color: rgba(5,169,168,.06); line-height:1; }
.hero-inner { position: relative; min-height: 620px; display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:70px; padding-block:70px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid rgba(5,169,168,.25); background:rgba(255,255,255,.72); border-radius:999px; color:var(--teal); font-size:13px; font-weight:800; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.hero h1 { margin:20px 0 14px; color:var(--navy); font-size:clamp(42px,6vw,76px); line-height:1.2; letter-spacing:-1.5px; }
.hero h1 span { color:var(--teal); }
.hero-copy { max-width:760px; margin:0; color:#425169; font-size:19px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 19px; border-radius:13px; font-weight:800; font-size:14px; transition:.2s ease; }
.button-primary { background:var(--navy); color:#fff; }
.button-primary:hover { background:var(--teal); transform:translateY(-2px); }
.button-secondary { background:#fff; color:var(--navy); border:1px solid var(--line); }
.button-secondary:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
.trust-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.trust-row span { padding:7px 11px; border-radius:999px; color:#48576c; background:rgba(255,255,255,.78); border:1px solid var(--line); font-size:12px; }
.hero-card { position:relative; padding:34px; border-radius:30px; background:linear-gradient(145deg,var(--navy),#082f67); color:#fff; box-shadow:0 35px 80px rgba(6,31,74,.25); isolation:isolate; overflow:hidden; }
.hero-card::before, .hero-card::after { content:'”'; position:absolute; font-family:Georgia,serif; font-size:250px; line-height:1; color:rgba(255,255,255,.05); z-index:-1; }
.hero-card::before { top:-45px; left:20px; }
.hero-card::after { bottom:-160px; right:10px; color:rgba(15,202,198,.12); }
.hero-card-logo { width:165px; filter:brightness(0) invert(1); opacity:.98; margin-bottom:72px; }
.hero-card blockquote { margin:0; font-size:29px; font-weight:800; line-height:1.55; }
.hero-card p { margin:18px 0 0; color:rgba(255,255,255,.72); }

.section { padding-block:88px; }
.section-soft { background:var(--soft); border-block:1px solid var(--line); }
.section-dark { background:var(--navy); color:#fff; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.section-kicker { color:var(--teal); font-size:13px; font-weight:900; }
.section-title { margin:5px 0 0; color:var(--navy); font-size:clamp(30px,4vw,46px); line-height:1.3; }
.section-dark .section-title { color:#fff; }
.section-intro { max-width:720px; margin:10px 0 0; color:var(--muted); }
.section-dark .section-intro { color:rgba(255,255,255,.7); }
.inline-link { color:var(--teal); font-weight:800; }
.inline-link:hover { text-decoration:underline; text-underline-offset:5px; }

.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.card { position:relative; padding:25px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 8px 24px rgba(6,31,74,.04); }
.card:hover { border-color:rgba(5,169,168,.45); box-shadow:var(--shadow); transform:translateY(-3px); }
.card, .card:hover { transition:.22s ease; }
.card-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#e9f9f8; color:var(--teal); margin-bottom:20px; }
.card-icon svg { width:25px; height:25px; }
.card h3 { margin:0 0 8px; color:var(--navy); font-size:20px; line-height:1.5; }
.card p { margin:0; color:var(--muted); font-size:14px; }
.card-link { display:inline-flex; margin-top:17px; color:var(--teal); font-size:13px; font-weight:900; }
.external-mark { font-size:12px; opacity:.72; }

.news-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.news-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.news-image { aspect-ratio:16/10; background:linear-gradient(135deg,#e8f7f7,#dfe8ee); overflow:hidden; }
.news-image img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.news-card:hover .news-image img { transform:scale(1.04); }
.news-body { padding:17px; }
.news-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.news-category { color:var(--teal); font-weight:900; }
.news-card h3 { margin:9px 0 0; color:var(--navy); font-size:16px; line-height:1.65; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.quote-panel { padding:34px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow); }
.quote-panel strong { display:block; color:var(--teal); font-size:14px; }
.quote-panel blockquote { margin:14px 0 0; color:var(--navy); font-size:28px; font-weight:900; line-height:1.6; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.stat { padding:24px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.stat b { display:block; color:var(--teal); font-size:30px; }
.stat span { color:var(--muted); font-size:13px; }

.visual-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.visual-card { overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#fff; box-shadow:0 12px 28px rgba(6,31,74,.06); }
.visual-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.visual-card figcaption { padding:12px 14px; color:#536176; font-size:12px; }

.page-hero { position:relative; overflow:hidden; padding-block:92px 72px; background:linear-gradient(135deg,#f8fbfc,#eef8f8); border-bottom:1px solid var(--line); }
.page-hero::after { content:'”'; position:absolute; left:4%; top:-100px; color:rgba(5,169,168,.07); font:420px/1 Georgia,serif; }
.breadcrumbs { position:relative; display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }
.breadcrumbs a:hover { color:var(--teal); }
.page-hero h1 { position:relative; margin:20px 0 10px; color:var(--navy); font-size:clamp(38px,6vw,66px); line-height:1.3; }
.page-hero p { position:relative; max-width:780px; margin:0; color:#4c5a70; font-size:18px; }
.prose { max-width:860px; margin-inline:auto; }
.prose h2 { margin:48px 0 13px; color:var(--navy); font-size:30px; line-height:1.4; }
.prose h3 { margin:30px 0 8px; color:var(--navy); font-size:22px; }
.prose p { color:#425168; font-size:16px; }
.prose ul, .prose ol { padding-right:23px; color:#425168; }
.prose li { margin-bottom:8px; }
.callout { margin:34px 0; padding:25px; border-right:5px solid var(--teal); border-radius:16px; background:#effafa; color:#294157; }
.process { display:grid; gap:15px; counter-reset:step; }
.process-item { display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:start; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.process-item::before { counter-increment:step; content:counter(step, decimal-leading-zero); width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:var(--navy); color:#fff; font-weight:900; }
.process-item h3 { margin:0 0 4px; }
.process-item p { margin:0; }
.link-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.directory-group { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.directory-group h2 { margin:0 0 13px; color:var(--navy); font-size:22px; }
.directory-links { display:grid; gap:8px; }
.directory-links a { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:11px; background:#f6f9fa; color:#37475c; font-size:14px; }
.directory-links a:hover { background:#eaf8f8; color:var(--navy); }

.cta-section { padding-block:64px; }
.cta-box { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:42px; border-radius:28px; background:linear-gradient(135deg,var(--navy),#0b3d78); color:#fff; }
.cta-box::after { content:'”'; position:absolute; left:2%; top:-105px; color:rgba(255,255,255,.06); font:360px/1 Georgia,serif; }
.cta-box h2 { position:relative; margin:0; font-size:32px; }
.cta-box p { position:relative; margin:7px 0 0; color:rgba(255,255,255,.72); }
.cta-box .button { position:relative; flex:0 0 auto; background:#fff; color:var(--navy); }

.site-footer { background:#031735; color:rgba(255,255,255,.7); }
.footer-main { padding-block:54px 38px; display:grid; grid-template-columns:1.35fr repeat(3,.7fr); gap:40px; }
.footer-logo { width:180px; filter:brightness(0) invert(1); margin-bottom:18px; }
.footer-about { margin:0; max-width:450px; font-size:13px; }
.footer-title { margin:0 0 14px; color:#fff; font-size:15px; }
.footer-links { display:grid; gap:8px; }
.footer-links a { font-size:13px; }
.footer-links a:hover { color:var(--teal-2); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom-inner { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns:1fr; min-height:auto; }
  .hero-card { max-width:620px; }
  .news-grid { grid-template-columns:repeat(2,1fr); }
  .visual-grid { grid-template-columns:repeat(3,1fr); }
  .footer-main { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-main > :last-child { grid-column:2/4; }
}
@media (max-width: 820px) {
  .menu-button { display:grid; place-items:center; margin-inline-start:auto; }
  .main-nav { position:fixed; top:82px; right:16px; left:16px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
  .main-nav[data-open="true"] { display:flex; }
  .main-nav a { padding:12px 14px; }
  .header-cta { display:none; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; }
  .link-directory { grid-template-columns:1fr; }
  .cta-box { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 600px) {
  .header-inner { min-height:72px; }
  .logo img { width:145px; }
  .main-nav { top:72px; }
  .hero-inner { padding-block:54px; gap:38px; }
  .hero h1 { font-size:42px; }
  .hero-copy { font-size:16px; }
  .hero-card { padding:26px; }
  .hero-card-logo { margin-bottom:40px; }
  .hero-card blockquote { font-size:23px; }
  .section { padding-block:62px; }
  .section-head { align-items:start; flex-direction:column; }
  .cards, .news-grid, .visual-grid, .stats { grid-template-columns:1fr; }
  .visual-grid { grid-template-columns:repeat(2,1fr); }
  .process-item { grid-template-columns:52px 1fr; padding:17px; }
  .process-item::before { width:48px; height:48px; border-radius:14px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:30px; }
  .footer-main > :first-child, .footer-main > :last-child { grid-column:1/-1; }
  .footer-bottom-inner { padding-block:20px; flex-direction:column; justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}