/* === DESIGN TOKENS === */
:root{
  --bg-primary:#0a0a0f;
  --bg-secondary:#12121a;
  --text-primary:#f0f0f5;
  --text-secondary:#9898a8;
  --card-bg:rgba(255,255,255,0.04);
  --card-border:rgba(255,255,255,0.08);
  --card-hover-border:rgba(255,255,255,0.15);
  --color-formmarker:#00d2ff;
  --color-jrc:#fc4a1a;
  --color-genieus:#f857a6;
  --color-jso:#38ef7d;
  --font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(14px,1.1vw,16px);scroll-behavior:smooth}
body{
  font-family:var(--font-family);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,iframe{max-width:100%}

/* === ANIMATED BACKGROUND === */
body::before{
  content:'';
  position:fixed;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:
    radial-gradient(ellipse 600px 600px at 20% 30%,rgba(0,210,255,0.06) 0%,transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%,rgba(127,0,255,0.05) 0%,transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 80%,rgba(248,87,166,0.04) 0%,transparent 70%);
  animation:bgShift 20s ease-in-out infinite alternate;
  z-index:0;
  pointer-events:none;
}
@keyframes bgShift{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(-3%,-2%) rotate(3deg)}
}

/* === PARTICLES === */
.particles{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.particle{
  position:absolute;
  width:2px;height:2px;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  animation:float linear infinite;
}
@keyframes float{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* === FOOTER === */
footer{
  position:relative;z-index:1;
  text-align:center;
  padding:3vh 2rem 4vh;
  flex-shrink:0;
}
.footer-text{
  font-size:0.75rem;
  color:var(--text-secondary);
  opacity:0.6;
}
.footer-links{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  margin-top:0.5rem;
}
.footer-links a{
  color:var(--text-secondary);
  opacity:0.5;
  transition:opacity 0.3s;
  font-size:0.75rem;
}
.footer-links a:hover{opacity:1}