@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap');

/* ════════════ القالب الذهبي — Design Tokens ════════════ */
:root{
  --bg:#0B0C0E;
  --bg-2:#101114;
  --bg-3:#16181C;
  --card:rgba(255,255,255,.042);
  --card-hi:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.085);
  --border-strong:rgba(212,169,55,.35);
  --text:#F3F1EB;
  --text-2:#B7B4AC;
  --muted:#85827B;
  --gold:#D4A937;
  --gold-2:#F0CE6B;
  --gold-3:#8A6D1F;
  --grad-gold:linear-gradient(135deg,#D4A937 0%,#F0CE6B 55%,#B98F25 100%);
  --grad-dark:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  --green:#4ADE80;
  --red:#F87171;
  --amber:#FBBF24;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --sh:0 4px 26px rgba(0,0,0,.45);
  --sh-lg:0 18px 60px rgba(0,0,0,.6);
  --sh-gold:0 10px 40px rgba(212,169,55,.22);
  --nav-h:74px;
  --f-head:'Tajawal',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-lat:'Oswald',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--text);
  min-height:100dvh;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.25;letter-spacing:-.01em}
::selection{background:var(--gold);color:#0B0C0E}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:#2A2C31;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-3)}

/* ════════════ الخلفية والأغلفة ════════════ */
.glow{position:fixed;inset:-30% -20% auto -20%;height:80vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,169,55,.16),transparent 62%)}
.glow-2{position:fixed;bottom:-30%;left:-20%;width:70vw;height:70vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(120,110,255,.07),transparent 65%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:3px 3px}
.container{max-width:1220px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}
.section{padding:4.5rem 0;position:relative;z-index:2}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.25rem;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-lat);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad-gold)}
.muted{color:var(--text-2);font-size:1rem}
.hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}

/* ════════════ الأزرار ════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1.6rem;border-radius:999px;font-size:.92rem;font-weight:600;cursor:pointer;
  border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--grad-gold);color:#141208;box-shadow:var(--sh-gold);font-weight:700}
.btn-gold:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 46px rgba(212,169,55,.4)}
.btn-ghost{border-color:var(--border);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover:not(:disabled){background:var(--card-hi);border-color:var(--border-strong);transform:translateY(-2px)}
.btn-dark{background:var(--bg-3);border-color:var(--border);color:var(--text)}
.btn-dark:hover{background:#1D1F24}
.btn-block{width:100%}
.btn-sm{padding:.5rem 1rem;font-size:.8rem}
.btn-icon{width:42px;height:42px;padding:0;border-radius:50%}
.link-gold{color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:.35rem;transition:gap .2s}
.link-gold:hover{gap:.6rem}

/* ════════════ الشرائح/الشارات ════════════ */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;
  padding:.26rem .7rem;border-radius:999px;background:rgba(212,169,55,.13);color:var(--gold);border:1px solid rgba(212,169,55,.22)}
.badge.plain{background:rgba(255,255,255,.05);color:var(--text-2);border-color:var(--border)}
.badge.green{background:rgba(74,222,128,.12);color:var(--green);border-color:rgba(74,222,128,.22)}
.badge.red{background:rgba(248,113,113,.12);color:var(--red);border-color:rgba(248,113,113,.22)}
.chip{font-family:var(--f-lat);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* ════════════ الشريط العلوي ════════════ */
.topbar{background:var(--bg-2);border-bottom:1px solid var(--border);position:relative;z-index:60;
  font-size:.78rem;color:var(--text-2);text-align:center;padding:.5rem 1rem}
.topbar b{color:var(--gold)}
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(11,12,14,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1220px;margin:0 auto;padding:0 1.5rem;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem;font-family:var(--f-head);font-weight:800;font-size:1.15rem}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--grad-gold);
  display:grid;place-items:center;color:#141208;box-shadow:var(--sh-gold);flex:none}
.logo small{display:block;font-family:var(--f-lat);font-size:.6rem;letter-spacing:.2em;color:var(--gold);font-weight:500}
.nav-links{display:flex;gap:1.7rem;align-items:center}
.nav-link{font-size:.9rem;color:var(--text-2);position:relative;padding:.3rem 0;transition:color .2s;cursor:pointer}
.nav-link::after{content:"";position:absolute;bottom:-2px;right:0;width:0;height:1.5px;background:var(--grad-gold);transition:width .25s}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);position:relative;
  transition:background .2s,transform .2s,border-color .2s}
