/* =========================
  CopyRight For Cosmos Store
   ========================= */
   
* { box-sizing: border-box; }

:root {
  --wrapW: min(1200px, 92vw);
  --bg:#000000;
  --bg-deep:#000000;
  --card:#12161b;
  --txt:#eaeef5;
  --muted:#a9b1bb;
  --accent:#4f8cff;
  --neon:#85c441;

  /*----- moon rotation -----*/
  --moon-size: min(400px, 140vh);
  --moon-shift: calc(var(--moon-size) * .45);
  --moon-rot-speed: 60s;

  /*----- moon footer -----*/
  --moon-surface-gap: -606px;    
  --moon-surface-x: 0px;        
  --moon-surface-y: 0px;      
  --moon-surface-scale: 1;   
  
  --feature-info-gap: 14px;  

  --glow-green-rgb: 0 68 7;    
  --glow-size: 3200px 1400px;  
  --glow-pos: -12% -12%;       
}

html { scroll-behavior: smooth; }

body{
  margin:0;
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
  background:
    /* big green glow from top-left */
    radial-gradient(var(--glow-size) at var(--glow-pos),
      rgb(var(--glow-green-rgb) / .72) 0%,
      rgb(var(--glow-green-rgb) / .24) 36%,
      rgb(0 0 0 / 0) 64%
    ) fixed,
    /* subtle bottom vignette */
    radial-gradient(2200px 1400px at 50% 120%,
      rgb(0 0 0 / .60) 20%,
      rgb(0 0 0 / 0) 60%
    ) fixed,
    var(--bg-deep);
  color:var(--txt);
  overflow-x:hidden;
}

@media (max-width: 700px){
  :root{
    --glow-size: 1700px 1100px;
    --glow-pos: -16% -16%;
  }
}

a{ color:inherit; text-decoration:none; }

/* --------------------------------------------------------------------- */
/* ------------------------ النجوم الي في الخلفية -------------------- */

#starfield{
  position: fixed;
  inset: 0;
  z-index: 0;            
  pointer-events: none;  
}

@media (prefers-reduced-motion: reduce){
  #starfield{ display: none; }
}

/* --------------------------------------------------------------------- */
/* ------------------------------- الناف بار -------------------------- */

.navbar{
  position: fixed; top: 10px; left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 12px;
  background: transparent;
}


.nav-center{
  position: fixed; top: 12px; left: 50%; z-index: 25;
  list-style: none; margin: 0; padding: 6px 10px;
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  opacity: 0;
  transform: translateX(-50%) translateY(-16px);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-center.nav-center--show { opacity:1; transform: translateX(-50%) translateY(0); }
.nav-center.nav-center--hidden{ opacity:0; transform: translateX(-50%) translateY(-16px); pointer-events:none; }

.nav-center li a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:12px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color:#fff; font-weight:600; font-size:14px;
  transition: transform .15s, background-color .15s, opacity .15s;
  opacity:.95;
}
.nav-center li a:hover{ transform:translateY(-1px); background:rgba(0,0,0,.45); opacity:1; }
.nav-center li a.active{ box-shadow: inset 0 0 0 2px var(--accent); }

