:root{
  --ink:#0A2B3D; --brand:#0B7A86; --brand-strong:#075E68; --aqua:#2FBFB8; --amber:#F5A524; --focus:#075E68;
  --paper:#FAFDFD; --mist:#EAF5F5; --line:#C9DFE1; --muted:#4A6572; --on-brand:#FFFFFF;
  --r-sm:6px; --r-md:12px; --r-lg:22px;
  --sans:Manrope,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --arabic:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ink:#E8F4F4; --brand:#46C9C2; --brand-strong:#7FE0DA; --aqua:#46C9C2; --paper:#071C28; --focus:#F5A524; --mist:#0C2A3A; --line:#1E4455; --muted:#9DB8C2; --on-brand:#06202B;}}
:root[data-theme=dark]{--ink:#E8F4F4; --brand:#46C9C2; --brand-strong:#7FE0DA; --aqua:#46C9C2; --paper:#071C28; --focus:#F5A524; --mist:#0C2A3A; --line:#1E4455; --muted:#9DB8C2; --on-brand:#06202B;}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans)}
html[lang=ar] body{font-family:var(--arabic);line-height:1.9}
img{max-width:100%}a{color:var(--brand)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99;border-radius:var(--r-sm)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand img{height:44px;display:block}
.brand .dark-logo{display:none}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--aqua)}
.tools{display:flex;gap:10px;align-items:center}
.pill{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:7px 16px;font:600 14px var(--sans);cursor:pointer}
html[lang=ar] .pill{font-family:var(--arabic)}
.pill:hover{border-color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:var(--on-brand);padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer;font-size:16px;font-family:inherit}
.btn:hover{background:var(--brand-strong);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.menu-btn{display:none}
/* hero */
.hero{position:relative;overflow:hidden;padding:84px 0 96px;background:linear-gradient(180deg,var(--mist),var(--paper))}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
html[lang=ar] .eyebrow{letter-spacing:0;font-family:var(--arabic);font-size:15px}
h1{font-size:clamp(38px,5.4vw,66px);line-height:1.05;letter-spacing:-.025em;margin:14px 0 22px;font-weight:800}
html[lang=ar] h1{line-height:1.3;letter-spacing:0}
h1 em{font-style:normal;color:var(--brand)}
.lead{font-size:20px;color:var(--muted);max-width:56ch;margin:0 0 32px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.gauge{width:100%;height:auto;display:block}
.gauge .drip{animation:drip 3.2s ease-in infinite}
@keyframes drip{0%,55%{transform:translateY(-14px);opacity:0}65%{opacity:1}100%{transform:translateY(34px);opacity:0}}
@media (prefers-reduced-motion:reduce){.gauge .drip{animation:none;opacity:1;transform:none}}
/* sections */
section{padding:88px 0}
.alt{background:var(--mist)}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 18px}
html[lang=ar] h2{letter-spacing:0;line-height:1.4}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.ruler{display:flex;flex-direction:column;gap:0;border-inline-start:3px solid var(--brand);padding-inline-start:26px}
.ruler p{margin:0 0 20px;font-size:19px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font:500 14px var(--mono);color:var(--brand);display:block;margin-bottom:34px;letter-spacing:.1em}
.step h3{margin:0 0 8px;font-size:21px}.step p{margin:0;color:var(--muted)}
.tick{height:8px;margin:0 0 -8px;background:repeating-linear-gradient(90deg,var(--brand) 0 2px,transparent 2px 14px);width:84px;border-radius:2px}
.service{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:40px;background:var(--paper)}
.service div{padding:34px 30px;border-inline-end:1px solid var(--line)}.service div:last-child{border:0}
.service svg{width:38px;height:38px;margin-bottom:18px}
.service h3{margin:0 0 8px;font-size:20px}.service p{margin:0;color:var(--muted)}
.contact{background:#0A2B3D;color:#EAF5F5}
.contact h2{color:#fff}.contact .eyebrow{color:#7FE0DA}
.contact p.lead{color:#B9D3D9}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
form{display:grid;gap:16px}
label{font-weight:600;font-size:14px;color:#D4E8EC;display:grid;gap:6px}
input,textarea{font:inherit;padding:13px 15px;border-radius:var(--r-md);border:1.5px solid #3C6575;background:#0F3447;color:#fff}
input:focus,textarea:focus{border-color:#7FE0DA;outline:none}
textarea{min-height:130px;resize:vertical}
.contact .btn{background:#46C9C2;color:#06202B;justify-self:start}.contact .btn:hover{background:#7FE0DA;color:#06202B}
.note{font-size:13px;color:#9DB8C2;margin:0}
footer{padding:30px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
[data-lang]{display:none}html[lang=en] [data-lang=en],html[lang=ar] [data-lang=ar]{display:revert}
html[lang=ar] [data-lang=ar].block{display:block}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media (max-width:900px){
  .hero .wrap,.split,.cgrid{grid-template-columns:1fr;gap:36px}
  .steps,.service{grid-template-columns:1fr}.service div{border-inline-end:0;border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-block}
  nav{position:absolute;inset-inline:0;top:72px;background:var(--paper);border-bottom:1px solid var(--line);display:none}
  nav.open{display:block}nav ul{flex-direction:column;gap:0;padding:8px 20px 16px}nav a{display:block;padding:12px 0}
  section{padding:64px 0}.hero{padding:56px 0 64px}
}
.brand{flex:none}@media(max-width:480px){.brand svg{width:168px;height:auto}.bar{gap:8px}}