* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

:root {
  --primary-bg: #0b0f1f;
  --accent-blue: #7c5cff;
  --accent-green: #22d3ee;
  --accent-orange: #a855f7;
  --glass-bg: rgba(18, 24, 51, 0.7);
  --glass-border: rgba(124, 92, 255, 0.25);
}

body {
  font-family: 'Orbitron', monospace;
  background: linear-gradient(135deg,#0b0f1f 0%,#1b2145 50%,#0b0f1f 100%);
  color: #fff;
  overflow-x: hidden;
}
.icon img{
height:36px;
width:36px;
filter: drop-shadow(0 0 6px rgba(255,215,0,0.7));
}
/* ================= BACKGROUND PARTICLES ================= */

.animated-bg{
  position:fixed;
  inset:0;
  z-index:-1;
}
h1{
  max-width:90vw;
  margin:auto;
}
body{
  overflow-x:hidden;
}
.particle{
  position:absolute;
  width:4px;
  height:4px;
  background:var(--accent-blue);
  border-radius:50%;
  opacity:.3;
  animation:float 15s infinite;
}

@keyframes float{
  0%,100%{transform:translateY(100%);opacity:0;}
  10%,90%{opacity:.3;}
  100%{transform:translateY(-100%);}
}

/* ================= NAVBAR ================= */

.logo img{
  height:65px;
}


/* ================= HERO ================= */

section{
  text-align:center;
  padding:30px 12px;
}
.hero-logo{
display:flex;
justify-content:center;
margin-bottom:20px;
}

.hero-logo img{
height:120px;
width:auto;
object-fit:contain;
filter: drop-shadow(0 0 20px rgba(124,92,255,0.6));
}
@media(max-width:768px){

.hero-logo img{
height:80px;
}

}
h1{
  font-size: clamp(26px, 7vw, 48px);
  line-height: 1.2;
  word-break: break-word;
  text-align: center;
}

p{
  margin-top:14px;
  font-size:14px;
  color:#cbd5e1;
}

/* ================= BUTTONS ================= */

.btn-primary{
  background:linear-gradient(135deg,#7c5cff,#4f46e5);
  border:none;
  color:#0b0f1f;
  font-weight:700;
  padding:10px 20px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  transition:.3s;
}

.btn-primary:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(124,92,255,.7);
}

.btn-secondary{
  background:transparent;
  border:2px solid var(--accent-blue);
  color:var(--accent-blue);
  padding:9px 18px;
  border-radius:10px;
  font-size:13px;
  cursor:pointer;
}

/* ================= GLOW ================= */

.glow-text{
  text-shadow:
    0 0 15px rgba(124,92,255,.6),
    0 0 30px rgba(124,92,255,.3);
}

/* ================= FADE ANIMATION ================= */

.fade-in-up{
  opacity:0;
  transform:translateY(20px);
  animation:fade .7s forwards;
}

@keyframes fade{
  to{opacity:1;transform:translateY(0);}
}

.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.delay-300{animation-delay:.3s;}
.delay-400{animation-delay:.4s;}

/* ================= MOBILE OPTIMIZATION ================= */

@media (max-width:768px){

  h1{
    font-size:28px;
  }

  p{
    font-size:12px;
  }

  section{
    padding:40px 10px;
  }

  .btn-primary,
  .btn-secondary{
    font-size:12px;
    padding:8px 14px;
  }

}