:root{
  --ink:#1A0C04;--sky:#1676E8;--sky0:#8ED8FF;--sky1:#3AAEFF;--sky2:#1676E8;--sky3:#0A3F96;
  --navy:#071E4A;--sun:#FFD60A;--text:#fff;--ink2:#14101F;--muted:#3A4258;
  --card:#fff;--r:20px;--max:1120px;--header:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;overflow-x:hidden}
body{font-family:Kufam,system-ui,sans-serif;color:var(--text);background:var(--navy);line-height:1.7}
img{max-width:100%;display:block}a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto;min-width:0}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{width:auto;height:auto;margin:0;clip:auto;inset:12px auto auto 12px;z-index:80;background:#fff;color:var(--navy);padding:8px 12px;border-radius:10px}

.hero-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.sky-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,var(--sky0) 0,var(--sky1) 28%,var(--sky2) 68%,var(--navy) 100%)}
.sky-bg::before{content:"";position:absolute;left:50%;top:50%;width:180%;height:180%;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.12) 0 7.5deg,transparent 7.5deg 15deg);animation:spin 56s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cl{position:absolute;background:#fff;border-radius:999px;filter:drop-shadow(0 4px 0 rgba(30,100,200,.16));animation:drift 18s ease-in-out infinite}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cl::before{width:55%;height:150%;left:15%;bottom:20%}.cl::after{width:40%;height:120%;right:12%;bottom:25%}
.c1{width:140px;height:40px;left:2%;top:8%}.c2{width:110px;height:32px;right:2%;top:10%;animation-direction:reverse}
.c3{width:160px;height:42px;left:8%;bottom:6%;top:auto}
@keyframes drift{50%{translate:20px 0}}

.page{position:relative;z-index:1}
header{position:sticky;top:0;z-index:50;background:#071E4A}
.hbar{position:relative;display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:40px;width:auto}
.nav{display:flex;align-items:center;justify-content:center;gap:8px 22px;flex:1 1 auto;min-width:0}
.nav a{color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a:focus-visible{color:#FFD60A;border-bottom-color:#FFD60A}
.tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-start:auto}
.lang{cursor:pointer;height:38px;padding:0 14px;border-radius:10px;border:0;background:#fff;color:var(--navy);font:inherit;font-weight:900}
.burger{display:none;width:40px;height:40px;border:0;border-radius:10px;background:#fff;color:var(--navy);font-weight:900}

.hero{position:relative;z-index:1;direction:ltr;display:grid;grid-template-columns:minmax(240px,1fr) minmax(300px,560px);grid-template-areas:"copy stage";gap:32px;align-items:center;min-height:calc(100svh - var(--header));padding:28px 0 36px;box-sizing:border-box}
.hero-copy{grid-area:copy;position:relative;z-index:2;max-width:34rem;min-width:0}
html[lang=ar] .hero-copy{direction:rtl}
h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.2;margin:0 0 14px;color:#fff;text-shadow:0 2px 0 #071E4A}
.lead{font-size:1.08rem;color:#F4F8FF;font-weight:700;margin:0 0 22px;text-shadow:0 1px 8px rgba(7,30,74,.4)}
.stores{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.stores .loc-ar,.stores .loc-en{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.store{display:block;line-height:0;flex:none}
.store img{height:40px;width:auto;margin:0}
.store.gp img{height:58px;margin-block:-9px}

.stage{grid-area:stage;position:relative;direction:ltr;height:min(78svh,calc(100svh - var(--header) - 28px));min-height:540px;overflow:visible;align-self:stretch}
.phone{position:absolute;box-sizing:border-box;aspect-ratio:1206/2622;padding:12px 11px 14px;border-radius:42px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 22px 50px rgba(7,30,74,.4)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:32px;display:block}
.phone.mid{height:100%;width:auto;max-height:100%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.phone.left{height:76%;width:auto;left:50%;top:52%;transform:translate(calc(-50% - 42%),-50%) rotate(-10deg);z-index:1}
.phone.right{height:76%;width:auto;left:50%;top:52%;transform:translate(calc(-50% + 42%),-50%) rotate(10deg);z-index:1}

.panel{background:#F3F7FC;color:var(--ink2);padding:56px 0 40px;position:relative;z-index:4}
.panel.soft{background:#EEF4FB}
.panel h2{color:var(--navy);font-size:clamp(1.45rem,2.8vw,2rem);margin:0 0 6px}
.sub{color:var(--muted);font-weight:700;margin:0 0 28px;font-size:1.02rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.card{background:#fff;border:2px solid #1A0C04;border-radius:var(--r);padding:20px;box-shadow:0 4px 0 #1A0C04;min-height:100%}
.card h3{margin:0 0 8px;color:var(--navy);font-size:1.12rem}
.card p{margin:0;color:#2C3348;font-weight:700}
.ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1676E8;color:#fff;font-size:1.25rem;margin-bottom:12px;border:2px solid #1A0C04}
.steps{counter-reset:s;margin:0;padding:0}
.steps li{list-style:none;position:relative;padding-inline-start:48px;margin:0 0 14px;color:#2C3348;font-weight:700}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--sun);border:2px solid #1A0C04;display:grid;place-items:center;font-weight:900;color:#1A0C04}

.feats{background:#F3F7FC;color:var(--ink2);position:relative;z-index:4;padding:20px 0 48px}
.feat{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center;padding:36px 0;border-bottom:1px solid #d5deea}
.feat:last-child{border-bottom:0}
.feat.flip{grid-template-columns:1fr 240px}
.feat .phone{position:relative;width:240px;height:auto;margin:0;inset:auto;transform:none;opacity:1;top:auto;left:auto;right:auto}
.feat.flip .phone{margin-inline-start:auto}
.feat h2{margin:0 0 8px}
.feat .sub{margin-bottom:0}

footer{background:#071E4A;color:#fff;padding:40px 0 48px}
footer a{color:#FFD60A;font-weight:800;text-decoration:none}
footer a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.5fr .8fr 1.05fr;gap:32px;align-items:start}
.fgrid h3{margin:0 0 12px;font-size:1.02rem;color:#fff}
.fgrid p,.fgrid li{margin:0 0 8px;color:#DCE6F5;font-size:.94rem;font-weight:600}
.fgrid ul{margin:0;padding:0;list-style:none}
.privacy-blurb{max-width:34rem}
.flog{display:block;width:fit-content;margin:0 0 16px}
.flog img{height:92px;width:auto;max-width:min(280px,100%)}
.copy{color:#DCE6F5;font-weight:700;font-size:.94rem;margin:0}
footer .stores{margin-top:16px;min-width:0}
footer .stores .loc-ar,footer .stores .loc-en{flex-wrap:nowrap}

.doc{background:#F3F7FC;color:var(--ink2);min-height:100svh}
.doc main{width:min(760px,calc(100% - 32px));margin:24px auto 64px;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:28px 22px 40px;box-shadow:0 8px 0 var(--ink);overflow-wrap:anywhere}
.doc h1{color:var(--navy);text-shadow:none;font-size:1.8rem}
.doc h2{color:var(--navy);font-size:1.15rem;margin:1.5rem 0 .4rem}
.doc .meta{color:#3d4560;font-weight:700}
.doc .box{background:#E8F4FF;border:2.5px solid var(--ink);border-radius:16px;padding:14px 16px;margin:12px 0}
address{font-style:normal}
[hidden]{display:none!important}
html[lang=ar] .loc-en,html[lang=en] .loc-ar{display:none!important}

@media (max-width:1180px){
  .wrap{width:min(var(--max),calc(100% - 40px))}
  .sky-bg .cl,.sky-bg::before{display:none}
  .grid3,.grid2,.fgrid,.feat,.feat.flip{grid-template-columns:1fr;min-width:0}
  .nav{display:none;position:absolute;inset:calc(100% + 8px) 0 auto;background:#071E4A;border:2px solid #fff;border-radius:14px;padding:12px 16px;flex-direction:column;align-items:stretch;gap:2px;z-index:60}
  .nav.on{display:flex}
  .burger{display:grid;place-items:center}
  .hbar{min-height:64px;gap:10px}
  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "stage";min-height:0;padding:36px 0 28px;gap:28px;justify-items:center}
  .hero-copy{max-width:22rem;padding:0 4px;text-align:center}
  h1{font-size:clamp(1.45rem,6vw,2rem);line-height:1.45;margin:0 0 18px}
  .lead{font-size:.98rem;line-height:1.9;font-weight:600;margin:0 auto 26px;max-width:19.5rem}
  .hero .stores{margin-top:4px}
  .hero .stores,.hero .stores .loc-ar,.hero .stores .loc-en{justify-content:center;flex-wrap:wrap;gap:12px}
  .stage{height:auto;min-height:0;width:100%;max-width:260px;margin:8px auto 8px;overflow:visible;display:flex;justify-content:center;align-self:auto}
  .stage .phone.left,.stage .phone.right{display:none !important;width:0 !important;height:0 !important;overflow:hidden;border:0;transform:none;padding:0}
  .phone.mid{position:relative;height:auto;width:min(220px,64vw);max-width:100%;left:auto;top:auto;transform:none;margin:0 auto}
  .hero-copy,.stores,.feat,.card{min-width:0;overflow-wrap:anywhere}
  .feats{padding:12px 0 56px}
  .feat,.feat.flip{justify-items:center;text-align:center;gap:20px;padding:36px 0}
  .feat .phone,.feat.flip .phone{position:relative;width:min(220px,64vw);height:auto;margin:0 auto}
  .feat h2{font-size:1.4rem;line-height:1.4;margin-bottom:12px}
  .feat .sub{line-height:1.85;max-width:22rem;margin-inline:auto}
  .fgrid{gap:28px}
  .flog{margin-inline:auto}
  .flog img{height:72px}
  footer{padding:48px 0 56px}
  footer .stores,footer .stores .loc-ar,footer .stores .loc-en{flex-wrap:wrap}
  .fbrand{text-align:center}
}
@media (max-width:480px){
  .wrap{width:min(var(--max),calc(100% - 48px))}
  .hero{padding:40px 0 32px;gap:32px}
  h1{font-size:1.5rem;line-height:1.5}
  .lead{font-size:.95rem;line-height:2}
}
@media (prefers-reduced-motion:reduce){.sky-bg::before,.cl{animation:none}}