/* Helix Seeds — Base Glassmorphism Design System (Phase 4)
   Shared tokens + components for homepage, protocols, spotlights */

:root {
  --bg: #030303;
  --text: #e0e0e0;
  --muted: #a3a3a3;
  --accent: #00ff41;
  --accent-glow: rgba(0, 255, 65, 0.3);
  --glass: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(10, 10, 10, 0.6);
}

/* Base */
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
h1, h2, h3 { margin: 0 0 0.5rem; color: #fff; }
p { line-height: 1.8; margin: 0 0 1rem; opacity: 0.85; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Background lattice */
.background-canvas { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 50%, #0a0a0a 0%, #030303 100%); }
.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--glass-border) 1px, transparent 1px), linear-gradient(90deg, var(--glass-border) 1px, transparent 1px); background-size: 80px 80px; transform: rotateX(45deg) translateY(-20%); opacity: .3; mask-image: linear-gradient(to bottom, transparent, black); }
.shimmer { position: absolute; inset: 0; background: linear-gradient(45deg, transparent 40%, rgba(0,255,65,.05) 50%, transparent 60%); background-size: 200% 200%; animation: shimmerMove 8s linear infinite; }
@keyframes shimmerMove { 0% { background-position: -100% -100% } 100% { background-position: 100% 100% } }

/* Layout */
.content-wrap { width: 100%; max-width: 900px; margin: 0 auto; padding: 4rem 1rem; position: relative; animation: fadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform:none } }

/* Header */
.mini-lattice { width: 100%; height: 240px; margin-bottom: 1.5rem; border-radius: 24px; background: rgba(0,0,0,.5); border: 1px solid var(--glass-border); overflow: hidden; position: relative; }
.status-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; background: rgba(0,255,65,.1); border:1px solid var(--accent); border-radius:100px; font-size:.75rem; font-weight:700; letter-spacing:1.5px; color:var(--accent); text-transform:uppercase; }
h1.accent span { color:var(--accent); text-shadow: 0 0 20px var(--accent-glow); }
.subtitle { font-size:1.1rem; color: var(--muted); max-width: 640px; margin: .25rem auto 2rem; text-align: center; }

/* Cards & sections */
.info-section { background: var(--card-bg); backdrop-filter: blur(30px); border:1px solid var(--glass-border); padding: 2rem; border-radius: 32px; margin-bottom: 2rem; }
.demo-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.demo-card { background: var(--glass); border: 1px solid var(--glass-border); padding: 2rem; border-radius: 20px; color: inherit; transition: all .3s ease; display: block; }
.demo-card:hover { border-color: var(--accent); background: rgba(0,255,65,.05); transform: translateY(-5px); }

/* Footer meta */
.footer-meta { margin-top: 3rem; display:flex; justify-content: space-between; align-items:center; padding: 1.5rem 0; border-top:1px solid var(--glass-border); font-family: 'Fira Code', monospace; font-size:.8rem; opacity:.5; }
.footer-meta a { color: inherit; }
.footer-meta a:hover { color: var(--accent); }

/* Metrics grid */
.metric-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.metric-card { background: var(--glass); border:1px solid var(--glass-border); padding: 1rem; border-radius: 16px; }
.metric-card label { display:block; font-size:.75rem; text-transform:uppercase; opacity:.6; margin-bottom:.4rem; }
.metric-card span { font-weight:700; color: var(--accent); }

/* Responsive */
@media (max-width: 768px){ .demo-grid { grid-template-columns: 1fr } h1 { font-size: 2.6rem } }