:root{
  --night:#0F214A; --navy:#1E3A8A; --navy2:#2353D8;
  --gold:#F39C12; --gold2:#F5AB1F; --gold3:#F7C55A; --gold-d:#A8650A;
  --ivory:#F8F9FA; --ivory2:#EAF0FF; --tan:#C8D8F0;
  --green:#0A7A59; --body:#333; --muted:#4B5563; --faint:#6B7280;
  --rule:rgba(35,83,216,.12);
  --s1:0 2px 10px -2px rgba(15,33,74,.08);
  --s2:0 14px 40px -12px rgba(15,33,74,.22);
  --s3:0 30px 70px -18px rgba(15,33,74,.45);
  --sg:0 10px 34px -6px rgba(243,156,18,.45);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{font-family:'Cairo','Tajawal',sans-serif;background:var(--ivory);color:var(--body);line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:84px}
h1,h2,h3,h4{font-family:'Tajawal',sans-serif;font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--night)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:64px 0;position:relative}
.bg-w{background:#fff}
.bg-i2{background:linear-gradient(180deg,var(--ivory2),var(--ivory))}
.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}

/* section heads */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold-d);background:rgba(243,156,18,.12);border:1px solid rgba(243,156,18,.25);font-size:13px;font-weight:800;padding:5px 16px;border-radius:99px;margin-bottom:14px;font-family:'Tajawal'}
.screens .eyebrow,.cta-sec .eyebrow{color:var(--gold3);background:rgba(243,156,18,.12);border-color:rgba(243,156,18,.3)}
.sec-h{font-size:clamp(26px,6vw,44px);margin-bottom:12px;color:var(--navy)}
.sec-p{color:var(--muted);font-size:16.5px;max-width:640px}
.center{text-align:center}.center .sec-p{margin-inline:auto}
.head{margin-bottom:36px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 30px;border-radius:12px;font-family:'Tajawal';font-weight:800;font-size:16.5px;border:0;cursor:pointer;transition:transform .26s,box-shadow .26s,background .2s;min-height:54px}
.btn .ic{font-size:20px}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(130deg,var(--gold),var(--gold2));color:var(--night);box-shadow:var(--sg)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 44px -8px rgba(243,156,18,.6)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-ghost-dark{background:var(--ivory2);color:var(--navy);border:1.5px solid var(--rule)}.btn-ghost-dark:hover{background:var(--navy);color:#fff}
.btn-block{width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 2px 24px rgba(15,33,74,.10)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:flex;align-items:center}
.logo-img{height:74px;width:auto;object-fit:contain;display:block;margin:-6px -14px}
.nav-links{display:none;gap:30px;font-weight:700;font-size:15px;color:var(--muted)}
.nav-links a:hover{color:var(--navy2)}
.nav-cta{background:linear-gradient(130deg,var(--gold),var(--gold2));color:var(--night);font-weight:800;font-family:'Tajawal';font-size:14.5px;padding:11px 22px;border-radius:10px;box-shadow:var(--sg)}

/* hero */
.hero{background:linear-gradient(155deg,#0F214A 0%,#1a3070 52%,#2353D8 100%);color:var(--ivory);padding:40px 0 0;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);pointer-events:none}
.hero::after{content:'';position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(243,156,18,.16) 0%,transparent 66%);top:-260px;right:-200px;pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;gap:24px}
.badge-top{display:inline-flex;gap:10px;align-items:center;padding:8px 18px;border-radius:100px;border:1px solid rgba(243,156,18,.35);background:rgba(243,156,18,.08);color:var(--gold3);font-size:13.5px;font-weight:700;margin-bottom:22px;backdrop-filter:blur(6px)}
.badge-top::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 3px rgba(243,156,18,.25);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{box-shadow:0 0 0 3px rgba(243,156,18,.25)}50%{box-shadow:0 0 0 8px rgba(243,156,18,.04)}}
.hero h1{color:#fff;font-size:clamp(32px,8.6vw,58px);margin-bottom:16px;line-height:1.14}
.hero h1 em{font-style:normal;color:var(--gold2);background:linear-gradient(transparent 70%,rgba(243,156,18,.28) 70%)}
.hero p.lead{font-size:17.5px;color:rgba(255,255,255,.82);margin-bottom:24px;max-width:540px}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.price-chip{display:inline-flex;align-items:flex-end;gap:10px;background:#fff;color:var(--night);border-radius:18px;padding:12px 22px;box-shadow:var(--s3)}
.price-chip b{font-family:'Tajawal';font-size:52px;line-height:.95;font-weight:900;color:var(--navy)}
.price-chip span{font-size:14px;font-weight:800;padding-bottom:3px;color:var(--night);font-family:'Tajawal';display:block}
.price-chip small{display:block;font-size:12px;color:var(--faint);font-weight:600}
.free-tag{display:inline-flex;align-items:center;gap:8px;color:var(--gold3);font-weight:700;font-size:14px}
.free-tag .ic{font-size:20px}
.hero-cta{display:flex;flex-direction:column;gap:12px}
.stores{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.stores span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:10px}
.stores .ic{font-size:17px;color:var(--gold3)}
.hero-vis{position:relative;height:430px;margin-top:8px}
.phone{position:absolute;border-radius:34px;background:linear-gradient(160deg,#1a2a52,#0a1330);padding:7px;box-shadow:var(--s3),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.phone img{border-radius:27px;width:100%;height:auto;aspect-ratio:600/1066;object-fit:contain;background:#fff}
.hero-vis .p1{width:210px;left:50%;top:6px;transform:translateX(-50%);z-index:3}
.hero-vis .p2{width:168px;left:50%;top:50px;transform:translateX(-182px) rotate(-8deg);z-index:2}
.hero-vis .p3{width:168px;left:50%;top:50px;transform:translateX(14px) rotate(8deg);z-index:2}
.glow-ring{position:absolute;width:380px;height:380px;border-radius:50%;left:50%;top:60px;transform:translateX(-50%);background:radial-gradient(circle,rgba(243,156,18,.22),transparent 65%);z-index:1}
.fc{display:none;position:absolute;z-index:6;width:218px;background:rgba(255,255,255,.97);color:var(--night);border:1px solid rgba(15,33,74,.07);border-radius:18px;padding:12px 14px;align-items:center;gap:12px;box-shadow:0 18px 38px -12px rgba(5,12,35,.55),0 2px 6px rgba(5,12,35,.12);font-size:12.5px;line-height:1.4;animation:drift 4.4s ease-in-out infinite}
.fc>div:last-child{min-width:0}
.fc b{display:block;font-family:'Tajawal';font-size:14.5px;line-height:1.3;margin-bottom:2px}
.fc small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.fc .ico{width:42px;height:42px;border-radius:12px;font-size:20px;margin:0}
.fc-a{top:34px;right:-14px}
.fc-b{top:50%;left:-22px;margin-top:-6px;animation-duration:5.2s;animation-delay:-1.4s}
.fc-c{bottom:104px;right:-6px;animation-duration:4.8s;animation-delay:-2.6s}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* trust strip (overlaps hero) */
.strip-wrap{position:relative;z-index:10;margin-top:-34px;padding-bottom:6px}
.strip{background:#fff;border:1px solid var(--rule);border-radius:20px;box-shadow:var(--s2);display:grid;grid-template-columns:repeat(2,1fr);overflow:hidden}
.strip-it{padding:18px 12px;text-align:center;border-bottom:1px solid var(--rule)}
.strip-it:nth-child(odd){border-inline-start:1px solid var(--rule)}
.strip-it b{display:block;font-family:'Tajawal';font-size:18px;color:var(--navy);line-height:1.3}
.strip-it small{color:var(--muted);font-size:12.5px}

/* icon chips */
.ico{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:14px;box-shadow:0 10px 22px -8px rgba(35,83,216,.55);flex:none}

/* benefits */
.ben-grid{display:grid;gap:16px}
.ben{background:#fff;border:1px solid var(--rule);border-radius:22px;padding:26px;box-shadow:var(--s1);transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.ben::after{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .3s}
.ben:hover{transform:translateY(-6px);box-shadow:var(--s2);border-color:rgba(243,156,18,.35)}
.ben:hover::after{opacity:1}
.ben h3{font-size:20px;margin-bottom:6px}
.ben p{color:var(--muted);font-size:15px}

/* screens */
.screens{background:radial-gradient(800px 400px at 50% 0%,rgba(35,83,216,.5),transparent 70%),var(--night);color:#fff;overflow:hidden}
.screens h2{color:#fff}.screens .sec-p{color:rgba(255,255,255,.72)}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 20px 36px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 206px;scroll-snap-align:center;text-align:center}
.rail .phone{position:relative;width:100%}
.rail figcaption{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--gold3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:4px 14px;border-radius:99px}
.hint{font-size:12.5px;color:rgba(255,255,255,.55);text-align:center}

/* tabs + panels */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.tab{display:inline-flex;align-items:center;gap:9px;font-family:'Tajawal';font-weight:800;font-size:15.5px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:99px;padding:11px 22px;cursor:pointer;min-height:48px;transition:all .22s}
.tab .ic{font-size:19px}
@media(max-width:759px){.tabs{flex-wrap:nowrap;gap:6px}.tab{flex:1;justify-content:center;padding:10px 6px;font-size:13.5px;min-height:46px}.tab .ic{display:none}}
.tab:hover{background:rgba(255,255,255,.14)}
.tab.on{background:linear-gradient(130deg,var(--gold),var(--gold2));color:var(--night);border-color:transparent;box-shadow:var(--sg)}
.panel{display:block;margin-top:56px;scroll-margin-top:84px}
.panel-h{text-align:center;margin-bottom:6px}
.panel-h h3{color:#fff;font-size:clamp(22px,5vw,30px);display:inline-flex;align-items:center;gap:10px}
.panel-h h3 .ic{color:var(--gold3);font-size:1.1em}
.panel-h p{color:rgba(255,255,255,.7);font-size:15.5px;margin-top:4px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.phone.d img{aspect-ratio:600/1019}
.rail.scroll{justify-content:flex-start}
.browser{max-width:960px;margin:34px auto 0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--s3),0 0 0 1px rgba(255,255,255,.12)}
.browser .bar{display:flex;align-items:center;gap:7px;background:#e9edf5;padding:10px 14px;direction:ltr}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#ff6058}
.browser .bar i:nth-child(2){background:#ffbd2e}.browser .bar i:nth-child(3){background:#28c941}
.browser .bar span{flex:1;margin:0 10px;text-align:center;background:#fff;border-radius:7px;font-size:12px;color:var(--faint);padding:3px 10px;direction:rtl;font-family:'Cairo'}
.browser:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.stage{position:relative;background:#fff;touch-action:pan-y}
.browser img{width:100%;height:auto;aspect-ratio:1400/612;object-fit:cover;background:#fff;transition:opacity .25s;display:block}
.nv{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border-radius:50%;border:0;background:rgba(15,33,74,.82);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,scale .2s}
.nv:hover{background:var(--gold);color:var(--night);scale:1.08}
.nv.next{left:12px}.nv.prev{right:12px}.nv.next .ic{transform:scaleX(-1)}
.cnt{position:absolute;bottom:12px;left:50%;translate:-50% 0;background:rgba(15,33,74,.82);color:#fff;font-family:'Tajawal';font-weight:800;font-size:13px;padding:3px 14px;border-radius:99px;direction:ltr}
.adm-cap{text-align:center;margin:18px auto 0;max-width:640px}
.adm-cap b{display:block;font-family:'Tajawal';font-size:20px;color:#fff}
.adm-cap span{color:rgba(255,255,255,.7);font-size:15px}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:20px 4px 6px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;max-width:960px;margin:0 auto;justify-content:flex-start}
.thumbs button{flex:0 0 120px;border:2px solid rgba(255,255,255,.14);background:#fff;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;opacity:.62;transition:all .2s;scroll-snap-align:center}
.thumbs button img{width:100%;height:auto;aspect-ratio:300/131;object-fit:cover}
.thumbs button:hover{opacity:1}
.thumbs button.on{opacity:1;border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,156,18,.3)}

/* steps */
.steps{display:grid;gap:16px;counter-reset:s}
.step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;box-shadow:var(--s1);position:relative}
.step::before{counter-increment:s;content:counter(s);flex:none;width:48px;height:48px;border-radius:50%;background:linear-gradient(130deg,var(--gold),var(--gold2));color:var(--night);font-weight:900;font-family:'Tajawal';font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sg)}
.step h3{font-size:19px;margin-bottom:4px}.step p{font-size:15px;color:var(--muted)}

/* reviews */
.rev-grid{display:grid;gap:16px}
.rev{background:#fff;border:1px solid var(--rule);border-radius:22px;padding:26px;box-shadow:var(--s1);display:flex;flex-direction:column;position:relative;transition:transform .3s,box-shadow .3s}
.rev:hover{transform:translateY(-5px);box-shadow:var(--s2)}
.rev .q{position:absolute;top:14px;left:20px;font-size:46px;color:var(--gold);opacity:.22;font-family:serif;line-height:1}
.stars{display:flex;gap:3px;color:var(--gold);font-size:19px;margin-bottom:12px}
.stars .ic{fill:currentColor;stroke:none}
.rev blockquote{font-size:15.5px;color:var(--body);line-height:1.9;flex:1}
.rev figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--rule);font-size:13px;color:var(--muted);line-height:1.4}
.rev figcaption b{display:block;color:var(--night);font-family:'Tajawal';font-size:15.5px}
.av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Tajawal';font-weight:900;font-size:19px;flex:none}
.gmaps{display:inline-flex;align-items:center;gap:9px;font-family:'Tajawal';font-weight:800;font-size:15px;color:var(--navy);border:1.5px solid var(--rule);background:#fff;border-radius:12px;padding:12px 22px;min-height:48px;box-shadow:var(--s1);transition:all .25s}
.gmaps:hover{background:var(--navy);color:#fff}
.gmaps .ic{font-size:19px}

/* interfaces */
.ifaces{display:grid;gap:16px}
.iface{border-radius:22px;background:#fff;border:1px solid var(--rule);box-shadow:var(--s1);overflow:hidden;transition:transform .3s,box-shadow .3s}
.iface:hover{transform:translateY(-5px);box-shadow:var(--s2)}
.iface .top{display:flex;align-items:center;gap:14px;padding:20px 24px;background:linear-gradient(135deg,var(--night),var(--navy))}
.iface .top .ico{margin:0;background:rgba(255,255,255,.12);color:var(--gold3);box-shadow:none}
.iface .tag{font-size:12px;font-weight:700;color:var(--gold3)}
.iface h3{font-size:21px;color:#fff}
.iface ul{list-style:none;padding:18px 24px 22px}
.iface li{padding:6px 0;font-size:15px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.iface li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border-radius:50%;background:rgba(10,122,89,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A59' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

/* compare */
.cmp{background:#fff;border:1px solid var(--rule);border-radius:22px;overflow:hidden;box-shadow:var(--s2)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.cmp-row:first-child{border-top:0}
.cmp-row>div{padding:14px 16px;font-size:14.5px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.cmp-row>div:first-child{border-inline-end:1px solid var(--rule);color:var(--night);font-weight:700;background:linear-gradient(90deg,rgba(10,122,89,.04),transparent)}
.cmp-row b{display:block;font-family:'Tajawal';font-size:12.5px;color:var(--faint);font-weight:700}
.cmp-row>div:first-child b{color:var(--green)}
.cmp-row .ic{font-size:20px;margin-top:3px}
.cmp-row>div:first-child .ic{color:var(--green)}
.cmp-row>div:last-child .ic{color:#C0392B;opacity:.7}
.cmp-h>div{font-family:'Tajawal';font-weight:900;font-size:16px!important;color:var(--navy)!important;background:var(--ivory2)!important}
.cmp-h>div:first-child{background:linear-gradient(135deg,var(--night),var(--navy))!important;color:var(--gold3)!important}

/* pricing */
.all-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px}
.all-in span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rule);border-radius:99px;padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--navy);box-shadow:var(--s1)}
.all-in .ic{color:var(--green);font-size:17px}
.plans{display:grid;gap:26px}
.plan{position:relative;background:#fff;border:1px solid var(--rule);border-radius:26px;padding:28px 24px;box-shadow:var(--s1)}
.plan.plan-main{background:linear-gradient(160deg,var(--night) 0%,var(--navy) 100%);border-color:transparent;box-shadow:var(--s3),0 0 0 2px rgba(243,156,18,.55);padding-top:40px;color:#fff}
.plan.plan-main::before{content:'';position:absolute;inset:0;border-radius:26px;background:radial-gradient(400px 220px at 80% 0%,rgba(243,156,18,.18),transparent 70%);pointer-events:none}
.plan.plan-main h3{color:#fff}.plan.plan-main .amt{color:var(--gold3)}.plan.plan-main .amt small,.plan.plan-main .vat{color:rgba(255,255,255,.66)}.plan.plan-main .feat li{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.12)}.plan.plan-main .feat li.inc{color:#fff}.plan.plan-main .feat li::before{background:var(--gold);color:var(--night)}
.ribbon{position:absolute;top:-17px;right:50%;transform:translateX(50%);background:linear-gradient(130deg,var(--gold),var(--gold2));color:var(--night);font-family:'Tajawal';font-weight:900;font-size:14.5px;padding:7px 22px;border-radius:99px;white-space:nowrap;box-shadow:var(--sg);z-index:2}
.plan h3{font-size:22px}
.plan .sub{font-size:13.5px;color:var(--faint);margin-top:2px}
.plan.plan-main .sub{color:rgba(255,255,255,.6)}
.plan .amt{font-family:'Tajawal';font-size:58px;font-weight:900;color:var(--navy);line-height:1.1;margin-top:10px}
.plan .amt small{font-size:15px;color:var(--muted);font-weight:700}
.vat{font-size:12.5px;color:var(--faint);margin-top:-2px}
.feat{list-style:none;margin:16px 0 24px;position:relative}
.feat li{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--rule);font-size:15px}
.feat li:last-child{border:0}
.feat li::before{content:"✓";flex:0 0 22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:3px}
.feat li.inc{font-weight:800;color:var(--night)}
.plan .btn{position:relative}
.setup{margin-top:30px;background:#fff;border:1.5px dashed rgba(243,156,18,.7);border-radius:20px;padding:20px 22px;display:flex;gap:18px;align-items:center}
.setup .n{font-family:'Tajawal';font-size:40px;font-weight:900;color:var(--navy);line-height:1;white-space:nowrap;text-align:center;background:var(--ivory2);border-radius:16px;padding:12px 18px}
.setup .n small{font-size:12.5px;color:var(--muted);font-weight:700;display:block}
.setup p{font-size:14.5px;color:var(--muted)}
.setup strong{color:var(--night);font-family:'Tajawal';font-size:16px}
.incl{display:grid;gap:12px;margin-top:16px}
.incl div{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:14px 18px;font-size:14.5px;display:flex;gap:14px;align-items:center;box-shadow:var(--s1)}
.incl .ico{margin:0;width:42px;height:42px;font-size:21px;border-radius:12px}
.incl .extra{background:#FFF8EA;border-color:rgba(243,156,18,.4)}
.incl .extra .ico{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--night);box-shadow:var(--sg)}

/* terms */
.terms{display:grid;gap:16px}
.term{background:#fff;border:1px solid var(--rule);border-radius:22px;padding:26px;box-shadow:var(--s1);position:relative;overflow:hidden}
.term::after{content:attr(data-n);position:absolute;top:-14px;left:12px;font-family:'Tajawal';font-weight:900;font-size:96px;color:var(--navy);opacity:.05;line-height:1}
.term .big{font-family:'Tajawal';font-weight:900;font-size:34px;line-height:1.1;background:linear-gradient(130deg,var(--gold-d),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.term h3{font-size:19px;margin-bottom:6px}
.term p{font-size:15px;color:var(--muted)}

/* form */
.cta-sec{background:radial-gradient(ellipse 55% 65% at 50% 30%,rgba(243,156,18,.14) 0%,transparent 65%),linear-gradient(148deg,#0F214A 0%,#2353D8 100%);color:#fff;overflow:hidden}
.cta-sec::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
.cta-sec .wrap{position:relative;z-index:2}
.cta-sec h2{color:#fff}.cta-sec .sec-p{color:rgba(255,255,255,.8)}
.what{display:grid;gap:12px;margin-top:22px}
.what div{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;backdrop-filter:blur(8px)}
.what .ic{font-size:24px;color:var(--gold3);margin-top:3px}
.what b{display:block;color:#fff;font-family:'Tajawal';font-size:16px}
.form-card{background:#fff;color:var(--body);border-radius:26px;padding:28px 24px;margin-top:28px;box-shadow:var(--s3);position:relative}
.form-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;border-radius:26px 26px 0 0;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.form-card h3{font-size:22px;margin-bottom:4px}
.form-card .small{font-size:14px;color:var(--muted);margin-bottom:16px}
.fld{margin-bottom:13px}
.fld label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--night)}
.fld input[type=text],.fld input[type=tel],.fld select{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1.5px solid var(--tan);border-radius:13px;background:var(--ivory);color:var(--body);min-height:54px;transition:border-color .2s,box-shadow .2s,background .2s}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--navy2);background:#fff;box-shadow:0 0 0 4px rgba(35,83,216,.14)}
.fld input[type=tel]{direction:ltr;text-align:right}
.fld.err input,.fld.err select{border-color:#C0392B}
.fld .msg{display:none;color:#C0392B;font-size:12.5px;margin-top:4px}
.fld.err .msg{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0 16px;line-height:1.6}
.consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--navy)}
.consent a{color:var(--navy);font-weight:700;text-decoration:underline}
.priv{font-size:12.5px;color:var(--faint);margin-top:12px;text-align:center}
.ok{display:none;padding:6px 0}
.ok .tick{width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;box-shadow:0 12px 26px -8px rgba(10,122,89,.6)}
.ok h3{color:var(--green);text-align:center;margin-bottom:6px}
.ok p.t{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:14px}
.ok ol{padding-inline-start:20px;font-size:14.5px;color:var(--muted)}
.ok li{margin-bottom:4px}

/* faq */
.faq{display:grid;gap:12px;align-items:start}
details{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:0 20px;box-shadow:var(--s1);transition:box-shadow .25s,border-color .25s}
details[open]{box-shadow:var(--s2);border-color:rgba(243,156,18,.4)}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-family:'Tajawal';font-size:17px;color:var(--night);display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--ivory2);color:var(--navy);font-size:20px;line-height:26px;text-align:center;font-weight:700}
details[open] summary::after{content:"−";background:var(--gold);color:var(--night)}
details p{padding:0 0 18px;color:var(--muted);font-size:15.5px}

/* footer + sticky */
footer{background:var(--night);color:rgba(255,255,255,.55);padding:46px 0 0;font-size:14px;text-align:center}
footer .logo{justify-content:center;margin-bottom:14px}
footer .logo-img{background:#fff;border-radius:14px;padding:4px 10px;height:92px;margin:0}
.ft-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:16px}
footer a{color:rgba(255,255,255,.72)}footer a:hover{color:var(--gold3)}
.ft-contact{display:grid;grid-template-columns:1fr;gap:12px;margin:30px auto 0;max-width:980px;font-style:normal}
.ft-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:all .22s}
a.ft-card:hover{background:rgba(243,156,18,.12);border-color:rgba(243,156,18,.45);transform:translateY(-2px)}
.ft-card .ic{width:22px;height:22px;color:var(--gold3);margin-bottom:4px}
.ft-card small{font-size:12px;font-weight:700;color:rgba(255,255,255,.5)}
.ft-card b{font-size:14.5px;font-weight:700;color:#fff;line-height:1.7}
.ft-legal{max-width:980px;margin:22px auto 0;padding:18px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:12px}
.ft-org{font-family:'Tajawal';font-weight:900;font-size:16px;color:#fff}
.ft-legal dl{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.ft-legal dl>div{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;background:rgba(243,156,18,.1);border:1px solid rgba(243,156,18,.28)}
.ft-legal dt{font-size:12.5px;font-weight:700;color:var(--gold3)}
.ft-legal dd{margin:0;font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px;font-variant-numeric:tabular-nums}
@media(min-width:760px){.ft-contact{grid-template-columns:1fr 1fr 1.6fr}}
.ft-bottom{background:#0A1A3A;margin-top:30px;padding:16px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.42)}
.ft-sc{display:inline-flex;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);align-items:center;justify-content:center;color:#fff;margin:16px 4px 0;font-size:20px;transition:all .22s}
.ft-sc:hover{background:var(--gold);color:var(--night)}
.sticky{position:fixed;inset:auto 0 0 0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:0 -8px 28px rgba(15,33,74,.2);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;transform:translateY(110%);transition:transform .3s}
.sticky.show{transform:none}
.sticky .p{flex:1;line-height:1.2}
.sticky .p b{font-family:'Tajawal';font-size:20px;color:var(--navy);display:block}
.sticky .p small{font-size:11.5px;color:var(--muted)}
.sticky .btn{padding:12px 18px;font-size:15px;min-height:46px}
.wa-float{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 10px 26px rgba(37,211,102,.45),0 2px 8px rgba(0,0,0,.2);transition:transform .2s}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wapulse 2.4s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media(min-width:760px){.wa-float{bottom:24px;right:24px}}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none}}
.sticky .wa{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}

/* reveal */
.js .r{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.68,0,1.1),transform .7s cubic-bezier(.22,.68,0,1.1)}
.js .r.on{opacity:1;transform:none}

@media(min-width:760px){
  section{padding:96px 0}
  body{padding-bottom:0}
  .head{margin-bottom:52px}
  .nav-links{display:flex}
  .hero{padding-top:70px}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
  .hero-cta{flex-direction:row}
  .hero-vis{height:600px;margin-top:0}
  .hero-vis .p1{width:262px;top:20px}
  .hero-vis .p2,.hero-vis .p3{width:210px;top:84px}
  .hero-vis .p2{transform:translateX(-238px) rotate(-8deg)}.hero-vis .p3{transform:translateX(26px) rotate(8deg)}
  .glow-ring{width:520px;height:520px;top:70px}
  .fc{display:flex}
  .strip-wrap{margin-top:-46px}
  .strip{grid-template-columns:repeat(4,1fr)}
  .strip-it{border-bottom:0;border-inline-start:1px solid var(--rule);padding:22px 14px}
  .strip-it:first-child{border-inline-start:0}
  .ben-grid{grid-template-columns:repeat(3,1fr)}
  .ifaces,.terms,.rev-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:22px}
  .step{flex-direction:column;gap:14px;padding:28px}
  .steps .step:not(:last-child)::after{content:'';position:absolute;top:52px;left:-23px;width:22px;border-top:2px dashed rgba(243,156,18,.7)}
  .rail{justify-content:center;overflow:visible;flex-wrap:nowrap;gap:20px}
  .rail figure{flex:0 0 172px}
  .rail:not(.scroll) figure:nth-child(even){transform:translateY(34px)}
  .rail.scroll{overflow-x:auto;padding-bottom:30px}.rail.scroll figure{flex:0 0 170px}
  .thumbs button{flex:0 0 132px}
  .incl{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .plan{display:flex;flex-direction:column}.plan .feat{flex:1}
  .plan.plan-main{scale:1.045;z-index:2}
  .cmp{max-width:820px;margin-inline:auto}
  .cmp-row>div{padding:17px 24px;font-size:15.5px}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .form-card{margin-top:0}
  .faq{grid-template-columns:1fr 1fr;gap:14px 18px}
  .sticky{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}.js .r{opacity:1;transform:none}}

/* ===== حركات خفيفة ===== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -11px}}
.hero-grid>div:first-child>*{animation:rise .7s cubic-bezier(.22,.68,0,1.1) both}
.hero-grid>div:first-child>:nth-child(1){animation-delay:.05s}
.hero-grid>div:first-child>:nth-child(2){animation-delay:.15s}
.hero-grid>div:first-child>:nth-child(3){animation-delay:.25s}
.hero-grid>div:first-child>:nth-child(4){animation-delay:.35s}
.hero-grid>div:first-child>:nth-child(5){animation-delay:.45s}
.hero-grid>div:first-child>:nth-child(6){animation-delay:.55s}
.hero-vis .p1{animation:float 4.6s ease-in-out infinite}
.hero-vis .p2{animation:float 5.4s ease-in-out -1.6s infinite}
.hero-vis .p3{animation:float 6.2s ease-in-out -3s infinite}
.rail .phone{transition:transform .35s cubic-bezier(.22,.68,0,1.2),box-shadow .35s;animation:float 5.6s ease-in-out infinite}
.rail figure:nth-child(2n) .phone{animation-duration:6.8s;animation-delay:-2.5s}
.rail figure:nth-child(3n) .phone{animation-duration:7.6s;animation-delay:-5s}
.phone img{transition:opacity .45s ease}
.phone img.swap{opacity:0}
.rail figure:hover .phone{transform:translateY(-8px);box-shadow:0 36px 70px -16px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.2)}
.plan{transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--s2)}
.term,.step{transition:transform .3s,box-shadow .3s}
.term:hover,.step:hover{transform:translateY(-4px);box-shadow:var(--s2)}
.btn-gold{background-size:200% 100%}
.thumbs button{will-change:opacity}
@media(min-width:760px){.plan.plan-main:hover{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.hero-grid>div:first-child>*{animation:none}.hero-vis .phone,.rail .phone{animation:none}}
@media(min-width:760px){.nav-in{height:84px}.logo-img{height:96px;margin:-8px -18px}}

/* تكبير شاشة لوحة التحكم */
.browser img#admMain{cursor:zoom-in}
.zm{position:absolute;top:12px;right:12px;background:rgba(15,33,74,.78);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;pointer-events:none;font-family:'Tajawal'}
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,14,36,.94);display:flex;flex-direction:column;animation:rise .25s ease both}
.lb[hidden]{display:none}
.lb-x{align-self:flex-start;margin:10px 14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer;flex:none}
.lb-in{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;padding:0 10px 24px}
.lb-in img{flex:none;width:980px;max-width:none;height:auto;border-radius:10px;margin:auto;background:#fff}
@media(min-width:900px){.lb-in img{flex:0 1 auto;width:auto;max-width:96%;max-height:88vh}}

/* قسم الأنشطة */
.sectors{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sector{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--ivory);border:1px solid var(--rule);border-radius:20px;padding:22px 12px;transition:transform .3s,box-shadow .3s,border-color .3s,background .3s}
.sector:hover{transform:translateY(-5px);box-shadow:var(--s2);border-color:rgba(243,156,18,.4);background:#fff}
.sector .ico{margin:0;width:56px;height:56px;font-size:27px;border-radius:16px}
.sector b{font-family:'Tajawal';font-size:16px;color:var(--night);line-height:1.35}
.sectors .sector:last-child:nth-child(odd){grid-column:1/-1}
.sector-note{display:flex;gap:12px;align-items:center;justify-content:center;max-width:720px;margin:24px auto 0;background:#FFF8EA;border:1px solid rgba(243,156,18,.4);border-radius:16px;padding:14px 18px}
.sector-note .ic{font-size:24px;color:var(--gold-d)}
.sector-note p{font-size:15px;color:var(--night);font-weight:700}
@media(min-width:760px){.sectors{grid-template-columns:repeat(3,1fr);gap:16px}.sector{flex-direction:row;text-align:start;gap:16px;padding:20px 22px}.sector b{font-size:17px}.sectors .sector:last-child:nth-child(odd){grid-column:auto}}