/* --------------------------------------------------
   GLOBAL RESET
-------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(135deg, #000000 0%, #660000 100%, #ea1615 95%, #ea1615 100%);
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
  padding: 1rem; /* Mobile-first spacing */
  scroll-behavior: smooth;
}


/* --------------------------------------------------
   FLUID TYPOGRAPHY
-------------------------------------------------- */
h1, .hero-text h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h2, .section-title {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
}

h3 {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
}

p {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
}

.btn {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
}

/* --------------------------------------------------
   CONTAINERS
-------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}

.section {
  padding: 3rem 0;
  scroll-margin-top: 80px;

}

/* --------------------------------------------------
   GLASS EFFECTS
-------------------------------------------------- */
/* --------------------------------------------------
   GLOBAL GLASSMORPHISM STYLING
-------------------------------------------------- */

.glass-panel,
.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

  transition: 0.3s ease;
}
.glass-nav {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px inset rgba(255, 255, 255, 0.15);
  padding: 0rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  width: 100%;
  margin: 0 auto;
}
.glass-footer {

/* From https://css.glass */
background: rgba(255, 255, 255, 0.06)
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);


  /* Elecha blue-tinted border for premium contrast */
  border: 1px solid rgba(0, 170, 255, 0.25);

  /* depth + realism */
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.25),
    0 8px 25px rgba(0, 0, 0, 0.35);

  /* spacing consistency */
  padding: 1.5rem;
}

/* Optional: stronger glass for hero sections */
.glass-panel.hero,
.glass-card.hero {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(0, 170, 255, 0.28);
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Optional: subtle hover glow for cards */
.glass-card:hover {
  border-color: rgba(0, 170, 255, 0.35);
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.06),
    0 12px 35px rgba(0, 0, 0, 0.45);
  transition: 0.25s ease;
}


/* --------------------------------------------------
   NAVIGATION (MOBILE FIRST)
-------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  display: flex;
  flex-direction: column; /* Mobile-first */
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* --------------------------------------------------
   GLASS MENU — WARM TINT THEME
-------------------------------------------------- */

.menu {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  padding: 0; /* remove the block spacing */

  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  padding: 0.15rem 0;
  border-radius: 0;
  background: transparent;
}

/* Hover effect using warm glass glow */
.menu a:hover {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
}

/* CTA Button inside menu */
.menu .cta {
  padding: 0.6rem 0.5rem;

  /* Same warm glass theme */
  background: rgba(138, 88, 88, 0.39);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(4.9px);
  -webkit-backdrop-filter: blur(4.9px);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  font-weight: 200;
  color: #ffffff;
  transition: 0.25s ease;
}