.icon-btn:hover{background:var(--card-hi);border-color:var(--border-strong);transform:translateY(-2px)}
.cart-count{position:absolute;top:-4px;left:-4px;min-width:20px;height:20px;border-radius:999px;
  background:var(--grad-gold);color:#141208;font-size:.7rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.burger{display:none}
.mobile-menu{position:fixed;inset:0;background:rgba(8,9,11,.97);backdrop-filter:blur(10px);z-index:80;
  display:none;flex-direction:column;padding:5rem 1.75rem;gap:.4rem}
.mobile-menu.open{display:flex;animation:fadeUp .3s ease}
.mobile-menu a{font-family:var(--f-head);font-size:1.35rem;font-weight:700;padding:.85rem 0;border-bottom:1px solid var(--border)}
.mobile-close{position:absolute;top:1.2rem;left:1.5rem}

/* ════════════ الهيرو ════════════ */
.hero{position:relative;padding:5rem 0 4rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%,rgba(212,169,55,.2),transparent 60%),
    radial-gradient(ellipse 50% 50% at 12% 82%,rgba(90,110,255,.09),transparent 60%),
    linear-gradient(180deg,#0B0C0E,#0E0F12 70%,#0B0C0E)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 30%,transparent 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:1.1rem}
.hero h1 .gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{color:var(--text-2);font-size:clamp(1rem,1.4vw,1.12rem);max-width:520px;margin-bottom:1.9rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.6rem;flex-wrap:wrap}
.hero-stat b{display:block;font-family:var(--f-lat);font-size:1.9rem;color:var(--gold);line-height:1}
.hero-stat span{font-size:.8rem;color:var(--muted)}
.hero-visual{position:relative;aspect-ratio:4/3.4;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--sh-lg);background:
    radial-gradient(ellipse at 50% 120%,rgba(212,169,55,.22),transparent 60%),linear-gradient(160deg,#15171B,#0C0D10)}
.hero-visual .float{position:absolute;padding:.5rem .85rem;border-radius:999px;font-size:.75rem;font-weight:600;
  background:rgba(12,13,15,.85);backdrop-filter:blur(10px);border:1px solid var(--border-strong);color:var(--gold);
  display:flex;align-items:center;gap:.4rem;box-shadow:var(--sh)}
.float.f1{top:8%;right:8%;animation:floaty 5s ease-in-out infinite}
.float.f2{bottom:14%;left:7%;animation:floaty 6.5s ease-in-out .6s infinite}
.float.f3{bottom:42%;right:5%;animation:floaty 7.5s ease-in-out 1.2s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ════════════ شريط الثقة ════════════ */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:1.6rem 0}
.trust-item{display:flex;align-items:center;gap:.8rem}
.trust-item i,.trust-item svg{color:var(--gold);flex:none}
.trust-item b{display:block;font-size:.9rem}
.trust-item span{font-size:.78rem;color:var(--muted)}

/* ════════════ الشبكات والكروت ════════════ */
.grid{display:grid;gap:1.3rem}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--border-strong)}

/* كروت التصنيفات */
.cat{position:relative;overflow:hidden;cursor:pointer;padding:1.5rem;min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem}
.cat-ico{position:absolute;top:1rem;left:1rem;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:rgba(212,169,55,.12);border:1px solid rgba(212,169,55,.2);color:var(--gold)}
.cat b{font-family:var(--f-head);font-size:1.05rem}
.cat span{font-size:.78rem;color:var(--muted)}
.cat::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:120px;
  background:radial-gradient(ellipse at 50% 50%,rgba(212,169,55,.16),transparent 70%);opacity:0;transition:opacity .3s}
.cat:hover::after{opacity:1}

/* كروت المنتجات */
.product{overflow:hidden;display:flex;flex-direction:column;position:relative}
.p-media{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 115%,rgba(212,169,55,.18),transparent 62%),linear-gradient(150deg,#15171B,#0C0D10);
  border-bottom:1px solid var(--border)}
