:root{
  --bg: #ffffff;
  --panel: #f7fbf9;
  --text: #064e3b;        /* dark green text */
  --muted: #0f766e;       /* teal-green */
  --accent: #10b981;      /* emerald */
  --accent-2: #34d399;    /* lighter emerald */
  --ink: #0a0a0a;
}
:root[data-theme="dark"], [data-theme="dark"]{
  --bg: #0b0f12;
  --panel: #0f141a;
  --text: #e8fff1;
  --muted: #9be6c5;
  --accent: #10b981;
  --accent-2: #34d399;
  --ink: #e5fff6;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

.container { max-width: 1180px; margin: 0 auto; padding: 24px; }

/* Ticker */
.ticker { position: sticky; top:0; z-index: 20; background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(52,211,153,.12)); border-bottom:1px solid rgba(16,185,129,.25); }
.marquee { white-space: nowrap; overflow: hidden; }
.marquee span{ display:inline-block; padding:8px 24px; animation: marquee 22s linear infinite; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-100%);} }

/* Header */
.site-header { position: sticky; top:32px; background: rgba(255,255,255,.6); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(16,185,129,.18); z-index: 19; }
[data-theme="dark"] .site-header{ background: rgba(11,15,18,.6); border-bottom-color: rgba(255,255,255,.08); }
.nav { display:flex; align-items:center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:0.3px; }
.wordmark { font-size: 20px; }
.ticker-chip { font-size: 13px; opacity:.8; border:1px solid rgba(16,185,129,.45); padding:2px 8px; border-radius: 999px; }
.logo { width:28px; height:28px; }
.logo.sm { width:22px; height:22px; }

