:root{
  --bg:#0e0e10;
  --bg-soft:#151518;
  --text:#f4f4f5;
  --muted:#bdbdc2;
  --accent:#ffffff;
  --border:#2a2a2f;
}

/* Base */
html,body{background:var(--bg); color:var(--text);}
a{color:inherit; text-decoration:none}

/* Navbar */
.navbar{background:var(--bg);}
.navbar .nav-link{color:var(--text); opacity:.85}
.navbar .nav-link:hover{opacity:1}

/* brand logo slot */
.navbar-brand .logo{
  height:40px;
  display:block;
}
@media (max-width: 991.98px){
  .navbar-brand .logo{height:32px;}
}

/* ensure navbar toggler icon always visible */
.navbar-dark .navbar-toggler{
  border-color:#3a3a41;
}
.navbar-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Buttons */
.btn-outline-light{border-color:#3a3a41}
.btn-outline-light:hover{background:#fff; color:#000}

/* Spacing helpers (override for hero sections only) */
@media (min-width: 992px){
  .py-5{padding-top:7rem!important; padding-bottom:7rem!important;}
}
@media (max-width: 991.98px){
  .py-5{padding-top:4rem!important; padding-bottom:4rem!important;}
}

/* Hero */
.hero{
  background: var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.hero-title{
  font-weight:800;
  letter-spacing:.02em;
  line-height:.95;
  text-transform:uppercase;
  font-size: clamp(2.4rem, 6vw, 6rem);
}
.hero-img{
  width:100%;
  max-width:720px;
  margin-left:auto;
  aspect-ratio: 3/2;
  object-fit:cover;
  background:#0a0a0c;
  border:1px solid var(--border);
}

/* Ribbons */
.ribbon-wrap{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-block: 1px solid var(--border);
}
.ribbon{
  position:relative;
  display:flex;
  gap:2rem;
  white-space:nowrap;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.85rem 0;
  background:#000;
  color:#fff;
  border-top:1px solid #222;
  border-bottom:1px solid #222;
  will-change: transform;
  animation: ribbon-scroll 26s linear infinite;
  transform:none;
}
.ribbon-alt{
  margin-top:.5rem;
  background:#111;
  animation: ribbon-scroll 26s linear infinite reverse;
}
@keyframes ribbon-scroll{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}

/* Section titles */
.section-title{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  margin-bottom:1rem;
}

/* Product cards */
.product-card{
  background:var(--bg);
  border:1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  height:100%;
}
.product-card:hover{
  transform: translateY(-4px);
  border-color:#3a3a41;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.product-thumb{
  width:100%;
  aspect-ratio: 3/4;
  object-fit:cover;
  background:#0a0a0c;
  border-bottom:1px solid var(--border);
}
.product-name{
  font-weight:600;
  font-size:.95rem;
}
.product-meta{
  color:var(--muted);
  font-size:.85rem;
}

/* Promo */
.promo{
  background:linear-gradient(180deg, #121216 0%, #0e0e10 100%);
  border:1px solid var(--border);
}
.promo img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit:cover;
  border-right:1px solid var(--border);
  background:#0a0a0c;
}
.promo h3{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.1;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}

/* Newsletter */
.newsletter{
  background:var(--bg-soft);
  border:1px solid var(--border);
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  padding:2.5rem 0 3.5rem;
  text-align:center;
  color:var(--muted);
}

/* Utilities */
.logo-big{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: clamp(2rem, 8vw, 4rem);
}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--border); width:100%}