:root{
  --bg:#000916;
  --grid:#0a1d2f;
  --mint:#A9FFCB;         /* primary */
  --aqua:#11D8E6;         /* secondary */
  --magenta:#FF4FCF;      /* accent */
  --text:#E9F3FF;
  --muted:#9bb0c8;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  overflow-x:hidden;
}

/* Background grid + halo */
.bg-grid{
  position:fixed; inset:0; background:
    linear-gradient(transparent 23px, rgba(255,255,255,.05) 24px),
    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.05) 24px);
  background-size:24px 24px;
  filter:drop-shadow(0 0 10px rgba(17,216,230,.05));
  opacity:.15; z-index:-2; animation: drift 40s linear infinite;
}
@keyframes drift{ to{transform:translateY(-24px)} }

.bg-halo{
  position:fixed; inset:-10% -10% auto -10%; height:60vh;
  background: radial-gradient(60% 60% at 50% 40%,
      rgba(169,255,203,.18) 0%,
      rgba(255,79,207,.18) 35%,
      rgba(0,0,0,0) 70%);
  filter: blur(40px) saturate(130%);
  z-index:-1; pointer-events:none;
}

/* Header */
.nav{
  max-width:1100px; margin:16px auto 0; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.wordmark{letter-spacing:.5px; font-size:18px}
.mark .ring{stroke:var(--mint); stroke-width:2; opacity:.7}
.mark .core{fill:var(--magenta); opacity:.85}
.links a{
  color:var(--muted); text-decoration:none; margin-left:16px; font-weight:600;
}
.links a:hover{color:var(--text)}

/* Hero */
.hero{
  max-width:1100px; margin:8vh auto 0; padding:0 20px; text-align:center;
}
.hero h1{
  margin:0 0 12px; letter-spacing:.2px;
  font-size: clamp(36px, 6vw, 72px); line-height:1.08;
}
.hero .accent{color:var(--mint); text-shadow:0 0 22px rgba(169,255,203,.35)}
.hero .by{color:var(--magenta); font-weight:700}
.sub{color:var(--muted); max-width:720px; margin:10px auto 24px}

.cta{display:flex; gap:12px; justify-content:center; margin:16px 0 36px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:700; transition:transform .08s ease;
  box-shadow: var(--shadow);
}
.btn.primary{
  background: linear-gradient(135deg, var(--mint), var(--aqua));
  color:#04121a; border:1px solid rgba(169,255,203,.55);
}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{
  color:var(--mint); border:1px solid rgba(169,255,203,.35); background:transparent;
}
.btn[aria-disabled="true"]{opacity:.6; cursor:not-allowed}

/* “Quant seal” */
.seal{
  position:relative; width:270px; height:270px; margin:0 auto 12px;
  display:grid; place-items:center; filter: drop-shadow(0 8px 40px rgba(17,216,230,.2));
}
.seal-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(169,255,203,.35);
  display:grid; place-items:center; overflow:hidden;
  backdrop-filter: blur(2px);
}
.seal-ring span{
  color:var(--muted); font-weight:700; letter-spacing:3px;
  text-transform:uppercase; font-size:12px;
  animation:spin 20s linear infinite;
  white-space:nowrap;
}
@keyframes spin{to{transform:rotate(360deg)}}

.seal-core{
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(169,255,203,.35), rgba(255,79,207,.25) 60%, transparent 65%);
  display:grid; place-items:center; position:relative;
  border:1px solid rgba(255,255,255,.08);
}
.seal-core .ring{stroke:rgba(169,255,203,.7); stroke-width:2}
.seal-core .wave{stroke:var(--magenta); stroke-width:2; fill:none; opacity:.8; filter:drop-shadow(0 0 6px rgba(255,79,207,.5))}
.seal-core .node{fill:var(--mint); filter:drop-shadow(0 0 8px rgba(169,255,203,.7))}
.seal-text{
  position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-weight:900; letter-spacing:2px; color:#02131a; mix-blend-mode:screen;
}

/* Features */
.features{
  max-width:1100px; margin:56px auto; padding:0 20px;
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr);
}
.card{
  background: rgba(10,29,47,.55); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px; box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}
.card h3{margin:0 0 6px; color:var(--mint)}
.card p{margin:0; color:var(--muted)}

@media (max-width:900px){ .features{grid-template-columns:1fr} }

/* Footer */
.foot{
  max-width:1100px; margin:40px auto 40px; padding:0 20px;
  display:flex; gap:12px; justify-content:space-between; color:var(--muted);
  font-size:14px;
}