/* ============ Core ============ */
* { scroll-behavior: smooth; transition: all 0.3s ease-in-out; }
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg: #0a0f1a;
  --bg2:#0f1730;
  --text:#eaf3ff;
  --muted:#9bb2c9;
  --card: rgba(255,255,255,0.04);
  --border: 1px solid rgba(255,255,255,0.06);
  --radius: 16px;
  --accA:#00e5ff;
  --accB:#7b61ff;
  --shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-theme="light"]{
  --bg:#f7fbff; --bg2:#eaf3ff; --text:#0a0f1a; --muted:#4c5b6a;
  --card: rgba(0,0,0,0.04); --border:1px solid rgba(0,0,0,0.06);
}

body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background: radial-gradient(800px 500px at 10% 0%, rgba(0,140,255,.06), transparent 40%),
              linear-gradient(180deg,var(--bg),var(--bg2));
  overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* Background FX toggles */
#particles{ position:fixed; inset:0; z-index:-1; opacity: .4; display:none }
.bg-glow{ position:fixed; inset:-20% -10% -10% -10%; z-index:-2; pointer-events:none;
  background: radial-gradient(600px 400px at 80% 10%, rgba(123,97,255,.16), transparent 60%),
              radial-gradient(700px 460px at 10% 90%, rgba(0,229,255,.12), transparent 60%);
  filter: blur(20px);
}
html[data-fx="particles"] #particles{ display:block }
html[data-fx="particles"] .bg-glow{ display:none }

/* Skip */
.skip{ position:absolute; left:12px; top:12px; background:#081022; color:#fff; padding:8px 12px; border-radius:8px; transform:translateY(-150%); transition:.2s }
.skip:focus{ transform:translateY(0) }

/* Nav */
.nav{ position:sticky; top:12px; margin:12px; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:14px; background:var(--card); border:var(--border); backdrop-filter: blur(12px); box-shadow:var(--shadow); z-index:50;
}
.logo{ text-decoration:none; color:var(--text); font-weight:800 }
.nav__links{ list-style:none; display:flex; gap:12px; padding:0; margin:0 }
.nav__links a{ text-decoration:none; color:var(--text); padding:8px 10px; border-radius:10px; position:relative }
.nav__links a::after{ content:""; position:absolute; left:10%; bottom:-6px; height:3px; width:80%; background:linear-gradient(90deg,var(--accA),var(--accB));
  transform:scaleX(0); transform-origin:left; transition:transform .25s }
.nav__links a:hover::after{ transform:scaleX(1) }
.nav__right{ display:flex; gap:8px; align-items:center }
.btn{ border:none; cursor:pointer; font-weight:700; border-radius:12px; padding:10px 14px }
.btn.icon{ background:transparent; border:var(--border) }
.btn.primary{ background: linear-gradient(90deg,var(--accA),var(--accB)); color:#07101a; box-shadow:0 12px 40px rgba(124,63,255,.16) }
.btn.ghost{ background:transparent; border:var(--border); color:var(--text) }
.only-mobile{ display:none }

/* Drawer */
.drawer{ position:fixed; left:12px; right:12px; top:66px; background:var(--card); border:var(--border); border-radius:14px; padding:12px; display:none; z-index:40 }
.drawer a{ display:block; padding:10px 12px; text-decoration:none; color:var(--text); border-radius:10px }
.drawer a:hover{ background:rgba(255,255,255,0.06) }

/* Containers */
.container{ width: min(1100px, calc(100% - 24px)); margin-inline:auto }
.section{ padding:56px 0; text-align:center }
.section h2{ font-size:1.6rem; margin:0 0 8px; color:var(--accA) }
.muted{ color:var(--muted) }

/* Hero */
.hero{ display:grid; grid-template-columns: 140px 1fr; gap:20px; align-items:center; padding:28px; margin-top:32px;
  background:var(--card); border:var(--border); border-radius:18px; backdrop-filter: blur(10px); box-shadow:var(--shadow)
}
.hero__avatar{ width:140px; height:140px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,.06) }
.hero h1{ margin:0; font-size:2rem }
.sub{ margin:.4rem 0 0; color:var(--muted) }
.grad{ background:linear-gradient(90deg,var(--accA),var(--accB)); -webkit-background-clip:text; background-clip:text; color:transparent }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.chip{ padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); text-decoration:none; color:var(--text); font-weight:700 }
.actions{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap }

