@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #ffffff;
  --bg-2: #fdf6ee;
  --surface: #fff9f2;
  --surface-2: #fbeee0;
  --line: #ece1d3;
  --ember: #ff5a1f;
  --amber: #e8830f;
  --gold: #ff9d2e;
  --text: #201509;
  --muted: #6e5f4d;
  --muted-2: #9c8b76;
  --ok: #1fa851;
  --no: #e3483a;
  --ink-1: #2a2a2e;
  --ink-2: #0c0c0e;
  --radius: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(12,12,14,0.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(12,12,14,0.04), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* signature stud-grid texture, echoes the brick/stud icon set and the product itself */
.stud-field{
  background-image: radial-gradient(rgba(232,131,15,0.14) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  background-position: 0 0;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* header */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; transition:opacity .15s ease;}
.brand:hover{opacity:0.85;}
.brand img{
  height:34px; width:auto;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
}
.brand:hover img{
  transform:rotate(-6deg) scale(1.08);
  filter:drop-shadow(0 0 10px rgba(12,12,14,0.3));
}
.brand span{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:20px;
  letter-spacing:0.5px;
  color:var(--text);
}
.brand small{
  display:block;
  font-family:'Inter';
  font-weight:700;
  font-size:10px;
  letter-spacing:2px;
  color:var(--ink-2);
  text-transform:uppercase;
}
.nav-links{display:flex; gap:28px; font-weight:600; font-size:14px; color:var(--muted);}
.nav-links a{
  position:relative;
  padding-bottom:3px;
  transition:color .15s ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--ink-1), var(--ink-2));
  transition:width .22s ease;
}
.nav-links a:hover{color:var(--ink-2);}
.nav-links a:hover::after{width:100%;}

/* robux icon inline with price text -- sized to match surrounding text, keeps true aspect ratio */
.rbx-icon{
  width:1em;
  height:1em;
  object-fit:contain;
  vertical-align:-0.15em;
  display:inline-block;
  margin:0 1px;
}

/* buttons -- dark pill, sheen sweep + orange glow-up on hover */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter'; font-weight:800; font-size:15px;
  padding:15px 30px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, filter .22s ease, border-color .18s ease;
}
.btn::before{
  content:"";
  position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
  z-index:1;
  pointer-events:none;
}
.btn:hover::before{left:140%;}
.btn:active{transform:scale(0.96);}
.btn-primary{
  background:linear-gradient(180deg, var(--ink-1), var(--ink-2));
  color:#ffffff;
  box-shadow:0 8px 22px -10px rgba(12,12,14,0.55), 0 0 0 0 rgba(255,255,255,0);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(12,12,14,0.6), 0 0 22px 2px rgba(255,255,255,0.4);
}
.btn-primary:active{
  transform:scale(0.96) translateY(0);
  box-shadow:0 4px 12px -6px rgba(12,12,14,0.5);
}
.btn-ghost{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
}
.btn-ghost:hover{
  border-color:var(--ink-2);
  background:var(--surface-2);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(12,12,14,0.35);
}
.btn-block{width:100%;}

/* footer */
footer.site{
  border-top:1px solid var(--line);
  padding:34px 28px 46px;
  color:var(--muted-2);
  font-size:13px;
}
footer.site .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer.site a{color:var(--muted); font-weight:600; transition:color .15s ease;}
footer.site a:hover{color:var(--ink-2);}

/* image protection -- deters casual drag-save / right-click-save */
img{
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  pointer-events:auto;
}
video{
  -webkit-user-select:none;
  user-select:none;
}