:root{
  --neon: #00f6ff;
  --neon-soft: rgba(0,246,255,.15);
  --bg-darker: #0c0f14;
  --glass: rgba(255,255,255,.04);
  --tw-shadow: 0 10px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; background: var(--bg-darker);}
.brand-text{font-family:Orbitron,Inter,system-ui; letter-spacing:.5px}
.display-4, h1,h2,h3,h4,h5{font-family:Orbitron,Inter,system-ui}
.fw-extrabold{font-weight:800}

.glassy{background:var(--glass)}
.blur{backdrop-filter:saturate(1.2) blur(8px)}

.logo-badge{width:38px;height:38px;background:linear-gradient(135deg,var(--neon),#6ef);color:#051014}
.btn-neon{background:var(--neon); color:#061016; border:0; box-shadow:0 0 20px var(--neon-soft)}
.btn-neon:hover{filter:brightness(.95)}
.text-neon{color:var(--neon)}
.bg-darker{background:var(--bg-darker)}
.bg-gradient-laser{background:linear-gradient(90deg,var(--neon),#6ef,#a9f);}
.card-neo{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); box-shadow:var(--tw-shadow); border-radius:1rem}
.icon-box{width:44px;height:44px;border:1px solid rgba(255,255,255,.2); display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem; margin-bottom:.75rem}
.footer-link{color:#9aa4b2;text-decoration:none}
.footer-link:hover{color:#e6edf3}
.hover-up{transition:transform .2s ease}
.hover-up:hover{transform:translateY(-2px)}

.hero-section{position:relative; background:
  radial-gradient(1200px 400px at 10% -10%, rgba(0,246,255,.06), transparent),
  radial-gradient(1000px 300px at 90% -20%, rgba(170,0,255,.08), transparent);
}
.hero-glow{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(600px 200px at 70% 30%, rgba(0,246,255,.07), transparent);
}
.floating{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.page-hero{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}

.reveal{opacity:0; transform:translateY(14px); transition:all .6s cubic-bezier(.2,.6,.2,1)}
.reveal.reveal-visible{opacity:1; transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}

.border-secondary-subtle{--bs-border-color: rgba(255,255,255,.12)!important}
.small, .text-secondary{color:#98a2b3!important}

.rounded-4{border-radius:1rem}

/* Extra Animations */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px var(--neon-soft), 0 0 24px var(--neon-soft); }
  50% { box-shadow: 0 0 24px var(--neon), 0 0 48px var(--neon-soft); }
}
.btn-neon { animation: glowPulse 3s infinite ease-in-out; }

@keyframes hueRotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.text-neon-animated { display:inline-block; background:linear-gradient(90deg,var(--neon),#9b5cff,#ff3cac); -webkit-background-clip:text; color:transparent; animation:hueRotate 8s linear infinite; }

.card-neo { transition: transform .4s ease, box-shadow .4s ease; }
.card-neo:hover { transform: translateY(-6px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,.5), 0 0 20px var(--neon-soft); }

.icon-box { transition:transform .3s ease, color .3s ease; }
.icon-box:hover { transform:scale(1.2) rotate(8deg); color:var(--neon); }

/* Animate links */
.footer-link { position:relative; transition:color .3s; }
.footer-link::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--neon); transition:width .3s; }
.footer-link:hover::after { width:100%; }

/* Glow border animation */
@keyframes borderGlow {
  0% { border-color: rgba(0,246,255,.1); }
  50% { border-color: rgba(0,246,255,.5); }
  100% { border-color: rgba(0,246,255,.1); }
}
.card-neo { animation:borderGlow 6s infinite; }

/* Floating animation for multiple images */
.floating { animation: float 6s ease-in-out infinite; }
.floating-alt { animation: float 8s ease-in-out infinite reverse; }

/* ================= More Animated Effects ================= */

/* Page fade-in */
body {
  animation: pageFadeIn 1s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Hero gradient shift */
.hero-section {
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Flicker neon text */
.text-flicker {
  color: var(--neon);
  text-shadow: 0 0 4px var(--neon), 0 0 8px var(--neon-soft);
  animation: flicker 3s infinite;
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.3; }
}

/* Button ripple effect */
.btn-neon {
  position: relative;
  overflow: hidden;
}
.btn-neon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width .6s ease, height .6s ease, opacity .8s ease;
}
.btn-neon:active::after {
  width: 200%;
  height: 500%;
  opacity: 0;
  transition: 0s;
}

/* Particle dot animation */
@keyframes floatDots {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-80px) scale(0.5); opacity: 0; }
}
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  opacity: 0.6;
  animation: floatDots 6s linear infinite;
}
.particle:nth-child(2){ left:20%; animation-delay:1s; }
.particle:nth-child(3){ left:40%; animation-delay:2s; }
.particle:nth-child(4){ left:60%; animation-delay:3s; }
.particle:nth-child(5){ left:80%; animation-delay:4s; }

/* Image hover zoom */
img:hover {
  transform: scale(1.05);
  transition: transform .6s ease;
}

/* Navbar link hover glow */
.nav-link {
  transition: color .3s, text-shadow .3s;
}
.nav-link:hover {
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon);
}

/* ================= Even More CSS Animations ================= */

/* Continuous rotate */
.spin-slow {
  display:inline-block;
  animation: spin 12s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Continuous pulse */
.pulse-loop {
  animation: pulseLoop 2.5s infinite;
}
@keyframes pulseLoop {
  0%,100% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.05); opacity:.8; }
}

/* Wave text animation */
.wave span {
  display:inline-block;
  animation: wave 2s ease-in-out infinite;
}
.wave span:nth-child(2){ animation-delay:0.1s; }
.wave span:nth-child(3){ animation-delay:0.2s; }
.wave span:nth-child(4){ animation-delay:0.3s; }
.wave span:nth-child(5){ animation-delay:0.4s; }
.wave span:nth-child(6){ animation-delay:0.5s; }
.wave span:nth-child(7){ animation-delay:0.6s; }
.wave span:nth-child(8){ animation-delay:0.7s; }
@keyframes wave {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Floating animation for testimonial cards */
.testimonial {
  animation: float 7s ease-in-out infinite;
}

/* Gallery image animation */
.gallery img {
  transition: transform 1s ease, filter 1s ease;
}
.gallery img:hover {
  transform: scale(1.08) rotate(1deg);
  filter: brightness(1.2);
}

/* === Live Animations Pack (v4) === */

/* Scroll reveal base */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .12s; }
.reveal.delay-2 { transition-delay: .24s; }
.reveal.delay-3 { transition-delay: .36s; }

/* Looping subtle motion */
@keyframes floatSoft { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.floating { animation: floatSoft 6s ease-in-out infinite; }
.floating-alt { animation: floatSoft 8s ease-in-out infinite reverse; }

@keyframes pulseSoft { 0%,100%{ box-shadow: 0 0 0 0 rgba(0, 246, 255, .25);} 50%{ box-shadow: 0 0 0 12px rgba(0, 246, 255, 0);} }
.pulse { animation: pulseSoft 2.6s ease-in-out infinite; }

/* Neon card hover */
.card-live { transition: transform .4s ease, box-shadow .4s ease; border:1px solid rgba(255,255,255,.08); border-radius:1rem; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); }
.card-live:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 18px rgba(0,246,255,.15); }