/* Cards & grids */
.card{ background:var(--card); border:var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow) }
.grid{ display:grid; gap:14px }
.team{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.team .card img{ width:96px; height:96px; border-radius:12px; object-fit:cover; margin-bottom:10px }
.videos{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.videos iframe{ width:100%; height:190px; border:none; border-radius:12px }
.stats{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items:stretch }
.stat{ padding:18px; text-align:center; border-radius:16px; background:var(--card); border:var(--border) }
.stat .num{ display:block; font-size:1.8rem; font-weight:800; color:var(--accA) }

/* Contact */
.contact{ max-width:720px; margin-inline:auto }

/* Footer */
.footer{ text-align:center; padding:24px 0; color:var(--muted) }

/* Reveal */
.fade{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
.fade.reveal{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 900px){
  .nav__links{ display:none }
  .only-mobile{ display:inline-flex }
  .hero{ grid-template-columns:1fr; text-align:center }
  .hero__avatar{ margin: 0 auto }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ==== Extra Finishing Touches ==== */

/* Shimmer gradient for hero name */
.grad {
  background: linear-gradient(90deg, var(--accA), var(--accB), var(--accA));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Avatar glow pulse */
.hero__avatar {
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
  animation: pulse 3s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.2); }
  50% { box-shadow: 0 0 35px rgba(123,97,255,0.5); }
}

/* Button hover animations */
.btn.primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.btn.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--accA), var(--accB), var(--accA));
  background-size: 200%;
  z-index: 0;
  opacity: 0;
  transition: opacity .3s;
}
.btn.primary:hover::before {
  opacity: 1;
  animation: gradientMove 2s linear infinite;
}
.btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Card hover tilt */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px) rotateX(4deg) rotateY(-3deg);
  box-shadow: 0 15px 40px rgba(0,229,255,0.15);
}

/* Section fade-up reveal (more cinematic) */
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* ==== Advanced Visual Effects ==== */

/* Starfield twinkle effect */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://www.transparenttextures.com/patterns/stardust.png") repeat;
  opacity: 0.15;
  animation: twinkle 6s infinite alternate;
  pointer-events: none;
  z-index: -3;
}
@keyframes twinkle {
  0% { opacity: 0.1; }
  100% { opacity: 0.25; }
}

/* Neon glow border effect */
.neon-border {
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--accA), var(--accB)) 1;
  box-shadow: 0 0 20px rgba(0,229,255,0.2), 0 0 40px rgba(123,97,255,0.2);
  transition: all .3s ease;
}
.neon-border:hover {
  box-shadow: 0 0 25px rgba(0,229,255,0.5), 0 0 50px rgba(123,97,255,0.5);
  transform: scale(1.02);
}

/* Floating animation for hero content */
.hero__text {
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Animated underline for headings */
.section h2 {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  color: var(--accB);
}
.section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accA), var(--accB));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.section h2:hover::after {
  transform: scaleX(1);
}

/* Smooth glow hover for chips (social links) */
.chip {
  transition: background .3s, transform .2s;
}
.chip:hover {
  background: linear-gradient(90deg, var(--accA), var(--accB));
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(123,97,255,.3);
}

/* Footer glow line */
.footer {
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--accA), var(--accB));
  opacity: .4;
}

/* ==== ULTRA POLISHED EFFECTS ==== */

/* Global smooth transitions */
* {
  transition: all 0.3s ease;
}

/* Animated background gradient overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,229,255,0.08), rgba(123,97,255,0.08), rgba(0,229,255,0.08));
  background-size: 400% 400%;
  animation: bgShift 15s ease infinite;
  z-index: -4;
}
@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glassmorphic glowing cards */
.card {
  backdrop-filter: blur(18px) saturate(160%);
  background: rgba(20, 25, 40, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 25px rgba(0,229,255,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 40px rgba(123,97,255,0.25);
}

/* Hero glowing headline with holographic shimmer */
.hero h1 span {
  display: inline-block;
  background: linear-gradient(90deg, var(--accA), var(--accB), #ff00ff, var(--accA));
  background-size: 300%;
  -webkit-background-clip: text;
  color: transparent;
  animation: holoShimmer 6s linear infinite;
}
@keyframes holoShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Neon glowing buttons */
.btn.primary {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accA), var(--accB));
  color: #fff;
  font-weight: 800;
  position: relative;
}
.btn.primary::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--accA), var(--accB), #ff00ff, var(--accA));
  background-size: 300%;
  filter: blur(12px);
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
}
.btn.primary:hover::after {
  opacity: 1;
  animation: glowMove 4s linear infinite;
}
@keyframes glowMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Floating chips with glow */
.chip {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.3s, box-shadow 0.3s;
}
.chip:hover {
  background: linear-gradient(90deg, var(--accA), var(--accB));
  color: #fff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 15px rgba(0,229,255,0.4);
}

