:root{
  --bg1:#000000;
  --bg2:#050509;
  --text:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Sora', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg, #0a0a0f 0%, #2d1b4e 50%, #0a0a0f 100%);background-size:300% 300%;animation:gradientShift 12s ease-in-out infinite;color:var(--text);-webkit-font-smoothing:antialiased}

@keyframes gradientShift{
  0%{background-position:0% 0%}
  25%{background-position:100% 100%}
  50%{background-position:100% 0%}
  75%{background-position:0% 100%}
  100%{background-position:0% 0%}
}

#tsparticles{position:fixed;inset:0;z-index:0;background:linear-gradient(135deg, #0a0a0f 0%, #1a1225 50%, #0a0a0f 100%);background-size:300% 300%;animation:gradientShift 25s ease-in-out infinite}
.site-main{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;padding:2rem;pointer-events:none}
h1{margin:0;font-weight:700;font-size:clamp(3rem,12vw,8rem);letter-spacing:0.01em;color:var(--text);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}
@media (max-width:420px){
  h1{font-size:clamp(2rem,22vw,4rem)}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}