/* Google Fonts loaded ONLY in HTML <link> — no duplicate @import here */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --red:#D0001F;--dark-red:#9B0017;--light-red:#FF1A35;
  --white:#fff;--off-white:#FFF5F5;--gray:#555;
}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--white);color:#222;overflow-x:hidden;}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s ease;}
#loader.hide{opacity:0;pointer-events:none;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:0;}
.loader-text{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(2.5rem,8vw,5rem);font-weight:900;color:var(--red);text-align:center;letter-spacing:2px;}
.loader-bar-wrap{width:180px;height:5px;background:#f0d0d0;border-radius:99px;margin-top:20px;overflow:hidden;}
.loader-bar{height:100%;width:0%;background:var(--red);border-radius:99px;animation:loadprogress 1.6s ease forwards;}
@keyframes loadprogress{0%{width:0%;}60%{width:75%;}100%{width:100%;}}

/* ── NAV ── */
nav{position:fixed;top:0;width:100%;z-index:100;padding:14px 5%;display:flex;align-items:center;justify-content:space-between;transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,box-shadow .4s ease;}
/* ── Glass state (on hero) ── */
nav.glass{background:rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:none;}
nav.glass .logo{color:#fff;}
nav.glass .nav-links a{color:#fff;font-weight:700;}
nav.glass .nav-links a:hover{color:#ffcccc;}
nav.glass .hamburger{color:#fff;}
/* Home link white glow so it stands out */
nav.glass .nav-links a[href="#home"]{text-shadow:0 0 10px rgba(255,255,255,0.9),0 0 22px rgba(255,255,255,0.4);}
/* ── Solid white state (scrolled down) ── */
nav.solid{background:#fff;border-bottom:3px solid var(--red);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 2px 12px #d0001f22;}
nav.solid .logo{color:var(--red);}
nav.solid .nav-links a{color:#222;}
nav.solid .nav-links a:hover{color:var(--red);}
nav.solid .hamburger{color:var(--red);}
.logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:1.8rem;font-weight:900;letter-spacing:1px;transition:color .4s;}
.nav-links{list-style:none;display:flex;gap:28px;}
.nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;transition:color .2s;}
.hamburger{display:none;font-size:1.6rem;cursor:pointer;}

/* ── HERO ── */
.hero{min-height:100vh;background:linear-gradient(135deg,var(--red) 0%,var(--dark-red) 60%,#600010 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 5% 60px;position:relative;overflow:hidden;}

.hero-content{position:relative;z-index:2;}
/* ── DOT CANVAS ── */
#dotCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}


.hero-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(3rem,10vw,7rem);font-weight:900;color:#fff;text-shadow:0 4px 20px #0005;line-height:1.1;margin-bottom:16px;}
.hero-sub{color:#ffcccc;font-size:clamp(1rem,2.5vw,1.3rem);max-width:540px;margin:0 auto 32px;font-weight:300;}
.btn{display:inline-block;background:#fff;color:var(--red);font-weight:700;padding:14px 36px;border-radius:50px;text-decoration:none;font-size:1rem;transition:all .3s;box-shadow:0 4px 20px #0003;}
.btn:hover{background:var(--off-white);transform:translateY(-2px);box-shadow:0 8px 30px #0004;}
.hero-badge{display:flex;gap:16px;margin-top:48px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2;}
.hero-badge span{background:#ffffff22;border:1px solid #ffffff55;color:#fff;padding:8px 22px;border-radius:50px;font-size:.9rem;font-weight:600;backdrop-filter:blur(6px);}

/* ── SECTIONS ── */
.section{padding:80px 5%;}
.bg-light{background:var(--off-white);}
.bg-red{background:linear-gradient(135deg,var(--red),var(--dark-red));}
.section-title{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;color:var(--red);text-align:center;margin-bottom:10px;}
.section-title.left{text-align:left;}
.section-title.white{color:#fff;}
.section-sub{text-align:center;color:var(--gray);margin-bottom:50px;font-size:1rem;}
.section-sub.white{color:#ffcccc;}

/* ── INFINITE CAROUSEL ── */
.carousel-viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.carousel-viewport.dragging {
  cursor: grabbing;
}
.carousel-track {
  display: flex;
  will-change: transform;
}

/* Each slide shows ~3 cards on desktop, 1.4 on mobile — no padding gap */
.slide {
  flex: 0 0 33.333%;
  padding: 0;          /* ← removed gap between cards */
  box-sizing: border-box;
}

.brand-card {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  background-image: linear-gradient(135deg, var(--dark-red), #1a1a2e);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

/* Zoom via a child div that carries the bg-image — avoids inherit flicker */
.brand-card-bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-image: inherit;
  z-index: 0;
  animation: cardZoom 6s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cardZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}

.brand-overlay {
  position: relative;
  z-index: 2;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.0) 100%);
  padding: 24px 20px 24px;
  color: #fff;
}
.brand-name-label {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 4px;
  letter-spacing: .5px;
}
.brand-desc {font-size: .82rem; opacity: .88; line-height: 1.5;}

/* ── CATEGORIES ── */
.categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;max-width:1100px;margin:0 auto;}
@media(max-width:900px){.categories-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.categories-grid{grid-template-columns:repeat(2,1fr);}}
.cat-card{background:#fff;border:2px solid #f0d0d0;border-radius:16px;padding:30px 16px;text-align:center;transition:all .3s;cursor:default;}
.cat-card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 8px 24px #d0001f20;}
.cat-icon{font-size:2.5rem;margin-bottom:10px;}
.cat-name{font-weight:600;font-size:.95rem;color:#333;}

/* ── ABOUT ── */
.about-wrapper{display:flex;gap:60px;align-items:center;max-width:960px;margin:0 auto;flex-wrap:wrap;}
.about-text{flex:1;min-width:280px;}
.about-text p{color:var(--gray);line-height:1.8;margin-bottom:16px;}
.about-stats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap;}
.stat{text-align:center;}
.stat-num{display:block;font-size:2rem;font-weight:700;color:var(--red);}
.stat-label{font-size:.85rem;color:var(--gray);}
.about-visual{flex:0 0 240px;display:flex;justify-content:center;}
.store-badge{background:linear-gradient(135deg,var(--red),var(--dark-red));border-radius:20px;padding:40px 30px;text-align:center;color:#fff;box-shadow:0 12px 40px #d0001f40;}
.store-badge-logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:2.2rem;font-weight:900;margin-bottom:8px;}
.store-badge-tag{font-size:.9rem;opacity:.8;}

/* ── CONTACT ── */
.contact-cards{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.contact-card{background:#ffffff22;border:1px solid #ffffff44;border-radius:16px;padding:28px 30px;text-align:center;color:#fff;min-width:200px;backdrop-filter:blur(6px);}
.contact-icon{font-size:2rem;margin-bottom:8px;}
.contact-label{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;opacity:.8;margin-bottom:6px;}
.contact-val{font-size:.95rem;line-height:1.6;}
.contact-val a{color:#fff;text-decoration:none;font-weight:600;}
.map-container{max-width:800px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #0004;}

/* ── FOOTER ── */
footer{background:#111;color:#aaa;text-align:center;padding:36px 5%;}
.footer-logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:1.8rem;color:var(--red);font-weight:900;margin-bottom:10px;}
footer p{font-size:.9rem;margin-bottom:4px;}
.footer-copy{margin-top:16px;font-size:.8rem;color:#555;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .slide{ flex: 0 0 50%; }   /* 2 cards on tablet */
}
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;padding:20px 5%;gap:14px;z-index:150;}
  .nav-links.open{display:flex;}

  /* Glass dropdown — on hero (nav.glass) */
  nav.glass .nav-links.open{background:rgba(180,0,20,0.40);backdrop-filter:blur(60px) saturate(2.5) brightness(0.85);-webkit-backdrop-filter:blur(60px) saturate(2.5) brightness(0.85);border-top:1px solid rgba(255,255,255,0.30);border-bottom:1px solid rgba(255,255,255,0.20);box-shadow:0 12px 40px rgba(0,0,0,0.15);z-index:200;}
  nav.glass .nav-links.open a{color:#fff !important;font-weight:700 !important;text-shadow:0 1px 6px rgba(0,0,0,0.3) !important;}
  nav.glass .nav-links.open a:hover{color:#ffcccc !important;}

  /* Solid dropdown — scrolled (nav.solid) */
  nav.solid .nav-links.open{background:#fff;border-bottom:2px solid var(--red);box-shadow:0 8px 20px #0002;backdrop-filter:none;-webkit-backdrop-filter:none;}
  nav.solid .nav-links.open a{color:#222 !important;font-weight:600 !important;text-shadow:none !important;}
  nav.solid .nav-links.open a:hover{color:var(--red) !important;}

  .hamburger{display:block;}
  .about-visual{flex:0 0 100%;}
  .store-badge{width:100%;}
  .slide{ flex: 0 0 72%; }
  .brand-card{aspect-ratio:1 / 1;height:auto;}
}