nav a { color: var(--text); text-decoration: none; opacity:.9; margin-left: 16px; }
nav a:hover { opacity:1; }
.btn { display:inline-block; padding:10px 14px; border:1px solid rgba(16,185,129,.35); border-radius: 12px; background: transparent; color: var(--text); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color:#052e2b; font-weight:700; }
.btn.ghost { background: transparent; }
.btn.small { padding:8px 10px; font-size: 13px; }
.btn.large { padding:12px 18px; font-weight:700; }
.btn.block { display:block; width:100%; margin-bottom: 10px; }
.btn:hover { transform: translateY(-1px); transition: .2s ease; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-inner { padding: 72px 24px 48px; text-align: center; }
.hero h1 { font-size: clamp(36px, 7vw, 72px); line-height:1.05; margin: 0 0 16px; }
.lead { font-size: clamp(16px, 2.2vw, 22px); opacity:.95; max-width:820px; margin: 0 auto 22px; }
.cta-row { display:flex; gap:12px; justify-content:center; margin: 8px 0 20px; flex-wrap: wrap; }
.cta-row.left { justify-content: flex-start; }
.badges { display:flex; gap:10px; justify-content:center; flex-wrap: wrap; opacity:.95; }
.badge { border:1px solid rgba(16,185,129,.35); border-radius: 999px; padding:6px 10px; font-size: 13px; }

/* Glitch effect */
.glitch { position: relative; }
.glitch::before, .glitch::after{
  content: attr(data-text);
  position: absolute; left:0; top:0; width:100%; overflow:hidden; clip-path: inset(0 0 0 0);
}
.glitch::before { transform: translate(2px,0); color: rgba(16,185,129,.65); mix-blend-mode: multiply; }
.glitch::after { transform: translate(-2px,0); color: rgba(52,211,153,.65); mix-blend-mode: multiply; }
.glitch:hover::before{ animation: glitch 0.6s infinite; }
.glitch:hover::after{ animation: glitch 0.6s reverse infinite; }
@keyframes glitch{ 0%{transform:translate(0,0)} 20%{transform:translate(2px,-1px)} 40%{transform:translate(-2px,1px)} 60%{transform:translate(2px,1px)} 80%{transform:translate(-2px,-1px)} 100%{transform:translate(0,0)} }

/* Orb canvas and parallax shapes */
.orb { position: relative; margin: 28px auto 0; width: min(560px, 70vw); height: min(560px, 70vw); }
#orbCanvas { width:100%; height:100%; display:block; border-radius: 50%; }
.parallax { position:absolute; border-radius: 50%; filter: blur(40px); opacity:.25; pointer-events:none; }
.p1 { width: 240px; height: 240px; right: -60px; top: 40px; background: radial-gradient(circle at 30% 30%, rgba(16,185,129,.45), rgba(16,185,129,0)); }
.p2 { width: 320px; height: 320px; left: -80px; bottom: -40px; background: radial-gradient(circle at 70% 70%, rgba(52,211,153,.45), rgba(52,211,153,0)); }

.section { padding: 64px 0; }
.section.alt { background: linear-gradient(180deg, rgba(16,185,129,.06), rgba(16,185,129,0)); }

.grid-2 { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:28px; }
@media (max-width: 900px){
  .grid-2 { grid-template-columns: 1fr; }
}

.card { background: var(--panel); border:1px solid rgba(16,185,129,.2); border-radius:16px; padding:20px; }
.card h3 { margin-top:0; }

/* Steps */
.steps { counter-reset: step; list-style: none; padding-left: 0; max-width: 780px; margin: 0 auto; }
.steps li { counter-increment: step; background: var(--panel); border:1px solid rgba(16,185,129,.2); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.steps li::before { content: counter(step); display:inline-grid; place-content:center; width: 28px; height: 28px; margin-right: 10px; border-radius: 999px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#052e2b; font-weight: 800; }

/* Text box */
.box { width:100%; border:1px solid rgba(16,185,129,.3); border-radius: 12px; padding: 10px; background: var(--panel); color: var(--text); }

/* Stats counters */
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin:18px 0; }
.stats div { background: rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.18); padding:12px; border-radius:10px; text-align:center; }
.stats span { display:block; font-size:13px; opacity:.8; }
.stats b { font-size:22px; }

.muted { color: var(--muted); opacity:.9; font-size: 13px; }

.token-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width: 900px){ .token-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .token-grid { grid-template-columns: 1fr; } }
.tok { background: var(--panel); border:1px solid rgba(16,185,129,.18); border-radius:14px; padding:16px; }

.timeline { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width: 1000px){ .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .timeline { grid-template-columns: 1fr; } }
.phase { background: var(--panel); border:1px solid rgba(16,185,129,.18); border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.phase::after { content:""; position:absolute; inset:auto 0 0 0; height:3px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); animation: progress 3s linear infinite; opacity:.5;}
@keyframes progress{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

.faq details { background: var(--panel); border:1px solid rgba(16,185,129,.18); border-radius:12px; padding:14px; margin:10px 0; }
.faq summary { cursor:pointer; font-weight: 600; }
.faq p, .faq a { opacity:.95; }

.footer { padding: 40px 0; border-top:1px solid rgba(16,185,129,.18); }
.footer-inner { display:flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand-lite { display:flex; align-items:center; gap:10px; opacity:.95; }
.links a { margin-right: 12px; color: var(--text); opacity:.85; }
.disclaimer { font-size:12px; opacity:.7; }

/* Terminal */
.terminal{ border:1px solid rgba(16,185,129,.25); border-radius: 14px; overflow:hidden; }
.term-bar{ display:flex; align-items:center; gap:8px; padding:8px 10px; background: linear-gradient(180deg, rgba(16,185,129,.15), rgba(16,185,129,.08)); border-bottom:1px solid rgba(16,185,129,.25); }
.dot{ width:10px; height:10px; border-radius: 999px; display:inline-block; }
.dot.r{ background:#ff5f56;} .dot.y{ background:#ffbd2e;} .dot.g{ background:#27c93f;}
.term-title{ font-weight:700; opacity:.8; }
.term-body{ padding:16px; height:200px; overflow:auto; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Reveal animation */
.reveal{opacity:1 !important; transform: none !important;}
.revealable{opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease;}