/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg1: #184b6a;
  --bg2: #2a6290;
  --panel: #0d334a;
  --panel-2: #0b2b3e;
  --text: #e9f3fb;
  --muted: #bfd3e4;
  --accent: #ffcf5a;
  --shadow: 0 10px 0 rgba(0,0,0,.25);
  --radius: 18px;
}
html, body { height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, #2c6a91 0%, var(--bg1) 55%) fixed,
              linear-gradient(var(--bg2), var(--bg1));
  background-attachment: fixed;
}
.container { width: min(1100px, 92%); margin: 0 auto; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px); background: rgba(10,34,52,.55); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.logo { font-family: 'Fredoka One', cursive; font-size: 22px; color: var(--text); text-decoration: none; }
nav a { color: var(--text); text-decoration: none; margin-left: 18px; opacity:.9; }
nav a:hover { opacity: 1; }

/* Buttons */
.btn { display:inline-block; padding: 14px 20px; border-radius: var(--radius); background: var(--panel); color: var(--text); text-decoration:none; font-weight:600; box-shadow: var(--shadow); transform: translateY(-2px); transition: transform .15s ease, filter .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-4px); filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 2px solid rgba(233,243,251,.5); box-shadow:none; }
.btn.small { padding:10px 14px; font-size:14px; }
.btn.wide { display:block; text-align:center; margin-top:10px; }

/* Hero */
.hero { padding: 70px 0 40px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-text h1 { font-family: 'Fredoka One', cursive; font-size: clamp(36px, 6vw, 56px); line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.hero-text p { margin-top: 12px; color: var(--muted); }
.cta { margin-top: 22px; display:flex; gap:12px; flex-wrap: wrap; }
.hero-art img { width: 100%; max-width: 520px; display:block; margin: 0 auto; border-radius: 50%; background: #efcbe3; border: 6px solid #0e2e44; box-shadow: var(--shadow); }

/* Blurb */
.blurb { padding: 40px 0 20px; }
.blurb-card { background: var(--panel); border: 2px solid #082131; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; text-align:center; font-family: 'Fredoka One', cursive; font-size: clamp(18px, 2.8vw, 30px); }

/* Tokenomics */
.tokenomics { padding: 60px 0; }
.token-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items:center; }
.token-img img { width:100%; border-radius: 14px; border: 4px solid #0e2e44; box-shadow: var(--shadow); }
.token-info h2 { font-family: 'Fredoka One', cursive; font-size: clamp(30px, 5vw, 46px); margin-bottom: 10px; text-align:center; }
.facts { list-style:none; display:grid; gap:16px; }
.facts li { background: var(--panel); border: 2px solid #082131; border-radius: var(--radius); padding: 16px; text-align:center; font-family: 'Fredoka One', cursive; font-size: clamp(18px, 2.6vw, 28px); box-shadow: var(--shadow); }
.facts li span { color: var(--accent); }

/* Join */
.join { padding: 40px 0 20px; }
.join-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items:center; }
.join-text h2 { font-family: 'Fredoka One', cursive; font-size: clamp(30px, 5vw, 46px); text-align:center; margin-bottom: 12px; }
.socials { display:flex; justify-content:center; gap: 18px; margin-bottom: 10px; }
.icon { width: 56px; height: 56px; border-radius: 50%; background: var(--panel); box-shadow: var(--shadow); display:inline-block; position: relative; transition: transform .15s ease, filter .15s ease; }
.icon:hover { transform: translateY(-3px); filter: brightness(1.1); }
.icon::before { content:''; position:absolute; inset:0; background-size: 60% 60%; background-repeat:no-repeat; background-position:center; }

.icon.tw::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M22 5.92c-.7.31-1.45.52-2.23.61.8-.48 1.41-1.23 1.7-2.12-.75.45-1.58.78-2.47.95A3.91 3.91 0 0015.3 4c-2.18 0-3.95 1.77-3.95 3.95 0 .31.03.6.1.88C7.53 8.7 4.66 7.14 2.74 4.8c-.34.58-.54 1.25-.54 1.97 0 1.36.69 2.56 1.73 3.26-.64-.02-1.24-.2-1.77-.49v.05c0 1.9 1.35 3.48 3.14 3.84-.33.09-.68.14-1.04.14-.25 0-.5-.02-.73-.07.5 1.57 1.96 2.72 3.7 2.75A7.86 7.86 0 012 18.59 11.1 11.1 0 008.01 20c5.35 0 8.28-4.43 8.28-8.28l-.01-.38A5.9 5.9 0 0022 5.92z"/></svg>'); }

/* Footer */
.footer { margin-top: 20px; text-align:center; color: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .token-grid, .join-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
}


/* Community */
.community { padding: 60px 0; text-align:center; }
.community h2 { font-family: 'Fredoka One', cursive; font-size: clamp(30px, 5vw, 46px); margin-bottom: 12px; }
.community p { color: var(--muted); margin-bottom: 20px; }
.community-art img { width:100%; max-width: 900px; border-radius: 14px; border: 4px solid #0e2e44; box-shadow: var(--shadow); }


/* Updated Join layout */
.join-centered { text-align:center; }
.join-centered h2 { margin-bottom: 14px; font-family: 'Fredoka One', cursive; font-size: clamp(30px, 5vw, 46px); }
.join-centered .socials { justify-content:center; margin-bottom: 20px; }
.join-centered .join-art img { width:100%; max-width: 600px; margin: 0 auto; border-radius: 14px; border: 4px solid #0e2e44; box-shadow: var(--shadow); }





/* Pump.fun text button */
.icon.pump {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: 'Fredoka One', cursive;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: var(--panel);
  padding: 0 16px;
  border-radius: var(--radius);
  width: auto;
  height: 48px;
  min-width: 100px;
  box-shadow: var(--shadow);
}