:root {
  color-scheme: light;
  --bg: #fbf8f3; --surface: #fff; --surface-2: #f4ede2; --ink: #0e1a2b; --muted: #44536a; --faint: #7a879a;
  --teal: #0b7a83; --teal-d: #08656d; --teal-s: #e3f4f5; --coral: #ff6b4a; --coral-d: #e9542f; --line: rgb(14 26 43 / .1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:lang(ar) body, body:lang(ar) { font-family: "IBM Plex Sans Arabic", Manrope, system-ui, sans-serif; }
a { color: var(--teal-d); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.top { position: sticky; top: 0; z-index: 5; background: rgb(251 248 243 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); text-decoration: none; }
.lang { font-weight: 700; text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); }
.hero { background: radial-gradient(1200px 500px at 80% -10%, rgb(20 166 177 / .22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgb(255 107 74 / .14), transparent 60%), linear-gradient(180deg, #0e1a2b, #13263c); color: #fff; padding: 88px 0 72px; }
.pill { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8ff5f7; border: 1px solid rgb(143 245 247 / .4); border-radius: 999px; padding: 6px 14px; }
:lang(ar) .pill { letter-spacing: 0; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; margin: 18px 0 16px; max-width: 16em; letter-spacing: -.02em; }
:lang(ar) .hero h1 { letter-spacing: 0; line-height: 1.3; }
.lead { font-size: 1.15rem; color: rgb(255 255 255 / .82); max-width: 40em; margin: 0; }
.cta { margin: 28px 0 0; }
.btn { display: inline-block; font-weight: 800; text-decoration: none; border-radius: 999px; padding: 15px 26px; }
.btn.primary { background: var(--coral); color: #fff; box-shadow: 0 10px 30px rgb(255 107 74 / .35); }
.btn.primary:hover { background: var(--coral-d); }
.stats { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stats li { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; padding: 16px 18px; }
.stats b { display: block; font-size: 1.8rem; font-weight: 800; color: #fff; }
.stats span { color: rgb(255 255 255 / .75); font-size: .95rem; }
.sec { padding: 72px 0; }
.sec.alt { background: var(--surface-2); }
.eyebrow { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
:lang(ar) .eyebrow { letter-spacing: 0; }
.sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.2; margin: 8px 0 24px; letter-spacing: -.01em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.grid article { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgb(14 26 43 / .05), 0 2px 8px rgb(14 26 43 / .04); border-top: 4px solid var(--teal); }
.grid h3 { margin: 0 0 6px; font-size: 1.1rem; }
.grid p { margin: 0; color: var(--muted); }
.final { text-align: center; background: var(--teal-s); }
.final p { color: var(--muted); }
.socials { display: flex; justify-content: center; gap: 18px; font-weight: 700; }
footer { padding: 28px 0; background: #0e1a2b; color: rgb(255 255 255 / .7); font-size: .9rem; }
footer a { color: #8ff5f7; }
@media (max-width: 560px) { .hero { padding: 56px 0 48px; } .sec { padding: 52px 0; } }