:root {
  --about-bg: #03061b;
  --about-panel: rgba(13,22,52,.78);
  --about-panel-strong: rgba(15,26,60,.94);
  --about-line: rgba(132,160,232,.16);
  --about-text: #f7f8ff;
  --about-muted: #939fbe;
  --about-blue: #78a2ff;
  --about-cyan: #55e6c1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.about-page { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--about-bg); color: var(--about-text); font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.about-page a { color: inherit; text-decoration: none; }
.about-page svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.about-skip { position: fixed; z-index: 1000; top: 10px; inset-inline-start: 10px; padding: 10px 14px; border-radius: 8px; background: #fff; color: #03061b !important; transform: translateY(-150%); }
.about-skip:focus { transform: translateY(0); }

.about-ambient { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.about-grid-lines { position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(rgba(119,155,240,.11) 1px,transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(to bottom,transparent,#000 14%,#000 88%,transparent); -webkit-mask-image: linear-gradient(to bottom,transparent,#000 14%,#000 88%,transparent); }
.about-orb { position: absolute; border-radius: 50%; filter: blur(130px); }
.about-orb-one { width: 620px; height: 620px; top: 80px; left: -260px; background: rgba(20,86,214,.17); }
.about-orb-two { width: 680px; height: 680px; right: -310px; top: 610px; background: rgba(112,53,176,.12); }
.about-page .home-nav { background: rgba(3,6,27,.84); }

.about-main,.about-footer { position: relative; z-index: 1; }
.about-main { width: min(100%,1280px); margin: 0 auto; padding: 0 32px 96px; }
.about-hero { min-height: 555px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 92px 24px 72px; text-align: center; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--about-blue); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.about-eyebrow svg { width: 19px; height: 19px; }
.about-hero h1 { margin: 20px 0 17px; color: var(--about-text); font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size: clamp(48px,7vw,78px); font-weight: 800; line-height: .98; letter-spacing: -.065em; }
.about-hero h1 span { color: var(--about-blue); background: linear-gradient(100deg,#8eb2ff 0%,#4f8cff 58%,#7c70f0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 22px rgba(78,132,255,.18)); }
[dir="rtl"] .about-hero h1 { font-family:"Noto Kufi Arabic",Tahoma,sans-serif; font-size: clamp(45px,6.2vw,72px); line-height: 1.28; letter-spacing: -.055em; }
.about-hero > p { max-width: 750px; margin: 0; color: var(--about-muted); font-size: 17px; line-height: 1.8; }
[dir="rtl"] .about-hero > p { line-height: 2; }
.about-hero-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 29px; padding: 10px 14px; border-radius: 999px; color: #9eb9f6 !important; font-size: 11px; font-weight: 700; transition: color .2s,background .2s,transform .2s; }
.about-hero-link svg { width: 17px; height: 17px; animation: about-bob 1.8s ease-in-out infinite; }
.about-hero-link:hover,.about-hero-link:focus-visible { background: rgba(95,143,255,.09); color: #fff !important; outline: none; transform: translateY(2px); }
@keyframes about-bob { 50% { transform: translateY(4px); } }

.about-bento { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr); gap: 18px; scroll-margin-top: 105px; }
.about-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--about-line); border-radius: 21px; background: linear-gradient(145deg,var(--about-panel),rgba(8,14,37,.72)); box-shadow: 0 22px 65px rgba(0,0,0,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.about-card::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(125deg,rgba(255,255,255,.025),transparent 42%); }
.about-card-heading { display: flex; align-items: center; gap: 10px; color: #8faef6; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.about-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(111,151,255,.25); border-radius: 11px; background: rgba(74,116,224,.1); color: var(--about-blue); }
.about-card-icon svg { width: 19px; height: 19px; }
.about-card h2 { margin: 22px 0 12px; color: var(--about-text); font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size: clamp(25px,3vw,34px); line-height: 1.18; letter-spacing: -.045em; }
[dir="rtl"] .about-card h2 { font-family:"Noto Kufi Arabic",Tahoma,sans-serif; line-height: 1.55; letter-spacing: -.035em; }
.about-card p { color: var(--about-muted); line-height: 1.75; }

.mission-card { min-height: 385px; padding: 42px 44px; background: radial-gradient(circle at 92% 9%,rgba(24,123,196,.24),transparent 40%),linear-gradient(145deg,rgba(12,37,72,.92),rgba(8,18,43,.78)); }
[dir="rtl"] .mission-card { background: radial-gradient(circle at 8% 9%,rgba(24,123,196,.24),transparent 40%),linear-gradient(215deg,rgba(12,37,72,.92),rgba(8,18,43,.78)); }
.mission-card > p { max-width: 760px; margin: 0; }
.mission-principles { display: flex; flex-wrap: wrap; gap: 10px 19px; margin-top: 29px; padding-top: 22px; border-top: 1px solid rgba(137,164,230,.12); }
.mission-principles span { display: inline-flex; align-items: center; gap: 8px; color: #b4c2e0; font-size: 11px; }
.mission-principles i { width: 7px; height: 7px; border-radius: 50%; background: var(--about-cyan); box-shadow: 0 0 12px rgba(85,230,193,.55); }

.engine-card { min-height: 385px; padding: 31px; background: radial-gradient(circle at 100% 0,rgba(81,109,221,.18),transparent 43%),var(--about-panel-strong); }
.engine-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #7198ef; }
.engine-topline > svg { width: 19px; height: 19px; }
.engine-live { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.engine-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--about-cyan); box-shadow: 0 0 12px rgba(85,230,193,.7); animation: engine-pulse 1.8s ease-in-out infinite; }
@keyframes engine-pulse { 50% { opacity:.35; transform:scale(.7); } }
.engine-card h2 { margin: 18px 0 0; font-size: 17px; letter-spacing: -.025em; }
.engine-primary { display: flex; flex-direction: column; margin-top: 18px; }
.engine-primary strong { color: #62a3ff; font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size: 54px; line-height: 1; letter-spacing: -.06em; }
.engine-primary span { margin-top: 7px; color: #a4afcb; font-size: 11px; }
.engine-bars { height: 72px; display: flex; align-items: flex-end; gap: 6px; margin: 22px 0 18px; padding: 0 9px; border-bottom: 1px solid rgba(132,160,232,.13); }
.engine-bars i { flex: 1; min-width: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(to top,#15539d,#29a4d6); box-shadow: 0 0 15px rgba(33,131,213,.12); animation: engine-bars 3.5s ease-in-out infinite alternate; }
.engine-bars i:nth-child(1) { height: 23%; }.engine-bars i:nth-child(2) { height: 48%; animation-delay:-1s; }.engine-bars i:nth-child(3) { height: 67%; animation-delay:-2s; }.engine-bars i:nth-child(4) { height: 92%; animation-delay:-.7s; }.engine-bars i:nth-child(5) { height: 76%; animation-delay:-1.7s; }.engine-bars i:nth-child(6) { height: 51%; animation-delay:-2.5s; }.engine-bars i:nth-child(7) { height: 31%; animation-delay:-1.3s; }
@keyframes engine-bars { to { transform: scaleY(.73); transform-origin: bottom; filter: brightness(1.18); } }
.engine-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.engine-details div { min-width: 0; padding: 11px; border: 1px solid rgba(132,160,232,.1); border-radius: 10px; background: rgba(255,255,255,.02); }
.engine-details dt { overflow: hidden; color: #7f8ba9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.engine-details dd { margin: 3px 0 0; color: #e9edff; font-size: 15px; font-weight: 800; }

.story-card { min-height: 400px; padding: 40px 42px; }
.story-card h2 { max-width: 620px; }
.story-question { max-width: 700px; margin: 0 !important; color: #cbd4eb !important; font-size: 15px; font-weight: 600; }
.story-timeline { display: grid; gap: 18px; margin-top: 28px; }
.story-timeline > div { position: relative; display: grid; grid-template-columns: 19px 1fr; gap: 14px; }
.story-timeline > div:first-child::after { content:""; position: absolute; top: 17px; bottom: -22px; inset-inline-start: 8px; width: 1px; background: linear-gradient(var(--about-blue),rgba(120,162,255,.12)); }
.story-timeline > div > span { position: relative; z-index: 1; width: 17px; height: 17px; margin-top: 2px; border: 4px solid #122552; border-radius: 50%; background: #6e9cff; box-shadow: 0 0 14px rgba(85,138,255,.35); }
.story-timeline > div:last-child > span { background: transparent; box-shadow: none; }
.story-timeline strong { color: #739bfa; font-size: 9px; letter-spacing: .13em; }
.story-timeline p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; }

.region-card { min-height: 400px; display: flex; flex-direction: column; }
.region-copy { position: relative; z-index: 2; padding: 34px 34px 0; }
[dir="rtl"] .region-copy { padding: 34px 34px 0; }
.region-copy h2 { font-size: 25px; }
.region-copy p { margin: 0; font-size: 13px; }
.region-visual { position: relative; min-height: 300px; padding-bottom:48px; display: grid; flex: 1; place-items: center; overflow: hidden; }
.region-visual::before { content:""; position:absolute; width:290px; height:290px; border-radius:50%; background:radial-gradient(circle,rgba(42,101,221,.18),transparent 67%); filter:blur(4px); }
.region-map { position:relative; z-index:1; width:100%; max-width:520px; aspect-ratio:520 / 350; direction:ltr; }
.region-map > svg { display:block; width:100%; height:100%; overflow:visible; }
.region-map-label { position:absolute; transform:translate(-50%,-50%); padding:5px 11px; border:1px solid var(--map-label-border); border-radius:999px; background:var(--map-label-bg); color:var(--map-label-text); -webkit-text-fill-color:var(--map-label-text); font:600 12px/1.4 Inter,-apple-system,BlinkMacSystemFont,sans-serif; white-space:nowrap; }
.region-map-label-jordan { left:31.5385%; top:39.4286%; }
.region-map-label-kuwait { left:69.0385%; top:54%; }
.globe-ocean { fill:url(#globeOcean); stroke:#608fcd; stroke-width:1; }
.globe-atmosphere { fill:none; stroke:#6da6ff; opacity:.3; filter:drop-shadow(0 0 9px #559fff); }
.globe-land path { fill:#438487; stroke:#7fb3b5; stroke-width:.45; }
.globe-graticule ellipse { stroke:#7ab1ef; opacity:.15; stroke-width:.8; }
.globe-shade { fill:url(#globeShade); stroke:none; }
.globe-label-leader { stroke:#a1bcdf; stroke-width:1; opacity:.7; }
html[data-theme="light"] .globe-land path { fill:#73bbba; stroke:#b8e1d5; }
.map-grid path { stroke: rgba(116,149,228,.08); stroke-width:1; }
.region-route { stroke:url(#regionLine); stroke-width:2.5; stroke-dasharray:7 8; filter:drop-shadow(0 0 7px rgba(91,143,255,.5)); animation:region-route 15s linear infinite; }
@keyframes region-route { to { stroke-dashoffset:-150; } }
.region-halo { fill:url(#regionGlow); stroke:none; animation:region-halo 2.8s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.region-halo:nth-of-type(2) { animation-delay:-1.4s; }
@keyframes region-halo { 0% { opacity:.2; transform:scale(.45); } 75%,100% { opacity:0; transform:scale(1.3); } }
.region-node circle:first-child { fill:#0b1d4b; stroke:#6e9eff; stroke-width:2; }
.region-node circle:last-child { fill:#72a1ff; stroke:none; }
.region-node.is-current circle:first-child { fill:#113a5b; stroke:var(--about-cyan); filter:drop-shadow(0 0 11px rgba(85,230,193,.75)); }
.region-node.is-current circle:last-child { fill:var(--about-cyan); }
.region-status { position:absolute; z-index:2; bottom:20px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(132,160,232,.16); border-radius:999px; background:rgba(6,12,32,.74); color:#aebbd8; font-size:10px; backdrop-filter:blur(10px); }
.region-status i { width:7px; height:7px; border-radius:50%; background:var(--about-cyan); box-shadow:0 0 10px rgba(85,230,193,.65); }

.about-cta { min-height: 170px; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 18px; padding: 34px 42px; border: 1px solid var(--about-line); border-radius: 21px; background: linear-gradient(115deg,rgba(22,62,130,.74),rgba(38,28,90,.52)); box-shadow: 0 22px 65px rgba(0,0,0,.12); }
.about-cta > div > span { color: #8eaffd; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.about-cta h2 { max-width: 650px; margin: 8px 0 0; font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size: clamp(23px,3vw,31px); letter-spacing: -.04em; }
[dir="rtl"] .about-cta h2 { font-family:"Noto Kufi Arabic",Tahoma,sans-serif; line-height:1.55; }
.about-cta > a { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid #6b9cff; border-radius: 11px; background: linear-gradient(135deg,#1c71e4,#155dca); box-shadow: 0 12px 30px rgba(24,94,210,.25); color:#fff; font-size:12px; font-weight:800; white-space:nowrap; transition:transform .2s,box-shadow .2s; }
.about-cta > a svg { width:17px; height:17px; }
[dir="rtl"] .about-cta > a svg { transform:rotate(180deg); }
.about-cta > a:hover,.about-cta > a:focus-visible { outline:none; transform:translateY(-2px); box-shadow:0 17px 38px rgba(24,94,210,.35),0 0 0 3px rgba(99,151,255,.1); }
.about-footer { border-top: 1px solid rgba(132,160,232,.1); background: rgba(3,6,24,.74); }
.about-footer nav a.active { color: var(--about-blue); }

html[data-theme="light"] body.about-page { --about-bg:#f5f7ff; --about-panel:rgba(255,255,255,.86); --about-panel-strong:rgba(255,255,255,.96); --about-line:rgba(35,57,105,.13); --about-text:#111a35; --about-muted:#63708f; --about-blue:#2868db; --about-cyan:#087f67; background:#f5f7ff; color:#111a35; }
html[data-theme="light"] .about-page .home-nav { background:rgba(255,255,255,.88); }
html[data-theme="light"] .about-grid-lines { opacity:.55; background-image:radial-gradient(rgba(42,83,165,.11) 1px,transparent 1px); }
html[data-theme="light"] .about-orb-one { background:rgba(47,113,223,.11); }
html[data-theme="light"] .about-orb-two { background:rgba(142,83,191,.08); }
html[data-theme="light"] .about-hero h1 span { background:linear-gradient(100deg,#1b5fcf,#477ce0 63%,#7668d8); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:none; }
html[data-theme="light"] .about-card { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,244,255,.9)); box-shadow:0 18px 52px rgba(31,53,102,.08); }
html[data-theme="light"] .mission-card { background:radial-gradient(circle at 92% 9%,rgba(39,139,199,.12),transparent 40%),linear-gradient(145deg,rgba(246,251,255,.96),rgba(236,244,255,.88)); }
html[data-theme="light"] [dir="rtl"] .mission-card { background:radial-gradient(circle at 8% 9%,rgba(39,139,199,.12),transparent 40%),linear-gradient(215deg,rgba(246,251,255,.96),rgba(236,244,255,.88)); }
html[data-theme="light"] .mission-principles { border-top-color:rgba(35,57,105,.1); }
html[data-theme="light"] .mission-principles span,html[data-theme="light"] .story-question { color:#415071 !important; }
html[data-theme="light"] .engine-details div { background:#f3f6fe; }
html[data-theme="light"] .engine-details dd { color:#172345; }
html[data-theme="light"] .engine-bars { border-bottom-color:rgba(35,57,105,.12); }
html[data-theme="light"] .story-timeline > div > span { border-color:#dbe7ff; }

html[data-theme="light"] .region-node circle:first-child { fill:#edf3ff; }
html[data-theme="light"] .region-node.is-current circle:first-child { fill:#e5fbf5; }
html[data-theme="light"] .map-grid path { stroke:rgba(42,77,150,.1); }
html[data-theme="light"] .region-status { border-color:rgba(35,57,105,.14); background:rgba(255,255,255,.88); color:#53617f; }
html[data-theme="light"] .about-cta { border-color:rgba(35,57,105,.13); background:linear-gradient(115deg,#eaf2ff,#f0ecff); box-shadow:0 18px 48px rgba(31,53,102,.08); }
html[data-theme="light"] .about-footer { border-top-color:rgba(35,57,105,.1); background:#fff; }

@media (max-width:960px) {
  .about-main { padding-inline:24px; }
  .about-bento { grid-template-columns:1fr; }
  .engine-card { display:grid; grid-template-columns:1fr 1fr; column-gap:25px; }
  .engine-topline,.engine-card h2 { grid-column:1/-1; }
  .engine-details { align-self:end; }
  .region-card { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr); }
  .region-copy { padding:40px 0 40px 42px; }
  [dir="rtl"] .region-copy { padding:40px 42px 40px 0; }
  .region-visual { min-height:330px; }
  .about-footer { grid-template-columns:165px 1fr; }
  .about-footer p { grid-column:1/-1; text-align:center; }
}
@media (max-width:720px) {
  .about-main { padding-inline:16px; padding-bottom:64px; }
  .about-hero { min-height:500px; padding:74px 8px 56px; }
  .about-hero > p { font-size:15px; }
  .mission-card,.story-card { padding:31px 26px; }
  .engine-card { display:block; padding:27px 25px; }
  .region-card { grid-template-columns:1fr; }
  .region-copy,[dir="rtl"] .region-copy { padding:31px 26px 0; }
  .region-visual { min-height:300px; }
  .about-cta { flex-direction:column; align-items:stretch; padding:28px 25px; }
  .about-cta > a { align-self:flex-start; }
  .about-footer { display:flex; flex-direction:column; justify-content:center; padding:36px 20px; }
}
@media (max-width:520px) {
  .about-hero h1 { font-size:44px; }
  [dir="rtl"] .about-hero h1 { font-size:41px; }
  .mission-principles { flex-direction:column; }
  .engine-details { grid-template-columns:1fr; }
  .about-card h2 { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .about-page * { scroll-behavior:auto !important; }
  .about-hero-link svg,.engine-live i,.engine-bars i,.region-route,.region-halo { animation:none !important; }
}

/* Opaque SVG label colors avoid translucent, washed-out pills on mobile Safari. */
.region-visual {
  --map-label-bg: #0b1530;
  --map-label-border: #425578;
  --map-label-text: #e2eaff;
}
html[data-theme="light"] .region-visual {
  --map-label-bg: #ffffff;
  --map-label-border: #b7c4dc;
  --map-label-text: #243654;
}