/* ============================================================
   HOME PAGE — layout unique to the homepage only.
   Cards, grids, nav, footer, cart all come from theme.css.
   ============================================================ */

.hero{
  position:relative; padding:40px 0 56px; overflow:visible; isolation:isolate;
}
/* Ambient glow: lives in an oversized pseudo-element that bleeds past the
   section on all sides and is masked to fade fully to alpha 0, so no straight
   cut-off edge is ever visible. No blur filters (perf). */
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; transform:translateX(-50%); width:100vw; max-width:none;
  top:-340px; bottom:-300px;
  background:
    radial-gradient(1100px 720px at 78% 34%, rgba(0,229,255,0.16), rgba(0,229,255,0) 72%),
    radial-gradient(1000px 720px at 18% 76%, rgba(255,45,120,0.14), rgba(255,45,120,0) 72%),
    radial-gradient(900px 600px at 50% 8%, rgba(198,255,61,0.08), rgba(198,255,61,0) 74%);
  -webkit-mask-image:radial-gradient(72% 88% at 50% 34%, #000 20%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(72% 88% at 50% 34%, #000 20%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0) 100%);

}
.hero > *{position:relative; z-index:1;}

.hero-inner{
  background:linear-gradient(120deg, #12151f 0%, #171b28 100%);
  border:1.5px solid var(--border);
  border-radius:var(--radius-xl);
  padding:56px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  position:relative; overflow:hidden;
}
.hero-inner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(400px 300px at 100% 0%, rgba(0,229,255,0.16), transparent 60%),
    radial-gradient(350px 300px at 0% 100%, rgba(255,45,120,0.14), transparent 60%);
  pointer-events:none;
}
.hero-text{position:relative; max-width:560px;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(198,255,61,0.10); color:var(--lime);
  font-weight:800; font-size:13px; padding:7px 14px; border-radius:999px;
  margin-bottom:18px;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--lime);}