.nav-links{
  list-style:none; margin:0; padding:6px 8px;
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:18px;
  transform: translateY(-12px);
  opacity:0;
  animation: navIconsIn .5s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
@keyframes navIconsIn{ to{ transform:translateY(0); opacity:1; } }

.nav-links li{ display:flex; }
.nav-links li a{ position:relative; display:inline-flex; align-items:center; justify-content:center; color:#fff; }

.nav-links li:first-child a{
  width:56px; height:40px; border-radius:12px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-links li:first-child a:hover{ transform: translateY(-1px); background:rgba(0,0,0,.45); }

.nav-links li:last-child a{
  width:40px; height:40px; border-radius:999px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-links li:last-child a:hover{ transform: translateY(-1px); background:rgba(0,0,0,.45); }
.nav-links li a i{ font-size:18px; line-height:1; }

#cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; background:var(--accent);
  border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ---------- Mobile ---------- */

.nav-toggle{
  display: none;
  position: fixed; left: 12px; top: 10px;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.brand{
  display: none;
  position: fixed; left: 62px; top: 10px;
  height: 42px; padding: 0 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-weight: 800; letter-spacing:.3px;
  align-items: center; gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand .brand-logo{
  width: 32px; height: 32px; border-radius: 50%;
  background: url("../../images/cosmos-profile.png") center/cover no-repeat;
}

.nav-dropdown{
  position: fixed;
  top: 56px; left: 10px; right: 10px;
  z-index: 48;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  max-height: min(70vh, 540px);
  overflow: auto;

  transform-origin: 14% 0;
  transform: perspective(900px) rotateX(-12deg) translateY(-6px) scale(.98);
  opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.nav-dropdown::before{
  content:"";
  position:absolute; top:-8px; left: 36px;
  width:16px; height:16px;
  background: linear-gradient(180deg, rgba(10,14,22,.95), rgba(10,14,22,.88));
  border-left: 1px solid rgba(255,255,255,.16);
  border-top: 1px solid rgba(255,255,255,.16);
  transform: rotate(45deg); border-radius: 2px;
}
.nav-dropdown.open{
  transform: perspective(900px) rotateX(0) translateY(0) scale(1);
  opacity: 1; pointer-events: auto;
}

.dropdown-links{
  list-style: none; margin: 6px; padding: 6px;
  display: grid; gap: 8px;
}
.dropdown-links li a{
  display: block; padding: 12px 14px; border-radius: 12px;
  color:#fff; font-weight:700;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .15s, background .15s, border-color .15s;
}
.dropdown-links li a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
@keyframes linkDrop{ from{opacity:0; transform: translateY(-8px) scaleY(.96);} to{opacity:1; transform: translateY(0) scaleY(1);} }
.nav-dropdown.open .dropdown-links li{ animation: linkDrop .25s ease both; animation-delay: calc(var(--i,0)*60ms); }


@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; }
  .brand{ display:inline-flex; }
  .nav-center{ display:none !important; }
  .nav-center li a{ height:36px; padding:0 10px; font-size:13px; white-space:nowrap; }
}


@media (prefers-reduced-motion: reduce){
  .nav-links, .nav-center{ animation:none; transform:none; opacity:1; }
  .nav-dropdown{ transition:none; }
  .nav-center li a, .dropdown-links li a{ transition:none; }
}

/* --------------------------------------------------------------------- */
/* ------------------ المنتجات الموجوده في الافضل مبيعا -------------- */

.products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px; padding:20px; max-width:1100px; margin:0 auto 80px; }

.card{ background: var(--card) !important; border:1px solid #1d2330; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; transition:transform .12s, box-shadow .12s; color: #fff !important;}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.card .thumb{ display:grid; place-items:center; aspect-ratio:4/3; background:#0f141a; border-radius:12px; overflow:hidden; padding:10px; }
.card .thumb img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:-webkit-optimize-contrast; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.card h3{ margin:4px 0 0 0; font-size:16px; }
.price{ color:#d7e3ff; }
.card button{ margin-top:auto; background:var(--accent); color:#fff; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:600; }
.card button:hover{ opacity:.95; }

/* --------------------------------------------------------------------- */
/* ---------------------------- الهيرو الفيديو ------------------------ */

.hero {
  position: relative;
  width: var(--wrapW);
  margin: 120px auto 124px;
  aspect-ratio: 16 / 5;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: none;   
  display: grid;
  place-items: center;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;             
  filter: none;            
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}
.hero-inner { z-index: 2; }
.hero::after{content:""; position:absolute; inset:16px; border-radius:24px; border:2px solid rgba(255,255,255,.18); pointer-events:none;}

.hero-title{font-size: clamp(40px, 7vw, 92px); font-weight:800; letter-spacing:2px; line-height:.95;}
.hero-row{margin-top:8px; display:flex; justify-content:center; gap:12px; align-items:center;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 12px var(--neon);}
.hero-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#0f0f10; border:1px solid rgba(255,255,255,.14); font-weight:700;}

/* ===== Smaller hero + side space on mobile ===== */

@media (max-width: 768px){
  .hero{
    width: calc(100% - 32px);     
    margin: 84px auto 54px;       
    aspect-ratio: 16 / 9;        
    border-radius: 20px;
  }
  .hero::after{ inset: 12px; border-radius: 16px; }
}

@media (max-width: 560px){
  .hero{
    width: calc(100% - 24px);    
    margin: 72px auto 42px;
    aspect-ratio: 16 / 6 !important;        
    border-radius: 16px;
  }
  .hero::after{ inset: 10px; border-radius: 14px; }

  .hero-title{ font-size: clamp(24px, 7.5vw, 40px); }
  .hero-row{ gap: 8px; }
  .hero-pill{ padding: 5px 10px; font-weight: 700; }
  .hero-dot{ width: 6px; height: 6px; }
}

@media (max-width: 400px){
  .hero{
    width: calc(100% - 20px);    
    margin: 66px auto 36px;
    aspect-ratio: 16 / 11;
  }
  .hero::after{ inset: 8px; }
}

/* --------------------------------------------------------------------- */
/* ----------------------------- الافضل مبيعا -------------------------- */

.label-center{
  --neon: #27ed79;
  --dark: #050a07;
  display: block;
  width: fit-content;
  margin: 2px auto 16px;
  padding: 6px 14px;
  font: 800 clamp(12px,1.2vw,14px)/1.1 Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(90deg, var(--neon), color-mix(in srgb, var(--neon) 35%, var(--dark) 65%), var(--dark));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(39,237,121,.25), 0 0 2px rgba(39,237,121,.65);
  position: relative;
}
.label-center::after{
  content: "";
  display: block;
  height: 2px;
  width: 120px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(39,237,121,.85), transparent);
  box-shadow: 0 0 12px rgba(39,237,121,.35);
}
.label-center:hover{
  text-shadow: 0 0 22px rgba(39,237,121,.45), 0 0 4px rgba(39,237,121,.75);
}
@supports not (-webkit-background-clip:text){
  .label-center{ color: var(--neon); -webkit-text-fill-color: currentColor; }
}

.best-glass{
  width:var(--wrapW); margin:48px auto 70px; position:relative; padding:26px 20px 30px; border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 32px rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  isolation: isolate; --moon-spin-speed: 60s;
}

.best-slider{
  position:relative; width:100%; border-radius:20px; padding:16px 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow:hidden;
}
.best-viewport{ overflow:hidden; width:100%; }
.best-track{ display:flex; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change:transform; }

/* One slide = one "page" = exactly N cards (JS sets --best-cols) */
.best-page{
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(var(--best-cols, 4), 1fr);
  gap: 16px;
  padding: 6px 0;
}

/* Fallbacks if JS hasn't applied the var yet */
@media (max-width: 992px){
  .best-page{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .best-page{ grid-template-columns: repeat(2, 1fr); }
}

/* Glassy + 3D card (scoped to slider) */
.best-card{
  --tiltX: 0deg; --tiltY: 0deg;
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:14px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateZ(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
  overflow:hidden;
}
.best-card:hover{
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
.best-card::after{
  content:""; position:absolute; top:-50%; left:-120%; width:60%; height:200%;
  transform:skewX(-25deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 100%);
  opacity:0; transition:opacity .25s ease;
}
.best-card:hover::after{ opacity:1; animation:sweep 900ms ease forwards; }
@keyframes sweep{ from{ left:-120%; } to{ left:140%; } }

.best-card .thumb{
  display:grid; place-items:center; aspect-ratio:4/3;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), rgba(0,0,0,.0) 60%), #0f141a;
  border-radius:12px; overflow:hidden; padding:10px;
  border:1px solid rgba(255,255,255,.06);
}
.best-card .thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
  image-rendering:-webkit-optimize-contrast;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
  transform: translateZ(0) scale(1);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.best-card:hover .thumb img{ transform: scale(1.03); }

.best-card h4{ margin:4px 0 0; font-size:16px; font-weight:800; }
.best-card .price{ color:#d7e3ff; font-weight:800; }
.best-card .btn.add-to-cart{
  margin-top:auto;
  background: linear-gradient(180deg, var(--accent,#4f8cff), color-mix(in srgb, var(--accent,#4f8cff) 80%, #000));
  color:#fff; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:700;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.best-card .btn.add-to-cart:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}

/* arrows + dots */
.best-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.35); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
.best-nav:hover{ transform: translateY(-50%) scale(1.05); background: rgba(0,0,0,.45); }
.best-prev{ left:8px; } .best-next{ right:8px; }

.best-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.best-dot{
  width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.35); cursor:pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.best-dot:hover{ transform: scale(1.1); }
.best-dot.active{ background: var(--neon,#27ed79); box-shadow: 0 0 14px var(--neon,#27ed79); }

/* --------------------------------------------------------------------- */
/* ----------------- الشرييط الفاصل و الكوكب المتحرك----------------- */

.tape-wrap{
  position: relative;            
  margin:10px 0 100px;
  --moon-spin-speed: 60s;
}

.tape-wrap::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  top: calc(200% - 220px);
  right:-220px;
  pointer-events:none;
  border-radius:50%;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  animation: moon-rotate-cw var(--moon-spin-speed) linear infinite;
  will-change: transform;
  z-index: 0;
}
@keyframes moon-rotate-cw{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tape-wrap::after{ animation:none; } }

.tape{
  position:relative;
  left:-5vw; width:110vw; height:52px;
  transform: rotate(-6deg);
  display:flex; align-items:center; overflow:hidden;
  background:#fff;
  border-top:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;
}
.tape.alt{ transform: rotate(6deg); }

.tape-track{
  display:flex; gap:40px; white-space:nowrap;
  animation: marquee 14s linear infinite;
  font-weight:900; font-size:24px; color:#0b0b0b; letter-spacing:2px;
}
.tape-track span{display:inline-flex; align-items:center; gap:8px; padding:0 8px; -webkit-text-stroke: 1px #0b0b0b;}
.tape-track .outlined{color:transparent; -webkit-text-stroke:1.5px #0b0b0b;}
@keyframes marquee{from{transform: translateX(0)} to{transform: translateX(-50%)}}

/* --------------------------------------------------------------------- */
/* -------------------------- منتجات التخفيض -------------------------- */

.feature {
  position: relative;
  isolation: isolate;
  width: var(--wrapW);
  margin: 40px auto 70px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}

.pedestal {
  position: relative;
  isolation: isolate;
  width: 300px;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none; 
  z-index: 1;
}
.rock {
  position: absolute;
  bottom: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: auto;
  z-index: 1;
  animation: rockFloat 5s ease-in-out infinite;
}
.rock img { width: 100%; height: auto; display: block; }
@keyframes rockFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-20px); }
}

.product-slider {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  margin-bottom: 20px;
  z-index: 2;
}
.slider-container {
  position: absolute; top: 0; left: 0;
  display: flex; width: 100%; height: 100%;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.slide img {
  max-height: 100%; max-width: 100%;
  object-fit: contain; margin-bottom: 15px;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.65));
}

/* Right column — interactive */
.feature-info{
  display: flex;
  flex-direction: column;
  gap: var(--feature-info-gap, 14px);
}
.feature-info *{ pointer-events:auto; }

.feature-info-content{
  display: flex;
  flex-direction: column;
  gap: var(--feature-info-gap, 14px);
}

@supports not (gap: 1rem){
  .feature-info > * + *{ margin-top: var(--feature-info-gap, 14px); }
  .feature-info-content > * + *{ margin-top: var(--feature-info-gap, 14px); }
}

.feature-info-pill {
  background: #e9e0e0; 
  color: #111; 
  border-radius: 18px; 
  padding: 18px 22px; 
  font-weight: 700; 
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.cta-row{display:flex; gap:16px; flex-wrap:wrap}
.feature-info-buy,
.feature-info-ghost{
  appearance:none; border:none; border-radius:14px;
  padding:14px 18px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.feature-info-buy{ background:var(--neon); color:#0b0b0b; }
.feature-info-buy:hover{ filter:brightness(0.95); }
.feature-info-ghost{ border:1px solid rgba(255,255,255,.22); background:transparent; color:var(--txt); }
.feature-info-ghost:hover{ background: rgba(255,255,255,.08); }

.slider-controls{
  display:flex; justify-content:center; margin-top:10px; gap:8px;
  position: relative; z-index: 11; pointer-events: auto;
}
.slider-dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,0.3); cursor:pointer; transition:background .3s;
}
.slider-dot.active{ background: var(--neon); }

/* --------------------------------------------------------------------- */
/* ------------------------- الكوكب في الفوتر ------------------------- */

.moon-surface{
  position: relative;
  z-index: 0;                          
  width: 100%;
  margin-top: var(--moon-surface-gap); 
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.moon-surface img{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform:
    translate(var(--moon-surface-x), var(--moon-surface-y))
    scale(var(--moon-surface-scale));
  transform-origin: center top;
  filter: contrast(105%) brightness(0.95);
  filter:
    blur(4px)
    contrast(105%) brightness(0.95)
    drop-shadow(0 0 28px rgba(255,255,255,.35))   
    drop-shadow(0 0 90px rgba(255,255,255,.18));
}
.moon-surface::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-40px;
  height:80px;
  pointer-events:none;
}

/* --------------------------------------------------------------------- */
/* -------------------------- معلومات المتجر -------------------------- */

.bottom-cards{            
  position: relative;
  z-index: 5;
  padding-top: 400px;
  width: var(--wrapW);
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.gcard{
  --rim1: #363636;         
  --rim2: #343434;         
  position: relative;
  border-radius: 28px;
  padding: 24px 26px;
  color: #eaf5eb;
  background:
    linear-gradient(180deg, rgba(14, 26, 22, 0.88), rgba(14,18,26,.82)) padding-box,
    linear-gradient(135deg, var(--rim1), var(--rim2) 45%, rgba(255,255,255,0) 70%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 26px 52px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gcard::after{
  content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 180% at 50% -20%, rgba(255,255,255,.12), transparent 60%);
  transform: translateZ(30px);
}
.gc-title{ margin:0 0 10px 0; font-size:22px; font-weight:800; letter-spacing:.3px; transform: translateZ(40px); }
.gc-text{ margin:0; color:#b8c0cc; line-height:1.6; transform: translateZ(26px); }

.contact-list{ list-style:none; margin:8px 0 0 0; padding:0; display:grid; gap:8px; transform: translateZ(26px); }
.contact-list .dot{ display:inline-block; width:16px; text-align:center; margin-inline-end:6px; color:#9fb4ff; }
.contact-list a{ color:#dbe6ff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.2); }
.contact-list a:hover{ border-bottom-color: rgba(255,255,255,.45); }

.gcard:hover{ box-shadow: 0 36px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12); }

@media (max-width: 820px){
  .bottom-cards{ grid-template-columns: 1fr; }
}

/* floating image plate */
.contact-card { padding-top: 56px; }
.gc-image-wrap{
  position: absolute;
  top: -118px;
  left: 80%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  border-radius: 20px;
  display: grid;
  place-items: center;
}
.gc-image{
  width: 176px;
  height: 176px;
  object-fit: contain;
  display: block;
}
.contact-card .gc-title{ margin-top: 6px; }

/* --------------------------------------------------------------------- */
/* --------------------------- ميزات الموقع --------------------------- */

.benefits-bar{
  position: relative;
  z-index: 4;
  width: var(--wrapW);
  margin: 18px auto 10px;
  padding: 0;                
  background: transparent;
  border: 0;
  box-shadow: none;
}


.benefits-list{
  list-style: none;
  margin: 0;
  padding: 8px clamp(14px, 4vw, 24px); 
  display: flex;
  flex-wrap: wrap;                      
  justify-content: center;
  align-items: stretch;
  gap: 10px 12px;                     
  overflow-x: visible;                
}


.benefit{
  min-width: 0;                         
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(10,14,22,.88), rgba(10,14,22,.82));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  flex: 0 1 auto;                      
}

.benefit i{
  font-size: 18px; line-height: 1;
  color: #27ed79;
  filter: drop-shadow(0 0 6px rgba(120,255,149,.45));
}

.b-text{ display:flex; flex-direction:column; line-height:1.15; }
.b-title{ font-weight:800; font-size:13px; color:#eaeef5; }
.b-sub  { font-size:11px; color:#27ed79; opacity:.95; }

.benefit + .benefit::before{ display:none; }

html[dir="rtl"] .b-text{ text-align:right; }


@media (max-width: 1100px){
  .benefit{ flex: 1 1 calc(33% - 12px); }
}


@media (max-width: 680px){
  .benefit{ flex: 1 1 calc(50% - 12px); }
  .benefit{ padding: 8px 10px; }
  .b-title{ font-size:12.5px; }
  .b-sub  { font-size:10.5px; }
}


@media (max-width: 430px){
  .benefits-list{ gap: 8px 8px; padding-inline: clamp(12px, 5vw, 18px); }
  .benefit{ flex: 1 1 calc(50% - 8px); }     
  .b-title{ font-size:12px; }
  .b-sub  { font-size:10px; }
}



/* --------------------------------------------------------------------- */
/* -------------------- Responsive wrappers & tweaks ------------------- */

/* Large tablets / small desktops */
@media (max-width: 1200px){
  :root{ --wrapW: min(1100px, 94vw); }
  .hero{ margin: 108px auto 92px; aspect-ratio: 16/6; border-radius: 24px; }
  .best-glass{ padding:22px 18px 24px; border-radius:24px; }
  .best-slider{ padding:14px 44px; }
  .feature{ gap:26px; }
  .product-slider{ height: 300px; }
  .moon-surface{ --moon-surface-gap: -460px; }
}

/* Tablets */
@media (max-width: 992px){
  :root{ --wrapW: min(940px, 94vw); }
  .hero{ margin: 96px auto 72px; aspect-ratio: 16/7; border-radius: 22px; }
  .best-glass{ margin:36px auto 56px; }
  .best-slider{ padding:12px 28px; }
  .best-nav{ width:38px; height:38px; }
  .tape{ left:-2vw; width:104vw; height:48px; }
  .tape-track{ font-size:22px; }
  .feature{ grid-template-columns: 1fr; gap:22px; }
  .pedestal{ width:auto; min-height: 280px; }
  .product-slider{ height: 260px; }
  .rock{ width:360px; bottom:-180px; }
  .bottom-cards{ padding-inline: 22px; padding-top: 220px; grid-template-columns: 1fr; }

  .gc-image-wrap{ top:-96px; left: 60%; }
  .gc-image{ width:140px; height:140px; }


  .moon-surface{ --moon-surface-gap: -320px; }
}

/* Phones (<=768px) */
@media (max-width: 768px){
  :root{ --wrapW: 94vw; }
  .navbar{ right:10px; top:10px; }
  .nav-links{ padding:6px; gap:6px; }
  .nav-center{ max-width: calc(100% - 110px); }
  .hero{ margin: 86px auto 58px; aspect-ratio: 16/8; border-radius: 18px; }
  .hero::after{ inset:12px; border-radius:16px; }
  .best-glass{ padding:18px 14px 20px; border-radius:18px; }
  .best-slider{ padding:10px 16px; }
  .best-nav{ width:36px; height:36px; }
  .tape{ left:-2vw; width:104vw; height:44px; }
  .tape-track{ font-size:20px; }
  .product-slider{ height: 220px; }
  .rock{ width:300px; bottom:-160px; }

  .feature-info-pill{
    padding: 9px 12px;   
    font-size: 13px;
    border-radius: 14px;
    margin-inline: 28px;
  }

  .cta-row{
    margin-inline: 28px;    
    gap: 10px;
  }

  .bottom-cards{
    padding-inline: 18px;      
    gap: 14px;
  }
  .gcard{
    padding: 16px;             
    border-radius: 16px;
  }
  
  .gc-image-wrap{ top:-260px; left: 80%; transform: translateX(-50%); }
  .gc-image{ width:120px; height:120px; }

  


  .benefit{ min-height: 48px; }
  .moon-surface{ --moon-surface-gap: -220px; }
}

/* Small phones (<=560px) */
@media (max-width: 560px){
  .nav-center{ max-width: calc(100% - 104px); }
  .hero{ margin: 78px auto 44px; aspect-ratio: 16/9; border-radius: 16px; }
  .tape{ left:0; width:100vw; height:40px; }
  .tape-track{ font-size:18px; }
  .rock{ display:none; }
  .product-slider{ height: 200px; }
  .bottom-cards{
    padding-inline: 18px;      
    gap: 14px;
  }
  
  .gcard{
    padding: 16px;              
    border-radius: 16px;
  }


  .moon-surface{ --moon-surface-gap: -160px; }
}

/* Super small (<=400px) */
@media (max-width: 400px){
  .best-glass{ padding:14px 12px 16px; }
  .best-slider{ padding:8px 12px; }
  .gcard{ padding:16px; }
  .feature-info-buy, .feature-info-ghost{ padding:12px 14px; }
}