@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#070707;
  --card:#0f0f0f;
  --fg:#f5f5f5;
  --muted:rgba(245,245,245,.68);
  --border:rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
  --display:'Bebas Neue', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --body:'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--body); }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1200px, 92vw); margin:0 auto; }

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,7,7,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:12px; min-width: 260px; }
.brand .mark{ width:46px; height:46px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#0c0c0c; display:grid; place-items:center; }
.brand .mark img{ width:100%; height:100%; object-fit:cover; }
.brand .name{ font-family: var(--display); letter-spacing:.18em; text-transform:uppercase; font-size:16px; line-height:1; }
.brand .tag{ font-size:12px; color:var(--muted); margin-top:2px; }

.menu{
  display:flex; gap:18px; align-items:center;
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.menu a{ opacity:.78; }
.menu a:hover{ opacity:1; }

.pills{ display:flex; gap:10px; align-items:center; }
.pill{
  padding: 10px 12px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.pill:hover{ background: rgba(255,255,255,.06); }

.hero{
  position:relative;
  min-height: 76vh;
  overflow:hidden;
  border-bottom: 1px solid var(--border);
  background: #050505;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: url('bg-warehouse.svg') center/cover no-repeat;
  transform: scale(1.03);
  opacity: 1;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 520px at 18% 30%, rgba(255,255,255,.08), transparent 62%),
              linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.25), rgba(0,0,0,.62));
}
.hero .container{ position:relative; z-index:2; padding: 58px 0; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
.panel{
  background: rgba(15,15,15,.62);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.kicker{
  font-size:12px; font-weight:800; color:rgba(245,245,245,.75);
  letter-spacing:.18em; text-transform:uppercase;
}
.logo-hero{ width:min(520px, 80vw); margin: 10px 0 10px; display:block; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.h1{
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 8px 0 10px;
  line-height: .95;
}
.sub{ color: rgba(245,245,245,.74); line-height:1.7; font-size:15px; max-width: 64ch; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px; }
.btn{
  padding: 12px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  font-size:12px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
}
.btn.primary{ background: #ffffff; color:#050505; }
.btn:hover{ background: rgba(255,255,255,.08); }

.slogan{
  display:grid; gap: 10px;
}
.slogan .line{
  padding: 14px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.slogan .t{
  font-family: var(--display);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: 22px;
}
.slogan .s{
  margin-top: 6px;
  color: rgba(245,245,245,.70);
  font-size: 12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.section{ padding: 34px 0; }
.h2{
  font-family: var(--display);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 22px;
  margin: 0 0 10px;
}
.muted{ color: var(--muted); }

.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.card .img{ aspect-ratio: 4/3; background:#0a0a0a; }
.card .img img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding: 14px; display:grid; gap: 8px; }
.badge{
  width: fit-content;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-size:10px; font-weight:900;
  letter-spacing:.18em; text-transform:uppercase;
  color: rgba(245,245,245,.85);
}
.row{ display:flex; justify-content:space-between; gap: 12px; align-items: baseline; }
.price{ font-weight:900; letter-spacing:.04em; }
.small{ font-size:12px; color: rgba(245,245,245,.62); line-height:1.55; }

.divider{ height:1px; background: var(--border); margin: 18px 0; }

.footer{
  border-top: 1px solid var(--border);
  padding: 30px 0 44px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
}
.footer a{ opacity:.75; }
.footer a:hover{ opacity:1; }
.signature{
  font-family: var(--display);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 14px;
  opacity:.9;
}

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #050505;
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
.whatsapp-float:hover{ filter: brightness(0.98); }
.whatsapp-dot{ width:10px; height:10px; border-radius:999px; background:#25D366; }

@media (max-width: 980px){
  .menu{ display:none; }
  .hero-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}