.hero h1{font-size:42px; font-weight:900; line-height:1.28; margin-bottom:16px;}
.hero h1 span{
  background:linear-gradient(90deg, var(--cyan), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{color:var(--gray); font-size:15.5px; max-width:440px; margin-bottom:28px;}
.hero-ctas{display:flex; gap:12px;}

.hero-visual{position:relative; flex-shrink:0; width:260px; height:260px; display:flex; align-items:center; justify-content:center;}
.orb{
  position:absolute; width:230px; height:230px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--cyan), var(--pink), var(--lime), var(--cyan));
  filter:blur(2px); opacity:0.85; animation:spin 14s linear infinite;
}
.orb-core{
  position:relative; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1a1e2a, #0a0c12 75%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 40px rgba(0,229,255,0.25);
}
.orb-core svg{width:90px; height:90px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* big category quick-links (home only — top-level categories) */
.cat-grid-big{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cat-card-big{
  background:linear-gradient(160deg, var(--card) 0%, #10131c 100%);
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 24px; cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  display:flex; flex-direction:column; gap:20px;
  position:relative; overflow:hidden;
}
.cat-card-big::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(260px 180px at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events:none;
}
.cat-card-big::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:0; transition:opacity .25s var(--ease);
}
.cat-card-big:hover{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  transform:translateY(-6px);
  box-shadow:0 16px 40px -12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cat-card-big:hover::before{opacity:1;}
.cat-card-big:hover::after{opacity:1;}

.cat-card-big .ccb-top{position:relative; width:60px; height:60px;}
.cat-card-big .cat-ic{
  width:60px; height:60px; font-size:27px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.cat-card-big .ccb-glow{
  position:absolute; inset:0; border-radius:16px; filter:blur(16px); opacity:0.35; z-index:0;
}

/* Custom "creative suite" icon grid for the Design/Apps category —
   evokes a set of creative tools without copying any specific brand. */
.app-icon-grid{
  position:relative; z-index:1; width:60px; height:60px; border-radius:16px;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px;
  padding:5px; background:#0d0f16; border:1px solid var(--border);
}
.app-icon-grid span{
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Tajawal',sans-serif; font-weight:900; font-size:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}

.cat-card-big .cname-modern{
  font-family:'Tajawal',sans-serif; font-weight:900; font-size:20px; letter-spacing:.2px;
  color:var(--white);
}
.cat-card-big .cdesc{font-size:12.5px; color:var(--gray); margin-top:6px; line-height:1.6;}
.cat-card-big .carrow{
  margin-top:auto; font-size:13px; font-weight:800; color:var(--accent);
  display:flex; align-items:center; gap:6px;
}
.cat-card-big .arrow-ic{transition:transform .25s var(--ease);}
.cat-card-big:hover .arrow-ic{transform:translateX(-4px);}

@media(max-width:900px){
  .hero-inner{flex-direction:column; text-align:center; padding:40px 28px;}
  .hero-text{max-width:100%;}
  .hero-ctas{justify-content:center;}
  .cat-grid-big{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .cat-grid-big{grid-template-columns:1fr;}
}

/* Featured products — always a single row; horizontal drag/scroll keeps it
   one row at every viewport width. Native scrollbar hidden, arrows instead. */
.car-row{position:relative;}
.car-row .car-scroller{scrollbar-width:none; -ms-overflow-style:none; cursor:grab;}
.car-row .car-scroller::-webkit-scrollbar{display:none; height:0;}
.car-row .car-scroller.is-drag{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.car-row .car-scroller.is-drag a, .car-row .car-scroller.is-drag img{-webkit-user-drag:none;}
.car-nav{
  position:absolute; top:calc(50% - 18px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; z-index:4; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); background:rgba(12,15,22,.72);
  border:1.5px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  transition:opacity .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.car-nav:hover{
  border-color:rgba(0,229,255,.55); background:rgba(0,229,255,.14);
  transform:translateY(-50%) scale(1.06);
}
.car-nav:disabled{opacity:0; pointer-events:none;}
.car-prev{inset-inline-start:-10px;}
.car-next{inset-inline-end:-10px;}
html[dir="rtl"] .car-nav svg{transform:scaleX(-1);}
/* Mobile: keep the arrows visible (smaller, tucked inside the edges) so it's
   obvious the row can be swiped/dragged. */
@media(max-width:820px){
  .car-nav{width:36px; height:36px; background:rgba(12,15,22,.82);}
  .car-prev{inset-inline-start:2px;}
  .car-next{inset-inline-end:2px;}
  .car-nav svg{width:17px; height:17px;}
}

.featured-grid{
  --gx-peek:26px;
  --gx-fade:56px;
  display:flex; gap:20px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x mandatory; scroll-padding-inline-start:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.featured-grid .prod-card{
  flex:0 0 calc((100% - 3 * 20px - var(--gx-peek)) / 4);
  scroll-snap-align:start;
}
html[dir="rtl"] .featured-grid{
  -webkit-mask-image:linear-gradient(to left, #000 calc(100% - var(--gx-fade)), transparent 100%);
  mask-image:linear-gradient(to left, #000 calc(100% - var(--gx-fade)), transparent 100%);
}
html[dir="ltr"] .featured-grid{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--gx-fade)), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - var(--gx-fade)), transparent 100%);
}
@media(max-width:1100px){
  .featured-grid .prod-card{flex:0 0 calc((100% - 2 * 20px - var(--gx-peek)) / 3);}
}
@media(max-width:820px){
  .featured-grid .prod-card{flex:0 0 calc((100% - 20px - var(--gx-peek)) / 2);}
}
@media(max-width:560px){
  .featured-grid{--gx-peek:0px; --gx-fade:34px; gap:12px; scroll-snap-type:none;}
  /* 2.5 cards visible so it's obvious the row scrolls */
  .featured-grid .prod-card{flex:0 0 calc((100% - 2 * 12px) / 2.5);}
  /* compact cards on phones */
  .featured-grid .prod-thumb{height:96px; font-size:34px;}
  .featured-grid .prod-body{padding:10px 10px 12px; gap:7px;}
  .featured-grid .prod-name{font-size:12px;}
  .featured-grid .prod-stars{font-size:10.5px;}
  .featured-grid .prod-old{font-size:10.5px; white-space:nowrap;}
  .featured-grid .prod-new{font-size:14px; white-space:nowrap;}
  .featured-grid .prod-prices{gap:6px; flex-wrap:wrap;}
  .featured-grid .add-cart-btn{padding:8px; font-size:11.5px; gap:5px; border-radius:9px;}
  .featured-grid .add-cart-btn svg{width:14px; height:14px;}
  .featured-grid .discount-badge{top:7px; inset-inline-end:7px; font-size:10px; padding:3px 7px;}
  .featured-grid .tag-badge{top:7px; inset-inline-start:7px; font-size:9.5px; padding:3px 7px;}
}


/* ---------- TESTIMONIALS ---------- */
.testi-grid{
  display:flex; gap:18px; overflow-x:auto; padding-bottom:14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,229,255,0.45) rgba(255,255,255,0.06);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.testi-grid::-webkit-scrollbar{height:7px;}
.testi-grid::-webkit-scrollbar-thumb{background:rgba(0,229,255,0.45); border-radius:99px;}
.testi-grid::-webkit-scrollbar-thumb:hover{background:rgba(0,229,255,0.7);}
.testi-grid::-webkit-scrollbar-track{background:rgba(255,255,255,0.06); border-radius:99px;}
.testi-card{
  flex:0 0 calc(33.333% - 12px); min-width:280px;
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 20px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.testi-card:hover{
  border-color:rgba(0,229,255,0.35);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(0,229,255,0.35);
}
.testi-top{display:flex; align-items:center; gap:12px; min-width:0;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal',sans-serif; font-weight:900; font-size:15px; color:#05060a;
}
.testi-name{font-weight:800; font-size:13.5px;}
.testi-stars{color:var(--lime); font-size:13px; letter-spacing:2px;}
.testi-quote{font-size:13px; color:var(--gray); line-height:1.6;}

@media(max-width:900px){
  .testi-card{flex:0 0 260px; min-width:0;}
}
@media(max-width:560px){
  .hero{padding:24px 0 32px;}
  .hero-inner{padding:28px 20px; gap:22px;}
  .hero h1{font-size:28px;}
  .hero p{font-size:14px;}
  .hero-visual{width:180px; height:180px;}
  .orb{width:170px; height:170px;}
  .orb-core{width:140px; height:140px;}
  .orb-core svg{width:66px; height:66px;}
  .testi-card{flex:0 0 240px; padding:18px 16px;}
  .testi-name{font-size:13px;}
  .testi-quote{font-size:12.5px;}
}


/* ============================================================
   HERO CAROUSEL (Instagram-style) — slide 1 store, slide 2 games
   ============================================================ */
.hero-car{position:relative; overflow:hidden; border-radius:var(--radius-xl); cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.hero-car.is-dragging{cursor:grabbing;}
[dir="rtl"] .hero-car{--gx-dir:-1;}
[dir="ltr"] .hero-car{--gx-dir:1;}
.hero-car-track{
  display:flex; width:100%; align-items:stretch;
  transition:transform .55s cubic-bezier(.22,.8,.24,1);
  will-change:transform;
}
.hero-car.is-dragging .hero-car-track{transition:none;}
/* both slides share the exact same box so switching never resizes/jumps */
.hero-car-slide{flex:0 0 100%; min-width:100%; display:flex;}
.hero-car-slide > *{flex:1 1 auto; width:100%; min-height:100%; border-radius:var(--radius-xl);}
.hero-car .hero-inner{margin:0; height:auto;}
.hero-car img, .hero-car a{-webkit-user-drag:none;}


.hero-car-dots{
  position:absolute; bottom:14px; inset-inline:0; transform:none;
  display:flex; justify-content:center; gap:8px; z-index:3;
}
.hcd{
  width:8px; height:8px; border-radius:999px; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.28); transition:all .3s var(--ease);
}
.hcd.on{width:26px; background:linear-gradient(90deg,var(--cyan),var(--lime));}

/* --- games slide --- */
.hero-games{
  text-decoration:none; color:inherit; display:flex; cursor:pointer;
  background:linear-gradient(120deg,#0b1020 0%,#141026 55%,#1b0f1f 100%);
  position:relative;
}
.hero-games::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 320px at 12% 0%, rgba(0,229,255,.20), transparent 65%),
    radial-gradient(420px 340px at 92% 100%, rgba(198,255,61,.14), transparent 65%),
    radial-gradient(380px 300px at 70% 0%, rgba(255,45,120,.16), transparent 65%);
}
.hg-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.hg-text{position:relative; z-index:2;}
.hg-badge{background:rgba(255,45,120,.12); color:var(--pink);}
.hg-badge .dot{background:var(--pink);}
.hg-title{font-size:38px; font-weight:900; line-height:1.3; margin-bottom:14px;}
.hg-title span{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hg-sub{color:var(--gray); font-size:15px; max-width:430px; margin-bottom:26px;}
.hg-cta{box-shadow:0 12px 34px -14px rgba(0,229,255,.75);}
.hero-games:hover .hg-cta{transform:translateY(-2px);}
.hg-meta{align-self:center; font-size:12.5px; font-weight:800; color:var(--gray);}

.hg-visual{position:relative; z-index:2;}
.hg-ring{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:conic-gradient(from 90deg,var(--pink),var(--cyan),var(--lime),var(--pink));
  filter:blur(1px); opacity:.9; animation:spin 16s linear infinite;
}
.hg-pad{
  position:relative; width:184px; height:184px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#181c2b,#080a11 75%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 44px rgba(255,45,120,.22);
  transition:transform .35s var(--ease);
}
.hero-games:hover .hg-pad{transform:scale(1.04);}
.hg-pad svg{width:104px;}
.hg-chip{
  position:absolute; font-size:11px; font-weight:900; letter-spacing:.5px;
  padding:6px 12px; border-radius:999px; background:rgba(10,12,18,.85);
  border:1px solid rgba(255,255,255,.12); color:var(--white);
  animation:hgfloat 4.5s ease-in-out infinite;
}
.hg-chip-1{top:8px; inset-inline-end:0; color:var(--cyan); border-color:rgba(0,229,255,.4);}
.hg-chip-2{bottom:12px; inset-inline-start:0; color:var(--lime); border-color:rgba(198,255,61,.4); animation-delay:1.4s;}
@keyframes hgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media(max-width:900px){
  .hg-title{font-size:26px;}
  .hg-sub{font-size:13.5px;}
  .hg-ring{width:160px; height:160px;}
  .hg-pad{width:134px; height:134px;}
  .hg-pad svg{width:78px;}
  .hero-car-dots{bottom:10px;}
}

/* --- flying arcade bits (tetris + flappy bird) --- */
.hg-arcade{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.hg-tet{
  position:absolute; width:18px; height:18px; border-radius:4px; opacity:.75;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
  animation:hg-fall linear infinite;
}
.hg-tet::after{content:""; position:absolute; width:18px; height:18px; border-radius:4px; background:inherit; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);}
.hg-tet.t1{left:8%;  background:var(--cyan);  animation-duration:9s;  animation-delay:0s;}
.hg-tet.t1::after{top:18px;}
.hg-tet.t2{left:26%; background:var(--pink);  animation-duration:12s; animation-delay:1.6s;}
.hg-tet.t2::after{left:18px;}
.hg-tet.t3{left:52%; background:var(--lime);  animation-duration:10.5s; animation-delay:3.2s;}
.hg-tet.t3::after{top:18px; left:18px;}
.hg-tet.t4{left:74%; background:#ffd54a;      animation-duration:13s; animation-delay:.8s;}
.hg-tet.t4::after{left:-18px;}
.hg-tet.t5{left:90%; background:#8b5cf6;      animation-duration:11s; animation-delay:4.4s;}
.hg-tet.t5::after{top:18px;}
@keyframes hg-fall{
  0%{transform:translateY(-70px) rotate(0deg); opacity:0;}
  12%{opacity:.75;}
  90%{opacity:.35;}
  100%{transform:translateY(420px) rotate(320deg); opacity:0;}
}
.hg-bird{position:absolute; top:38%; width:34px; animation:hg-fly 11s linear infinite;}
.hg-bird svg{width:100%; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); animation:hg-flap 1.1s ease-in-out infinite;}
@keyframes hg-fly{
  0%{transform:translate(-60px,0) ; opacity:0;}
  8%{opacity:1;}
  25%{transform:translate(28vw,-42px);}
  50%{transform:translate(52vw,26px);}
  75%{transform:translate(78vw,-30px);}
  95%{opacity:1;}
  100%{transform:translate(108vw,10px); opacity:0;}
}
@keyframes hg-flap{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(5deg)}}
.hg-pix{position:absolute; width:6px; height:6px; border-radius:2px; background:var(--cyan); opacity:.6; animation:hgfloat 5s ease-in-out infinite;}
.hg-pix.p1{top:20%; left:40%; background:var(--pink);}
.hg-pix.p2{top:70%; left:18%; background:var(--lime); animation-delay:1.2s;}
.hg-pix.p3{top:32%; left:82%; animation-delay:2.1s;}
.hg-chip-3{top:52%; inset-inline-end:-6px; color:var(--pink); border-color:rgba(255,45,120,.4); animation-delay:.7s;}
@media(max-width:900px){
  .hg-tet{width:13px; height:13px;}
  .hg-bird{width:26px;}
}
@media (prefers-reduced-motion:reduce){
  .hg-tet,.hg-bird,.hg-bird svg,.hg-pix{animation:none; opacity:.35;}
}