html { scrollbar-gutter: stable; }


:root{
  --bg:#0f1115;
  --card:#171a21;
  --border:#2a2f3a;
  --text:#e6e6e6;
  --muted:#a6adbb;
  --accent:#e1062a;
  --accentHover:#ff1f43;
}

    .hero {
  position: relative;
}

    .hero_bg {
  position: absolute;
  inset: 0;
  background-image: url("IMG/hero_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.hero > header {
  position: relative;
  z-index: 1;
}

    body{
      background: var(--bg);
      color: var(--text);
      font-family: Inter, Arial, sans-serif;
    }

    h1,h2,h3,.brand-font{
      font-family: "IBM Plex Sans", Inter, Arial, sans-serif;
    }

    .bg-card{
      background: var(--card);
      border: 1px solid var(--border);
    }

    .text-muted-custom{ color: var(--muted); }
    .text-bright-custom{ color: var(--text); }

    .btn-accent{
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .btn-accent:hover{
      background: var(--accentHover);
      border-color: var(--accentHover);
      color:#fff;
    }

    .btn-outline-accent{
      border: 1px solid var(--accent);
      color: var(--text);
    }
    .btn-outline-accent:hover{
      background: rgba(225,6,42,.12);
      border-color: var(--accentHover);
      color: var(--text);
    }

    .nav-border{
      border-bottom: 1px solid var(--border);
    }

    .logo-box{
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: #0b0d12;
      overflow: hidden;
    }
    .logo-box img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .product-card {
      transition: border-color 0.3s ease;
    }
    
    .product-card:hover {
      border-color: var(--accent);
    }