:root{
  --bg: #060b18;
  --bg-2:#0a0f1f;
  --card:#0f1530;
  --text:#e6f1ff;
  --muted:#a7b3c7;
  --accent-1:#14F195; /* Solana green */
  --accent-2:#A962FF; /* Solana purple */
  --accent-3:#00E5FF; /* Aqua/cyan */
  --ring: rgba(20,241,149,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(169,98,255,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(0,229,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(6,11,24,.8), rgba(6,11,24,.35) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo{height:32px; width:auto; display:block}

.primary-nav{
  display:flex; align-items:center; gap:18px;
}
.primary-nav a{
  color:var(--text); text-decoration:none; font-weight:600; font-size:15px;
  opacity:.9;
}
.primary-nav a:hover{opacity:1}
.cta{
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2) 60%, var(--accent-3));
  color:#06101a; text-decoration:none; font-weight:800;
  padding:12px 18px; border-radius:12px; box-shadow: var(--shadow);
  display:inline-block; transition: transform .12s ease;
}
.cta:hover{transform: translateY(-1px)}
.cta.small{padding:8px 12px; font-size:14px}
.ghost{
  border:1px solid rgba(255,255,255,.14);
  color:var(--text); text-decoration:none; font-weight:700;
  padding:12px 18px; border-radius:12px; display:inline-block;
  background: rgba(255,255,255,.02)
}
.hamburger{
  display:none; background:none; border:0; padding:8px; border-radius:8px;
}
.hamburger span{display:block; width:22px; height:2px; background:#d9e6ff; margin:5px 0; border-radius:1px}

.hero{
  padding:72px 0 32px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:40px; align-items:center;
}
.hero-copy h1{
  font-family: Space Grotesk, Inter, system-ui;
  font-size: clamp(40px, 6vw, 72px);
  line-height:1.05; margin:0 0 12px;
  letter-spacing:-.02em;
}
.lead{color:var(--muted); font-size: clamp(16px, 2.2vw, 20px)}
.cta-row{display:flex; gap:14px; margin:22px 0 14px}
.badges{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 0; list-style:none}
.badges li{
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700; font-size:13px; color:#d7e6ff
}

.hero-visual{display:flex; align-items:center; justify-content:center}
.orb{
  position:relative; width:320px; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(169,98,255,.35), rgba(0,229,255,.12) 60%, transparent 100%);
  box-shadow: inset 0 0 80px rgba(0,229,255,.12), 0 0 40px rgba(169,98,255,.15);
}
.core{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.core-img{
  width:min(560px, 86%);
  height:auto;
  object-fit:contain;
  display:block;
}
.ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--ring); animation: spin 14s linear infinite;
}
.r2{inset:12px; animation-duration: 18s; border-color: rgba(169,98,255,.28)}
.r3{inset:24px; animation-duration: 22s; border-color: rgba(0,229,255,.22)}
@keyframes spin{from{transform: rotate(0)} to{transform: rotate(360deg)}}

.section{padding:72px 0}
.section.alt{background: radial-gradient(800px 500px at 100% 0%, rgba(20,241,149,.08), transparent 60%)}
.section .split{display:grid; gap:24px}
.section-head h2{
  font-family: Space Grotesk, Inter, system-ui; font-size: clamp(28px, 3.6vw, 44px); margin:0 0 6px
}
.section-head .sub{color:var(--muted); margin:0}
.section-head.center{text-align:center}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:22px; box-shadow: var(--shadow);
  color:#dfe9ff; line-height:1.65;
}

.story-img{width:min(680px,100%);height:auto;display:block;margin:8px auto;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.figure{display:flex;justify-content:center}

.grid.two{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
}
.pill{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:18px;
}
.pill h3{margin:0 0 4px; font-family: Space Grotesk, Inter, system-ui}
.pill p{margin:0; color:#c7d6f5}

.link-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px;
}
.link-card{
  display:grid; place-items:start; gap:4px; padding:18px; border-radius:14px;
  text-decoration:none; color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.link-card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18)}
.link-card span{font-weight:800; letter-spacing:.02em}
.link-card small{color:var(--muted)}

.link-card.x{box-shadow: inset 0 0 24px rgba(20,241,149,.06)}
.link-card.tg{box-shadow: inset 0 0 24px rgba(0,229,255,.06)}
.link-card.dx{box-shadow: inset 0 0 24px rgba(169,98,255,.06)}

.disclaimer{
  margin-top:10px; color:#8fa3c9; font-size:13px;
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(6,11,24,.6), rgba(6,11,24,.9));
}
.foot{
  display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:22px 0; color:#bcd1f4; font-size:14px;
}
.sep{opacity:.4}