/* Animated grid background for sections */
.section {
  position: relative;
  overflow: hidden;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: scale(1.2);
  opacity: 0.05;
  z-index: -1;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0% { transform: translateY(0) scale(1.2); }
  100% { transform: translateY(-60px) scale(1.2); }
}

/* Footer neon glow */
.footer {
  text-align: center;
  padding: 24px 0;
  color: var(--muted);
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 20px rgba(0,229,255,0.1);
}
.footer span.ishaan {
  background: linear-gradient(90deg, var(--accA), var(--accB));
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* ==== NEXT LEVEL CYBERPUNK EFFECTS ==== */

/* Animated neon streaks in background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,229,255,0.06) 0px,
    rgba(0,229,255,0.06) 2px,
    transparent 2px,
    transparent 20px
  );
  background-size: 200% 200%;
  animation: streaks 15s linear infinite;
  z-index: -5;
}
@keyframes streaks {
  0% { background-position: 0 0; }
  100% { background-position: -200% 200%; }
}

/* Glitch hover effect for headings */
.section h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}
.section h2::before,
.section h2::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; overflow: hidden;
  color: var(--accA);
  clip: rect(0, 900px, 0, 0);
}
.section h2::before {
  animation: glitch1 2s infinite linear alternate-reverse;
  color: var(--accA);
}
.section h2::after {
  animation: glitch2 2.5s infinite linear alternate-reverse;
  color: var(--accB);
}
@keyframes glitch1 {
  0% { clip: rect(20px, 9999px, 70px, 0); transform: translate(-2px,-2px); }
  50% { clip: rect(50px, 9999px, 100px, 0); transform: translate(2px,2px); }
  100% { clip: rect(10px, 9999px, 60px, 0); transform: translate(-1px,1px); }
}
@keyframes glitch2 {
  0% { clip: rect(40px, 9999px, 80px, 0); transform: translate(2px,-1px); }
  50% { clip: rect(15px, 9999px, 90px, 0); transform: translate(-1px,1px); }
  100% { clip: rect(30px, 9999px, 70px, 0); transform: translate(1px,-2px); }
}

/* Rainbow neon border animation */
.neon-border {
  border: 3px solid transparent;
  border-radius: 14px;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(120deg, #ff0080, #7928ca, #00e5ff, #00ff85, #ff0080) border-box;
  background-size: 400%;
  animation: neonBorder 10s linear infinite;
}
@keyframes neonBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* Navigation bar neon underglow */
.nav {
  box-shadow: 0 0 20px rgba(0,229,255,0.15),
              0 4px 25px rgba(123,97,255,0.25),
              inset 0 -4px 15px rgba(0,229,255,0.15);
  position: sticky;
}
.nav__links a:hover {
  color: var(--accA);
  text-shadow: 0 0 6px var(--accA), 0 0 12px var(--accB);
}

/* Animated hover aura on videos */
.videos iframe {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.videos iframe:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(123,97,255,0.35), 0 0 50px rgba(0,229,255,0.35);
}

/* Cyberpunk "scanline" overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: -2;
  pointer-events: none;
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 8px; }
}

/* Rainbow glowing footer line */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff0080, #7928ca, #00e5ff, #00ff85, #ff0080);
  background-size: 300%;
  animation: neonFooter 6s linear infinite;
}
@keyframes neonFooter {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Fan Messages */
.fan-messages {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 260px;
  padding: 12px;
  background: var(--card);
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: 100;
  overflow: hidden;
}

.fan-message {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeSlide 1s ease forwards;
}

.fan-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fan-text {
  flex: 1;
}

.fan-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: bold;
}

.fan-quote {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 600px) {
  .fan-messages {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 10px;
    max-width: 90%;
  }
}

/* Mini Poll Box */
.poll-box {
  position: fixed;
  bottom: 100px; /* above fan messages */
  right: 20px;
  max-width: 280px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  border: var(--border);
  box-shadow: var(--shadow);
  z-index: 90;
  text-align: left;
}

