:root{
  --brand-1:#000800;   /* Dark background from logo */
  --brand-2:#ccf31e;   /* Bright accent from logo */
  --brand-3:#e2e8f0;   /* Neutral gray as secondary */
  --ink:#000800;
  --ink-2:#334155;
  --bg:#ffffff;
  --muted:#f1f5f9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e2e8f0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav a.btn{padding:10px 16px;border-radius:999px;background:var(--brand-2);color:#06261f;font-weight:700}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fafc, #fff)}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:center;padding:56px 0}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 10px 0;letter-spacing:-0.02em}
.hero p{font-size:18px;color:var(--ink-2);margin:0 0 20px 0}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.badge{background:var(--muted);padding:6px 10px;border-radius:999px;font-size:13px}
.hero-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:16px;box-shadow:0 6px 22px rgba(2,8,23,0.06)}
.hero-card img{width:100%;border-radius:12px;display:block}
.section{padding:56px 0;border-top:1px solid #f1f5f9}
.section h2{font-size:32px;margin:0 0 8px 0}
.section p.lead{color:var(--ink-2);margin:0 0 24px 0}
.grid{display:grid;gap:16px}
.grid.zones{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.zone{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.zone h3{margin:0 0 6px 0;font-size:18px}
.zone p{margin:0;color:var(--ink-2);font-size:14px}
.brand-strip{display:flex;gap:10px;flex-wrap:wrap}
.brand{padding:8px 12px;border:1px dashed #cbd5e1;border-radius:999px;background:#fff;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.card h3{margin:0 0 8px 0}
.card p{margin:0 0 10px 0;color:var(--ink-2)}
/* Simple carousel */
.carousel{position:relative}
.carousel-track{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.carousel-track > *{min-width:320px;scroll-snap-align:start}
.carousel-btn{position:absolute;top:40%;transform:translateY(-50%);border:none;background:rgba(0,0,0,0.6);color:#fff;border-radius:999px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
.carousel-btn.prev{left:-6px}
.carousel-btn.next{right:-6px}
.review{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.review .stars{color:#f59e0b;font-size:18px}
/* Single-row, uniform equipment logo strip */
.brand-strip.logos{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;          /* ❗ never wrap to a second row */
  overflow-x:auto;           /* scroll horizontally if there are many */
  padding-bottom:6px;        /* room for scrollbar on some browsers */
  -webkit-overflow-scrolling: touch;
}

.brand-strip.logos .brand{
  flex:0 0 auto;             /* keep each logo as a fixed item in the row */
  width:180px;               /* uniform pill width */
  height:72px;               /* uniform pill height */
  display:grid;
  place-items:center;
  padding:8px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}

.brand-strip.logos .brand img{
  max-height:48px;           /* normalize logo visual height */
  max-width:150px;           /* keep wide logos contained */
  width:auto;
  height:auto;
  object-fit:contain;        /* preserve proportions */
}

/* Optional: tighter variant if you have many logos */
@media (max-width: 900px){
  .brand-strip.logos .brand{ width:120px; height:56px }
  .brand-strip.logos .brand img{ max-height:30px; max-width:100px }
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.gallery img{width:100%;display:block;border-radius:10px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta .btn{padding:12px 16px;border-radius:12px;border:1px solid #0ea5e9;background:#e0f2fe;color:#0c4a6e;font-weight:700}
.cta .btn.whatsapp{background:#e6ffe6;border-color:#16a34a;color:#065f46}
.footer{padding:24px 0;border-top:1px solid #e2e8f0;color:#475569}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .carousel-btn.prev{left:4px}
  .carousel-btn.next{right:4px}
}

/* === Woohoo Neon Boost === */
a:hover{opacity:.9}
.badge{background:var(--brand-2); color:#0a0; color:#001200; font-weight:800}
.nav{border-bottom:3px solid var(--brand-2)}
.hero h1{text-shadow:0 0 1px rgba(204,243,30,.25), 0 2px 0 rgba(0,8,0,.75)}
.btn{box-shadow:0 0 0 2px var(--brand-2) inset}
.btn:hover{box-shadow:0 0 0 3px var(--brand-2) inset; transform:translateY(-1px)}
.zone{border:2px solid rgba(204,243,30,.35)}
.zone h3{border-left:6px solid var(--brand-2); padding-left:8px}
.section h2{display:inline-block;border-bottom:4px solid var(--brand-2); padding-bottom:6px}
.card{border:2px solid rgba(204,243,30,.25)}
.footer{border-top:3px solid var(--brand-2)}
:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px}
/* Neon stripe under header */
header.nav::after{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--brand-2), #befe00, var(--brand-2));
}