.p-media svg{width:74%;height:74%;color:var(--gold);opacity:.92;transition:transform .4s ease}
.product:hover .p-media svg{transform:scale(1.06) rotate(-1deg)}
.p-tags{position:absolute;top:.7rem;right:.7rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.p-fav{position:absolute;bottom:.7rem;left:.7rem;width:36px;height:36px;border-radius:50%;
  background:rgba(10,11,13,.8);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;
  color:var(--text-2);transition:color .2s,border-color .2s,transform .2s;backdrop-filter:blur(6px)}
.p-fav:hover{color:var(--gold);border-color:var(--border-strong);transform:scale(1.08)}
.p-fav.on{color:var(--red);border-color:rgba(248,113,113,.4)}
.p-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.p-cat{font-family:var(--f-lat);font-size:.66rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.p-title{font-family:var(--f-head);font-weight:700;font-size:1rem;line-height:1.45}
.p-fit{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.5rem}
.price{font-family:var(--f-lat);font-size:1.15rem;font-weight:600;color:var(--gold);white-space:nowrap}
.price s{font-size:.78rem;color:var(--muted);margin-inline-start:.4rem;font-family:var(--f-body)}
.stars{display:flex;align-items:center;gap:.28rem;font-size:.75rem;color:var(--text-2)}
.stars svg{color:var(--gold)}

/* ════════════ الحقول والفلاتر ════════════ */
label.fld{display:flex;flex-direction:column;gap:.45rem;font-size:.78rem;font-weight:600;color:var(--text-2)}
label.fld>span{display:flex;align-items:center;gap:.35rem}
input,select,textarea{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:.92rem;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder,textarea::placeholder{color:#66645E}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,169,55,.16);background:rgba(255,255,255,.07)}
input.err,select.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(248,113,113,.14)}
.fld-err{color:var(--red);font-size:.76rem;display:none;align-items:center;gap:.3rem}
.fld-err.show{display:flex}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2385827B' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:left 1rem center;padding-inline-start:2.2rem;cursor:pointer}
.toolbar{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr;gap:.7rem;padding:1rem;margin-bottom:1.6rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filter-chip{padding:.42rem 1rem;border-radius:999px;font-size:.83rem;cursor:pointer;color:var(--text-2);
  background:rgba(255,255,255,.04);border:1px solid var(--border);transition:all .2s}
.filter-chip:hover{color:var(--text);border-color:var(--border-strong)}
.filter-chip.on{background:var(--grad-gold);color:#141208;border-color:transparent;font-weight:700}
.result-line{font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);padding:1.5rem 0 .5rem}
.crumbs a:hover{color:var(--gold)}

/* ════════════ صفحة المنتج ════════════ */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:start;padding-bottom:3rem}
.pd-stage{aspect-ratio:1/1;border-radius:var(--r-lg);border:1px solid var(--border);display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 115%,rgba(212,169,55,.2),transparent 62%),linear-gradient(150deg,#16181D,#0C0D10);box-shadow:var(--sh-lg)}
.pd-stage svg{width:66%;height:66%;color:var(--gold)}
.pd-thumbs{display:flex;gap:.6rem;margin-top:.8rem}
.pd-thumb{width:74px;height:74px;border-radius:var(--r-sm);border:1px solid var(--border);display:grid;place-items:center;
  cursor:pointer;background:rgba(255,255,255,.03);color:var(--text-2);transition:all .2s}
.pd-thumb svg{width:70%;height:70%}
.pd-thumb:hover{border-color:var(--border-strong);color:var(--gold)}
.pd-thumb.on{border-color:var(--gold);color:var(--gold);background:rgba(212,169,55,.09)}
.pd-price{display:flex;align-items:baseline;gap:.8rem;margin:1rem 0}
.pd-price .now{font-family:var(--f-lat);font-size:2.1rem;font-weight:600;color:var(--gold)}
.qty{display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.qty button{width:40px;height:44px;background:transparent;border:none;color:var(--text);cursor:pointer;font-size:1.1rem;transition:background .2s}
.qty button:hover{background:var(--card-hi);color:var(--gold)}
.qty input{width:52px;text-align:center;border:none;background:transparent;padding:0;font-family:var(--f-lat)}
.qty input:focus{box-shadow:none}
.pd-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.4rem 0}
.spec{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.5rem}
.spec td{padding:.7rem .3rem;border-bottom:1px solid var(--border);color:var(--text-2)}
.spec td:first-child{color:var(--muted);width:40%}
.spec tr:last-child td{border-bottom:none}
.info-strip{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.info-strip span{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-2);
  padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.info-strip svg{color:var(--gold)}
.tabs{display:flex;gap:.3rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:.3rem;width:fit-content;margin-bottom:1.4rem}
.tab{padding:.5rem 1.3rem;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer;color:var(--text-2);transition:all .2s;border:none;background:transparent}
.tab.on{background:var(--grad-gold);color:#141208}
.tab-panel{display:none;color:var(--text-2);font-size:.94rem}
.tab-panel.on{display:block;animation:fadeUp .35s ease}
.tab-panel ul{margin:.6rem 1.2rem 0;display:flex;flex-direction:column;gap:.4rem}
.tab-panel li::marker{color:var(--gold)}
.review{padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--border);background:var(--card)}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-head);
  font-weight:700;background:rgba(212,169,55,.15);color:var(--gold);border:1px solid rgba(212,169,55,.25);flex:none}

/* ════════════ السلة والدفع ════════════ */
.cart-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start;padding-bottom:3rem}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;padding:1rem;margin-bottom:.8rem}
.cart-thumb{width:96px;height:96px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--border);
  background:radial-gradient(ellipse at 50% 120%,rgba(212,169,55,.16),transparent 65%),#121316;color:var(--gold)}
.cart-thumb svg{width:66%;height:66%}
.cart-line{font-family:var(--f-lat);font-weight:600;color:var(--gold);white-space:nowrap}
.summary{padding:1.4rem;position:sticky;top:calc(var(--nav-h) + 1rem)}
.sum-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;font-size:.92rem;color:var(--text-2)}
.sum-row b{color:var(--text)}
.sum-total{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;margin-top:.6rem;
  border-top:1px solid var(--border);font-family:var(--f-head)}
