/* ─── LOGO IMAGE ─────────────────────────────────────────── */
.logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0,229,255,0.6));
  transition: all 0.3s;
  animation: logoGlow 3s ease-in-out infinite;
}
.logo-img:hover {
  filter: drop-shadow(0 0 12px rgba(0,229,255,1)) brightness(1.2);
  transform: scale(1.05);
}
.logo-text {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--c);
  letter-spacing: 4px;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0,229,255,0.5)); }
  50%       { filter: drop-shadow(0 0 12px rgba(0,229,255,0.9)) drop-shadow(0 0 20px rgba(0,229,255,0.4)); }
}

/* ─── ENHANCED SCANLINE ──────────────────────────────────── */
.scanline {
  position: fixed; top: -2px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .35; animation: scan 6s linear infinite;
  pointer-events: none; z-index: 999;
}
.scanline::after {
  content: '';
  position: fixed; top: -8px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.3), transparent);
  animation: scan 6s linear 1.5s infinite;
}

/* ─── FLOATING PARTICLES ─────────────────────────────────── */
.particles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: floatUp var(--dur, 8s) var(--delay, 0s) linear infinite;
}
.particle:nth-child(2n) { background: var(--o); width: 1px; height: 1px; }
.particle:nth-child(3n) { background: rgba(255,208,0,0.6); }

@keyframes floatUp {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-20px) translateX(var(--drift, 30px)); opacity: 0; }
}

/* ─── NAV SCROLL EFFECT ──────────────────────────────────── */
nav { transition: background 0.4s, box-shadow 0.4s; }
nav.scrolled {
  background: rgba(2,12,20,.99) !important;
  box-shadow: 0 0 40px rgba(0,229,255,0.08);
}

/* ─── CARD GLOW ON HOVER ─────────────────────────────────── */
.svc-card, .req-card, .ref-card, .lv-card {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.svc-card:hover {
  box-shadow: 0 8px 32px rgba(0,229,255,0.12), 0 0 0 1px rgba(0,229,255,0.25);
  transform: translateY(-4px);
}
.req-card:hover {
  box-shadow: 0 8px 24px rgba(0,229,255,0.1);
}
.ref-card:hover {
  box-shadow: 0 12px 40px rgba(0,229,255,0.15);
}
.lv-card:hover {
  box-shadow: 0 0 30px rgba(0,229,255,0.1);
}

/* ─── PULSE BORDER ANIMATION ─────────────────────────────── */
@keyframes borderPulse {
  0%, 100% { border-color: rgba(0,229,255,0.16); }
  50%       { border-color: rgba(0,229,255,0.35); }
}
.lv-pro { animation: borderPulse 3s ease-in-out infinite; }

/* ─── HERO TITLE SHIMMER ─────────────────────────────────── */
.hl2 {
  background: linear-gradient(100deg, var(--c) 0%, #0088bb 40%, #00eeff 60%, var(--c) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ─── TICKER ENHANCED ────────────────────────────────────── */
.ticker-wrap {
  position: relative; overflow: hidden;
}
.ticker-wrap::before,
.ticker-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
  pointer-events: none;
}
.ticker-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--dk), transparent);
}
.ticker-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--dk), transparent);
}

/* ─── BUTTON RIPPLE EFFECT ───────────────────────────────── */
.btn-p, .btn-s, .nav-btn {
  position: relative; overflow: hidden;
}
.btn-p::after, .btn-s::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
}
.btn-p:active::after, .btn-s:active::after {
  transform: scale(2);
  opacity: 1;
  transition: none;
}

/* ─── STAT NUMBER GLOW ───────────────────────────────────── */
.sn {
  text-shadow: 0 0 20px rgba(0,229,255,0.4);
  animation: statPulse 4s ease-in-out infinite;
}
@keyframes statPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0,229,255,0.3); }
  50%       { text-shadow: 0 0 25px rgba(0,229,255,0.7), 0 0 50px rgba(0,229,255,0.2); }
}

/* ─── HUD BAR ANIMATED FILL ──────────────────────────────── */
.hud-fill {
  position: relative;
  overflow: hidden;
}
.hud-fill::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: hudShine 2.5s ease-in-out 2s infinite;
}
@keyframes hudShine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ─── SECTION HEADER LINE ANIMATION ─────────────────────── */
.sline {
  position: relative;
  animation: lineExpand 0.8s ease both;
}
@keyframes lineExpand {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 1; }
}

/* ─── FAQ ITEM HOVER ─────────────────────────────────────── */
.faq-item {
  transition: border-color 0.3s;
}
.faq-item:hover {
  border-color: rgba(0,229,255,0.3);
}
.faq-item.open {
  border-color: rgba(0,229,255,0.4);
  box-shadow: 0 0 20px rgba(0,229,255,0.06);
}

/* ─── JOIN PANEL GLOW ────────────────────────────────────── */
.join-panel {
  animation: panelBreath 5s ease-in-out infinite;
}
@keyframes panelBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(0,229,255,0); }
  50%       { box-shadow: 0 0 40px rgba(0,229,255,0.08), inset 0 0 40px rgba(0,229,255,0.03); }
}

/* ─── GRID CORNER ANIMATION ──────────────────────────────── */
.corner {
  animation: cornerPulse 4s ease-in-out infinite;
}
.ctR, .cbL { animation-delay: 1s; }
.cbR { animation-delay: 2s; }
@keyframes cornerPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.7; }
}

/* ─── TIER ROW HIGHLIGHT ─────────────────────────────────── */
.tier {
  position: relative;
  overflow: hidden;
}
.tier::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.05), transparent);
  transition: left 0.5s;
}
.tier:hover::before { left: 100%; }

/* ─── REFERRAL CARD ICON BOUNCE ──────────────────────────── */
.ref-ico i {
  display: inline-block;
  transition: transform 0.3s;
}
.ref-card:hover .ref-ico i {
  animation: iconBounce 0.6s ease;
}
@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.3) rotate(-5deg); }
  60%       { transform: scale(0.9) rotate(3deg); }
}

/* ─── APPLY PERKS LIST ANIMATION ─────────────────────────── */
.apply-perks li {
  transition: all 0.25s;
  border-left-color: var(--c);
}
.apply-perks li:hover {
  background: rgba(0,229,255,0.08);
  border-left-color: var(--c);
  padding-left: 18px;
  color: #fff;
}