.menu .cta:hover {
  background: rgba(138, 88, 88, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}


/* --------------------------------------------------
   HERO SECTION (MOBILE FIRST)
-------------------------------------------------- */
.hero {
  padding: 4rem 0 2rem;
}

.hero-inner {
  display: flex;
  flex-direction: column; /* Mobile-first stacking */
  text-align: center;
  gap: 2rem;
  padding: 1.5rem;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* --------------------------------------------------
   BUTTONS (MOBILE FIRST)
-------------------------------------------------- */
button,
.btn,
.button {
  background: rgba(138, 88, 88, 0.39);
  border-radius: 3px;
  padding: 0.6rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(4.9px);
  -webkit-backdrop-filter: blur(4.9px);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  color: #fff;
  font-weight: 200;
  cursor: pointer;
  transition: 0.25s ease;
}
button:hover,
.btn:hover,
.button:hover {
  background: rgba(138, 88, 88, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
button:active,
.btn:active,
.button:active {
  transform: translateY(0);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------
   PRODUCT GRID (MOBILE FIRST)
-------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem;
  overflow: auto;
  overscroll-behavior: contain;

}

.product-card {
  padding: 2rem;
  text-align: center;
  border-radius: 16px;
}

/* --------------------------------------------------
   CTA BANNER
-------------------------------------------------- */
.cta-banner {
  padding: 2rem;
  text-align: center;
  border-radius: 16px;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
.footer-container {
  text-align: center;
  padding: 2rem 0;
  margin-top: 3rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* --------------------------------------------------
   RESPONSIVE BREAKPOINTS (SCALE UP)
-------------------------------------------------- */

/* Tablets */
@media (min-width: 600px) {
  .menu {
    flex-direction: row;
  }

  .btn {
    width: auto;
    display: inline-block;
    margin-bottom: 0;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 900px) {
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem; /* top/bottom 0.5rem, left/right 1rem */
  padding-left: 1rem;

}


  .hero-inner {
    flex-direction: row;
    text-align: left;
  }

  .hero-text p {
    max-width: 550px;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------
   DESKTOP & LARGE SCREENS
-------------------------------------------------- */
@media (min-width: 900px) {
  body {
    padding: 0.5rem;
  }

  .nav {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0;
  }

  .menu a {
    margin-left: 1.5rem;   /* was 2rem */
    font-size: 1rem;       /* slightly smaller */
  }

  .hero {
    padding: 3rem 0;       /* was 6rem → tighter */
  }

  .hero-inner {
    flex-direction: row;
    text-align: left;
    gap: 2rem;             /* was 4rem → reduced */
    padding: 1rem;         /* was 2rem → reduced */
  }

  .hero-text h1 {
    line-height: 1.2;
  }

  .hero-text p {
    max-width: 500px;      /* was 600px → more compact */
  }

  .hero-media img {
    max-width: 420px;      /* was 520px → smaller balance */
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;           /* was 2.5rem */
  }

  .product-card {
    padding: 1.5rem;       /* was 2.5rem */
  }

  .cta-banner {
    padding: 2rem;         /* was 4rem */
    margin-top: 2rem;      /* was 3rem */
  }

  .section {
    padding: 2rem 0;       /* balanced spacing between sections */
  }

  .footer-container {
    margin-top: 1rem;
    padding: 1rem 0;
  }
}

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
  .hero-inner {
    gap: 2rem;
    padding: 1rem 2rem;
  }

  .hero-media img {
    max-width: 500px;      /* was 600px → less zoomed */
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .container {
    max-width: 1200px;     /* was 1300–1400px → tighter layout */
  }
}



/* --------------------------------------------------
   BRAND BANNER IMAGE FIT
-------------------------------------------------- */
.brand-logos img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* --------------------------------------------------
   FOOTER GLASS BANNER
-------------------------------------------------- */

.actions {
  display: inline-flex;
  justify-content: center;
  gap: 1.2rem; /* or px value */
}


/* Brand banner section inside footer */
.brand-banner {
  margin-bottom: 1.5rem;
}

.brand-banner-inner {
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.brand-banner-title {
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.9;
  text-align: center;
}

/* Image inside banner */
.brand-logos img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* Footer text */
footer .minor {
  text-align: center;
  opacity: 0.7;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Desktop refinements */
@media (min-width: 900px) {
  footer.footer-container {
    padding: 3rem 0;
  }

  .brand-banner-inner {
    padding: 2rem;
  }

  .brand-logos img {
    max-width: 900px;
  }
}

.brand img {
  width: clamp(60px, 14vw, 200px);
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 400px) {
  .actions .btn {
    font-size: 0.75rem;
    padding: 0.45rem 0.8rem;
  }

  .actions {
    gap: 0.5rem;
  }
}

/* Ensure the page can scroll */
html, body {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable; /* reserves space for scrollbar in supporting browsers */
}

/* Target the scrollable root explicitly */
html::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);   /* slightly more opaque */
  border-radius: 10px;
  /* backdrop-filter often ignored here; keep it simple */
}

html::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.55);   /* solid enough to be visible */
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.25);   /* darker outline for contrast */
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* Firefox — apply to the element that actually scrolls */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.12);
}