:root {
  --bg: #ffffff;
  --glass: rgba(255,255,255,0.08);
  --muted: #555;
  --accent: #22d8ff;
  --accent-2: #8a6bff;
  --card-radius: 14px;
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.1);
  --glass-border: rgba(0,0,0,0.05);
  --accent-glow: rgba(46,230,255,0.18);
  --max-width: 1000px;
  --marquee-duration: 28s;
}

/* base */
html, body {
  margin:0; height:100%;
  font-family: Inter, system-ui, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#111;
  -webkit-font-smoothing: antialiased;
}

#network-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15; /* stronger for visibility */
  transition: opacity 300ms ease;
}

#navbar-root { position: relative; z-index: 3; }
.page-root { position: relative; z-index:2; max-width: var(--max-width); margin: 72px auto; padding:20px; display:flex; flex-direction:column; gap:28px; }

.hero {
  background: rgba(255,255,255,0.85); /* slightly transparent to see canvas */
  border-radius: var(--card-radius);
  padding:28px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  border:1px solid var(--glass-border);
  position: relative;
  overflow:hidden;
}

#hero-title { font-size:clamp(1.8rem,3.4vw,2.8rem); margin:0 0 12px 0; color:#111; letter-spacing:-0.01em; line-height:1.05; }

.lead { color:var(--muted); line-height:1.55; margin:0 0 18px 0; max-width:76ch; }

.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; align-items:center; }

.btn { border:0; padding:10px 16px; border-radius:10px; font-weight:600; cursor:pointer; transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; user-select:none; }

.btn.primary { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 8px 30px rgba(46,230,242,0.15); outline:none; }
.btn.primary:focus { box-shadow:0 8px 30px var(--accent-glow),0 0 0 4px rgba(34,216,255,0.08); }

.btn.ghost { background:transparent; color:#555; border:1px solid rgba(0,0,0,0.08); }
.btn.ghost:focus { box-shadow:0 0 0 4px rgba(138,107,255,0.06); }

.marquee-wrap { overflow:hidden; border-radius:10px; margin-top:18px; max-width:760px; background:rgba(0,0,0,0.03); padding:6px 10px; }
.marquee { display:flex; gap:40px; align-items:center; white-space:nowrap; font-size:0.95rem; color:rgba(0,0,0,0.6); opacity:0.95; transform:translateX(0); animation:marquee var(--marquee-duration) linear infinite; }

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

/* how it works */
.howitworks { padding:4px 2px; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.how-item { background: rgba(0,0,0,0.02); border-radius:10px; padding:16px; border:1px solid rgba(0,0,0,0.05); transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease; }
.how-item:hover { transform:translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.how-item h4 { margin:0 0 8px 0; color:#111; font-size:1.05rem; }
.how-item p { margin:0; color:var(--muted); font-size:0.95rem; }

/* animated reveal */
.animated-item { opacity:0; transform:translateY(8px) scale(.995); transition:opacity .8s ease var(--delay,0ms), transform .8s ease var(--delay,0ms);}
.animated-item.show { opacity:1; transform:translateY(0) scale(1); }

/* responsive */
@media(max-width:980px){ .how-grid{grid-template-columns:1fr;} .page-root{margin:32px 16px;} .hero{padding:18px;} #hero-title{font-size:clamp(1.5rem,6.5vw,2.2rem);} }
@media(max-width:420px){ .marquee-wrap{padding:6px 8px;} .lead{font-size:0.97rem;} }