/* Base */
:root { --bg: #0b0b0c; --card: #121214; --muted: #9aa1a8; --text: #e7e9ea; --primary: #f5c400; --primary-600: #d4aa00; --ring: rgba(245,196,0,0.35); }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(1100px, 92%); margin-inline: auto; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-radius: .8rem; border:1px solid transparent; transition: .25s ease; font-weight:600; }
.btn-primary { background: var(--primary); color:#1a1a1a; box-shadow: 0 8px 24px rgba(245,196,0,0.25); }
.btn-primary:hover { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(245,196,0,0.35); }
.btn-ghost { background: transparent; border-color:#2a2a2e; color: var(--text); }
.btn-ghost:hover { background:#1b1b1f; border-color:#2a2a2e; }

/* Navbar */
.navbar { position: sticky; top:0; z-index: 40; background: rgba(11,11,12,.6); backdrop-filter: blur(10px); border-bottom:1px solid #1a1a1f; }
.nav-content { display:flex; align-items:center; justify-content: space-between; padding:.9rem 0; }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px; }
.brand-logo { width: 40px; height: 40px; border-radius:.6rem; }
.brand-name { display:none; font-weight:800; }
.menu { display:flex; gap:1rem; align-items:center; }
.menu a { color: var(--muted); padding:.5rem .7rem; border-radius:.5rem; }
.menu a:hover { color: var(--text); background:#151518; }
.hamburger { display:none; background:transparent; color:var(--text); border:none; font-size:1.4rem; }

/* Hero */
.hero { position:relative; padding: 6rem 0 4rem; background:
  radial-gradient(800px 400px at 10% -10%, rgba(245,196,0,.15), transparent 60%),
  radial-gradient(1000px 600px at 110% 10%, rgba(255,255,255,.05), transparent 60%);
}
.hero-inner { display:grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 2rem; }
.hero-text h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin:.2rem 0 1rem; line-height:1.1; }
.highlight { color: var(--primary); text-shadow: 0 8px 40px rgba(245,196,0,.25); }
.hero-text p { color: var(--muted); font-size:1.05rem; max-width: 50ch; }
.hero-cta { display:flex; gap:.8rem; margin-top:1.3rem; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.hero-art img { width: 80%; filter: drop-shadow(0 14px 50px rgba(255,255,255,.06)); }
.hero-scroll { position:absolute; inset:auto 0 1rem; display:flex; gap:.4rem; align-items:center; justify-content:center; color:#9aa1a8; }

/* Sections */
.section { padding: 4rem 0; }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.3rem; }
.card { background: var(--card); border:1px solid #1a1a1f; border-radius:1rem; padding:1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.card.big { padding:2rem; }
.gradient { position:relative; overflow:hidden; }
.gradient::before { content:""; position:absolute; inset:-2px; background: conic-gradient(from 180deg at 50% 50%, rgba(245,196,0,.6), rgba(245,196,0,.1), rgba(255,255,255,.04), rgba(245,196,0,.4)); filter: blur(24px); opacity:.5; z-index:0; }
.gradient > * { position:relative; z-index:1; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.checks li { display:flex; align-items:center; gap:.6rem; color:#c6c9cf; }
.checks i { color: var(--primary); }
.features .icon { font-size:1.8rem; color: var(--primary); }
.features .card h3 { margin:.4rem 0; }
.features .card p { color: var(--muted); }

/* Stats */
.stats .status { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; align-items:center; text-align:center; }
.status .label { display:block; color: var(--muted); font-size:.9rem; }
.status .value { font-weight:800; font-size:1.4rem; }

/* Join */
.copy { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.copy code { background:#0f0f11; border:1px solid #1a1a1f; padding:.8rem 1rem; border-radius:.6rem; font-weight:700; }
.cta-row { display:flex; gap:.8rem; margin-top:1rem; }
.join-img { width: 280px; margin-inline:auto; filter: drop-shadow(0 14px 50px rgba(245,196,0,.25)); }

/* Footer */
.footer { padding: 2rem 0; border-top:1px solid #1a1a1f; color:#9aa1a8; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
.socials a { display:inline-flex; width:38px; height:38px; border-radius:.7rem; align-items:center; justify-content:center; background:#141417; border:1px solid #1b1b21; color:#d4d7dd; }
.socials a:hover { border-color: var(--primary); box-shadow: 0 0 0 5px var(--ring); }

/* Shop */
.shop .muted { color: var(--muted); margin-top:.3rem; }
.product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; margin-top:1rem; }
.product-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.product-media { aspect-ratio: 600 / 884; background: #0f0f11; border-bottom: 1px solid #1a1a1f; }
.product-media img { width:100%; height:100%; object-fit:cover; }
.product-body { padding: 1rem; display:flex; align-items:center; justify-content:space-between; }
.product-body h3 { margin:0; font-size:1.05rem; }

/* Rules */
.rules .muted { color: var(--muted); margin-top:.3rem; }
.rules-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top:1rem; }
.rule-item { display:flex; align-items:center; gap:.7rem; padding: .9rem 1rem; }
.rule-item i { color: var(--primary); font-size:1.4rem; }
.rule-item span { font-weight:600; }

/* Mobile */
@media (max-width: 900px) {
  .brand-name { display:block; }
  .hero-inner { grid-template-columns: 1fr; text-align:center; }
  .hero-art img { width: 200px; margin-inline:auto; }
  .two-col { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats .status { grid-template-columns: 1fr 1fr; }
  .menu { display:none; position: fixed; inset: 64px 0 auto; background: rgba(10,10,12,.98); border-bottom:1px solid #1a1a1f; padding: 1rem; flex-direction:column; gap:.4rem; }
  .menu.open { display:flex; }
  .hamburger { display:inline-flex; }
  .product-grid { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
}

/* Subtle animations */
.btn, .card, .brand, .socials a { will-change: transform; }
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,.35); }