/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ===========================
   ONEZO — WOW CINEMATIC UI
   =========================== */

:root{
  --bg0:#050508;
  --bg1:#090914;

  --text:#f8f8fb;
  --muted:rgba(255,255,255,0.68);

  --gold:#ffc857;
  --violet:#a878ff;
  --cyan:#4fe6ff;

  --border:rgba(255,255,255,0.10);
  --glass:rgba(255,255,255,0.06);

  --shadow-xl: 0 50px 160px rgba(0,0,0,0.85);
  --shadow-lg: 0 25px 80px rgba(0,0,0,0.60);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 12% 6%, rgba(168,120,255,0.12), transparent 60%),
    radial-gradient(1000px 700px at 88% 14%, rgba(255,200,90,0.10), transparent 60%),
    radial-gradient(900px 600px at 55% 80%, rgba(79,230,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* ✅ This fixes footer coming up */
.site{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.main{
  flex:1 1;               /* pushes footer down */
  width:100%;
}

/* ===========================
   NAVBAR — LUX GLASS
   =========================== */

.topbar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 28px;
  background: rgba(6,6,14,0.72);
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.brand{
  text-decoration:none;
  font-weight:900;
  letter-spacing:1.2px;
  font-size:18px;
  background:linear-gradient(90deg,var(--gold),var(--violet),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav a{
  margin-left:22px;
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
  position:relative;
  transition:all .25s ease;
}
.nav a:hover{ color:#fff; }
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--violet));
  transition:width .35s ease;
}
.nav a:hover::after{ width:100%; }

/* ===========================
   PAGE WRAPPER
   =========================== */

.container{
  width:min(1180px, 92vw);
  margin:0 auto;
  padding:64px 0 90px;
}

/* ===========================
   WOW HOME HERO (NEW)
   =========================== */

.homeHero{
  position:relative;
  border-radius:34px;
  padding:44px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow-xl);
  overflow:hidden;
}

.homeHero::before{
  content:"";
  position:absolute;
  inset:-180px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,200,90,0.20), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(168,120,255,0.20), transparent 55%),
    radial-gradient(circle at 55% 80%, rgba(79,230,255,0.12), transparent 60%);
  filter: blur(70px);
  opacity:0.9;
}

.homeHero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: shine 7s ease-in-out infinite;
  opacity:0.7;
}
@keyframes shine{
  0%{ transform: translateX(-120%); }
  40%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

.heroInner{ position:relative; display:grid; grid-template-columns: 1.2fr 0.8fr; grid-gap:26px; gap:26px; }
@media(max-width:900px){ .heroInner{ grid-template-columns: 1fr; } }

.heroTitle{
  margin:0 0 12px 0;
  font-size:44px;
  font-weight:900;
  line-height:1.05;
  background:linear-gradient(90deg,#fff,var(--gold),var(--violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.heroSub{
  margin:0 0 22px 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  max-width:560px;
}

.ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(255,255,255,0.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ctaPrimary{
  background:linear-gradient(90deg,var(--gold),var(--violet));
  color:#050508;
  border:none;
}
.ctaPrimary:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 70px rgba(168,120,255,0.35);
}

.ctaGhost{
  background: rgba(255,255,255,0.06);
  color:var(--text);
}
.ctaGhost:hover{
  transform:translateY(-3px);
  border-color: rgba(255,255,255,0.26);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
}

.heroRight{
  display:grid;
  grid-gap:12px;
  gap:12px;
}

.feature{
  border-radius:22px;
  padding:18px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  box-shadow: var(--shadow-lg);
  transition: transform .25s ease, border-color .25s ease;
}
.feature:hover{
  transform:translateY(-5px);
  border-color: rgba(255,255,255,0.22);
}

.featureTitle{
  margin:0 0 6px 0;
  font-weight:900;
  letter-spacing:0.3px;
}
.featureDesc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* ===========================
   PRODUCT / CATEGORY CARDS
   =========================== */

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-gap:18px;
  gap:18px;
  margin-top:22px;
}
@media(max-width:950px){ .grid{ grid-template-columns:1fr; } }

.card{
  display:block;
  border-radius:26px;
  padding:24px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--border);
  text-decoration:none;
  box-shadow: var(--shadow-lg);
  position:relative;
  overflow:hidden;
  transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-120%);
  transition: transform .9s ease;
}
.card:hover::before{ transform: translateX(120%); }

.card:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 40px 120px rgba(0,0,0,0.75);
}

.card h2{ margin:0 0 10px 0; font-size:18px; }
.card p{ margin:0; color:var(--muted); font-size:13px; }

.cardMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-top:12px;
}

.cardTitleClamp{
  flex:1 1;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
}

.cardPrice{
  white-space:nowrap;
  font-weight:900;
  background:linear-gradient(90deg,var(--gold),var(--violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===========================
   FORMS
   =========================== */

input, textarea, select{
  width:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.30);
  color:#fff;
  outline:none;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.45); }
input:focus, textarea:focus, select:focus{
  border-color: rgba(168,120,255,0.65);
  box-shadow: 0 0 0 3px rgba(168,120,255,0.18);
}

/* ===========================
   FOOTER (ALWAYS BOTTOM)
   =========================== */

.footer{
  margin-top:auto; /* ✅ critical */
  border-top:1px solid var(--border);
  padding:26px 28px;
  background: rgba(6,6,14,0.70);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}

.footerLinks a{
  color:var(--muted);
  text-decoration:none;
  margin-right:18px;
  font-size:13px;
}
.footerLinks a:hover{ color:#fff; }

.muted{ color:var(--muted); }