:root{--night:#0A1612;--deep:#0F241C;--emerald:#12805F;--emerald-l:#1CA97E;--gold:#D4AF37;--gold-l:#E8CB6B;
--cream:#F4EFE3;--sand:#CBBFA5;--card:#132B22;--line:rgba(212,175,55,.22);--r:20px}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic',sans-serif;background:var(--night);color:var(--cream);line-height:1.85;
background-image:radial-gradient(900px 500px at 90% -5%,rgba(18,128,95,.28),transparent 60%),radial-gradient(700px 420px at -5% 100%,rgba(212,175,55,.08),transparent 55%)}
h1,h2,h3{font-family:'Alexandria',sans-serif}
.latin{font-family:'Marcellus',serif;letter-spacing:.14em}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{max-width:1150px;margin:0 auto;padding:0 22px}
header{position:sticky;top:0;z-index:50;background:rgba(10,22,18,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;flex-direction:column;line-height:1.2}
.logo .latin{font-size:1.15rem;color:var(--gold)}
.logo small{font-size:.68rem;color:var(--sand);letter-spacing:.3em}
.nav ul{display:flex;gap:28px;list-style:none;font-size:.93rem}
.nav ul a{color:var(--sand);transition:.2s}.nav ul a:hover{color:var(--gold)}
.cta{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#231A02;padding:11px 26px;border-radius:999px;font-weight:800;font-size:.88rem;box-shadow:0 6px 20px rgba(212,175,55,.25)}
@media(max-width:860px){.nav ul{display:none}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(212,175,55,.07);color:var(--gold-l);padding:7px 18px;border-radius:999px;font-size:.82rem;font-weight:600}
.btn-gold{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#231A02;padding:15px 36px;border-radius:999px;font-weight:800;transition:.2s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(212,175,55,.3)}
.btn-line{display:inline-block;border:1.5px solid var(--line);color:var(--cream);padding:15px 36px;border-radius:999px;font-weight:700}
.btn-line:hover{border-color:var(--gold);color:var(--gold-l)}
section{padding:76px 0}
.k{color:var(--gold);font-weight:700;font-size:.85rem;letter-spacing:.08em}
.sec-h{text-align:center;max-width:680px;margin:0 auto 48px}
.sec-h h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-top:8px}
.sec-h p{color:var(--sand);margin-top:12px}
.frame{background:#fff;border-radius:var(--r);padding:26px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 6px rgba(212,175,55,.06)}
.frame img{margin:0 auto;object-fit:contain}
footer{border-top:1px solid var(--line);padding:44px 0 30px;color:var(--sand);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.disclaimer{background:rgba(212,175,55,.06);border:1px solid var(--line);border-radius:16px;padding:20px 24px;font-size:.85rem;color:var(--sand)}
.wa{position:fixed;bottom:24px;left:24px;z-index:60;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 12px 30px rgba(0,0,0,.4)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* index hero */
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:60px;padding-bottom:40px}
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.3;margin:18px 0}
.hero h1 em{font-style:normal;color:var(--gold);text-shadow:0 0 40px rgba(212,175,55,.35)}
.hero p{color:var(--sand);font-size:1.05rem;max-width:54ch;margin-bottom:30px}
.h-act{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;gap:30px;justify-content:center;padding:18px 22px;border-top:1px solid var(--line);color:var(--sand);font-size:.9rem;flex-wrap:wrap}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}}
/* animated hero media */
.hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:26px;opacity:0;transition:opacity 1.2s ease;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-media video.on{opacity:1}
.hero-media.has-video .hero-frame{transform:scale(.62) translate(30%,32%);transform-origin:bottom left}
.halo{position:absolute;width:420px;height:420px;border-radius:50%;
background:conic-gradient(from 0deg,transparent 0%,rgba(212,175,55,.35) 12%,transparent 30%,rgba(28,169,126,.3) 55%,transparent 75%,rgba(212,175,55,.25) 92%,transparent 100%);
filter:blur(26px);animation:spin 14s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-frame{position:relative;z-index:2;overflow:hidden;animation:heroFloat 6.5s ease-in-out infinite;transition:transform .8s ease;max-width:380px}
@keyframes heroFloat{50%{transform:translateY(-16px)}}
.hero-media.has-video .hero-frame{animation:none}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-120%);animation:sweep 5.5s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}
.dust{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--gold-l),transparent 70%);pointer-events:none;z-index:3;opacity:.8}
.d1{width:10px;height:10px;top:12%;right:8%;animation:drift 9s ease-in-out infinite}
.d2{width:6px;height:6px;top:70%;right:14%;animation:drift 7s ease-in-out 1s infinite}
.d3{width:14px;height:14px;top:26%;left:6%;animation:drift 11s ease-in-out 2s infinite;opacity:.5}
.d4{width:5px;height:5px;bottom:10%;left:16%;animation:drift 8s ease-in-out .5s infinite}
.d5{width:8px;height:8px;top:48%;right:2%;animation:drift 10s ease-in-out 3s infinite;opacity:.6}
.d6{width:4px;height:4px;top:6%;left:38%;animation:drift 6.5s ease-in-out 1.5s infinite}
@keyframes drift{33%{transform:translate(-14px,-22px) scale(1.15)}66%{transform:translate(10px,-38px) scale(.85);opacity:.35}}
@media(prefers-reduced-motion:reduce){.halo,.hero-frame,.shine,.dust{animation:none}}
@media(max-width:860px){.hero-media{min-height:340px}.halo{width:300px;height:300px}}
/* product page hero video */
.hero-media.pm{min-height:460px}
.hero-media.pm video{border-radius:22px}
.hero-media.pm .hero-frame{max-width:340px}
.hero-media.pm .hero-frame img{height:340px;width:100%;object-fit:contain}
.hero-media.pm.has-video .hero-frame{transform:none;animation:heroFloat 6.5s ease-in-out infinite;
background:rgba(255,255,255,.94);backdrop-filter:blur(4px);
box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.4), 0 0 60px rgba(212,175,55,.18)}
.hero-media.pm.has-video::after{content:"";position:absolute;inset:0;border-radius:22px;
background:linear-gradient(180deg,rgba(10,22,18,.15),rgba(10,22,18,.55));pointer-events:none}
.hero-media.pm.has-video .hero-frame,.hero-media.pm.has-video .dust{z-index:4}
@media(max-width:900px){.hero-media.pm{min-height:380px}.hero-media.pm .hero-frame img{height:260px}}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s;position:relative}
.pcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.pcard .ph{background:#fff;padding:20px;display:flex;justify-content:center}
.pcard .ph img{height:185px;object-fit:contain}
.ribbon{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#231A02;font-size:.7rem;font-weight:800;padding:4px 14px;border-radius:999px;z-index:2}
.pcard .pb{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.pcard h3{font-size:1.1rem}.pcard .en{font-size:.75rem;color:var(--sand);letter-spacing:.05em;margin:2px 0 10px}
.pcard p{font-size:.87rem;color:var(--sand);flex:1}
.pf{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.price{font-family:'Alexandria';font-weight:800;color:var(--gold-l);font-size:1.05rem}
.more{font-size:.83rem;color:var(--gold);font-weight:700}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}
/* product page */
.crumb{padding:20px 0 0;font-size:.83rem;color:var(--sand)}
.crumb a:hover{color:var(--gold)}
.phero{padding:40px 0 60px}
.phero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.phero .frame img{height:380px;width:100%}
.phero h1{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.35;margin:14px 0 6px}
.phero .en{color:var(--sand);letter-spacing:.1em;font-size:.9rem;margin-bottom:16px;display:block}
.tagline{color:var(--gold-l);font-size:1.12rem;font-weight:600;margin-bottom:18px}
.phero .intro{color:var(--sand);font-size:.98rem;margin-bottom:26px}
.buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 24px}
.buy .price{font-size:1.5rem}.buy small{display:block;color:var(--sand);font-weight:400;font-size:.75rem}
@media(max-width:900px){.phero .wrap{grid-template-columns:1fr}.phero .frame img{height:300px}}
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bitem{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.bitem h3{color:var(--gold-l);font-size:1rem;margin-bottom:8px}
.bitem p{font-size:.9rem;color:var(--sand)}
@media(max-width:680px){.bgrid{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.panel h2{font-size:1.15rem;color:var(--gold-l);margin-bottom:12px}
.panel p{font-size:.92rem;color:var(--sand)}
@media(max-width:680px){.duo{grid-template-columns:1fr}}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 24px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::after{content:"+";color:var(--gold);font-size:1.4rem}
details[open] summary::after{content:"−"}
details p{margin-top:10px;font-size:.92rem;color:var(--sand)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:680px){.related{grid-template-columns:1fr}}

/* WhatsApp floating button */
.wa{position:fixed;bottom:24px;left:24px;z-index:9999;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,211,102,.45);transition:transform .2s ease,box-shadow .2s ease;}
.wa:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(37,211,102,.6);}
.wa svg{width:30px;height:30px;}