@font-face{font-family:Cairo;src:url(cairo.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{--bg:#050c08;--bg2:#0b1a10;--green:#1e7b45;--gold:#e2b44c;--gold2:#f5d77a;--gold3:#a8791f;--txt:#f3e6c0;--mut:#b9ad8c;--wa:#25D366;--card:rgba(255,255,255,.035);--bd:rgba(226,180,76,.22)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Cairo,Tahoma,sans-serif;background:radial-gradient(1200px 700px at 85% -10%,rgba(30,123,69,.35),transparent 60%),radial-gradient(900px 600px at 0% 40%,rgba(226,180,76,.08),transparent 60%),var(--bg);color:var(--txt);line-height:1.8;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:auto;padding:0 max(18px,env(safe-area-inset-left,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.gold{background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}
header{position:sticky;top:0;z-index:50;background:rgba(5,12,8,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px}
.brand img{width:44px;height:44px;border-radius:50%}
.links{display:flex;gap:6px}
.links a{padding:8px 14px;border-radius:10px;font-weight:700;color:var(--mut);transition:.2s}
.links a:hover,.links a.on{color:var(--gold2);background:rgba(226,180,76,.08)}
.burger{display:none;background:none;border:1px solid var(--bd);border-radius:10px;width:44px;height:44px;color:var(--gold);cursor:pointer}
@media(max-width:980px){.burger{display:grid;place-items:center}.nav{position:relative}.links{position:absolute;top:100%;right:0;left:0;flex-direction:column;background:#07120b;border-bottom:1px solid var(--bd);padding:10px 18px;display:none;max-height:min(75vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:55}.links.open{display:flex}.links a{padding:14px 12px;min-height:48px}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:14px;font-weight:800;font-size:17px;transition:.25s;cursor:pointer;border:0}
.btn svg{width:22px;height:22px}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold3));color:#1b1405;box-shadow:0 8px 30px rgba(226,180,76,.25)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(226,180,76,.4)}
.btn-wa{background:var(--wa);color:#05210f}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--bd);color:var(--gold2)}
.btn-ghost:hover{background:rgba(226,180,76,.08)}
.hero{padding:70px 0 50px;text-align:center;position:relative}
.hero .logo{width:120px;height:120px;border-radius:50%;margin-bottom:14px;filter:drop-shadow(0 0 30px rgba(226,180,76,.35));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.pill{display:inline-block;padding:4px 16px;border:1px solid var(--bd);border-radius:99px;color:var(--gold2);font-size:14px;font-weight:700;background:rgba(226,180,76,.06);margin-bottom:14px}
h1{font-size:clamp(32px,6.5vw,62px);font-weight:900;line-height:1.3}
.lead{font-size:clamp(16px,2.4vw,20px);color:var(--mut);max-width:720px;margin:16px auto 28px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{padding:60px 0}
.sec-h{text-align:center;margin-bottom:36px}
.sec-h h2{font-size:clamp(26px,4.4vw,40px);font-weight:900;line-height:1.4}
.sec-h p{color:var(--mut);margin-top:6px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--bd);border-radius:20px;padding:26px;position:relative;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-4px);border-color:rgba(226,180,76,.5);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.card h3{font-size:22px;font-weight:900;margin:12px 0 6px}
.card p,.card li{color:var(--mut)}
.ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(30,123,69,.55),rgba(30,123,69,.15));border:1px solid rgba(46,170,99,.35);color:var(--gold2)}
.ic svg{width:28px;height:28px}
.ic.pic{padding:0;overflow:hidden;background:transparent;border:1px solid rgba(212,175,55,.35);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ic.pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:13px}
.prod{padding:32px}
.prod .tag{position:absolute;top:18px;left:18px;font-size:13px;padding:2px 12px;border-radius:99px;background:rgba(30,123,69,.35);color:#9fe3b9;font-weight:700}
.prod ul{list-style:none;margin:14px 0 22px}
.prod li{padding:4px 0;padding-right:26px;position:relative}
.prod li:before{content:"";position:absolute;right:0;top:13px;width:14px;height:8px;border:solid var(--gold);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.group{margin-bottom:40px}
.group-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.group-h h3{font-size:24px;font-weight:900}
.group-h .n{font-size:13px;color:var(--gold2);border:1px solid var(--bd);border-radius:99px;padding:0 10px}
.feat h4{font-size:19px;font-weight:800;margin:10px 0 4px;color:var(--txt)}
.feat .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{font-size:13px;padding:2px 10px;border-radius:8px;background:rgba(226,180,76,.08);border:1px solid rgba(226,180,76,.18);color:var(--gold2)}
.band{background:linear-gradient(135deg,rgba(30,123,69,.35),rgba(11,26,16,.6));border:1px solid var(--bd);border-radius:26px;padding:40px 24px;text-align:center}
.band h2{font-size:clamp(24px,4vw,36px);font-weight:900}
.band p{color:var(--mut);margin:8px 0 22px}
/* PDF -> Excel visual */
.conv{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:10px auto}
.doc{width:200px;height:250px;border-radius:14px;background:#f4f1ea;position:relative;padding:40px 16px 16px;box-shadow:0 20px 50px rgba(0,0,0,.5);transform:rotate(-3deg)}
.doc .lbl{position:absolute;top:10px;right:12px;font-weight:900;font-size:13px;color:#fff;background:#d93025;border-radius:6px;padding:0 8px;direction:ltr}
.doc i{display:block;height:8px;border-radius:4px;background:#c9c2b2;margin:9px 0}
.doc i:nth-child(odd){width:80%}
.xl{transform:rotate(3deg);background:#fff;padding:40px 10px 10px}
.xl .lbl{background:#1d6f42}
.xl table{width:100%;border-collapse:collapse;font-size:10px;color:#333}
.xl td{border:1px solid #cfd8d2;height:17px;padding:0 3px}
.xl tr:first-child td{background:#1d6f42;color:#fff;font-weight:700}
.xl tr td{animation:fill .5s both}
@keyframes fill{from{background:transparent;color:transparent}}
.arrow{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#1b1405;animation:pulse 2s infinite}
.arrow svg{width:34px;height:34px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,180,76,.6)}70%{box-shadow:0 0 0 18px rgba(226,180,76,0)}}
@media(max-width:520px){.doc{width:140px;height:190px;padding:34px 10px 10px}.doc i{margin:6px 0}.arrow{width:50px;height:50px;transform:rotate(-90deg)}.conv{flex-direction:column}.xl td{height:12px;font-size:8px}}
.steps{counter-reset:s}
.step{display:flex;gap:16px;align-items:flex-start}
.step:before{counter-increment:s;content:counter(s);flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#1b1405}
.step h4{font-weight:800;font-size:18px}
.step p{color:var(--mut)}
details{background:var(--card);border:1px solid var(--bd);border-radius:16px;margin-bottom:12px;padding:0 20px;transition:.2s}
details[open]{background:rgba(30,123,69,.12)}
summary{cursor:pointer;font-weight:800;font-size:17px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--gold);font-size:24px;line-height:1}
details[open] summary:after{content:"−"}
details p{color:var(--mut);padding-bottom:16px}
.faq{max-width:820px;margin:auto}
footer{border-top:1px solid var(--bd);padding:30px 0 90px;text-align:center;color:var(--mut);font-size:14px}
footer .brand{justify-content:center;margin-bottom:8px;color:var(--txt)}
.fab{position:fixed;bottom:18px;left:18px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);animation:pulseg 2.4s infinite}
.fab svg{width:32px;height:32px;fill:#fff}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.num{direction:ltr;display:inline-block;font-weight:900;letter-spacing:1px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.contact-card{max-width:560px;margin:auto;text-align:center}
.contact-card .big{font-size:clamp(30px,7vw,44px)}
.burger svg{width:24px;height:24px}
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.shot{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--bd);background:#0b1a10;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 14px;font-size:14px;color:var(--mut);text-align:center}
.cap{text-align:center;color:var(--mut);font-size:13px;margin-top:10px}
ol.mini{margin:10px 0 0;padding-right:20px;color:var(--mut);font-size:15px}
ol.mini li{padding:2px 0}
.out{margin-top:10px;font-size:14px;border-top:1px dashed var(--bd);padding-top:8px}
.out b{color:var(--gold2)}
.feat{display:flex;flex-direction:column}
/* install */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.tabs a{padding:10px 18px;border:1px solid var(--bd);border-radius:12px;font-weight:800;color:var(--gold2)}
.tabs a:hover{background:rgba(226,180,76,.1)}
.method{margin-bottom:50px;scroll-margin-top:80px}
.istep{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin-bottom:18px}
@media(min-width:900px){.istep{grid-template-columns:1.1fr 1fr}}
.istep .txt{display:flex;gap:14px}
.istep .no{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:19px;background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#1b1405}
.istep h4{font-size:18px;font-weight:800}
.istep p{color:var(--mut)}
.en{direction:ltr;unicode-bidi:isolate;display:inline-block;font-size:.88em;color:#9fe3b9;background:rgba(30,123,69,.25);padding:0 6px;border-radius:6px}
code.u{direction:ltr;unicode-bidi:isolate;display:inline-block;background:#000;color:var(--gold2);padding:0 8px;border-radius:6px;border:1px solid var(--bd);font-family:Consolas,monospace}
.note{border-right:4px solid var(--gold);background:rgba(226,180,76,.07);padding:12px 16px;border-radius:10px;color:var(--txt);margin:10px 0}
.warn{border-right-color:#e8833a;background:rgba(232,131,58,.09)}
/* browser mockup */
.mock{background:#f1f3f4;border-radius:12px;overflow:hidden;color:#202124;font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.45);direction:ltr;font-family:Segoe UI,Cairo,sans-serif}
.mock .bar{display:flex;align-items:center;gap:8px;background:#dee1e6;padding:8px 10px}
.mock .dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#bbb;margin-right:4px}
.mock .url{flex:1;background:#fff;border-radius:99px;padding:3px 12px;color:#444}
.mock .body{padding:14px;background:#fff;min-height:110px;position:relative}
.mock .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mock .mbtn{border:1px solid #c4c7c5;border-radius:6px;padding:4px 10px;color:#0b57d0;font-weight:600;background:#fff}
.mock .hl{outline:3px solid #e2b44c;outline-offset:2px;animation:blink 1.6s infinite}
@keyframes blink{50%{outline-color:transparent}}
.tg{display:inline-flex;align-items:center;gap:6px}
.tg b{width:34px;height:18px;border-radius:99px;background:#0b57d0;position:relative}
.tg b:after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.mock .ext{display:flex;gap:10px;align-items:center;border:1px solid #e0e0e0;border-radius:10px;padding:10px;margin-top:10px}
.mock .ext img{width:34px;height:34px;border-radius:50%}
.mock .folder{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:6px}
.mock .folder.sel{background:#cfe3ff}
.mock .fi{width:22px;height:18px;background:#f4c542;border-radius:3px;display:inline-block}
.mock .doc2{width:18px;height:22px;background:#fff;border:1px solid #999;display:inline-block}
.mock .drop{border:2px dashed #0b57d0;border-radius:10px;padding:18px;text-align:center;color:#0b57d0;font-weight:700;background:#eef4ff}
.mock .dlg{border:1px solid #ccc;border-radius:10px;padding:12px;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:320px;margin:auto}
.mock .pri{background:#0b57d0;color:#fff;border-radius:6px;padding:4px 12px;font-weight:600}
.mock .menu{border:1px solid #ddd;border-radius:8px;padding:8px;max-width:260px;margin-left:auto}
.mock .pin{color:#0b57d0}
/* phone mockup */
.phone{width:240px;max-width:100%;margin:0 auto;background:#fff;color:#202124;border:8px solid #111;border-radius:30px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45);direction:ltr;font-family:Segoe UI,Cairo,sans-serif;font-size:13px}
.phone .ph-top{display:flex;justify-content:space-between;padding:4px 14px;background:#111;color:#ddd;font-size:11px}
.phone .ph-bar{background:#f1f3f4;padding:10px 12px;font-weight:700;border-bottom:1px solid #e0e0e0}
.phone .ph-body{padding:10px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.phone .ph-li{display:flex;align-items:center;gap:6px;padding:9px 8px;border-bottom:1px solid #eee;border-radius:8px}
.phone .ph-li span{flex:1}.phone .ph-li small{color:#666}.phone .ph-li i{color:#999;font-style:normal}
.phone .ph-btn{background:#0b57d0;color:#fff;border-radius:99px;padding:7px 14px;text-align:center;font-weight:600}
.phone .ph-app{display:flex;gap:10px;align-items:center}.phone .ph-ic{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#e2b44c,#a87a1e)}
.phone .ph-toast{background:#323232;color:#fff;border-radius:8px;padding:8px;font-size:11px;text-align:center;margin-top:auto}
.phone .ph-dlg{border:1px solid #ddd;border-radius:12px;padding:10px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.phone .ph-row{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:8px;color:#0b57d0}
.phone .hl{outline:3px solid #e2b44c;outline-offset:2px;animation:blink 1.6s infinite}
/* card screenshots + lightbox */
.cshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin:10px 0}
.cshots a{display:block;border:1px solid rgba(226,180,76,.35);border-radius:10px;overflow:hidden;background:#000;text-decoration:none}
.cshots img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.cshots span{display:block;font-size:11px;padding:4px;color:#e2b44c;text-align:center}
.lbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.lbox img{max-width:100%;max-height:85vh;border-radius:10px}.lbox p{color:#e2b44c;margin-top:10px}
.lbox button{position:absolute;top:12px;left:12px;font-size:28px;background:none;border:0;color:#fff;cursor:pointer}
.vid{margin:0 auto 24px;max-width:900px}.vid video{width:100%;height:auto;border-radius:14px;border:1px solid rgba(226,180,76,.4);background:#000;display:block}
.vid figcaption{text-align:center;color:#e2b44c;font-size:14px;margin-top:8px}
/* ===== v2 interactive layer ===== */
:root{--hdr:rgba(5,12,8,.55);--panel:#0b1a10}
html[data-theme=light]{--bg:#f7f3e8;--bg2:#efe7d2;--txt:#1d2a20;--mut:#5a5847;--card:rgba(0,0,0,.03);--bd:rgba(168,121,31,.28);--hdr:rgba(255,252,243,.7);--panel:#fffaf0;--gold2:#b8861f;--gold:#9c6f12;--gold3:#6e4c08}
html[data-theme=light] body{background:radial-gradient(1200px 700px at 85% -10%,rgba(30,123,69,.14),transparent 60%),radial-gradient(900px 600px at 0% 40%,rgba(226,180,76,.16),transparent 60%),var(--bg)}
html[data-theme=light] .links{background:transparent}html[data-theme=light] .card{background:linear-gradient(180deg,#fff,#fbf6ea)}
html[data-theme=light] .band{background:linear-gradient(135deg,rgba(30,123,69,.14),rgba(226,180,76,.12))}
html[data-theme=light] .ic{color:#1e7b45;background:linear-gradient(135deg,rgba(30,123,69,.18),rgba(30,123,69,.05))}
html[data-theme=light] .prod .tag{color:#145a31;background:rgba(30,123,69,.14)}html[data-theme=light] .en{color:#145a31;background:rgba(30,123,69,.12)}
html[data-theme=light] code.u{background:#1d2a20}html[data-theme=light] .chips span{color:#7a560f}
html[data-theme=light] .shot{background:#fff}html[data-theme=light] details[open]{background:rgba(30,123,69,.07)}
body{transition:background-color .4s,color .4s}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.7}
.prog{position:fixed;top:0;right:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--gold3),var(--gold2),#2eaa63)}
.skip{position:absolute;right:-999px;top:8px;z-index:200;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px}.skip:focus{right:8px}
header{background:var(--hdr);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);transition:box-shadow .3s,height .3s}
header.sc{box-shadow:0 10px 40px rgba(0,0,0,.25)}
.links a{position:relative}.links a.on:after{content:"";position:absolute;bottom:2px;right:20%;left:20%;height:2px;border-radius:2px;background:var(--gold)}
.navr{display:flex;gap:8px;align-items:center}
.theme{width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);background:transparent;color:var(--gold2);font-size:20px;cursor:pointer;position:relative;overflow:hidden}
.theme span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .4s}
.theme .sun{transform:translateY(100%)}html[data-theme=light] .theme .sun{transform:none}html[data-theme=light] .theme .moon{transform:translateY(-100%)}
@media(max-width:980px){.links{background:var(--panel)}}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* hero */
.hero2{text-align:right;padding:60px 0 30px}
.hgrid{display:grid;gap:30px;align-items:center}@media(min-width:900px){.hgrid{grid-template-columns:1.05fr 1fr}}
.hero2 .lead{margin-right:0}.hero2 .cta{justify-content:flex-start}
@media(max-width:899px){.hero2{text-align:center}.hero2 .lead{margin:16px auto 28px}.hero2 .cta{justify-content:center}}
.rot{display:inline-block;transition:opacity .35s,transform .35s}.rot.out{opacity:0;transform:translateY(-12px)}
.hvis{position:relative;height:420px;perspective:1000px}
.tilt{position:absolute;border-radius:20px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 30px 80px rgba(0,0,0,.5);transform-style:preserve-3d;transition:transform .25s ease-out}
.t1{width:min(78%,380px);top:0;right:4%;transform:rotateY(-14deg) rotateX(6deg)}.t1 img{display:block;width:100%;height:auto}
.glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.t2{width:210px;bottom:10px;left:2%;background:#fff;padding:12px}
.mini-xl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.mini-xl b{grid-column:1/-1;color:#1d6f42;font-size:13px;direction:ltr;text-align:center}
.mini-xl i{height:14px;border-radius:3px;background:#d7eadf;animation:cell 3s calc(var(--d)*.15s) infinite}
@keyframes cell{0%,20%{background:#eee}40%,100%{background:#bfe0cb}}
.hlogo{position:absolute;bottom:70px;right:0;width:96px;height:96px;border-radius:50%;filter:drop-shadow(0 0 28px rgba(226,180,76,.5));animation:float 5s ease-in-out infinite}
.float{animation:float 5s ease-in-out infinite}
@media(max-width:520px){.hvis{height:320px}.t2{width:160px}.hlogo{width:70px;height:70px}}
.plogo{display:block;margin:6px auto 0;border-radius:50%;filter:drop-shadow(0 0 30px rgba(226,180,76,.4))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.stats{padding:20px 0 30px}.stat{text-align:center;padding:22px;border:1px solid var(--bd);border-radius:20px;background:var(--card)}
.stat b{display:block;font-size:48px;line-height:1.1;background:linear-gradient(180deg,var(--gold2),var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}.stat span{color:var(--mut)}
.tiltc{transform-style:preserve-3d;will-change:transform}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(226,180,76,.12),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}.card:hover:before{opacity:1}
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
/* stage switcher */
.stages{position:relative;display:flex;gap:4px;justify-content:center;margin:0 auto 10px;padding:6px;border:1px solid var(--bd);border-radius:16px;background:var(--card);width:max-content;max-width:100%;flex-wrap:wrap}
.stages button{position:relative;z-index:1;border:0;background:none;color:var(--mut);font:800 16px Cairo,sans-serif;padding:10px 18px;border-radius:12px;cursor:pointer;transition:color .3s}
.stages button.on{color:#1b1405}.sglow{position:absolute;z-index:0;border-radius:12px;background:linear-gradient(180deg,var(--gold2),var(--gold3));transition:all .4s cubic-bezier(.3,1.3,.5,1)}
.scount{text-align:center;color:var(--mut);margin-bottom:28px}.scount b{font-size:28px}
.feat{transition:opacity .4s,transform .4s,filter .4s}.feat.off{display:none}.feat.pop{animation:pop .5s both}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}}
.badge{display:inline-block;width:max-content;font-size:12px;font-weight:800;padding:1px 10px;border-radius:99px;background:rgba(226,180,76,.15);color:var(--gold2);border:1px solid var(--bd);margin-bottom:4px}.badge.sub{background:rgba(30,123,69,.2)}
.cshots a{transition:transform .25s}.cshots a:hover{transform:translateY(-3px) scale(1.03)}
.lbox{animation:fade .25s}.lbox img{animation:zoom .3s}.lbox .lnav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);font-size:24px}.lbox .lp{right:12px;left:auto}.lbox .ln{left:12px}
.lbox .lx{top:12px;left:12px}
@keyframes fade{from{opacity:0}}@keyframes zoom{from{transform:scale(.9);opacity:0}}
/* demo */
.demo{max-width:980px;margin:auto;border:1px solid var(--bd);border-radius:24px;padding:20px;background:var(--card)}
.dtabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.dtabs button{font:800 15px Cairo,sans-serif;padding:8px 16px;border-radius:12px;border:1px solid var(--bd);background:none;color:var(--gold2);cursor:pointer}.dtabs button.on{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#1b1405}
.dstage{display:grid;gap:16px;align-items:center;grid-template-columns:1fr}@media(min-width:780px){.dstage{grid-template-columns:200px auto 1fr}}
.dpdf{position:relative;height:240px;border-radius:14px;background:#f4f1ea;padding:40px 16px 16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);max-width:260px;width:100%;margin:auto}
.dpdf .lbl,.dxl .lbl{position:absolute;top:10px;right:12px;font-weight:900;font-size:13px;color:#fff;background:#d93025;border-radius:6px;padding:0 8px;direction:ltr}
.dpdf .dt{position:absolute;top:8px;left:12px;font-size:11px;color:#555}.dpdf i{display:block;height:8px;border-radius:4px;background:#c9c2b2;margin:9px 0}.dpdf i:nth-child(even){width:75%}
.scan{position:absolute;left:0;right:0;top:-20%;height:30px;background:linear-gradient(180deg,transparent,rgba(46,170,99,.55),transparent);opacity:0}
.demo.run .scan{animation:scan 1.2s linear 2}@keyframes scan{0%{top:-10%;opacity:1}100%{top:100%;opacity:1}}
.dgo{justify-content:center}.dgo svg{transform:rotate(0)}@media(max-width:779px){.dgo svg{transform:rotate(-90deg)}}
.dxl{position:relative;background:#fff;border-radius:14px;padding:40px 10px 12px;min-height:240px;box-shadow:0 20px 50px rgba(0,0,0,.35);color:#222}.dxl .lbl{background:#1d6f42}
.dbar{position:absolute;top:16px;left:12px;width:40%;height:6px;border-radius:6px;background:#e5e5e5;overflow:hidden}.dbar span{display:block;height:100%;width:0;background:#1d6f42;transition:width .3s}
.tw{overflow-x:auto}.dxl table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.dxl th,.dxl td{border:1px solid #cfd8d2;padding:4px 8px;text-align:right}.dxl th{background:#1d6f42;color:#fff}
.dxl tr.nw{animation:rowin .4s both}@keyframes rowin{from{opacity:0;transform:translateX(-14px);background:#d4f5df}}
.dmsg{text-align:center;color:var(--mut);margin-top:12px;font-weight:700}
/* before/after */
.ba{position:relative;max-width:820px;margin:auto;height:260px;border-radius:20px;overflow:hidden;border:1px solid var(--bd);user-select:none}
.ba-a,.ba-b{position:absolute;inset:0;padding:46px 24px 20px}
.ba-a{background:#f4f1ea;color:#333}.ba-b{background:#fff;color:#222;clip-path:inset(0 0 0 var(--p))}
.bal{position:absolute;top:12px;left:16px;font-size:13px;font-weight:800;padding:2px 10px;border-radius:8px;background:#d93025;color:#fff}.ba-b .bal{background:#1d6f42;left:auto;right:16px}
.broken p{font-family:Tahoma,monospace;direction:ltr;text-align:left;letter-spacing:2px;margin:6px 0;color:#7a3b3b}
.ba-b table{width:100%;border-collapse:collapse}.ba-b th,.ba-b td{border:1px solid #cfd8d2;padding:6px 10px}.ba-b th{background:#1d6f42;color:#fff}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;direction:ltr}
.ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--gold);transform:translateX(-50%);pointer-events:none}
.ba-h:after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--gold);color:#1b1405;display:grid;place-items:center;font-size:20px}
.ba-h{font-size:0}
/* install tabs */
.itabs{position:sticky;top:74px;z-index:20;background:var(--hdr);backdrop-filter:blur(12px);padding:8px;border-radius:16px;border:1px solid var(--bd);width:max-content;max-width:100%;margin:0 auto 26px}
.itabs a.on{background:linear-gradient(180deg,var(--gold2),var(--gold3));color:#1b1405}
.js .ipanel{display:none}.js .ipanel.on{display:block;animation:pop .45s both}
/* faq search */
.fsearch{position:relative;margin-bottom:18px}.fsearch input{width:100%;padding:14px 18px;border-radius:14px;border:1px solid var(--bd);background:var(--card);color:var(--txt);font:600 16px Cairo,sans-serif}
.fcount{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:13px}.fnone{text-align:center;color:var(--mut)}
mark{background:rgba(226,180,76,.4);color:inherit;border-radius:3px}
details p{animation:fade .35s}
.totop{position:fixed;bottom:88px;left:24px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--bd);background:var(--hdr);backdrop-filter:blur(10px);color:var(--gold2);font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:.3s}.totop.on{opacity:1;pointer-events:auto}
.fab:after{content:"تواصل واتساب";position:absolute;left:70px;white-space:nowrap;background:#fff;color:#05210f;font-weight:800;font-size:13px;padding:4px 12px;border-radius:99px;opacity:0;transform:translateX(-8px);transition:.3s;pointer-events:none}.fab:hover:after{opacity:1;transform:none}
body{animation:pgin .45s ease both}@keyframes pgin{from{opacity:0}}body.leave{opacity:0;transition:opacity .2s}
@media(prefers-reduced-motion:reduce){#fx{display:none}html{scroll-behavior:auto}body{animation:none}}
.g3p{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.tabdev{position:relative;padding:14px;border-radius:28px;background:linear-gradient(145deg,#2a2a2a,#0d0d0d);border:1px solid #444;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 2px #1b1b1b;transform:rotateY(-10deg) rotateX(5deg);overflow:visible}
.tabdev:before{content:"";position:absolute;top:50%;right:5px;width:5px;height:5px;border-radius:50%;background:#333;transform:translateY(-50%)}
.tscreen{position:relative;border-radius:14px;overflow:hidden}.tscreen img{display:block;width:100%;height:auto}
@media(max-width:899px){.tabdev{transform:none;padding:9px;border-radius:20px}}
.devs{position:relative;padding-bottom:40px}
.phdev{position:absolute;left:-10px;bottom:0;width:26%;min-width:110px;padding:7px;border-radius:22px;background:#0d0d0d;border:1px solid #444;box-shadow:0 25px 60px rgba(0,0,0,.6)}
.phdev .tscreen{border-radius:16px}
@media(max-width:899px){.devs{padding-bottom:60px}.phdev{left:0;width:30%}}
.tabdev,.tabdev.tilt{transform:none!important}
.tscreen img{image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}
.phdev{width:24%}
.demo .dstage{align-items:center}
.dpdf{height:auto;max-width:520px;padding:0;background:#fff}
.dpdf .dimg{display:block;width:100%;height:auto;border-radius:14px}
.dpdf .dt{top:auto;bottom:8px;left:8px;background:rgba(0,0,0,.65);color:#fff;padding:1px 8px;border-radius:6px}
.dxl .tw{overflow:auto;max-height:320px}.dxl table{font-size:12px;white-space:nowrap}
.ba{height:auto;aspect-ratio:2339/959;max-width:1000px}
.ba-a{padding:0;background:#fff}.ba-a img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba-b{padding:44px 10px 10px}.ba-b .tw{overflow:hidden}.ba-b table{font-size:12px;white-space:nowrap}.ba-b th,.ba-b td{padding:4px 6px}
@media(max-width:700px){.ba{aspect-ratio:auto;height:300px}}
.demo .dstage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px;justify-items:center}
.demo .dpdf{max-width:100%}.demo .dxl{width:100%;min-width:0;max-width:100%}
.demo .dgo{justify-self:center}
.win{max-width:1060px;margin:auto;border-radius:14px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 30px 70px rgba(0,0,0,.5);background:#fff}
.win .wbar{display:flex;align-items:center;gap:10px;direction:ltr;background:#dee1e6;color:#333;font-size:13px;padding:8px 12px}
.win .dots i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;background:#ff5f57}.win .dots i:nth-child(2){background:#febc2e}.win .dots i:nth-child(3){background:#28c840}
.win img{display:block;width:100%;height:auto}
.win figcaption{background:var(--card);color:var(--mut);padding:12px 16px;font-size:14px}
td.pv{filter:blur(5px);user-select:none;-webkit-user-select:none}
.pvnote{text-align:center;font-size:13px;color:var(--mut);margin:10px 0 0}

/* footer social */
.fsocial{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 10px}
.fslink{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;border:1px solid var(--bd);background:rgba(255,255,255,.04);font-weight:800;font-size:14px;transition:.25s}
.fslink svg{width:18px;height:18px}
.fslink:hover{transform:translateY(-2px);border-color:rgba(226,180,76,.55)}
.fslink.wa{color:#9fe3b9;border-color:rgba(37,211,102,.35)}
.fslink.wa:hover{background:rgba(37,211,102,.12)}
.fslink.fb{color:#8ab4ff;border-color:rgba(24,119,242,.4)}
.fslink.fb:hover{background:rgba(24,119,242,.14)}
html[data-theme=light] .fslink{background:#fff}
html[data-theme=light] .fslink.wa{color:#0b7a3a}
html[data-theme=light] .fslink.fb{color:#1877f2}
.btn-fb{background:#1877f2;color:#fff}
.btn-fb:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-fb svg{width:20px;height:20px;fill:currentColor}
/* product chooser */
.compare{display:flex;flex-direction:column;gap:14px}
.crow{display:grid;grid-template-columns:1.1fr 1fr 1.3fr 1.2fr auto;gap:16px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--bd);border-radius:20px;padding:22px 20px}
.crow.head{background:rgba(226,180,76,.08);border-style:dashed;font-weight:900;font-size:13px;color:var(--gold2);padding:12px 20px}
.crow .cname{display:flex;flex-direction:column;gap:6px}
.crow .cname b{font-size:20px;font-weight:900}
.crow .ctag{align-self:flex-start;font-size:12px;padding:2px 10px;border-radius:99px;background:rgba(30,123,69,.35);color:#9fe3b9;font-weight:700}
.crow ul{list-style:none;margin:0;padding:0}
.crow li{color:var(--mut);padding:2px 0 2px 0;padding-right:18px;position:relative;font-size:14px}
.crow li:before{content:"";position:absolute;right:0;top:11px;width:10px;height:6px;border:solid var(--gold);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.crow p{color:var(--mut);font-size:14px;margin:0}
.crow .when{color:var(--txt);font-weight:700;border-right:3px solid var(--gold);padding-right:10px}
.crow .cact{justify-self:end}
.crow .cact .btn{padding:10px 16px;font-size:14px}
@media(max-width:980px){
.crow.head{display:none}
.crow{grid-template-columns:1fr;gap:12px}
.crow > [data-l]:before{content:attr(data-l);display:block;font-size:12px;font-weight:900;color:var(--gold2);margin-bottom:4px}
.crow .cact{justify-self:stretch}
.crow .cact .btn{width:100%;justify-content:center}
}
html[data-theme=light] .crow{background:linear-gradient(180deg,#fff,#fbf6ea)}
html[data-theme=light] .crow .ctag{color:#145a31;background:rgba(30,123,69,.14)}
/* reviews placeholders */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{margin:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--bd);border-radius:20px;overflow:hidden;transition:.3s}
.rev:hover{transform:translateY(-4px);border-color:rgba(226,180,76,.5);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.rev-frame{aspect-ratio:4/5;display:grid;place-items:center;background:
 repeating-linear-gradient(-45deg,rgba(226,180,76,.05) 0 12px,transparent 12px 24px),
 linear-gradient(160deg,rgba(30,123,69,.18),rgba(5,12,8,.4));
 border-bottom:1px dashed var(--bd);position:relative}
.rev-ph{font-weight:900;color:var(--gold2);font-size:16px;padding:8px 18px;border:1px dashed rgba(226,180,76,.45);border-radius:99px;background:rgba(0,0,0,.25)}
.rev figcaption{padding:14px 16px;text-align:center;color:var(--mut);font-size:14px;font-weight:700}
.rev-note{text-align:center;color:var(--mut);font-size:13px;margin-top:18px}
@media(max-width:980px){.reviews{grid-template-columns:1fr}.rev-frame{aspect-ratio:16/10}}
html[data-theme=light] .rev{background:linear-gradient(180deg,#fff,#fbf6ea)}
html[data-theme=light] .rev-ph{background:rgba(255,255,255,.7)}
/* fab tooltip always a bit clearer on touch: show briefly via aria; keep hover tooltip */
.fab{isolation:isolate}

/* ===== responsive comfort 2026-11 ===== */
img,video{max-width:100%;height:auto}
code.u,.en{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.tw,.dxl .tw,.ba-b .tw{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.mock,.phone,.win,.shot,.demo,.band,.card,.compare,.hvis,.devs{max-width:100%}
.hvis{overflow:hidden}
.tilt.t1{max-width:100%}
.brand{min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,280px)}
.navr{flex:none}
.links a{min-height:44px;display:inline-flex;align-items:center}
.theme,.burger{flex:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.prod .cta{gap:10px}
.crow,.crow > *{min-width:0}
.stages,.itabs,.tabs,.dtabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.fab{bottom:max(16px,env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px))}
.totop{bottom:calc(88px + env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px))}
footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
header{padding-top:env(safe-area-inset-top,0px)}

@media(max-width:700px){
.wrap{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
section{padding:44px 0}
.hero,.hero2{padding:36px 0 28px}
.nav{height:60px}
.brand{gap:8px;font-size:16px}
.brand img{width:38px;height:38px}
.brand span{max-width:min(46vw,190px);font-size:15px}
.card{padding:18px;border-radius:16px}
.prod{padding:20px}
.prod .tag{top:12px;left:12px}
.prod .cta{flex-direction:column;align-items:stretch}
.prod .cta .btn,.cta .btn{width:100%;justify-content:center}
.stat b{font-size:36px}
.stat{padding:16px}
.band{padding:28px 16px;border-radius:20px}
.crow{padding:16px;border-radius:16px;gap:14px}
.crow .cname b{font-size:18px}
.crow .cact .btn{min-height:48px;width:100%;justify-content:center}
.group-h{flex-wrap:wrap}
.group-h h3{font-size:20px}
.chips span{font-size:12px}
.hvis{height:280px}
.t1{width:min(88%,320px);right:0;transform:rotateY(-8deg) rotateX(4deg)}
.t2{width:140px;bottom:6px;left:0}
.hlogo{width:56px;height:56px;bottom:48px}
.devs{padding-bottom:48px}
.phdev{width:32%;min-width:96px;left:0;bottom:0}
.phone{width:min(220px,100%)}
.mock{font-size:12px}
.fab:after{display:none}
.fab{width:56px;height:56px}
.totop{width:44px;height:44px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
.lbox{padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px))}
.lbox .lnav{width:44px;height:44px}
.demo{padding:14px;border-radius:18px}
.dtabs button{padding:10px 12px;font-size:14px;min-height:44px}
.stages{width:100%}
.stages button{flex:1 1 auto;min-width:0;padding:10px 8px;font-size:14px}
.itabs{top:68px;width:100%;border-radius:14px}
.itabs a,.tabs a{padding:10px 12px;font-size:13px;white-space:nowrap}
.istep .txt{gap:10px}
.fsearch input{font-size:16px;min-height:48px}
summary{font-size:16px;padding:14px 0;min-height:48px;align-items:center}
.fsocial{gap:10px}
.fslink{padding:10px 14px;min-height:44px}
.ba{height:240px}
.cshots{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.contact-card .logo,.hero .logo{width:96px;height:96px}
}

@media(max-width:380px){
.brand span{max-width:42vw;font-size:14px}
.btn{padding:12px 18px;font-size:15px}
.crow .cname b{font-size:17px}
.stat b{font-size:32px}
}

@media(min-width:701px) and (max-width:979px){
.prod .cta{flex-wrap:wrap}
.hvis{height:360px}
.reviews{grid-template-columns:repeat(2,1fr)}
.wrap{padding-left:18px;padding-right:18px}
}

@media(min-width:981px){
.wrap{padding-left:24px;padding-right:24px}
.links a{padding:8px 12px}
.crow{grid-template-columns:1.05fr .95fr 1.25fr 1.15fr auto;gap:18px;padding:22px}
}

@media(hover:none){
.card:hover,.rev:hover{transform:none}
.btn-gold:hover,.btn-wa:hover,.btn-ghost:hover,.btn-fb:hover{transform:none}
.fab:after{display:none}
}