.poll-question {
  font-size: 1rem;
  margin: 0 0 10px;
  font-weight: bold;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poll-option {
  background: rgba(255,255,255,0.05);
  border: var(--border);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.3s, transform 0.2s;
}
.poll-option:hover {
  background: linear-gradient(90deg, var(--accA), var(--accB));
  color: #fff;
  transform: translateY(-2px);
}

.poll-results {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Mobile */
@media (max-width: 600px) {
  .poll-box {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 90px;
    max-width: 90%;
  }
}

/* ==== Extra Animations for Fan Box & Poll ==== */

/* Slide & Fade Entrance */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.fan-messages, .poll-box {
  animation: slideIn 0.8s ease forwards;
}

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(0,229,255,0.25); }
  50% { box-shadow: 0 0 25px rgba(123,97,255,0.5); }
}
.fan-messages, .poll-box {
  box-shadow: 0 0 12px rgba(0,229,255,0.25);
  animation: pulseGlow 3s infinite ease-in-out;
}

/* Fan Message Fade */
@keyframes fanFade {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.fan-message {
  opacity: 0;
  animation: fanFade 0.6s ease forwards;
}

/* Poll Button Click Pop */
.poll-option:active {
  transform: scale(0.9);
  background: linear-gradient(90deg,var(--accA),var(--accB));
  color: #fff;
}

/* Floating Idle Animation */
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.fan-messages {
  animation: floaty 6s ease-in-out infinite;
}

/* Fan of the Week Spotlight (inline card) */
.fan-week {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  margin: 20px auto;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  border: var(--border);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
  animation: fanGlow 3s infinite ease-in-out;
}

.fan-week-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid gold;
  box-shadow: 0 0 12px gold;
  flex-shrink: 0;
}

.fan-week-text {
  flex: 1;
}

.fan-week-title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: gold;
}

.fan-week-name {
  margin: 4px 0 0;
  font-size: 1.1rem;
  font-weight: bold;
}

/* === Extra Animations Add-on === */

/* Hero Avatar Hover Spin */
.hero__avatar:hover {
  transform: rotate(5deg) scale(1.05);
  transition: transform 0.4s ease;
}

/* Floating Social Chips with Glow Trails */
.chip {
  position: relative;
  overflow: hidden;
}
.chip::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.15);
  transform: skewX(-20deg);
}
.chip:hover::before {
  left: 200%;
  transition: left 0.7s ease;
}

/* Fan Messages Rotation Flip */
.fan-message {
  animation: flipIn 0.8s ease;
}
@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}

/* Poll Box Idle Bounce */
.poll-box {
  animation: bounce 6s infinite ease-in-out;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Animated Neon Border Glow for Fan of the Week */
.fan-week {
  border: 2px solid;
  border-image: linear-gradient(90deg, #ff0080, #00e5ff, #ff0080) 1;
  animation: borderShift 6s linear infinite;
}
@keyframes borderShift {
  0% { border-image-source: linear-gradient(90deg, #ff0080, #00e5ff, #ff0080); }
  100% { border-image-source: linear-gradient(450deg, #ff0080, #00e5ff, #ff0080); }
}

/* === Extra Visual Spice Pack === */

/* Hero title breathing glow */
.hero h1 {
  text-shadow: 0 0 10px rgba(0,229,255,0.4), 0 0 20px rgba(123,97,255,0.4);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { text-shadow: 0 0 8px rgba(0,229,255,0.2), 0 0 18px rgba(123,97,255,0.2); }
  50% { text-shadow: 0 0 20px rgba(0,229,255,0.6), 0 0 40px rgba(123,97,255,0.6); }
}

/* Floating "parallax tilt" on cards */
.card:hover {
  transform: perspective(800px) rotateX(6deg) rotateY(-6deg) scale(1.03);
  transition: transform .4s ease, box-shadow .4s ease;
}
.card:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(0,229,255,0.25), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

/* Glowing stat numbers pulse */
.stat .num {
  animation: numPulse 2.5s ease-in-out infinite;
}
@keyframes numPulse {
  0%, 100% { color: var(--accA); text-shadow: 0 0 6px rgba(0,229,255,.3); }
  50% { color: var(--accB); text-shadow: 0 0 15px rgba(123,97,255,.5); }
}

/* Floating glow around team avatars */
.team .card img {
  box-shadow: 0 0 12px rgba(0,229,255,0.2);
  transition: box-shadow .3s ease, transform .3s ease;
}
.team .card img:hover {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 0 25px rgba(123,97,255,0.6);
}

/* Wavy underline animation for links */
.nav__links a {
  position: relative;
  overflow: hidden;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: -100%; bottom: -4px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accA), var(--accB));
  animation: wave 4s linear infinite;
}
@keyframes wave {
  0% { left: -100%; }
  50% { left: 0; }
  100% { left: 100%; }
}