.sum-total .val{font-family:var(--f-lat);font-size:1.6rem;color:var(--gold);font-weight:600}
.empty{text-align:center;padding:4.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.empty-ico{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(212,169,55,.08);border:1px solid rgba(212,169,55,.2);color:var(--gold)}
.steps{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:2.2rem;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);
  border:1px solid var(--border);font-size:.78rem;font-family:var(--f-lat)}
.step.on{color:var(--text)}
.step.on b{background:var(--grad-gold);color:#141208;border-color:transparent}
.step-sep{width:34px;height:1px;background:var(--border)}

/* ════════════ التوست والمودال ════════════ */
.toast-wrap{position:fixed;bottom:1.5rem;left:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.55rem}
.toast{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;border-radius:var(--r-sm);font-size:.88rem;
  font-weight:500;box-shadow:var(--sh-lg);animation:fadeUp .3s ease;background:#15171B;border:1px solid var(--border);max-width:340px}
.toast svg{flex:none}
.toast.success{border-color:rgba(74,222,128,.35)}
.toast.success svg{color:var(--green)}
.toast.error{border-color:rgba(248,113,113,.35)}
.toast.error svg{color:var(--red)}
.toast.info svg{color:var(--gold)}
.overlay{position:fixed;inset:0;background:rgba(5,6,7,.72);backdrop-filter:blur(6px);z-index:150;
  display:none;align-items:center;justify-content:center;padding:1.2rem}
.overlay.open{display:flex;animation:fadeUp .25s ease}
.modal{background:#101216;border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:2.2rem;
  max-width:440px;width:100%;text-align:center;box-shadow:var(--sh-lg)}
.modal .ok-ico{width:74px;height:74px;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);color:var(--green)}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);
  background-size:200%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .55s ease both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}

/* ════════════ المزايا والشهادات ════════════ */
.feature{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.feature-ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:rgba(212,169,55,.1);border:1px solid rgba(212,169,55,.2);color:var(--gold)}
.feature h3{font-size:1.05rem}
.feature p{font-size:.87rem;color:var(--text-2)}
.quote{padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.quote p{font-size:.94rem;color:var(--text-2);line-height:1.9}
.quote-foot{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.quote-foot b{font-size:.9rem;display:block}
.quote-foot span{font-size:.76rem;color:var(--muted)}
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--border-strong);
  padding:3rem 2rem;text-align:center;
  background:radial-gradient(ellipse at 50% 130%,rgba(212,169,55,.28),transparent 62%),linear-gradient(160deg,#15171B,#0C0D10)}
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:.7rem}
.cta-band p{color:var(--text-2);max-width:520px;margin:0 auto 1.6rem}
.news-form{display:flex;gap:.6rem;max-width:480px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:220px}
.timer{display:flex;gap:.7rem;justify-content:center;margin:1.6rem 0 .4rem;direction:ltr}
.timer div{min-width:66px;padding:.6rem;border-radius:var(--r-sm);background:rgba(12,13,15,.7);border:1px solid var(--border)}
.timer b{display:block;font-family:var(--f-lat);font-size:1.5rem;color:var(--gold)}
.timer span{font-size:.66rem;color:var(--muted);font-family:var(--f-lat);letter-spacing:.1em}

/* ════════════ الفوتر ════════════ */
footer{border-top:1px solid var(--border);background:rgba(255,255,255,.014);margin-top:2rem;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem;padding:3rem 0 2rem}
.foot-col h4{font-family:var(--f-head);font-size:.95rem;margin-bottom:1rem}
.foot-col a,.foot-col p{display:block;font-size:.86rem;color:var(--text-2);margin-bottom:.6rem;transition:color .2s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid var(--border);padding:1.2rem 0;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);
  color:var(--text-2);transition:all .2s}
