:root{--navy:#0b3568;--navy2:#06284f;--blue:#0a58c8;--orange:#f58220;--ink:#13263f;--muted:#5f7087;--line:#e3e9f1;--bg:#f5f8fc;--ok:#13804a;--r:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
html,body{overflow-x:hidden}
body{margin:0;font-family:Tajawal,"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.75;font-size:16.5px}
html[lang=en] body{font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.scrolled{border-color:var(--line);box-shadow:0 4px 18px rgba(11,53,104,.06)}
.bar{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:10px}.brand img{height:44px;width:auto}
.brand b{font-family:Inter,sans-serif;font-weight:800;font-size:20px;color:var(--navy);letter-spacing:-.3px}
nav{display:flex;gap:22px;margin-inline-start:14px;font-size:15px;font-weight:700;color:#3a4e68}
nav a{padding:6px 0;border-bottom:2px solid transparent}nav a:hover{color:var(--blue);border-color:var(--orange)}
.actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 12px;font-weight:800;cursor:pointer;color:var(--navy);font-family:Inter,sans-serif;font-size:13px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px}

/* buttons */
.btn{display:inline-block;white-space:nowrap;border:1px solid transparent;border-radius:12px;padding:11px 22px;font-weight:800;font-size:15.5px;cursor:pointer;font-family:inherit;text-align:center;transition:transform .15s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn.sm{padding:8px 16px;font-size:14.5px}.btn.lg{padding:14px 28px;font-size:17px}.btn.block{width:100%}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(245,130,32,.32)}.btn.primary:hover{background:#e0720f}
.btn.ghost{background:#fff;color:var(--navy);border-color:#cbd8e8}.btn.ghost:hover{border-color:var(--navy)}
.btn.glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}.btn.glass:hover{background:rgba(255,255,255,.26)}

/* hero */
.hero{position:relative;color:#fff;padding:84px 0 110px;background:#06284f url(assets/img/hero.jpg) center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(5,30,64,.93) 0%,rgba(5,30,64,.82) 36%,rgba(5,30,64,.28) 72%,rgba(5,30,64,.1) 100%)}
html[dir=ltr] .hero:before{background:linear-gradient(to right,rgba(5,30,64,.93) 0%,rgba(5,30,64,.82) 36%,rgba(5,30,64,.28) 72%,rgba(5,30,64,.1) 100%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:6px 16px;font-weight:700;font-size:14.5px;backdrop-filter:blur(6px)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.3)}
h1{font-size:50px;line-height:1.28;margin:20px 0 14px;font-weight:800;letter-spacing:-.5px}
html[lang=en] h1{font-size:44px;line-height:1.15}
.lead{font-size:19px;color:#dbe7f7;margin:0 0 28px;max-width:560px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.track-card{background:#fff;color:var(--ink);border-radius:20px;padding:26px;box-shadow:0 30px 60px rgba(0,10,30,.35)}
.track-card h2{margin:0 0 4px;color:var(--navy);font-size:22px}
.muted{color:var(--muted);font-size:14.5px;margin:0 0 14px}
.row{display:flex;gap:8px}
input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #cfd9e6;border-radius:12px;background:#fff;color:var(--ink)}
input:focus{outline:3px solid rgba(10,88,200,.22);border-color:var(--blue)}
.hp{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}

/* facts strip */
.facts{position:relative;margin-top:-52px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;z-index:2}
.fact{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:0 14px 34px rgba(11,53,104,.1)}
.fact svg{width:38px;height:38px;padding:8px;border-radius:12px;background:#eaf1ff;color:var(--blue)}
.fact b{display:block;color:var(--navy);font-size:16.5px;line-height:1.3}.fact span{color:var(--muted);font-size:14px}

/* sections */
.sec{padding:84px 0}.alt{background:var(--bg)}
.eyebrow{margin:0 0 6px;text-align:center;color:var(--orange);font-weight:800;font-size:14.5px;letter-spacing:.5px}
.h2{font-size:36px;color:var(--navy);margin:0 0 10px;text-align:center;font-weight:800;line-height:1.3}
.sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px;font-size:17.5px}
.start{text-align:start;margin-inline:0}.sub.start{margin-inline:0}
.cov .eyebrow,.acc .eyebrow,.about .eyebrow{text-align:start}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;position:relative;transition:transform .2s,box-shadow .2s}
.step:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,53,104,.1)}
.step svg{width:42px;height:42px;padding:9px;border-radius:13px;background:#fff3e6;color:var(--orange);margin-bottom:14px}
.step .n{position:absolute;top:16px;inset-inline-end:18px;font-family:Inter,sans-serif;font-weight:800;font-size:38px;color:#eaf0f8;line-height:1}
.step h3{margin:0 0 6px;font-size:19px;color:var(--navy)}.step p{margin:0;color:var(--muted);font-size:15.5px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;transition:transform .2s,box-shadow .2s}
.svc:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(11,53,104,.09)}
.svc svg{width:44px;height:44px;padding:10px;border-radius:13px;background:#eaf1ff;color:var(--blue);margin-bottom:12px}
.svc h3{margin:0 0 6px;font-size:19px;color:var(--navy)}.svc p{margin:0;color:var(--muted);font-size:15.5px}
.svc .tag{position:absolute;top:20px;inset-inline-end:20px}
.tag{display:inline-block;font-size:12.5px;font-weight:800;border-radius:8px;padding:2px 11px;background:#fff1e1;color:#a8530a}
.tag.ok{background:#e4f6ec;color:var(--ok)}

.soon-head{margin:58px 0 20px;text-align:center}.soon-head h3{margin:0;font-size:25px;color:var(--navy)}.soon-head p{margin:4px 0 0;color:var(--muted)}
.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.icard img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.85) brightness(.92)}
.icard .ib{padding:18px 20px 22px}.icard h3{margin:8px 0 4px;color:var(--navy);font-size:19px}.icard p{margin:0;color:var(--muted);font-size:15px}
.icard .tag{background:var(--navy);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px dashed #b9c8dc;border-radius:99px;padding:8px 18px 8px 14px}
.chip i{font-style:normal;font-size:12px;font-weight:800;background:var(--navy);color:#fff;border-radius:99px;padding:1px 10px}.chip b{font-size:15px;color:#33475f}

/* account */
.acc{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.phone{justify-self:center;width:270px;border-radius:38px;border:9px solid #0f2744;background:#0f2744;box-shadow:0 30px 60px rgba(11,53,104,.28);overflow:hidden}
.phone img{width:100%;border-radius:28px;background:#f0f3f8}
.ticks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.ticks li{position:relative;padding-inline-start:30px;font-weight:700;color:#33475f}
.ticks li:before{content:"✓";position:absolute;inset-inline-start:0;top:2px;width:21px;height:21px;border-radius:50%;background:#e4f6ec;color:var(--ok);font-size:13px;display:flex;align-items:center;justify-content:center}

.cov{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.area{border:1.5px dashed #bccade;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;color:var(--muted);background:#fff}
.area.on{border:1.5px solid #b9e3cb;background:#f0fbf5;color:var(--ok)}.area b{color:var(--navy);font-size:20px}.area span{font-size:14px;font-weight:800}

/* join */
.join{position:relative;color:#fff;padding:84px 0;background:#06284f url(assets/img/banner.jpg) center/cover no-repeat}
.join:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,30,64,.92),rgba(5,30,64,.7))}
.join-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.join-t h2{font-size:38px;margin:0 0 10px;line-height:1.3;font-weight:800}.join-t>p{color:#dbe7f7;font-size:18px;margin:0 0 26px}
.login-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);padding:22px;backdrop-filter:blur(8px)}
.login-box h3{margin:0 0 12px;font-size:18px}.login-box input{margin-bottom:10px}
.reg-card{background:#fff;color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 30px 60px rgba(0,10,30,.35)}
.reg-card h3{margin:0 0 6px;color:var(--navy);font-size:24px}
.reg-card label{display:block;margin-top:14px;font-weight:700;font-size:14.5px;color:#33475f}.reg-card label input{margin-top:6px}
.reg-card .btn{margin-top:20px}
.err{color:#ffb4ab;font-size:14.5px;margin:10px 0 0}.reg-card .err{color:#b3261e}
.ok{color:var(--ok);font-weight:800;margin:10px 0 0}.fine{color:var(--muted);font-size:13px;margin:10px 0 0}

.about{max-width:860px}.about p{font-size:18px;color:#33475f}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.vm div{background:var(--bg);border-radius:var(--r);padding:22px;border-inline-start:4px solid var(--orange)}.vm h3{margin:0 0 4px;color:var(--navy)}.vm p{margin:0;font-size:16.5px}
.contacts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.contacts a,.contacts span.empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 26px;font-weight:800;color:var(--navy)}
.contacts a.wa{background:#25d366;color:#fff;border-color:#25d366}

footer{background:var(--navy2);color:#c3d4ea;padding:26px 0;font-size:14.5px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.brand.light b{color:#fff}.brand.light img{height:36px;filter:brightness(0) invert(1)}

/* tracking result */
.tr{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.tr .st{font-weight:800;color:var(--navy);font-size:18px}.tr .meta{color:var(--muted);font-size:13.5px}
.tl{list-style:none;padding:0;margin:14px 0 0}.tl li{display:flex;gap:10px;align-items:center;padding:5px 0;color:#9aa8ba;font-size:15px}
.tl li i{width:14px;height:14px;border-radius:50%;border:2px solid #cbd6e4;flex:none}.tl li.done{color:var(--ink)}.tl li.done i{background:var(--ok);border-color:var(--ok)}.tl li.cur{font-weight:800}.tl li.cur i{background:var(--orange);border-color:var(--orange)}
.tr.bad .st{color:#b3261e}
.track-card .err{color:#b3261e}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media(max-width:980px){
  .hero-grid,.acc,.cov,.join-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}
  h1{font-size:40px}.hero{padding:56px 0 96px}.facts{grid-template-columns:1fr}
  nav{display:none;position:absolute;top:70px;inset-inline:0;background:#fff;flex-direction:column;gap:0;padding:6px 20px 12px;border-bottom:1px solid var(--line);margin:0;box-shadow:0 14px 24px rgba(11,53,104,.08)}
  nav.open{display:flex}nav a{padding:13px 0;border-bottom:1px solid var(--line)}.burger{display:block}
  .hide-s{display:none}
}
@media(max-width:620px){
  body{font-size:16px}.steps,.grid3,.vm{grid-template-columns:1fr}
  h1{font-size:33px}html[lang=en] h1{font-size:31px}.lead{font-size:17px}.h2,.join-t h2{font-size:29px}.sec,.join{padding:58px 0}
  .brand b{font-size:18px}.brand img{height:38px}.btn.sm{padding:7px 12px}.row{flex-direction:column}
  .cta .btn{flex:1}.phone{width:236px}.areas{grid-template-columns:1fr 1fr}
}