/* styles.css - Futuristic Neon Theme */

/* -------------------------
   Base & Variables
   ------------------------- */
:root{
  --bg: #050510;
  --card: rgba(20, 20, 40, 0.8);
  --muted: #a1a1c9;
  --text: #e6eafc;
  --accent: #0ff;         /* cyan glow */
  --accent-2: #ff00ff;    /* magenta glow */
  --accent-contrast: #fff;
  --radius: 14px;
  --container-width: 1100px;
  --shadow-sm: 0 0 10px rgba(0,255,255,0.3);
  --shadow-md: 0 0 25px rgba(255,0,255,0.4);
  --gap: 1.25rem;
  font-family: "Orbitron", "Audiowide", "Exo 2", sans-serif;
  letter-spacing: 0.03em;
  -webkit-font-smoothing:antialiased;
}

/* Glow animations */
@keyframes glowPulse {
  0% { text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent-2); }
  50% { text-shadow: 0 0 16px var(--accent), 0 0 26px var(--accent-2); }
  100% { text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent-2); }
}

/* Reset & base elements */
*{box-sizing:border-box}
body{
  margin:0;
  background: radial-gradient(circle at 20% 20%, #0b0b1f, #050510);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
}

/* Container */
.container{
  width:90%;
  max-width:var(--container-width);
  margin:0 auto;
  padding:2rem 0;
}

/* -------------------------
   Header
   ------------------------- */
.site-header{
  background: rgba(10,10,25,0.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--accent);
  box-shadow: var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:50;
}

.site-header .container{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 0;
}

.logo{
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  color:var(--accent);
  text-shadow:0 0 10px var(--accent);
  animation: glowPulse 4s infinite;
}

.main-nav{
  margin-left:auto;
  display:flex;
  gap:1rem;
}

.main-nav a{
  color:var(--text);
  text-decoration:none;
  padding:0.5rem 0.75rem;
  border-radius:10px;
  transition:all .2s ease;
  font-weight:600;
}

.main-nav a:hover{
  color:var(--accent-2);
  text-shadow:0 0 12px var(--accent-2);
  transform:translateY(-2px);
}

/* -------------------------
   Hero
   ------------------------- */
.hero{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:3rem 1.5rem;
  margin-top:1.5rem;
  background:linear-gradient(135deg, rgba(15,15,35,0.85), rgba(25,25,55,0.7));
  border:1px solid rgba(0,255,255,0.15);
  border-radius:var(--radius);
  box-shadow:inset 0 0 25px rgba(0,255,255,0.08), 0 0 30px rgba(255,0,255,0.15);
}

.hero h1{
  margin:0;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing:0.05em;
  color:var(--accent);
  text-shadow:0 0 12px var(--accent), 0 0 24px var(--accent-2);
}

.hero p{
  margin:0;
  color:var(--muted);
  max-width:72ch;
}

.cta-row{
  margin-top:1rem;
  display:flex;
  gap:1rem;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:0.7rem 1rem;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:var(--accent-contrast);
  text-decoration:none;
  font-weight:700;
  box-shadow:0 0 12px var(--accent), 0 0 18px var(--accent-2);
  transition:transform .15s ease, box-shadow .15s ease;
}

.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px var(--accent), 0 0 28px var(--accent-2);
}

.btn.ghost{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  text-shadow:0 0 10px var(--accent);
}

/* -------------------------
   Cards / Features
   ------------------------- */
.features,
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--gap);
  margin-top:2rem;
}

.features article,
.card{
  background:var(--card);
  border:1px solid rgba(0,255,255,0.15);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 0 15px rgba(0,255,255,0.1);
  transition:transform .2s ease, box-shadow .2s ease;
}

.features article:hover,
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(0,255,255,0.25), 0 0 25px rgba(255,0,255,0.2);
}

.features h2,
.card h3{
  margin:0 0 0.5rem 0;
  color:var(--accent-2);
  text-shadow:0 0 10px var(--accent-2);
}

.features p,
.card p,
.card li{
  margin:0;
  color:var(--muted);
}

/* Form iframe */
.form-page iframe{
  border-radius:var(--radius);
  border:1px solid var(--accent);
  box-shadow:0 0 20px rgba(0,255,255,0.2);
  background:rgba(15,15,35,0.8);
}

/* -------------------------
   Footer
   ------------------------- */
.site-footer{
  border-top:1px solid var(--accent);
  padding:1.25rem 0;
  margin-top:3rem;
  text-align:center;
  font-size:0.9rem;
  color:var(--muted);
  background:rgba(10,10,25,0.7);
}

/* -------------------------
   Responsive tweaks
   ------------------------- */
@media(max-width:640px){
  .cta-row{ flex-direction:column }
  .btn{ width:100%; text-align:center }
}