.socials a:hover{color:var(--gold);border-color:var(--border-strong);transform:translateY(-2px)}

/* ════════════ الاستجابة ════════════ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-visual{aspect-ratio:16/10;max-width:640px}
  .pd{grid-template-columns:1fr;gap:1.8rem}
  .cart-wrap{grid-template-columns:1fr}
  .summary{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .toolbar{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .burger{display:grid}
  .section{padding:3rem 0}
  .hero{padding:3rem 0 2.5rem}
  .hero-stats{gap:1.6rem}
  .hero-stat b{font-size:1.5rem}
  .grid-3,.grid-4{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .p-body{padding:.85rem}
  .p-title{font-size:.92rem}
  .cart-row{grid-template-columns:72px 1fr;gap:.8rem}
  .cart-thumb{width:72px;height:72px}
  .cart-row .cart-line{grid-column:2}
  .toast-wrap{left:.8rem;right:.8rem}
}
@media (max-width:520px){
  .toolbar{grid-template-columns:1fr;gap:.6rem}
  .foot-grid{grid-template-columns:1fr}
  .modal{padding:1.6rem}
  .pd-row{gap:.6rem}
  .pd-row .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ════════════ الأيقونات ════════════ */
[data-lucide], svg.lucide{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
svg.lucide{stroke-width:1.75}
.i-sm{width:14px !important;height:14px !important}
.i-lg{width:22px !important;height:22px !important}
.i-xl{width:26px !important;height:26px !important}
.i-huge{width:44px !important;height:44px !important;stroke-width:1.4}

/* ════════════ الهيرو — الرسم ════════════ */
.hero-art{position:absolute;inset:0;display:grid;place-items:center}
.hero-art svg{width:62%;height:62%;color:var(--gold);opacity:.92;filter:drop-shadow(0 0 42px rgba(212,169,55,.28))}
.hero-ring{position:absolute;inset:11%;border:1px dashed rgba(212,169,55,.22);border-radius:50%;animation:spin 46s linear infinite}
.hero-ring::after{content:"";position:absolute;top:-5px;right:50%;width:9px;height:9px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 14px var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════ الجيب المتحرك (SVG) ════════════ */
.wg-jeep{width:100%;height:auto;display:block;overflow:visible}
.wg-body{animation:wgBounce 1.15s ease-in-out infinite}
.wg-wh{transform-box:fill-box;transform-origin:center;animation:wgSpin var(--wg-spin,.78s) linear infinite}
.wg-led{fill:#FFE9A8;animation:wgLed 1.4s ease-in-out infinite}
.wg-beam{animation:wgBeam 2.6s ease-in-out infinite}
.wg-puff{fill:#BCAE8F;opacity:0;transform-box:fill-box;transform-origin:center;animation:wgPuff 1.9s ease-out infinite}
@keyframes wgSpin{to{transform:rotate(360deg)}}
@keyframes wgBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@keyframes wgLed{0%,100%{fill:#FFE9A8;opacity:.6}50%{fill:#FFFDF2;opacity:1}}
@keyframes wgBeam{0%,100%{opacity:.3}50%{opacity:.72}}
@keyframes wgPuff{0%{opacity:0;transform:translate(0,0) scale(.5)}22%{opacity:.42}100%{opacity:0;transform:translate(20px,-32px) scale(1.9)}}

.jeep-wrap{position:relative;width:100%}
.wg-line{position:absolute;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(212,169,55,.7),rgba(212,169,55,0));
  animation:wgLine 2.4s linear infinite}
.wg-line.l1{top:34%;right:-6%;width:24%;animation-delay:.15s}
.wg-line.l2{top:49%;right:-9%;width:32%;animation-delay:.95s}
.wg-line.l3{top:63%;right:-4%;width:18%;animation-delay:1.6s}
@keyframes wgLine{0%{opacity:0;transform:translateX(30px)}28%{opacity:.85}100%{opacity:0;transform:translateX(-38px)}}

/* ── الجيب داخل الهيرو ── */
.hero-art{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:15%}
.hero-art::after{content:"";position:absolute;bottom:11%;left:14%;right:14%;height:52px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(212,169,55,.26),transparent 70%);filter:blur(7px)}
.hero-art svg.wg-jeep{width:100%;height:auto;color:inherit;opacity:1;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.55));animation:wgIdle 7s ease-in-out infinite}
@keyframes wgIdle{0%,100%{transform:translateX(-11px)}50%{transform:translateX(11px)}}

/* ════════════ شريط القيادة — الجيب يتحرك عبر الصفحة ════════════ */
.drive-band{--ground:78px;position:relative;height:330px;overflow:hidden;z-index:2;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0B0C0E 0%,#101218 40%,#191510 66%,#241B0C 100%)}
.drive-band .sun{position:absolute;top:20px;left:11%;width:200px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,206,107,.4),rgba(212,169,55,.06) 56%,transparent 72%)}
.drive-band .haze{position:absolute;left:0;right:0;bottom:var(--ground);height:96px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(212,169,55,.08))}
.drive-band .hills{position:absolute;left:0;right:0;bottom:var(--ground);height:112px;opacity:.9;display:block}
.drive-band .sand{position:absolute;left:0;right:0;bottom:0;height:var(--ground);
  background:linear-gradient(180deg,#2E2411,#12100A)}
.drive-band .dash{position:absolute;left:0;right:0;bottom:var(--ground);height:2.5px;opacity:.42;
  background-image:repeating-linear-gradient(90deg,rgba(212,169,55,.75) 0 44px,transparent 44px 122px);
  animation:dashMove .8s linear infinite}
@keyframes dashMove{to{background-position-x:122px}}
.drive-band .band-tag{position:absolute;top:1.1rem;right:1.4rem;font-family:var(--f-lat);font-size:.68rem;
  letter-spacing:.2em;color:rgba(212,169,55,.75);text-transform:uppercase;z-index:3}

.band-jeep{position:absolute;left:0;bottom:calc(var(--ground) - 8px);width:min(40vw,420px);--wg-spin:1.05s;
  animation:driveBy 15s linear infinite;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.band-jeep::after{content:"";position:absolute;bottom:2%;right:-12%;width:56%;height:44%;pointer-events:none;
  background:radial-gradient(ellipse at 100% 100%,rgba(216,196,150,.36),rgba(216,196,150,.05) 55%,transparent 74%);
  animation:bandDust 1.4s ease-out infinite}
.band-jeep.back{bottom:calc(var(--ground) + 34px);width:min(24vw,240px);--wg-spin:1.15s;opacity:.5;
  animation:driveBy 24s linear infinite 5s;filter:blur(1px) drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.band-jeep.back .wg-puff,.band-jeep.back .wg-led{opacity:.5}
@keyframes driveBy{
  0%{transform:translateX(104vw);opacity:0}
  4%{opacity:1}
  86%{opacity:.96}
  98%{opacity:0}
  100%{transform:translateX(-128vw);opacity:0}}
@keyframes bandDust{0%{opacity:0;transform:translateX(-8px) scale(.85)}35%{opacity:1}100%{opacity:0;transform:translateX(30px) scale(1.18)}}

@media (max-width:1024px){ .drive-band{height:290px} }
@media (max-width:760px){
  .drive-band{--ground:54px;height:220px}
  .band-jeep{width:68vw}
  .band-jeep.back{width:42vw}
  .drive-band .hills{height:74px}
  .hero-art{padding-bottom:12%}
}
@media (prefers-reduced-motion:reduce){
  .band-jeep{animation:none !important;transform:none !important;opacity:1;left:6%}
  .band-jeep.back{left:54%;opacity:.55}
  .band-jeep::after,.wg-puff,.wg-line{animation:none !important;opacity:.22}
  .hero-art svg.wg-jeep,.wg-wh,.wg-body,.dash{animation:none !important;transform:none !important}
}

/* ════════════ الجيب يسير على حدّ الفوتر (كل الصفحات) ════════════ */
.foot-jeep{position:absolute;top:-66px;left:0;width:150px;--wg-spin:1.5s;opacity:.85;pointer-events:none;
  animation:footDrive 26s linear infinite;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.foot-jeep .wg-line,.foot-jeep .wg-smoke{display:none}
@keyframes footDrive{
  0%{transform:translateX(102vw);opacity:0}
  7%{opacity:.85}
  93%{opacity:.85}
  100%{transform:translateX(-170px);opacity:0}}
@media (max-width:760px){ .foot-jeep{width:110px;top:-48px} }