:root{ --bg:#070a0d; --panel:#0b1016; --grid:#0f1a24; --ink:#e8f0f6; --muted:#9fb1c3; --neon:#27ffd6; --lime:#9aff00; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%, #0e1620, var(--bg));color:var(--ink);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border-radius:8px}
.site{position:sticky;top:0;display:flex;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid #13202b;background: linear-gradient(180deg, rgba(8,14,20,.7), rgba(8,14,20,0));backdrop-filter: blur(8px);z-index:10}
.brand img{height:24px;display:block}
.crumbs{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.crumbs a{color:var(--ink);text-decoration:none}

.hero{position:relative;min-height:60vh;display:grid;place-items:center;padding:64px 20px}
.hero__inner{max-width:960px;text-align:center}
.hero h1{font-size: clamp(28px, 5vw, 56px);letter-spacing:-.02em;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 22px}
.cta{display:inline-block;padding:12px 16px;border-radius:999px;background:linear-gradient(90deg, var(--neon), #6affe8);color:#001a16;text-decoration:none;font-weight:600;box-shadow:0 8px 30px rgba(39,255,214,.25)}
.cta:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

.pcb{position:absolute;inset:0;opacity:.9;pointer-events:none}
.pcb svg{width:100%;height:100%}
.trace{stroke:rgba(39,255,214,.35)}
.via{stroke:var(--neon);fill:rgba(39,255,214,.25)}

.grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap:18px;max-width:1100px;margin:0 auto;padding:16px 20px 72px}
.module{position:relative;background:var(--panel);border:1px solid #13202b;border-radius:16px;padding:18px;overflow:hidden}
.module::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg), transparent 0 20%, rgba(39,255,214,.6) 22%, transparent 24% 45%, rgba(154,255,0,.5) 47%, transparent 50% 70%, rgba(39,255,214,.6) 72%, transparent 74% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite}
.module h2{margin:0 0 8px;font-size:18px}
.module p{margin:0 0 12px;color:var(--muted)}
.btn{display:inline-block;background:transparent;color:var(--neon);border:1px solid var(--neon);text-decoration:none;border-radius:10px;padding:8px 12px}
.btn:hover{background:rgba(39,255,214,.08)}
.btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

@keyframes spin{to{ --ang: 360deg; }}

.reveal{opacity:0;transform: translateY(8px);transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important }
}