/* CA styles */
.ca-wrap{margin-top:16px; display:flex; justify-content:center}
.ca{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.ca .label{font-weight:800; letter-spacing:.02em; color:#d7e6ff}
.ca code{
  padding:6px 8px; border-radius:8px; background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08); color:#e9f3ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.ca .ca-link{
  text-decoration:none; font-weight:700; color:var(--accent-1);
  border:1px solid rgba(20,241,149,.25); padding:6px 8px; border-radius:8px;
  background: rgba(20,241,149,.06)
}
.ca .ca-link:hover{filter:brightness(1.05)}
@media (max-width: 480px){
  .logo{height:34px}
  .ca{font-size:14px}
  .ca code{word-break: break-all}
}
/* Quick links at top */
.quick-links{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px
}
.quick-links{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, max(120px, 1fr)));
  gap:12px;
  align-items:center;
  margin-top:16px
}
@media (max-width: 900px){
  .quick-links{grid-template-columns: repeat(2, 1fr)}
  .quick-links .ca-inline{
    grid-column: 1 / -1;
  }
}
.quick-links .ql{
  display:inline-flex; justify-content:center; align-items:center;
  height:40px;
  text-decoration:none; font-weight:800; letter-spacing:.2px;
  color:#081322;
  border-radius:12px; border:1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,244,255,.96));
  box-shadow: 0 6px 16px rgba(20,28,46,.18), inset 0 0 0 1px rgba(255,255,255,.5)
}
.quick-links .ql:hover{transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,28,46,.22), inset 0 0 0 1px rgba(255,255,255,.6)}
.quick-links .ql.x{background: linear-gradient(180deg, #14F195, #10c47b); color:#061a13}
.quick-links .ql.tg{background: linear-gradient(180deg, #00E5FF, #00b8d1); color:#03151a}
.quick-links .ql.dx{background: linear-gradient(180deg, #A962FF, #8842ff); color:#140a28}
.quick-links .ql.gmgn{background: linear-gradient(180deg, #FFE570, #ffc438); color:#241700}
.quick-links .ca-inline{
  display:grid; grid-template-columns: auto 1fr auto auto; gap:8px; align-items:center;
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,16,35,.65); backdrop-filter: blur(6px)
}
@media (max-width: 768px){
  .quick-links .ca-inline{
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap:8px;
    padding:10px 12px;
  }
  .quick-links .ca-inline .label{
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 4px;
  }
  .quick-links .ca-inline code{
    grid-column: 1 / -1;
    text-align: center;
    font-size:10px;
    padding:8px 6px;
    word-break: break-all;
    line-height: 1.3;
  }
  .quick-links .ca-inline .copy{
    grid-column: 1 / 2;
    justify-self: end;
    padding: 6px 12px;
    font-size: 12px;
  }
  .quick-links .ca-inline .scan{
    grid-column: 2 / 3;
    justify-self: start;
    font-size: 12px;
  }
}
.quick-links .ca-inline .label{font-weight:800; color:#e3eeff}
.quick-links .ca-inline code{
  font-size:12px; color:#e9f3ff; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  padding:6px 8px; border-radius:8px; word-break: break-all
}
.quick-links .ca-inline .copy{
  font-weight:800; border:1px solid rgba(20,241,149,.45); background: rgba(20,241,149,.18);
  color:#071d14; border-radius:8px; padding:6px 8px
}
.bottom-art{
  width:100%;
  height:auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  padding-top:0;
  background: none;
  z-index:1;
}
.bottom-art-img{
  max-width: min(1100px, 96%);
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  filter:saturate(1.05);
}
@media (max-width: 768px){
  .bottom-art{ padding-top:0; }
  .bottom-art-img{ max-width: 100%; }
}

.quick-links .ca-inline .scan{
  text-decoration:none; font-weight:800; color:var(--accent-1)
}



/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; gap:24px}
  .hero{padding-top:56px}
}
@media (max-width: 780px){
  .primary-nav{display:none}
  .hamburger{display:block}
  .link-grid{grid-template-columns: 1fr}
  .grid.two{grid-template-columns: 1fr}
  .orb{width:260px}
}

/* Mobile menu panel (revealed via JS by toggling .open on header) */
.site-header.open .primary-nav{
  position:absolute; right:4%; top:62px; display:flex; flex-direction:column; gap:8px;
  background: rgba(8,12,26,.95); padding:12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
}
.site-header.open .primary-nav a{padding:8px 10px; border-radius:8px; background: rgba(255,255,255,.02)}