:root{--bg:#fff;--soft:#f3f7fd;--soft2:#e6eefa;--ink:#0a1b3d;--navy:#0a2b68;--mu:#4a5f85;--line:#d8e4f6;--acc:#1b63e0;--acc-d:#1558d0;--acc-soft:#eaf3ff;--ok:#0b7a55;--r:22px;
--font:var(--tap-font,'IBM Plex Sans Arabic',Tahoma,system-ui,sans-serif);--disp:var(--tap-display,'Readex Pro','IBM Plex Sans Arabic',Tahoma,sans-serif);
--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 16px/1.8 var(--font);color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.disp{font-family:var(--disp)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:#ffffffe6;backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.55rem var(--disp);letter-spacing:.5px}
.brand .tap-logo{height:34px;width:auto;color:var(--navy)}
.links{display:flex;gap:4px}
.links a{padding:8px 14px;border-radius:99px;color:var(--mu);font-weight:500;font-size:.95rem}
.links a:hover{color:var(--ink);background:var(--soft)} .links a.on{color:var(--ink);background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:14px;border:1.5px solid var(--acc);background:var(--acc);color:#fff;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s;min-height:48px}
.btn:hover{transform:translateY(-2px);background:var(--acc-d);border-color:var(--acc-d);box-shadow:0 12px 28px #1b63e04d}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)} .btn.ghost:hover{background:#fff;border-color:var(--acc);box-shadow:none}
.btn.lg{padding:16px 32px;font-size:1.05rem;border-radius:16px;min-height:56px} .btn.sm{padding:9px 18px;min-height:40px;font-size:.92rem;border-radius:12px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:12px;width:44px;height:44px;place-items:center}
.drawer{display:none}
section.sec{padding:clamp(56px,8vw,104px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--acc-d);background:var(--acc-soft);padding:6px 14px;border-radius:99px}
h1,h2,h3{font-family:var(--disp);line-height:1.3;font-weight:700;color:var(--navy)}
h1{font-size:clamp(2.3rem,5.4vw,4rem)} h2{font-size:clamp(1.7rem,3.4vw,2.6rem)} h3{font-size:1.2rem}
.lead{color:var(--mu);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch}
.sec-head{text-align:center;margin-bottom:clamp(32px,5vw,56px)} .sec-head p{color:var(--mu);margin:12px auto 0;max-width:58ch}
/* hero */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(30px,5vw,60px);background:radial-gradient(900px 520px at 85% 0,#d6e8ff 0,transparent 60%),radial-gradient(700px 420px at 0 100%,#eaf3ff 0,transparent 60%),#fff}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}
.hero h1{margin:18px 0 18px} .hero .lead{margin-bottom:28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.price-line{margin-top:18px;display:flex;align-items:center;gap:10px;color:var(--mu);font-size:.98rem;flex-wrap:wrap}
.price-line b{color:var(--ink);font:700 1.5rem var(--disp)}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.trust span{display:flex;align-items:center;gap:8px;color:var(--mu);font-size:.92rem} .trust svg{color:var(--ok);width:18px;height:18px}
/* 3D scene */
.scene{position:relative;height:540px;perspective:1500px;display:grid;place-items:center}
.ripples{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ripples i{position:absolute;width:230px;height:230px;border-radius:50%;border:1.5px solid #1b63e055;animation:rip 6s linear infinite;opacity:0}
.ripples i:nth-child(2){animation-delay:2s}.ripples i:nth-child(3){animation-delay:4s}
@keyframes rip{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.card3{position:absolute;width:330px;height:208px;border-radius:22px;transform-style:preserve-3d;box-shadow:0 40px 70px -20px #061b4555,0 10px 24px -8px #061b4533;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px;overflow:hidden}
.card3.w{background:linear-gradient(135deg,#fff 0,#e6eefa 100%);color:var(--ink);inset-inline-end:2%;top:14%;transform:rotateZ(-7deg) rotateY(-18deg) rotateX(10deg);animation:fl1 7s ease-in-out infinite;border:1px solid #fff}
.card3.k{background:linear-gradient(135deg,#0a2b68 0,#061b45 62%,#1b63e0 190%);color:#fff;inset-inline-end:14%;bottom:8%;transform:rotateZ(-12deg) rotateY(-16deg) rotateX(8deg);animation:fl2 8s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:rotateZ(-7deg) rotateY(-18deg) rotateX(10deg) translateY(0)}50%{transform:rotateZ(-7deg) rotateY(-12deg) rotateX(6deg) translateY(-14px)}}
@keyframes fl2{0%,100%{transform:rotateZ(-12deg) rotateY(-16deg) rotateX(8deg) translateY(0)}50%{transform:rotateZ(-12deg) rotateY(-10deg) rotateX(4deg) translateY(10px)}}
.card3 .top{display:flex;justify-content:space-between;align-items:flex-start}
.card3 .logo{font:700 1.9rem var(--disp);letter-spacing:1px} .card3 .nfc{width:34px;height:34px;opacity:.9}
.card3 .chip{width:42px;height:30px;border-radius:7px;background:linear-gradient(135deg,#7cc4ff,#1b63e0)} .card3 .c3logo{height:34px;width:auto;color:var(--navy)} .card3.k .c3logo{color:#fff}
.card3 small{font-size:.8rem;opacity:.7;letter-spacing:.5px}
.card3:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,transparent 60%);transform:translateX(-120%);animation:shine 6s ease-in-out infinite}
.card3.k:after{background:linear-gradient(115deg,transparent 30%,#ffffff1c 45%,transparent 60%)}
@keyframes shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.phone{position:absolute;inset-inline-start:2%;top:6%;width:244px;height:488px;border-radius:40px;background:#061b45;padding:9px;box-shadow:0 50px 80px -30px #061b4566,0 12px 30px -10px #061b4544;transform:rotateZ(4deg) rotateY(12deg);animation:fl3 7.5s ease-in-out infinite}
@keyframes fl3{0%,100%{transform:rotateZ(4deg) rotateY(12deg) translateY(0)}50%{transform:rotateZ(4deg) rotateY(8deg) translateY(-10px)}}
.screen{width:100%;height:100%;border-radius:32px;background:#f3f7fd;overflow:hidden;position:relative;font-size:12px}
.screen:before{content:"";position:absolute;top:9px;left:50%;width:70px;height:20px;border-radius:99px;background:#061b45;transform:translateX(-50%);z-index:3}
.s-cover{height:104px;background:linear-gradient(135deg,#1b63e0,#7cc4ff)}
.s-logo{width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid #f3f7fd;margin:-30px auto 0;display:grid;place-items:center;font:700 18px var(--disp);color:#1b63e0;position:relative;box-shadow:0 0 0 6px #1b63e01f}
.s-name{text-align:center;font:700 16px var(--disp);margin-top:8px;color:#0a1b3d} .s-tag{text-align:center;color:#4a5f85;font-size:11px}
.s-prim{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 12px 0}
.s-prim b{background:#1b63e0;color:#fff;border-radius:10px;padding:9px 0;text-align:center;font-weight:600;font-size:11.5px} .s-prim b.a{background:#fff;color:#0a1b3d;border:1px solid #d8e4f6}
.s-list{margin:8px 12px 0;display:grid;gap:6px}
.s-list div{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8e4f6;border-radius:10px;padding:8px 10px;font-weight:500;color:#0a1b3d}
.s-list i{width:22px;height:22px;border-radius:7px;background:#eaf3ff;color:#1b63e0;display:grid;place-items:center} .s-list svg{width:13px;height:13px}
.chipf{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 14px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;box-shadow:0 14px 30px -12px #061b4533;animation:bob 6s ease-in-out infinite}
.chipf svg{width:18px;height:18px;color:var(--acc)}
.chipf.c1{inset-inline-end:0;top:4%}.chipf.c2{inset-inline-start:0;bottom:12%;animation-delay:1.5s}.chipf.c3{inset-inline-end:2%;bottom:28%;animation-delay:3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--soft);border-radius:var(--r);padding:26px 26px 30px;position:relative;overflow:hidden}
.step .no{font:700 3.2rem var(--disp);color:#061b4512;position:absolute;inset-inline-start:20px;top:6px;line-height:1}
.step .art{height:150px;border-radius:16px;background:#fff;border:1px solid var(--line);margin-bottom:20px;display:grid;place-items:center;overflow:hidden}
.step h3{margin-bottom:6px} .step p{color:var(--mu);font-size:.97rem}
/* features */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.feat:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px #061b4540;border-color:#c6d3e8}
.feat .ic{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;margin-bottom:14px}
.feat h3{font-size:1.04rem;margin-bottom:4px} .feat p{color:var(--mu);font-size:.9rem;line-height:1.7}
.feat.hl{background:var(--tap-grad-brand,linear-gradient(135deg,#061b45,#0a2b68));color:#fff;border-color:transparent} .feat.hl .ic{background:#ffffff1c} .feat.hl p{color:#ffffffa8}
/* use cases */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.use{background:var(--soft);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;min-height:150px}
.use .ic{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;border:1px solid var(--line)}
.use b{font:600 1.05rem var(--disp)} .use span{color:var(--mu);font-size:.88rem;line-height:1.6}
/* pricing */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.pcard{background:var(--tap-grad-brand,linear-gradient(135deg,#061b45,#0a2b68));color:#fff;border-radius:28px;padding:36px;position:relative;overflow:hidden}
.pcard:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(#4eb3ff55,transparent 65%);inset-inline-end:-120px;top:-140px}
.pcard .amount{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;position:relative}
.pcard .amount b{font:700 4.6rem/1 var(--disp)} .pcard .amount span{font-size:1.3rem;color:#ffffffb3}
.pcard ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px;position:relative}
.pcard li{display:flex;gap:12px;align-items:center} .pcard li svg{width:20px;height:20px;color:#7cc4ff;stroke-width:2.4}
.pcard .btn{background:#fff;color:var(--navy);border-color:#fff;width:100%;position:relative}
.pcard small{display:block;margin-top:14px;color:#ffffff99;font-size:.85rem;position:relative}
.pnotes{display:grid;gap:14px}
.pnote{display:flex;gap:14px;align-items:flex-start;background:var(--soft);border-radius:18px;padding:18px 20px}
.pnote .ic{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.pnote b{display:block;margin-bottom:2px} .pnote span{color:var(--mu);font-size:.92rem}
/* faq */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
details.q{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .2s,box-shadow .2s}
details.q[open]{border-color:#c6d3e8;box-shadow:0 14px 34px -24px #061b4555}
details.q summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600}
details.q summary::-webkit-details-marker{display:none}
details.q summary:after{content:"+";font:400 1.6rem/1 var(--font);color:var(--mu);transition:transform .25s}
details.q[open] summary:after{transform:rotate(45deg)}
details.q p{color:var(--mu);padding:0 0 20px;max-width:68ch}
/* cta band */
.band{background:var(--tap-grad-brand,linear-gradient(135deg,#061b45,#0a2b68));color:#fff;border-radius:32px;padding:clamp(34px,6vw,64px);text-align:center;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:auto -10% -60% -10%;height:100%;background:radial-gradient(closest-side,#4eb3ff55,transparent);}
.band h2,.band p,.band .btn{position:relative} .band p{color:#ffffffb3;margin:12px auto 26px;max-width:52ch}
.band .btn{background:#fff;color:var(--navy);border-color:#fff} .band h2{color:#fff}
/* order */
.page-hero{padding:clamp(40px,6vw,76px) 0 20px;text-align:center}
.page-hero p{color:var(--mu);margin:12px auto 0;max-width:60ch}
.order{display:grid;grid-template-columns:1.25fr .9fr;gap:26px;align-items:start;margin-top:30px}
.form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,34px)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:600;font-size:.92rem} .field label em{font-style:normal;color:var(--mu);font-weight:400;font-size:.84rem}
.inp{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:13px 16px;font:inherit;color:var(--ink);min-height:52px;transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px #1b63e029} textarea.inp{min-height:100px;resize:vertical}
.inp.bad{border-color:#d4385a} .err{color:#d4385a;font-size:.84rem;display:none} .err.on{display:block}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;height:52px}
.qty button{width:52px;height:100%;background:var(--soft);border:0;font-size:1.4rem;line-height:1} .qty button:hover{background:var(--soft2)}
.qty input{width:70px;text-align:center;border:0;font:600 1.1rem var(--font);height:100%;background:#fff} .qty input:focus{outline:none}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.sum{background:var(--soft);border-radius:26px;padding:28px;position:sticky;top:90px}
.sum h3{margin-bottom:16px} .line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed #c6d3e8;color:var(--mu)} .line b{color:var(--ink)}
.line.total{border:0;padding-top:18px;font-size:1.1rem;color:var(--ink)} .line.total b{font:700 2rem var(--disp)}
.sum .note{font-size:.84rem;color:var(--mu);margin-top:6px;line-height:1.7}
.after{margin-top:22px;display:grid;gap:12px} .after div{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--mu)}
.after i{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;font:600 .8rem var(--font);font-style:normal;color:var(--ink)}
.done{display:none;text-align:center;padding:30px 10px} .done.on{display:block;animation:vin .5s both}
.done .ok{width:72px;height:72px;border-radius:50%;background:#e6f8f1;color:var(--ok);display:grid;place-items:center;margin:0 auto 16px} .done .ok svg{width:34px;height:34px;stroke-width:2.4}
.refno{display:inline-block;margin:14px 0;padding:10px 20px;border-radius:14px;background:var(--soft);font:700 1.3rem var(--disp);letter-spacing:1px;direction:ltr}
.demo-tag{display:inline-block;background:#fff4d6;color:#8a6200;font-size:.78rem;padding:3px 10px;border-radius:99px;margin-top:10px}
/* prose */
.prose{max-width:780px;margin:0 auto;padding-bottom:70px} .prose h2{font-size:1.35rem;margin:34px 0 8px} .prose p,.prose li{color:#2b3d63}
.prose ul{padding-inline-start:22px;display:grid;gap:6px;margin-top:8px}
.prose .meta{color:var(--mu);font-size:.9rem}
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;margin-top:30px;align-items:start}
.ccard{display:flex;gap:14px;align-items:center;background:var(--soft);border-radius:20px;padding:18px 20px;margin-bottom:12px}
.ccard .ic{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center} .ccard b{display:block} .ccard span{color:var(--mu);font-size:.9rem}
.ph{background:repeating-linear-gradient(135deg,#fff3cf 0 8px,#ffeab0 8px 16px);color:#6d5200;padding:1px 8px;border-radius:6px;font-size:.85rem;white-space:nowrap}
/* feature page rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:60px} .frow:nth-child(even) .fv{order:-1}
.fv{background:var(--soft);border-radius:28px;min-height:300px;display:grid;place-items:center;padding:24px;overflow:hidden}
.frow h3{font-size:1.6rem;margin:10px 0} .frow p{color:var(--mu)} .frow ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px} .frow li{display:flex;gap:10px;align-items:center;color:#2b3d63} .frow li svg{color:var(--ok);width:18px;height:18px;stroke-width:2.4}
/* footer */
.foot{background:var(--soft);margin-top:60px;padding:56px 0 30px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot h4{font:600 .95rem var(--font);margin-bottom:12px} .foot a{display:block;color:var(--mu);padding:4px 0;font-size:.94rem} .foot a:hover{color:var(--ink)}
.foot p{color:var(--mu);font-size:.92rem;max-width:34ch;margin-top:12px}
.copy{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mu);font-size:.86rem}
.sticky{display:none}
/* responsive */
@media (max-width:980px){
 .links,.nav .btn.hd{display:none} .burger{display:grid}
 .drawer.on{display:grid;gap:4px;padding:10px 20px 18px;border-top:1px solid var(--line);background:#fff}
 .drawer a{padding:12px 14px;border-radius:12px;font-weight:500} .drawer a:hover{background:var(--soft)}
 .hero .wrap{grid-template-columns:1fr} .scene{height:500px;transform:scale(.9);margin-top:-10px}
 .steps,.price-wrap{grid-template-columns:1fr} .grid4,.uses{grid-template-columns:repeat(2,1fr)}
 .order,.contact,.frow{grid-template-columns:1fr} .frow:nth-child(even) .fv{order:0} .sum{position:static}
 .fgrid{grid-template-columns:1fr 1fr}
 .sticky{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;padding:10px 16px calc(10px + var(--safe-b));background:#ffffffee;backdrop-filter:blur(12px);border-top:1px solid var(--line);gap:12px;align-items:center;justify-content:space-between}
 .sticky b{font:700 1.2rem var(--disp)} .sticky span{color:var(--mu);font-size:.8rem;display:block;line-height:1.3}
 body{padding-bottom:84px}
}
@media (max-width:560px){
 .grid4,.uses{grid-template-columns:1fr 1fr;gap:10px} .feat,.use{padding:16px} .row2{grid-template-columns:1fr}
 .scene{height:470px;transform:scale(.78);margin:-30px -30px -40px} .fgrid{grid-template-columns:1fr} .hero .cta-row .btn{flex:1}

}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}

.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.alert{background:#fdecef;color:#a3193a;border:1px solid #f6c9d3;border-radius:14px;padding:12px 16px;margin-bottom:16px;font-weight:500}
.notice-box{text-align:center;padding:30px 10px} .notice-box p{color:var(--mu);margin:8px 0 18px}
.done{display:none;text-align:center;padding:30px 10px} .done.on{display:block}
a.ccard{color:inherit}
@media print{.nav,.sticky,.foot{display:none}}

/* عناوين داخل الكتل الكحلية */
.pcard h2,.pcard h3,.feat.hl h3,.band h2,.band h3,.hero .card3.k h3{color:#fff}
.foot .brand .tap-logo{height:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}