@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg: #0a0e1a; --bg-soft: #0d1322; --panel: #111a2e; --panel-2: #0e1626;
  --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.17);
  --text: #eaf0f8; --muted: #9aa7bd; --muted-2: #6b7892;
  --accent: #4f8ff7; --accent-deep: #2f6fe0; --accent-soft: rgba(79,143,247,.13);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: #04060c; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-sign { transform: rotate(45deg); }
details[open] .faq-q { color: var(--accent); }
.faq:hover .faq-q { color: #fff; }

.navlink { position: relative; color: var(--muted); text-decoration: none; transition: color .2s; }
.navlink:hover { color: var(--text); }
.navlink::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--accent); transition: width .25s; }
.navlink:hover::after { width: 100%; }

.card-lift { transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.card-lift:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--panel); }

@keyframes drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

@keyframes marq {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* nav has inline display:flex — need !important to override */
  header nav { display: none !important; }
}

@media (max-width: 768px) {
  header > div { padding: 0 20px !important; height: 60px !important; }

  #about, #tokens, #custody, #compliance { padding: 72px 20px !important; }
  #technology > div, #roadmap > div, #faq > div { padding: 72px 20px !important; }
  footer > div { padding: 56px 20px 32px !important; }

  /* single-column grids (inline style overrides need !important) */
  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:0.95fr 1.05fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* roadmap: 2-col on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* hero headline */
  h1 { font-size: clamp(36px, 10vw, 56px) !important; }

  /* hide hero background SVG on mobile */
  section#top > img[aria-hidden] { display: none !important; }
}