:root {
  --bg: #020305;
  --panel: #080a0f;
  --panel-2: #0c0f15;
  --line: #252a35;
  --line-soft: rgba(255,255,255,.10);
  --text: #f8f8fb;
  --muted: #a7aab3;
  --dim: #70747f;
  --cyan: #12c7f4;
  --blue: #2688ff;
  --violet: #8b27f5;
  --pink: #ff2695;
  --green: #39df86;
  --yellow: #ffc83d;
  --max: 1180px;
  --radius: 22px;
  --shadow: 0 20px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 72% 8%, rgba(55,84,244,.14), transparent 25rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
body::selection { background: rgba(139,39,245,.4); color: white; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
svg { display:block; }

.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.page-main { min-height: 80vh; }
.section { padding: 38px 0; }
.section-lg { padding: 72px 0; }
.section-tight { padding: 22px 0; }

/* Header */
.site-header {
  height: 86px;
  position: relative;
  z-index: 40;
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  align-items: center;
  gap: 20px;
}
.brand-logo img { width: 130px; height: auto; image-rendering: pixelated; }
.desktop-nav { display:flex; justify-content:center; align-items:center; gap: 46px; }
.desktop-nav a { position:relative; color:#d8d9de; font-size:14px; padding:31px 0 26px; }
.desktop-nav a:hover, .desktop-nav a.active { color:white; }
.desktop-nav a.active::after {
  content:""; position:absolute; left:0; right:0; bottom:17px; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  border-radius:999px;
}
.header-cta { justify-self:end; }
.mobile-menu-toggle { display:none; justify-self:end; width:48px; height:48px; border:1px solid var(--line); background:#07090d; border-radius:14px; color:white; cursor:pointer; }
.mobile-menu-toggle span { display:block; width:21px; height:2px; background:white; margin:5px auto; border-radius:3px; }
.mobile-drawer { display:none; position:fixed; top:78px; left:20px; right:20px; padding:16px; background:rgba(5,7,11,.98); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); z-index:50; }
.mobile-drawer.open { display:block; }
.mobile-drawer a { display:block; padding:14px 15px; border-radius:12px; color:#d8d9df; }
.mobile-drawer a.active, .mobile-drawer a:hover { color:white; background:#10131a; }

/* Buttons */
.btn { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:0 26px; border-radius:10px; border:1px solid transparent; color:white; font-weight:650; cursor:pointer; transition:.2s ease; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.07); }
.btn-gradient { background:linear-gradient(100deg,var(--cyan),#4375ff 35%,var(--violet) 65%,var(--pink)); box-shadow:0 12px 30px rgba(133,39,245,.18); }
.btn-outline { border-color:transparent; position:relative; background:#05070a; }
.btn-outline::before { content:""; position:absolute; inset:-1px; border-radius:11px; padding:1px; background:linear-gradient(100deg,var(--cyan),var(--violet),var(--pink)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.btn-small { min-height:42px; padding:0 20px; font-size:14px; border-radius:9px; }
.btn-wide { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Typography */
.eyebrow { margin:0 0 13px; color:var(--cyan); font-family:"Courier New",monospace; font-size:16px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.pixel-title { font-family:"Courier New",monospace; font-weight:900; letter-spacing:.04em; }
.display { margin:0; font-size:clamp(52px,6.2vw,86px); line-height:.98; letter-spacing:-.045em; font-weight:800; }
.display-medium { margin:0; font-size:clamp(48px,5.5vw,76px); line-height:1.02; letter-spacing:-.04em; font-weight:800; }
.heading { margin:0 0 18px; font-size:clamp(34px,4vw,54px); line-height:1.03; letter-spacing:-.035em; }
.subheading { margin:0 0 14px; font-size:clamp(25px,2.8vw,34px); line-height:1.12; }
.lead { max-width:650px; color:var(--muted); font-size:19px; line-height:1.6; }
.muted { color:var(--muted); }
.gradient-text { background:linear-gradient(100deg,var(--cyan),#4481ff 30%,var(--violet) 63%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Shared visual language */
.panel { background:linear-gradient(145deg,rgba(12,15,22,.95),rgba(4,5,8,.95)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.neon-panel { position:relative; background:linear-gradient(145deg,rgba(10,13,20,.97),rgba(4,5,8,.98)); border:1px solid transparent; border-radius:var(--radius); }
.neon-panel::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(115deg,var(--cyan),rgba(38,136,255,.45) 30%,rgba(139,39,245,.5) 62%,var(--pink)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.pixel-signature { display:flex; gap:12px; align-items:center; }
.pixel-signature i { width:14px; height:14px; display:block; }
.pixel-signature i:nth-child(1){background:#030305;border:1px solid #dadce2}.pixel-signature i:nth-child(2){background:var(--cyan)}.pixel-signature i:nth-child(3){background:var(--violet)}.pixel-signature i:nth-child(4){background:var(--pink)}
.mascot-stage { position:relative; min-height:470px; display:grid; place-items:center; isolation:isolate; }
.mascot-stage::before { content:""; position:absolute; width:76%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(65,96,255,.30),rgba(65,96,255,.08) 42%,transparent 70%); filter:blur(12px); z-index:-2; }
.mascot-stage::after { content:""; position:absolute; bottom:38px; width:75%; height:58px; border:2px solid rgba(120,150,255,.65); border-radius:50%; box-shadow:0 0 24px rgba(78,116,255,.8), inset 0 0 20px rgba(78,116,255,.35); transform:perspective(280px) rotateX(66deg); z-index:-1; }
.mascot-stage img { width:min(470px,86%); filter:drop-shadow(0 0 22px rgba(90,118,255,.5)); }
.pixel-field { position:absolute; inset:6% 0 0; pointer-events:none; opacity:.8; z-index:-1; background-image:radial-gradient(circle at 16% 32%,var(--cyan) 0 4px,transparent 5px),radial-gradient(circle at 31% 54%,var(--violet) 0 5px,transparent 6px),radial-gradient(circle at 78% 30%,var(--pink) 0 4px,transparent 5px),radial-gradient(circle at 87% 58%,var(--blue) 0 3px,transparent 4px),radial-gradient(circle at 65% 18%,var(--violet) 0 3px,transparent 4px); }

/* Hero */
.hero { padding:45px 0 34px; }
.hero-grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:38px; }
.hero-copy .lead { margin:24px 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:18px; }
.hero .pixel-signature { margin-top:28px; }

/* Trust strip */
.trust-strip { padding:26px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item { display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:center; padding:0 22px; min-height:70px; }
.trust-item + .trust-item { border-left:1px solid var(--line); }
.trust-icon, .feature-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--cyan); }
.trust-item strong { display:block; font-size:15px; margin-bottom:4px; }
.trust-item span { display:block; color:var(--muted); font-size:13px; }

/* Home why */
.why-grid { display:grid; grid-template-columns:310px 1fr; gap:52px; align-items:center; padding:20px 55px; }
.why-mascot { display:flex; flex-direction:column; align-items:center; gap:18px; }
.why-mascot img { width:190px; filter:drop-shadow(0 0 18px rgba(82,112,255,.45)); }
.why-copy { border-left:1px solid rgba(18,199,244,.5); padding-left:48px; }
.why-copy p { max-width:700px; }

/* Token / buy combined */
.token-buy-grid { display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:stretch; }
.token-overview { padding:26px 28px; }
.card-title { display:flex; align-items:center; gap:8px; margin:0 0 20px; font-size:21px; }
.data-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:58px; border-top:1px solid var(--line); color:var(--muted); }
.data-row strong { color:white; text-align:right; }
.copy-row { margin-top:20px; }
.buy-shell { padding:22px; display:grid; grid-template-columns:1fr 255px; gap:20px; }
.buy-form-col { min-width:0; }
.buy-titlebar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.badge { display:inline-flex; align-items:center; min-height:25px; padding:0 9px; border-radius:7px; border:1px solid rgba(57,223,134,.45); color:var(--green); font-size:11px; }
.token-select { display:flex; align-items:center; gap:10px; min-width:110px; justify-content:flex-end; font-weight:700; }
.buy-meta { border-left:1px solid var(--line); padding-left:20px; }
.buy-meta .data-row { min-height:50px; font-size:13px; }
.buy-disclaimer { color:var(--muted); font-size:12px; margin-top:22px; }

/* Signal line */
.signal-line { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:22px; }
.signal-step { position:relative; padding:34px 20px 0 28px; }
.signal-step::before { content:""; position:absolute; left:18px; right:-8px; top:17px; height:2px; background:var(--line); }
.signal-step:nth-child(1)::before { background:linear-gradient(90deg,var(--cyan),#3345a0); }
.signal-step:nth-child(2)::before { background:linear-gradient(90deg,var(--violet),#8f2be1); }
.signal-step:nth-child(3)::before,.signal-step:nth-child(4)::before { background:linear-gradient(90deg,var(--pink),#8f1c59); }
.signal-number { position:absolute; top:0; left:0; width:35px; height:35px; border-radius:50%; border:2px solid currentColor; background:var(--bg); display:grid; place-items:center; font-weight:700; }
.signal-step:nth-child(1){color:var(--cyan)}.signal-step:nth-child(2){color:var(--violet)}.signal-step:nth-child(3),.signal-step:nth-child(4){color:var(--pink)}
.signal-step strong { display:block; color:white; font-size:17px; margin-bottom:4px; }
.signal-step span { color:var(--muted); font-size:14px; }

/* Community strip */
.section-label { margin:0 0 14px; text-align:center; font-size:22px; }
.social-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.social-card { min-height:52px; display:flex; align-items:center; justify-content:center; gap:13px; border:1px solid var(--line); border-radius:9px; background:#06080c; transition:.2s; }
.social-card:nth-child(1){border-color:rgba(18,199,244,.75)}.social-card:nth-child(2){border-color:rgba(139,39,245,.8)}.social-card:nth-child(3){border-color:rgba(255,64,88,.8)}.social-card:nth-child(4){border-color:rgba(18,199,244,.75)}.social-card:nth-child(5){border-color:rgba(255,38,149,.75)}.social-card:nth-child(6){border-color:rgba(139,39,245,.8)}
.social-card:hover { transform:translateY(-2px); background:#0b0e14; }
.social-mark { width:26px; height:26px; display:grid; place-items:center; font-weight:900; font-size:24px; }

/* Safety & FAQ teaser */
.safety-bar { margin-top:18px; padding:14px 24px; display:flex; justify-content:center; gap:14px; align-items:center; font-size:14px; color:var(--muted); }
.safety-bar strong { color:white; }
.safety-bar a { color:var(--cyan); }
.faq-mini { padding:18px 0 8px; }
.faq-mini h2 { margin:0 0 10px; font-size:21px; }
.accordion-item { border:1px solid var(--line); border-radius:10px; background:#05070a; overflow:hidden; }
.accordion-item + .accordion-item { margin-top:9px; }
.accordion-button { width:100%; border:0; background:transparent; color:white; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; cursor:pointer; padding:17px 20px; font-weight:650; }
.accordion-button .chev { transition:.2s; }
.accordion-item.open .chev { transform:rotate(180deg); }
.accordion-answer { max-height:0; overflow:hidden; color:var(--muted); transition:max-height .28s ease; }
.accordion-answer > div { padding:0 20px 20px; }

/* Footer */
.site-footer { margin-top:22px; border-top:1px solid #191d24; padding:30px 0 42px; }
.footer-grid { display:grid; grid-template-columns:1.25fr .8fr .85fr .9fr auto; gap:38px; align-items:start; }
.footer-brand img { width:130px; image-rendering:pixelated; }
.footer-brand p { color:var(--muted); font-size:12px; margin:15px 0 0; max-width:240px; }
.footer-col h3 { margin:0 0 10px; font-size:14px; }
.footer-col a { display:block; color:var(--muted); font-size:13px; margin:6px 0; }
.footer-col a:hover { color:white; }
.footer-end { text-align:right; }
.footer-end p { color:var(--muted); font-size:12px; margin-top:38px; white-space:nowrap; }

/* Interior page hero */
.inner-hero { padding:45px 0 36px; }
.inner-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.inner-hero .mascot-stage { min-height:390px; }
.inner-hero .mascot-stage img { width:min(385px,78%); }
.inner-hero .mascot-stage::after { bottom:30px; }
.inner-hero .lead { margin:24px 0; }

/* Story */
.story-list { display:grid; gap:18px; }
.story-card { padding:18px; display:grid; grid-template-columns:350px 1fr; gap:50px; align-items:center; }
.story-card:nth-child(odd){border-color:rgba(18,199,244,.58)}.story-card:nth-child(even){border-color:rgba(255,38,149,.55)}
.story-card img { width:100%; height:185px; object-fit:cover; border-radius:15px; border:1px solid var(--line); }
.story-index { margin:0 0 8px; color:var(--cyan); font-family:"Courier New",monospace; font-weight:900; letter-spacing:.09em; }
.story-card:nth-child(2) .story-index,.story-card:nth-child(3) .story-index{color:var(--violet)}.story-card:nth-child(4) .story-index{color:var(--cyan)}
.story-card h2 { margin:0 0 8px; font-size:25px; }
.story-card p { color:var(--muted); margin:0; }
.cta-band { padding:34px 44px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; background:radial-gradient(circle at 88% 50%,rgba(255,38,149,.16),transparent 28%),radial-gradient(circle at 10% 50%,rgba(18,199,244,.13),transparent 30%),#07090e; }
.cta-band h2 { margin:0 0 4px; font-size:34px; }
.cta-band p { margin:0; color:var(--muted); font-size:20px; }
.cta-actions { display:flex; gap:16px; }

/* Token page */
.stats-strip { padding:25px 26px; display:grid; grid-template-columns:repeat(5,1fr); }
.stat { padding:0 25px; min-height:67px; display:flex; gap:16px; align-items:center; }
.stat + .stat { border-left:1px solid var(--line); }
.stat-icon { font-size:30px; color:var(--violet); }
.stat span { display:block; color:var(--muted); font-size:13px; }
.stat strong { font-size:18px; }
.about-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:25px; padding:28px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:25px; }
.feature { padding:0 22px; }
.feature + .feature { border-left:1px solid var(--line); }
.feature h3 { font-size:14px; margin:12px 0 8px; }
.feature p { font-size:12px; color:var(--muted); }
.network-card { padding:25px; overflow:hidden; }
.network-card img { width:100%; height:220px; object-fit:cover; border-radius:12px; margin-top:20px; }
.tokenomics-grid { display:grid; grid-template-columns:260px 1fr 320px; gap:28px; padding:28px; align-items:center; }
.donut { width:230px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--cyan) 0 40%,#2486dd 40% 60%,var(--violet) 60% 75%,#c719cc 75% 90%,var(--pink) 90% 100%); position:relative; margin:auto; }
.donut::before { content:""; position:absolute; inset:54px; border-radius:50%; background:#030407; }
.donut img { position:absolute; width:82px; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; }
.allocation-list { display:grid; gap:14px; }
.allocation { display:grid; grid-template-columns:40px 1fr; gap:15px; align-items:start; }
.allocation strong { font-size:22px; }
.allocation h3 { margin:0; font-size:14px; }
.allocation p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.key-list { padding:24px; }
.key-list h2 { font-family:"Courier New",monospace; letter-spacing:.08em; font-size:21px; }
.key-list li { color:var(--muted); margin:11px 0; }
.key-list li::marker { color:var(--cyan); }

/* Buy page */
.safety-box { margin-top:18px; padding:22px; border:1px solid rgba(18,199,244,.6); border-radius:15px; color:var(--muted); }
.feature-strip { padding:25px; display:grid; grid-template-columns:repeat(4,1fr); }
.feature-strip .feature { display:grid; grid-template-columns:50px 1fr; gap:12px; }
.how-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding:30px; }
.how-step { position:relative; padding:0 25px; text-align:center; }
.how-step + .how-step { border-left:1px dashed #454a55; }
.how-num { width:32px; height:32px; border:1px solid var(--pink); border-radius:50%; display:grid; place-items:center; margin:0 auto 15px; color:var(--pink); }
.how-icon { font-size:38px; min-height:48px; color:var(--violet); }
.how-step h3 { font-size:15px; margin:10px 0 8px; }
.how-step p { color:var(--muted); font-size:12px; }

/* Community */
.community-mission { padding:30px 38px; display:grid; grid-template-columns:320px 1fr; gap:40px; align-items:center; }
.community-mission h2 { font-size:28px; margin:0; }
.channel-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:15px; }
.channel-card { padding:25px 18px 18px; min-height:280px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.channel-icon { width:68px; height:68px; display:grid; place-items:center; font-size:39px; margin-bottom:15px; color:var(--cyan); }
.channel-card:nth-child(1) .channel-icon{color:white}.channel-card:nth-child(2) .channel-icon{color:var(--violet)}.channel-card:nth-child(3) .channel-icon{color:#ff4058}.channel-card:nth-child(4) .channel-icon{color:var(--cyan)}.channel-card:nth-child(5) .channel-icon{color:var(--pink)}.channel-card:nth-child(6) .channel-icon{color:#7774ff}
.channel-card h3 { margin:0 0 8px; }
.channel-card p { color:var(--muted); font-size:13px; flex:1; }
.community-lower { display:grid; grid-template-columns:1fr 1.1fr; gap:20px; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; padding:25px; }
.value { padding:18px; }
.value:nth-child(-n+2){border-bottom:1px solid var(--line)}.value:nth-child(even){border-left:1px solid var(--line)}
.value h3 { font-size:15px; margin:0 0 5px; }
.value p { color:var(--muted); font-size:12px; margin:0; }
.guidelines { padding:25px; }
.guideline { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:11px; }
.guideline + .guideline { margin-top:8px; }
.guideline strong { display:block; font-size:14px; }.guideline span{color:var(--muted);font-size:12px}
.community-stats { padding:22px; display:grid; grid-template-columns:repeat(4,1fr); }
.community-stat { text-align:center; padding:0 24px; }
.community-stat + .community-stat { border-left:1px solid var(--line); }
.community-stat strong { display:block; font-size:35px; color:var(--cyan); }
.community-stat span { color:var(--muted); font-size:12px; }

/* FAQ */
.faq-search { margin-top:28px; max-width:470px; position:relative; }
.faq-search input { width:100%; height:58px; border:1px solid #555b66; border-radius:10px; background:#06080b; color:white; padding:0 18px 0 50px; outline:none; }
.faq-search::before { content:"⌕"; position:absolute; left:18px; top:9px; font-size:28px; color:var(--muted); }
.faq-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; }
.faq-sidebar { padding:18px; align-self:start; }
.faq-sidebar h2 { color:var(--cyan); font-family:"Courier New",monospace; letter-spacing:.1em; font-size:18px; margin:8px 12px 16px; }
.category-button { width:100%; border:0; border-radius:10px; background:transparent; color:#ddd; padding:15px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; }
.category-button.active { background:#10131a; color:white; box-shadow:inset 3px 0 0 var(--cyan); }
.category-button span:last-child { color:var(--violet); }
.help-card { margin-top:18px; padding:23px; text-align:center; }
.faq-main { padding:14px; }
.faq-main .accordion-button { padding:20px; font-size:18px; }
.faq-number { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--cyan); border-radius:6px; color:var(--cyan); margin-right:15px; font-family:"Courier New",monospace; }
.question-row { display:flex; align-items:center; }
.hidden-by-search { display:none !important; }

/* Mobile bottom navigation */
.mobile-bottom-nav { display:none; }

/* Toast */
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:#12151c; border:1px solid var(--line); color:white; padding:12px 18px; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; z-index:100; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1000px) {
  :root { --max: 900px; }
  .header-inner { grid-template-columns:180px 1fr 180px; }
  .desktop-nav { gap:28px; }
  .hero-grid,.inner-hero-grid { gap:15px; }
  .display { font-size:62px; }
  .trust-strip { grid-template-columns:1fr 1fr; }
  .trust-item:nth-child(3) { border-left:0; border-top:1px solid var(--line); padding-top:17px; margin-top:17px; }
  .trust-item:nth-child(4) { border-top:1px solid var(--line); padding-top:17px; margin-top:17px; }
  .token-buy-grid { grid-template-columns:300px 1fr; }
  .buy-shell { grid-template-columns:1fr 210px; }
  .story-card { grid-template-columns:300px 1fr; gap:30px; }
  .tokenomics-grid { grid-template-columns:230px 1fr; }
  .key-list { grid-column:1/-1; }
  .social-grid { grid-template-columns:repeat(3,1fr); }
  .channel-grid { grid-template-columns:repeat(3,1fr); }
  .channel-card:nth-child(n+4) { min-height:230px; }
}

@media (max-width: 820px) {
  body { padding-bottom:78px; }
  .container { width:min(calc(100% - 30px),720px); }
  .site-header { height:76px; }
  .header-inner { grid-template-columns:1fr auto auto; }
  .desktop-nav,.header-cta { display:none; }
  .mobile-menu-toggle { display:block; }
  .brand-logo img { width:122px; }
  .hero,.inner-hero { padding-top:26px; }
  .hero-grid,.inner-hero-grid { grid-template-columns:1fr; }
  .hero-copy { order:1; }
  .mascot-stage { order:2; min-height:380px; }
  .inner-hero .mascot-stage { min-height:350px; }
  .display,.display-medium { font-size:clamp(48px,11vw,70px); }
  .lead { font-size:17px; }
  .hero-actions .btn { flex:1 1 220px; }
  .why-grid { grid-template-columns:220px 1fr; padding:24px; gap:25px; }
  .why-copy { padding-left:25px; }
  .token-buy-grid { grid-template-columns:1fr; }
  .buy-shell { grid-template-columns:1fr; }
  .buy-meta { border-left:0; border-top:1px solid var(--line); padding:15px 0 0; }
  .signal-line { grid-template-columns:1fr 1fr; gap:20px; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-end { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; text-align:left; }
  .footer-end p { margin:0; }
  .story-card { grid-template-columns:230px 1fr; gap:25px; }
  .story-card img { height:160px; }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .stat:nth-child(3),.stat:nth-child(5){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
  .stat:last-child { grid-column:1/-1; }
  .about-grid { grid-template-columns:1fr; }
  .tokenomics-grid { grid-template-columns:1fr 1fr; }
  .key-list { grid-column:1/-1; }
    .feature-strip { grid-template-columns:1fr 1fr; gap:20px; }
  .feature-strip .feature:nth-child(3){border-left:0}
  .how-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .how-step { border:0 !important; padding:15px; }
  .how-step:last-child { grid-column:1/-1; }
  .channel-grid { grid-template-columns:1fr 1fr; }
  .community-mission { grid-template-columns:1fr; }
  .community-lower { grid-template-columns:1fr; }
  .faq-layout { grid-template-columns:1fr; }
  .faq-sidebar { overflow-x:auto; display:flex; gap:8px; padding:10px; }
  .faq-sidebar h2,.help-card { display:none; }
  .category-button { min-width:150px; width:auto; }
  .mobile-bottom-nav { position:fixed; bottom:0; left:0; right:0; height:72px; background:rgba(3,4,6,.97); border-top:1px solid var(--line); z-index:70; display:flex; justify-content:space-around; align-items:center; backdrop-filter:blur(16px); }
  .mobile-bottom-nav a { color:var(--muted); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:56px; }
  .mobile-bottom-nav a.active { color:var(--pink); }
  .mobile-bottom-nav .nav-symbol { font-size:22px; line-height:1; }
}

@media (max-width: 560px) {
  .container { width:min(calc(100% - 24px),480px); }
  .section { padding:25px 0; }
  .section-lg { padding:48px 0; }
  .header-inner { gap:8px; }
  .mobile-menu-toggle { width:44px; height:44px; }
  .hero { padding-top:12px; }
  .display,.display-medium { font-size:clamp(43px,12vw,58px); }
  .heading { font-size:37px; }
  .hero-copy .lead { margin:18px 0 22px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .mascot-stage { min-height:320px; }
  .mascot-stage img { width:80%; }
  .mascot-stage::after { bottom:27px; }
  .trust-strip { grid-template-columns:1fr; padding:12px 18px; }
  .trust-item { padding:15px 6px; }
  .trust-item + .trust-item,.trust-item:nth-child(3),.trust-item:nth-child(4) { border-left:0; border-top:1px solid var(--line); margin:0; padding-top:15px; }
  .why-grid { grid-template-columns:1fr; text-align:left; padding:22px; }
  .why-mascot img { width:150px; }
  .why-copy { border-left:0; border-top:1px solid rgba(18,199,244,.45); padding:24px 0 0; }
  .token-overview,.buy-shell { padding:18px; }
  .signal-line { grid-template-columns:1fr; gap:5px; }
  .signal-step { padding-bottom:15px; }
  .signal-step::before { right:auto; width:2px; height:calc(100% + 6px); left:16px; top:32px; }
  .social-grid { grid-template-columns:1fr; gap:10px; }
  .safety-bar { align-items:flex-start; text-align:left; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:25px; }
  .footer-brand { grid-column:1/-1; }
  .footer-end { grid-column:1/-1; flex-direction:column; align-items:flex-start; gap:20px; }
  .footer-end p { white-space:normal; }
  .story-card { grid-template-columns:1fr; padding:14px; gap:18px; }
  .story-card img { height:auto; }
  .cta-band { grid-template-columns:1fr; padding:25px; }
  .cta-actions { flex-direction:column; }
  .stats-strip { grid-template-columns:1fr; padding:10px 20px; }
  .stat,.stat:nth-child(n+3),.stat:last-child { border-left:0; border-top:1px solid var(--line); padding:15px 0; margin:0; grid-column:auto; }
  .stat:first-child { border-top:0; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature { padding:14px; }.feature:nth-child(3){border-left:0}.feature:nth-child(n+3){border-top:1px solid var(--line)}
  .tokenomics-grid { grid-template-columns:1fr; padding:20px; }
  .donut { width:210px; }
  .purchase-panel,  .feature-strip { grid-template-columns:1fr; }
  .feature-strip .feature { border-left:0; border-top:1px solid var(--line); padding:16px 0; }
  .how-grid { grid-template-columns:1fr; padding:18px; }
  .how-step:last-child { grid-column:auto; }
  .channel-grid { grid-template-columns:1fr; }
  .channel-card { min-height:210px; }
  .community-mission { padding:24px; }
  .values-grid { grid-template-columns:1fr; }
  .value { border-left:0 !important; border-top:1px solid var(--line); }
  .value:first-child { border-top:0; }
  .community-stats { grid-template-columns:1fr 1fr; gap:20px; }
  .community-stat:nth-child(3){border-left:0}.community-stat:nth-child(n+3){border-top:1px solid var(--line);padding-top:20px}
  .faq-main { padding:8px; }
  .faq-main .accordion-button { font-size:15px; padding:15px; }
  .faq-number { width:32px; height:32px; margin-right:10px; }
  .mobile-bottom-nav a { min-width:45px; font-size:10px; }
}

/* v5 mascot presentation -----------------------------------------------------
   Three intentional desktop treatments, based on the approved references:
   1) Home: larger, clean TOBIQ with a soft blue glow and simple base.
   2) Story / Token / Buy / FAQ: smaller TOBIQ in a digital grid field.
   3) Community: the same subpage treatment plus community-only symbols. */

.mascot-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 28px;
}

.mascot-stage img {
  position: relative;
  z-index: 4;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
}

/* HOME — clean, prominent and fully visible. */
.home-mascot-stage {
  min-height: 430px;
  padding: 22px 0 48px;
  background: transparent;
}
.home-mascot-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 48%;
  width: 84%;
  aspect-ratio: 1.12;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(80, 103, 255, .33) 0%,
    rgba(50, 69, 185, .18) 40%,
    rgba(25, 31, 83, .08) 58%,
    transparent 74%);
  filter: blur(13px);
}
.home-mascot-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 31px;
  width: 84%;
  height: 62px;
  translate: -50% 0;
  border: 2px solid rgba(112, 146, 255, .68);
  border-radius: 50%;
  box-shadow:
    0 0 25px rgba(75, 113, 255, .82),
    0 10px 34px 13px rgba(62, 98, 255, .15),
    inset 0 0 24px rgba(67, 107, 255, .34);
  transform: perspective(310px) rotateX(68deg);
}
.home-mascot-stage img {
  height: clamp(320px, 26vw, 365px);
  max-width: 81%;
  filter: drop-shadow(0 0 21px rgba(82, 109, 255, .56));
}
.home-mascot-stage .pixel-field { display: none; }

/* STORY / TOKEN / BUY / FAQ — same mascot scale as Home, with the approved
   subpage digital grid and sparse pixels retained. */
.subpage-mascot-stage {
  min-height: 430px;
  padding: 22px 0 48px;
  background:
    linear-gradient(rgba(32, 84, 165, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 84, 165, .075) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, rgba(35, 82, 223, .20), transparent 55%);
  background-size: 28px 28px, 28px 28px, auto;
  background-position: center 7%, center 7%, center;
}
.subpage-mascot-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 48%;
  width: 78%;
  aspect-ratio: 1.1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(44, 108, 255, .45) 0%,
    rgba(54, 58, 203, .20) 43%,
    transparent 72%);
  filter: blur(10px);
}
.subpage-mascot-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 24px;
  width: 82%;
  height: 70px;
  translate: -50% 0;
  border: 2px solid rgba(100, 107, 255, .84);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(55, 127, 255, .95),
    0 0 0 7px rgba(72, 79, 255, .13),
    0 0 0 16px rgba(183, 35, 255, .10),
    0 0 0 27px rgba(255, 32, 174, .045),
    inset 0 0 25px rgba(66, 119, 255, .58);
  transform: perspective(300px) rotateX(68deg);
}
.subpage-mascot-stage img {
  height: clamp(320px, 26vw, 365px);
  max-width: 81%;
  filter: drop-shadow(0 0 16px rgba(68, 108, 255, .61));
}
.subpage-mascot-stage .pixel-field {
  position: absolute;
  inset: 7% 1% 9%;
  z-index: 1;
  opacity: .95;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 31%, var(--blue) 0 4px, transparent 5px),
    radial-gradient(circle at 20% 63%, var(--violet) 0 4px, transparent 5px),
    radial-gradient(circle at 29% 48%, var(--cyan) 0 5px, transparent 6px),
    radial-gradient(circle at 38% 20%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 16%, var(--cyan) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 34%, var(--violet) 0 5px, transparent 6px),
    radial-gradient(circle at 86% 51%, var(--pink) 0 4px, transparent 5px),
    radial-gradient(circle at 91% 70%, var(--blue) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 75%, var(--violet) 0 4px, transparent 5px),
    radial-gradient(circle at 18% 79%, var(--pink) 0 3px, transparent 4px);
}

/* COMMUNITY — same mascot base plus community-only symbols. */
.community-mascot-stage .pixel-field {
  opacity: 1;
  background-image:
    radial-gradient(circle at 8% 22%, var(--cyan) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 44%, var(--violet) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 69%, var(--blue) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 30%, var(--cyan) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 18%, var(--blue) 0 4px, transparent 5px),
    radial-gradient(circle at 77% 39%, var(--cyan) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 25%, var(--pink) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 67%, var(--violet) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 78%, var(--pink) 0 3px, transparent 4px),
    radial-gradient(circle at 13% 81%, var(--violet) 0 3px, transparent 4px);
}
.community-decor {
  position: absolute;
  inset: 4% 1% 10%;
  z-index: 3;
  pointer-events: none;
}
.decor-icon {
  position: absolute;
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 8px currentColor);
  opacity: .92;
}
.decor-chat { left: 12%; top: 16%; color: var(--cyan); }
.decor-users { left: 7%; top: 54%; color: var(--violet); }
.decor-heart { left: 22%; top: 70%; color: var(--pink); }
.decor-bolt { right: 8%; top: 55%; color: #8e53ff; }
.decor-connect { right: 10%; top: 14%; color: var(--pink); }

@media (max-width: 1000px) {
  .home-mascot-stage { min-height: 405px; }
  .home-mascot-stage img { height: clamp(285px, 31vw, 325px); }
  .subpage-mascot-stage { min-height: 405px; }
  .subpage-mascot-stage img { height: clamp(285px, 31vw, 325px); }
}

@media (max-width: 820px) {
  .home-mascot-stage {
    min-height: 385px;
    padding-bottom: 47px;
  }
  .home-mascot-stage img {
    height: min(330px, 72vw);
    max-width: 75%;
  }
  .home-mascot-stage::after { width: 75%; bottom: 29px; }

  .subpage-mascot-stage {
    min-height: 385px;
    padding-bottom: 47px;
  }
  .subpage-mascot-stage img {
    height: min(330px, 72vw);
    max-width: 75%;
  }
  .subpage-mascot-stage::after { width: 82%; bottom: 26px; }
  .decor-icon { width: 42px; height: 42px; }
}

@media (max-width: 560px) {
  .home-mascot-stage {
    min-height: 330px;
    padding: 15px 0 43px;
  }
  .home-mascot-stage img {
    height: min(282px, 72vw);
    max-width: 78%;
  }
  .home-mascot-stage::after {
    width: 78%;
    height: 52px;
    bottom: 25px;
  }

  .subpage-mascot-stage {
    min-height: 330px;
    padding: 15px 0 43px;
    background-size: 23px 23px, 23px 23px, auto;
  }
  .subpage-mascot-stage img {
    height: min(282px, 72vw);
    max-width: 78%;
  }
  .subpage-mascot-stage::after {
    width: 82%;
    height: 54px;
    bottom: 23px;
  }
  .decor-icon { width: 34px; height: 34px; stroke-width: 3.5; }
  .decor-chat { left: 5%; top: 16%; }
  .decor-users { left: 2%; top: 55%; }
  .decor-heart { left: 13%; top: 72%; }
  .decor-bolt { right: 2%; top: 56%; }
  .decor-connect { right: 5%; top: 15%; }
}