/* ============================================================
   WRAPPED BY ROBB : custom wrapped drumsticks
   Palette: amber tape + carbon black. No cards. Flat + bordered.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@300;500;700;800;900&family=Saira:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --black:#f4f6fb;
  --carbon:#e8eef8;
  --ink:#dce6f5;
  --bone:#0f1c38;
  --bone-dim:#5b6b86;
  --amber:#1e6bff;
  --amber-deep:#1450c8;
  --amber-glow:rgba(30,107,255,.26);
  --line:rgba(15,28,56,.14);
  --line-amber:rgba(30,107,255,.42);

  --disp:'Saira Condensed', sans-serif;
  --body:'Saira', sans-serif;
  --mono:'Space Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}
::selection{background:var(--amber);color:#fff}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

/* subtle scanline / grain field over the whole page */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(15,28,56,.05) 2px 3px);
  mix-blend-mode:multiply;opacity:.5;
}

/* ---------- shared type helpers ---------- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mono-sm{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.disp{font-family:var(--disp);text-transform:uppercase;font-weight:900;line-height:.86;letter-spacing:-.01em}
.amber{color:var(--amber)}
.tick{color:var(--black);font-family:var(--mono)}

.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 32px}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.util{
  border-bottom:1px solid var(--line);
  background:var(--black);
}
.util-in{
  display:flex;justify-content:space-between;align-items:center;
  height:34px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);
}
.util-in span b{color:var(--amber);font-weight:700}
.util-in .util-mid{color:var(--bone)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:8000;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{
  font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1;
}
.brand .mark em{color:var(--amber);font-style:normal}
.brand .badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--bone-dim);
  border:1px solid var(--line-amber);padding:3px 6px;
}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);position:relative;padding:4px 0;
  transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--amber);
  transition:width .25s ease;
}
.nav-links a:hover{color:var(--amber)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--amber)}
.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:22px}
.cart-btn{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line-amber);
  padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:.2s;background:transparent;color:var(--bone);
}
.cart-btn:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.cart-btn .count{color:var(--amber)}
.cart-btn:hover .count{color:#fff}

.burger{display:none}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.ticker{
  background:var(--amber);color:#fff;overflow:hidden;white-space:nowrap;
  border-bottom:1px solid #000;
}
.ticker-track{
  display:inline-flex;align-items:center;gap:40px;
  padding:9px 0;font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
  animation:scroll-x 30s linear infinite;
}
.ticker-track span{display:inline-flex;align-items:center;gap:40px}
.ticker-track .dot{width:6px;height:6px;background:#000;border-radius:50%;display:inline-block}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line-amber);background:var(--black);padding-top:70px}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:60px;
}
.foot h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:22px;
}
.foot-brand .mark{font-family:var(--disp);font-weight:900;font-size:52px;line-height:.84;text-transform:uppercase}
.foot-brand .mark em{color:var(--amber);font-style:normal}
.foot-brand p{color:var(--bone-dim);font-size:14px;max-width:300px;margin-top:18px;line-height:1.6}
.foot-col a{display:block;font-size:14px;padding:7px 0;color:var(--bone);transition:.18s;letter-spacing:.02em}
.foot-col a:hover{color:var(--amber);transform:translateX(4px)}
.news input{
  width:100%;background:transparent;border:1px solid var(--line);color:var(--bone);
  padding:13px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;outline:none;
}
.news input:focus{border-color:var(--amber)}
.news button{
  width:100%;margin-top:10px;background:var(--amber);color:#fff;border:none;
  padding:13px;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:.2s;
}
.news button:hover{background:var(--bone)}
.foot-bottom{
  border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  padding:22px 0 40px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);flex-wrap:wrap;gap:14px;
}
.foot-bottom b{color:var(--amber);font-weight:700}

/* big outline display number used as section index */
.bignum{
  font-family:var(--disp);font-weight:900;font-size:clamp(60px,9vw,150px);line-height:.8;
  -webkit-text-stroke:1.5px var(--line-amber);color:transparent;
}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:1fr}
  .util-in .util-mid{display:none}
}