:root{
[hidden]{display:none!important}
  --ink:#10201a; --ink2:#3d4f47; --muted:#6c7a73;
  --bg:#f8f6f0; --paper:#ffffff; --line:#e6e1d4;
  --green:#0d3b2c; --green2:#14563f; --mint:#e4efe8;
  --gold:#b98a3e; --gold2:#d9b36c; --sand:#f1eadb;
  --r:18px; --sh:0 1px 2px #10201a0d, 0 12px 32px -12px #10201a24;
  --f:"IBM Plex Sans Arabic", system-ui, sans-serif; --fh:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block} a{color:inherit}
h1,h2,h3{font-family:var(--fh);line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
.en h1,.en h2,.en h3{letter-spacing:-.02em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.narrow{width:min(760px,100% - 32px)}
.muted{color:var(--muted)} .small{font-size:.85rem}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;background:var(--green);color:#fff;text-decoration:none;font-weight:600;border:0;cursor:pointer;font:600 1rem var(--f);transition:transform .15s, background .2s, box-shadow .2s}
.btn:hover{background:var(--green2);transform:translateY(-1px);box-shadow:0 8px 20px -8px #0d3b2c80}
.btn-sm{padding:9px 18px;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-ghost.light{color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff80}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1d1407}
.btn-gold:hover{background:linear-gradient(135deg,#a77a32,var(--gold))}
.btn-block{width:100%}

/* top */
.topbar{background:var(--green);color:#d8e6dd;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:7px 0;gap:12px}
.tb-links{display:flex;gap:18px} .tb-links a{text-decoration:none;opacity:.9} .tb-links a:hover{opacity:1}
.lang{background:#ffffff1f;padding:2px 12px;border-radius:999px}
.nav{position:sticky;top:0;z-index:20;background:#f8f6f0e6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-family:var(--fh)}
.brand small{display:block;font:500 .72rem var(--f);color:var(--muted);letter-spacing:.04em}
.mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green2));color:var(--gold2);font:700 1.2rem var(--fh)}
.nav nav{display:flex;gap:22px;margin-inline-start:auto}
.nav nav a{text-decoration:none;color:var(--ink2);font-weight:500;font-size:.95rem}
.nav nav a:hover{color:var(--green)}

/* hero */
.hero{padding:64px 0 40px;background:radial-gradient(900px 500px at 85% 10%,#e8dcc0 0,transparent 60%),radial-gradient(700px 400px at 0% 90%,#dcebe2 0,transparent 60%)}
.rtl .hero{background:radial-gradient(900px 500px at 15% 10%,#e8dcc0 0,transparent 60%),radial-gradient(700px 400px at 100% 90%,#dcebe2 0,transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.kicker{display:inline-block;font-size:.85rem;font-weight:600;color:var(--gold);background:#b98a3e14;border:1px solid #b98a3e33;padding:4px 14px;border-radius:999px;margin-bottom:16px}
.hero h1{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:700}
.hero h1 span{color:var(--green2);display:block;font-size:.72em;font-weight:600;margin-top:6px}
.lead{font-size:1.1rem;color:var(--ink2);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.hero-cta.center{justify-content:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 0;padding:0}
.stats div{background:#ffffffb3;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stats dt{font:700 1.5rem var(--fh);color:var(--green)} .stats dd{margin:0;font-size:.8rem;color:var(--muted);line-height:1.4}
.hero-visual{position:relative;height:480px}
.hv-card{position:absolute;background:var(--paper);border-radius:24px;box-shadow:var(--sh);overflow:hidden;border:1px solid var(--line)}
.hv-card img{width:100%;height:calc(100% - 44px);object-fit:cover}
.hv-card span{display:block;padding:10px 16px;font:600 .85rem var(--f);color:var(--ink2);direction:ltr;text-align:center}
.hv-a{width:62%;height:78%;inset-inline-start:0;top:0;transform:rotate(-2deg)}
.hv-b{width:56%;height:70%;inset-inline-end:0;bottom:0;transform:rotate(2.5deg)}
.rtl .hv-a{transform:rotate(2deg)} .rtl .hv-b{transform:rotate(-2.5deg)}
.hv-pill{position:absolute;bottom:20px;inset-inline-start:14px;background:var(--green);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:var(--sh)}

.trust{border-block:1px solid var(--line);background:var(--paper)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 0}
.trust-row div{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;color:var(--ink2)}
.ti{width:34px;height:34px;flex:none;border-radius:10px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-weight:700}

/* sections */
.sec{padding:84px 0}
.sec-alt{background:var(--sand)}
.sec-dark{background:var(--green);color:#e8f0eb}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-head h2,.h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.sec-head p{color:var(--muted);margin:0}

/* product */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:44px;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:28px;margin-bottom:36px;box-shadow:var(--sh)}
.prod.rev .gallery{order:2}
.prod>*,.order>*,.hero-grid>*,.order-main>*,.fields>*{min-width:0}
.g-main{aspect-ratio:1;border-radius:20px;overflow:hidden;background:#f3f1ec}
.g-main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.g-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.g-thumbs button{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#f3f1ec}
.g-thumbs button.on{border-color:var(--gold)}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;background:var(--mint);color:var(--green);font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.p-body h3{font-size:1.7rem}
.sku{font:600 .9rem var(--f);color:var(--gold);background:#b98a3e14;padding:2px 10px;border-radius:8px;vertical-align:middle;direction:ltr;display:inline-block}
.p-lead{color:var(--ink2)}
.hl{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.hl li{position:relative;padding-inline-start:24px;font-size:.93rem}
.hl li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:14px;height:8px;border-inline-start:2px solid var(--green2);border-bottom:2px solid var(--green2);transform:rotate(-45deg)}
.rtl .hl li::before{transform:rotate(45deg) scaleX(-1)}
.tiers{background:linear-gradient(135deg,#faf6ec,#f4efe2);border:1px solid #e8dcc0;border-radius:18px;padding:16px;margin:18px 0}
.tiers-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem;margin-bottom:10px}
.tiers-h span{color:var(--muted)}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.tier-grid div{background:#fff;border-radius:12px;padding:10px 12px;border:1px solid var(--line)}
.tier-grid small{display:block;color:var(--muted);font-size:.78rem}
.tier-grid b{display:block;font:700 1.15rem var(--fh);color:var(--green)}
.tier-grid em{font-style:normal;font-size:.75rem;color:var(--muted)}
.tier-grid .best{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.por{margin:0;font-weight:600;color:var(--green2)}
.more{margin:0 0 20px;border-top:1px solid var(--line);padding-top:12px}
.more summary{cursor:pointer;font-weight:600;color:var(--green)}
table.spec{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem}
.spec th,.spec td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.spec th{color:var(--muted);font-weight:500;width:42%}
.spec.mini{margin:20px 0} .spec .grand th,.spec .grand td{font-weight:700;color:var(--ink);font-size:1.05rem}
.box{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.box li{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:.82rem}

/* compare */
.cmp-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
table.cmp{width:100%;border-collapse:collapse;min-width:520px}
.cmp th,.cmp td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:start}
.cmp thead th{background:var(--green);color:#fff;font-family:var(--fh)}
.cmp thead small{color:var(--gold2);font-family:var(--f)}
.cmp tbody th{color:var(--muted);font-weight:500}
.cmp tbody tr:last-child>*{border-bottom:0}

.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.card .ic{font-size:1.8rem;display:block;margin-bottom:10px}
.card h3{font-size:1.1rem} .card p{margin:0;color:var(--muted);font-size:.92rem}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;padding:22px;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff1f}
.steps span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1d1407;font:700 1.1rem var(--fh);margin-bottom:12px}
.steps h3{font-size:1.1rem} .steps p{margin:0;color:#b9cdc1;font-size:.92rem}

/* order form */
.order{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.order-main{display:grid;gap:22px}
.qty-list{display:grid;gap:12px}
.qty-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}
.qty-row.active{border-color:var(--green2);box-shadow:0 0 0 1px var(--green2) inset}
.qty-row img{width:72px;height:72px;object-fit:cover;border-radius:12px}
.qr-info{display:flex;flex-direction:column;line-height:1.4}
.qr-info small{color:var(--muted);font-size:.82rem}
.qr-info .qr-unit{color:var(--green2);font-weight:600}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg)}
.stepper button{width:40px;height:44px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--green)}
.stepper button:hover{background:var(--mint)}
.stepper input{width:64px;height:44px;border:0;text-align:center;font:600 1.05rem var(--f);background:#fff;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:500;color:var(--ink2)}
.fields .full{grid-column:1/-1}
.fields input,.fields select,.fields textarea,.track-form input{font:400 1rem var(--f);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
.fields input:focus,.fields select:focus,.fields textarea:focus,.track-form input:focus{outline:2px solid var(--green2);outline-offset:1px;background:#fff}
.fields .bad{border-color:#dc2626;background:#fef2f2}
.phone{display:flex;gap:0;direction:ltr}
.phone span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-inline-end:0;border-radius:12px 0 0 12px;background:#efece4;font-size:.9rem;white-space:nowrap}
.phone input{border-radius:0 12px 12px 0}
.summary{position:sticky;top:90px;background:var(--green);color:#e8f0eb;border-radius:24px;padding:24px;box-shadow:var(--sh)}
.summary h3{color:#fff}
.summary .muted{color:#a9c0b3}
.sum-lines{display:grid;gap:10px;margin-bottom:14px}
.sum-line{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;padding-bottom:10px;border-bottom:1px dashed #ffffff26}
.sum-line small{display:block;color:#a9c0b3}
.sum-tot div{display:flex;justify-content:space-between;padding:4px 0;font-size:.95rem}
.sum-tot .grand{font-size:1.2rem;color:var(--gold2);border-top:1px solid #ffffff33;margin-top:6px;padding-top:10px}
.formerr{background:#fee2e2;color:#991b1b;border-radius:10px;padding:8px 12px;font-size:.88rem}
.summary .btn{margin:10px 0 6px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1d1407}
.alert{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px 16px;border-radius:14px;margin-bottom:20px}
.alert.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}

.faq{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.faq[open] summary::after{content:"−"}
.faq p{margin:10px 0 0;color:var(--ink2)}

.final{background:linear-gradient(135deg,var(--green),#0a2c21);color:#fff;text-align:center;padding:72px 0}
.final p{color:#b9cdc1}

.foot{background:#0a2219;color:#9fb5a9;padding:44px 0 20px;font-size:.9rem}
.foot .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .brand{color:#fff} .foot .brand small{color:#9fb5a9}
.foot p{max-width:440px}
.foot-contact{display:flex;flex-direction:column;gap:8px}
.foot-contact a{text-decoration:none} .foot-contact a:hover{color:#fff}
.copy{border-top:1px solid #ffffff14;margin-top:24px;padding-top:16px;font-size:.8rem}
.wa-float{position:fixed;bottom:20px;inset-inline-end:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -6px #25d36699;z-index:30}

/* thanks/track */
.thanks{text-align:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px 28px;box-shadow:var(--sh)}
.check{width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--mint);color:var(--green);font-size:2rem;font-weight:700}
.ordno{font:700 1.6rem var(--fh);color:var(--green);background:var(--sand);display:inline-block;padding:8px 22px;border-radius:14px;margin-bottom:12px;letter-spacing:.04em}
.thanks .spec{max-width:420px;margin-inline:auto}
.badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 30%,#fff)}
.track-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:22px}
.track-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--sh)}
.tc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.tc-head small{display:block;color:var(--muted)} .tc-head strong{font:700 1.3rem var(--fh)}
.timeline{list-style:none;padding:0;margin:22px 0 6px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.75rem;text-align:center;color:var(--muted)}
.timeline li span{display:block;height:6px;border-radius:6px;background:var(--line);margin-bottom:6px}
.timeline li.done{color:var(--green);font-weight:600} .timeline li.done span{background:var(--green2)}
.timeline li.cur span{background:var(--gold)}

/* responsive */
@media (max-width:980px){
  .hero-grid,.prod,.order{grid-template-columns:1fr}
  .prod.rev .gallery{order:0}
  .hero-visual{height:380px}
  .cards4,.steps{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr 1fr}
  .summary{position:static}
  .nav nav{display:none}
  .nav .btn-sm{margin-inline-start:auto}
}
@media (max-width:620px){
  .stats{grid-template-columns:1fr 1fr}
  .hl,.fields,.cards4,.steps,.trust-row,.track-form{grid-template-columns:1fr}
  .prod{padding:16px;border-radius:22px}
  .hero{padding-top:36px} .sec{padding:60px 0}
  .hero-visual{height:300px}
  .qty-row{grid-template-columns:56px 1fr;}
  .qty-row img{width:56px;height:56px}
  .qty-row .stepper{grid-column:1/-1;justify-self:stretch;justify-content:space-between}
  .stepper input{flex:1}
  .timeline{grid-template-columns:repeat(4,1fr)}
  .brand>span:last-child{font-size:.9rem}
}

.overmax{margin:10px 0 0;font-size:.85rem}.overmax a{color:var(--green2);font-weight:600}

.coupon{margin:4px 0 14px;padding:12px;border-radius:14px;background:#ffffff12;border:1px dashed #ffffff40}
.coupon label{display:block;font-size:.82rem;color:#c8d9cf;margin-bottom:6px}
.cp-row{display:flex;gap:6px}
.cp-row input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:0;font:600 .95rem var(--f);text-transform:uppercase;letter-spacing:.05em;background:#fff;color:var(--ink)}
.cp-row input[readonly]{background:#e4efe8;color:var(--green)}
.cp-row button{padding:0 16px;border-radius:10px;border:0;background:var(--gold2);color:#1d1407;font:600 .9rem var(--f);cursor:pointer}
.cp-msg{margin:8px 0 0;font-size:.84rem;line-height:1.5}
.cp-msg.ok{color:#a7f3c9}.cp-msg.bad{color:#fecaca}
.sum-tot .disc{color:#a7f3c9}.sum-tot .disc small{font-size:.75rem;opacity:.85}