*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}
body{min-height:100vh;overflow:hidden;background:radial-gradient(circle at center,#111827 0%,#05070c 45%,#020308 100%);color:#fff;font-family:"Inter","Segoe UI",Arial,sans-serif}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;isolation:isolate}.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#00ffff09 1px,transparent 1px),linear-gradient(90deg,#00ffff09 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(ellipse at center,black 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 75%);z-index:-2}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#00dcff14;filter:blur(90px);z-index:-1}
h1{position:relative;  font-family: "Share Tech", sans-serif;
;font-size:clamp(2rem,7vw,3.5rem);font-weight:700;letter-spacing:.12em;text-align:center;color:#fff;text-shadow:0 0 10px #00ffff73 0 0 30px #00ffff40;animation:glow 3s ease-in-out infinite alternate}
h1::before,h1::after{content:"";position:absolute;top:50%;width:60px;height:1px;background:linear-gradient(90deg,transparent,#0ff);opacity:.7}
h1::before{right:calc(100% + 25px)}
h1::after{left:calc(100% + 25px);transform:rotate(180deg)}
@keyframes glow {
from{text-shadow:0 0 8px #00ffff59 0 0 20px #00ffff26}
to{text-shadow:0 0 15px #00ffffb3 0 0 40px #00ffff59}
}
@media (max-width: 600px) {
h1{font-size:clamp(1.8rem,9vw,3rem);letter-spacing:.08em}
h1::before,h1::after{display:none}
.hero::before{background-size:35px 35px}
}