:root{--c:#00FFFF;--m:#FF00FF;--b:#000;--d:#0a0a0a;--g:#1a1a1a;--lg:#2a2a2a;--w:#fff}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{background:var(--b);color:var(--w);font-family:'Montserrat',sans-serif;line-height:1.6;overflow-x:hidden}
a{color:var(--c);text-decoration:none;transition:.3s}
a:hover{color:var(--m)}
/* Layout containers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem;width:100%}
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.section{padding:6rem 0}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;text-transform:uppercase;text-align:center;margin-bottom:2rem}
.section-title span{background:linear-gradient(135deg,var(--c),var(--m));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.text-center{text-align:center}
/* Buttons */
.btn{display:inline-block;padding:1rem 2.5rem;border:2px solid var(--c);color:var(--c);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.2em;cursor:pointer;transition:.3s}
.btn:hover{background:var(--c);color:var(--b);box-shadow:0 0 30px rgba(0,255,255,.5)}
.btn-primary{background:var(--c);color:var(--b)}
.btn-secondary{border-color:var(--w);color:var(--w)}
.btn-secondary:hover{background:var(--w)}
.btn-large{padding:1.25rem 3rem}
/* Features */
.features{background:var(--d);padding:4rem 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.feature-card{text-align:center;padding:2rem;background:var(--g);border-radius:12px;border:1px solid var(--lg)}
.feature-icon{font-size:3rem;margin-bottom:1rem}
.feature-card h3{font-size:1.25rem;margin-bottom:.5rem}
.feature-card p{color:#888}
/* Responsive helpers */
img, video, iframe { max-width:100%; height:auto; display:block }
.product-card img { max-width:100%; height:auto }
/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 1rem;background:linear-gradient(135deg,#0a0e27 0%,#111a3a 100%);position:relative}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(0,168,255,0.06),transparent 30%),radial-gradient(circle at 80% 80%,rgba(61,184,255,0.04),transparent 30%);pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:1200px;width:100%;padding:2rem}
.hero-badge{display:inline-block;padding:.5rem 1.5rem;border-radius:40px;background:var(--c);color:var(--b);font-weight:800;margin-bottom:1rem}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:800;text-transform:uppercase;line-height:1;margin:0;background:linear-gradient(135deg,var(--c),var(--m));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:clamp(1rem,2.2vw,1.25rem);margin:1rem 0 1.5rem}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* Navigation responsive */
.navbar{position:relative}
.nav-container{display:flex;align-items:center;justify-content:space-between}
.nav-menu{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-menu li a{color:var(--w);font-weight:600}
.hamburger{display:none}
/* Layout that adapts */
.row{display:flex;flex-wrap:wrap;gap:1rem}
.col{flex:1 1 0}
/* Utility spacing */
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
/* Ensure footer sticks at bottom when content short */
.site-wrapper{min-height:100%;display:flex;flex-direction:column}
.site-content{flex:1}
/* Accessibility: focus outlines */
:focus{outline:2px dashed var(--c);outline-offset:3px}
/* Responsive grid helpers for shop */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.product-card{background:#111;padding:1rem;border-radius:10px}
/* Cart and checkout responsive */
.cart-section,.checkout-section{padding:2rem 1rem}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr}}
/* Small screens */
@media (max-width:900px){
  .container{padding:0 0.75rem}
  .nav-menu{display:flex;flex-direction:row;gap:0.75rem}
  .section{padding:3rem 0}
  .hero-title{font-size:clamp(2rem,8vw,3.5rem)}
  .btn{padding:.9rem 1.6rem}
  .products-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
/* Very small screens - mobile */
@media (max-width:600px){
  .nav-menu{display:none}
  .hamburger{display:flex}
  .section{padding:2rem 0}
  .section-title{font-size:clamp(1.25rem,6vw,2rem)}
  .features{padding:2rem 0}
  .hero{padding:3rem 0}
  .hero-content{padding:1rem}
  .hero-subtitle{margin:0.75rem 0 1rem}
}

/* ===== Additional rules to force hero and sections to be truly full-bleed and remove inner boxed background on mobile ===== */
/* Make navbar full-width edge-to-edge */
.navbar{width:100vw;left:50%;margin-left:-50vw;margin-right:-50vw;position:relative}

/* Force hero to be full-bleed */
.hero{width:100vw;left:50%;margin-left:-50vw;margin-right:-50vw;padding-top:calc(var(--vh,1vh)*6);padding-bottom:calc(var(--vh,1vh)*6);}

/* Ensure hero inner container doesn't constrain width on small screens */
.hero .container, .hero .hero-content{max-width:100%;width:100%;padding-left:1rem;padding-right:1rem}

/* If any inner box is present (some templates wrap hero content in a card), make it transparent and full width on mobile */
.hero .card, .hero .hero-box, .hero .hero-panel { background: transparent !important; box-shadow: none !important; border: none !important; width:100% !important }

/* Place hero background media behind content and make it cover */
.hero .hero-media, .hero .main-image { position: absolute; inset: 0; width:100%; height:100%; z-index:1 }
.hero .hero-media img, .hero .main-image img { width:100%; height:100%; object-fit:cover; display:block }

/* On very small screens reduce side padding to make content fill more space */
@media (max-width:420px){
  .hero{padding-left:0.5rem;padding-right:0.5rem}
  .hero-content{padding-left:0.5rem;padding-right:0.5rem}
  .nav-container{padding-left:0.75rem;padding-right:0.75rem}
}

/* Safety: remove any horizontal overflow */
html,body{overflow-x:hidden}

/* ===== Gentle color overrides for hero "New Drop" badge and Shop Now button to avoid bright/neon colors ===== */
.hero-badge{
  background:#214a56 !important; /* muted teal */
  color:#e6f7f7 !important;
  box-shadow:none !important;
}

/* Shop Now button inside hero: use a muted gradient */
.hero .btn-primary{
  background:linear-gradient(135deg,#2a6f74,#4a7f8f) !important;
  color:#f1fbfb !important;
  border-color:transparent !important;
}

.hero .btn-primary:hover{
  filter:brightness(1.03) !important;
  background:linear-gradient(135deg,#377f84,#5b93a0) !important;
}

/* Tone down hero title gradient to be less neon */
.hero-title{
  background:linear-gradient(135deg,#6aa3b1,#7d6fa8) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* Make hero buttons outlines/subtle so they don't appear too bright */
.hero .btn{
  border-color:rgba(255,255,255,0.12) !important;
}