/* Video gallery */
.video-card { position: relative; overflow: hidden; border-radius: 1rem; }
.video-card .thumb { display:block; transform: scale(1); transition: transform .6s ease, filter .6s ease; }
.video-card:hover .thumb { transform: scale(1.06); filter: brightness(1.04); }
.video-card .play { position:absolute; inset:auto auto 16px 16px; padding:.4rem .6rem; border-radius:.75rem; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.video-filter .btn { border-color: rgba(255,255,255,.25); }
.video-filter .btn.active { background: #00f6ff; color:#051014; border-color: transparent; }

/* Webflasher */
.terminal { background:#0b0f14; border-radius: .75rem; border:1px solid rgba(255,255,255,.08); color:#cfe8ff; }
.progress.neon .progress-bar { background: linear-gradient(90deg,#00f6ff,#9b5cff); }
.btn-neon { background:#00f6ff; color:#051014; border:0; }

/* Abstract backgrounds (2 effects) */
.gradient-bg::before {
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(270deg, #3a0ca3, #4361ee, #4cc9f0);
  background-size: 600% 600%; opacity:.22; animation: gradientShift 22s ease infinite;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.blob-bg::before {
  content:""; position:absolute; z-index:0; width: 60vmin; height: 60vmin;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 40% 40%, rgba(155,92,255,.25), transparent 60%);
  border-radius: 48% 52% 43% 57% / 50% 45% 55% 50%;
  animation: blobMorph 28s ease-in-out infinite alternate;
}
@keyframes blobMorph { 0%{border-radius:48% 52% 43% 57% / 50% 45% 55% 50%} 50%{border-radius:60% 40% 30% 70% / 45% 60% 40% 55%} 100%{border-radius:50% 50% 40% 60% / 60% 40% 60% 40%} }

/* Ensure stacking above backgrounds */
section { position:relative; overflow:hidden; }
section > .container { position:relative; z-index:1; }