/* ══════════════════════════════════════════════
   LAW DRISHTI 2.0 — PREMIUM ADDITIONAL CSS
   Senior UI/UX Designer + Full-Stack Dev Edition
   ══════════════════════════════════════════════ */

/* ── COLORS ── */
:root {
  --gd: #0ea5e9 !important;
  --gd2: #38bdf8 !important;
  --gd-dim: #0369a1 !important;
  --gd-glow: rgba(14,165,233,0.15) !important;
  --accent-purple: #a855f7;
  --accent-pink: #ec4899;
  --accent-teal: #14b8a6;
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ══════════════════
   ANIMATIONS — PREMIUM
   ══════════════════ */
@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideDown {
  0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0px rgba(14,165,233,0); }
  50% { box-shadow: 0 0 24px rgba(14,165,233,0.6); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(14,165,233,0.2); }
  50% { border-color: rgba(14,165,233,0.8); }
}
@keyframes countUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tickerGlow {
  0%, 100% { background: var(--gd); }
  50% { background: #38bdf8; box-shadow: 0 0 20px rgba(56,189,248,0.8); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes practiceGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(14,165,233,0); }
  50% { box-shadow: 0 0 30px rgba(14,165,233,0.25); }
}
@keyframes practiceSlideIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── NEW PREMIUM ANIMATIONS ── */
@keyframes aurora {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; filter: hue-rotate(15deg); }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}
@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 60%; }
  75% { border-radius: 60% 40% 50% 30% / 40% 70% 50% 60%; }
}
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 4px rgba(14,165,233,.4), 0 0 11px rgba(14,165,233,.3), 0 0 19px rgba(14,165,233,.2);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}
@keyframes elasticPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  50% { transform: scale(0.95); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes slideInStagger {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes cardShine {
  0% { left: -100%; }
  100% { left: 200%; }
}
@keyframes rippleEffect {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-120px) translateX(40px) rotate(360deg); opacity: 0; }
}
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px) rotate(-3deg); }
  30% { transform: translateX(6px) rotate(2deg); }
  45% { transform: translateX(-4px) rotate(-1deg); }
  60% { transform: translateX(2px) rotate(0.5deg); }
  75% { transform: translateX(-1px); }
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(-4px) rotate(-0.5deg); }
}
@keyframes skeletonLoad {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* ── ANIMATED EMOJI ── */
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-6px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes emojiWave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.emoji-bounce {
  display: inline-block !important;
  animation: emojiBounce 2s ease-in-out infinite !important;
}
.emoji-wave {
  display: inline-block !important;
  transform-origin: 70% 70% !important;
  animation: emojiWave 2.5s ease-in-out infinite !important;
}

/* ══════════════════════════════════
   SCROLL REVEAL SYSTEM
   ══════════════════════════════════ */
.reveal {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.reveal-left {
  opacity: 0 !important;
  transform: translateX(-40px) !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-left.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.reveal-right {
  opacity: 0 !important;
  transform: translateX(40px) !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-right.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.reveal-scale {
  opacity: 0 !important;
  transform: scale(0.88) !important;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-scale.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Stagger children */
.stagger-children > * {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s !important; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s !important; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s !important; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s !important; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s !important; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s !important; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s !important; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s !important; }
.stagger-children.visible > *:nth-child(9) { transition-delay: 0.45s !important; }
.stagger-children.visible > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ══════════════════════════════════
   GLASSMORPHISM SYSTEM
   ══════════════════════════════════ */
.glass-card {
  background: rgba(22, 23, 31, 0.6) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.light-mode .glass-card {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* ══════════════════════════════════
   PREMIUM CARD SHINE EFFECT
   ══════════════════════════════════ */
.card-shine {
  position: relative !important;
  overflow: hidden !important;
}
.card-shine::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 60% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent) !important;
  transform: rotate(25deg) !important;
  pointer-events: none !important;
  transition: none !important;
}
.card-shine:hover::after {
  animation: cardShine 0.6s ease forwards !important;
}

/* ── HERO TITLE ── */
h1.hero-title,
.hero-title {
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  line-height: 1.35 !important;
  animation: fadeSlideUp 0.8s cubic-bezier(.34,1.56,.64,1) both !important;
}
h1.hero-title .grad,
.hero-title .grad {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #a855f7, #0ea5e9) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block !important;
  animation: gradientShift 4s ease infinite !important;
}
h1.hero-title .dim,
.hero-title .dim {
  position: relative !important;
}

/* ── ART TITLE (Single Post) ── */
h1.art-title,
.art-title {
  font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

/* ── HERO ANIMATIONS ── */
.hero-pill {
  animation: fadeSlideLeft 0.6s ease both !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-pill::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.15), transparent) !important;
  animation: textShimmer 3s ease-in-out infinite !important;
  background-size: 200% 100% !important;
}
.hero-sub { animation: fadeSlideUp 0.9s ease 0.2s both !important; }
.ai-bar {
  animation: fadeSlideUp 1s ease 0.3s both !important;
  position: relative !important;
}
.ai-bar::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(14,165,233,0.3), transparent, rgba(56,189,248,0.2)) !important;
  z-index: -1 !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}
.ai-bar:focus-within::before {
  opacity: 1 !important;
}
.ai-bar button {
  animation: glowPulse 2.5s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── STAT CARDS — Premium ── */
.stat-card {
  animation: countUp 0.7s cubic-bezier(.34,1.56,.64,1) both !important;
  position: relative !important;
  overflow: hidden !important;
}
.stat-card:nth-child(1) { animation-delay: 0.1s !important; }
.stat-card:nth-child(2) { animation-delay: 0.2s !important; }
.stat-card:nth-child(3) { animation-delay: 0.3s !important; }
.stat-card:nth-child(4) { animation-delay: 0.4s !important; }
.stat-card:hover {
  animation: none !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 24px 48px rgba(14,165,233,0.15), 0 0 0 1px rgba(14,165,233,0.2) !important;
  border-color: rgba(14,165,233,0.3) !important;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1) !important;
}
.stat-card .sc-n {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.stat-card:hover .sc-n {
  transform: scale(1.1) !important;
}

/* ── TICKER ── */
.ticker-lbl { animation: tickerGlow 2s ease infinite !important; }

/* ── TRENDING CARDS — Premium ── */
.trend-card {
  padding: 16px 20px !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: fadeSlideUp 0.6s ease both !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.trend-card:nth-child(1) { animation-delay: 0.05s !important; }
.trend-card:nth-child(2) { animation-delay: 0.1s !important; }
.trend-card:nth-child(3) { animation-delay: 0.15s !important; }
.trend-card:nth-child(4) { animation-delay: 0.2s !important; }
.trend-card:nth-child(5) { animation-delay: 0.25s !important; }
.trend-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--gd), #a855f7) !important;
  opacity: 0 !important;
  transition: opacity .3s, width .3s !important;
}
.trend-card:hover::before { opacity: 1 !important; width: 4px !important; }
.trend-card:hover {
  animation: none !important;
  transform: translateX(8px) !important;
  border-color: rgba(14,165,233,0.5) !important;
  box-shadow: 0 4px 24px rgba(14,165,233,0.12), inset 0 0 0 1px rgba(14,165,233,0.05) !important;
  background: rgba(14,165,233,0.04) !important;
}
.tr-num { font-size: 2rem !important; color: rgba(255,255,255,.06) !important; font-weight: 800 !important; min-width: 36px !important; transition: all 0.3s !important; }
.trend-card:hover .tr-num { color: var(--gd) !important; opacity: .4 !important; transform: scale(1.1) !important; }
.tr-tag { display: inline-flex !important; padding: 2px 8px !important; background: var(--gd-glow) !important; border-radius: 4px !important; font-size: .6rem !important; font-weight: 800 !important; margin-bottom: 6px !important; }
.tr-title { font-size: .9rem !important; font-weight: 700 !important; color: var(--wh) !important; transition: color 0.2s !important; }
.trend-card:hover .tr-title { color: var(--gd2) !important; }
.tr-meta { margin-top: 8px !important; font-size: .68rem !important; color: var(--mt) !important; }

/* ── TRENDING LAYOUT FIX ── */
.trend-layout { align-items: start !important; }
.trend-panel {
  position: sticky !important;
  top: 80px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.trend-panel::-webkit-scrollbar { width: 3px !important; }
.trend-panel::-webkit-scrollbar-thumb { background: var(--gd-dim) !important; border-radius: 3px !important; }

/* ── NAV — Premium ── */
.ld-nav {
  transition: all 0.3s ease !important;
}
.ld-nav.scrolled {
  background: rgba(8,9,13,0.95) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
  border-bottom-color: rgba(14,165,233,0.1) !important;
}
body.light-mode .ld-nav.scrolled {
  background: rgba(238,241,247,0.98) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important;
}
.nav-cta {
  animation: glowPulse 2s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s !important;
}
.nav-cta:hover::before {
  transform: translateX(100%) !important;
}
.nav-cta:hover {
  animation: none !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 28px rgba(14,165,233,0.5) !important;
}

/* ── NAV PRACTICE LINK ── */
.nav-practice-link {
  color: var(--gd) !important;
  font-weight: 700 !important;
  position: relative !important;
}
.nav-practice-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--gd) !important;
  transition: width 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.nav-practice-link:hover::after {
  width: 100% !important;
}
.nav-new-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 5px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: .5rem !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  letter-spacing: .06em !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  animation: pulse 2s infinite !important;
}

/* ── JOB CARDS — Premium ── */
.job-card {
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
}
.job-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 24px 48px rgba(14,165,233,0.18), 0 0 0 1px rgba(14,165,233,0.15) !important;
  border-color: rgba(14,165,233,0.35) !important;
}
.job-card:hover .jc-title {
  color: var(--gd) !important;
}
.job-card:hover .jc-view {
  background: var(--gd) !important;
  border-color: var(--gd) !important;
  color: #08090d !important;
  transform: translateX(4px) !important;
}

/* ── WRITE FOR US — Premium ── */
.write-for-us {
  padding: 28px 32px !important;
  gap: 32px !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  animation: borderGlow 3s ease infinite !important;
  position: relative !important;
}
.write-for-us::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--gd), var(--accent-purple), transparent) !important;
  opacity: 0.6 !important;
}
.wfu-title { font-size: 1.1rem !important; font-weight: 800 !important; }
.wfu-btn {
  animation: glowPulse 2s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
}
.wfu-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s !important;
}
.wfu-btn:hover::before {
  transform: translateX(100%) !important;
}
.wfu-btn:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(14,165,233,0.5) !important;
}
.wfu-tags span {
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
}
.wfu-tags span:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

/* ── JOIN CARDS — Premium ── */
.join-section {
  padding: 40px 0 32px !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.join-card {
  padding: 20px 24px !important;
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.join-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}
.join-card:hover::before {
  opacity: 1 !important;
}
.join-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.5) !important;
}
.join-card .join-card-icon {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.join-card:hover .join-card-icon {
  transform: scale(1.1) rotate(5deg) !important;
}
.join-card-title { font-size: 0.85rem !important; font-weight: 800 !important; }
.join-card-sub { font-size: 0.7rem !important; }

/* ── CLOSING SOON — Premium ── */
.exp-item {
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
.exp-item:hover {
  background: rgba(14,165,233,.06) !important;
  padding-left: 24px !important;
  border-bottom-color: rgba(14,165,233,.1) !important;
}
.exp-title { font-size: .8rem !important; font-weight: 600 !important; color: var(--wh2) !important; line-height: 1.4 !important; transition: color .2s !important; }
.exp-item:hover .exp-title { color: var(--gd) !important; }
.exp-row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.exp-days { font-size: .62rem !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 20px !important; transition: transform 0.2s !important; }
.exp-item:hover .exp-days { transform: scale(1.05) !important; }
.exp-days.critical { background: rgba(239,68,68,.15) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.2) !important; animation: pulse 1.5s infinite !important; }
.exp-days.soon { background: var(--gd-glow) !important; color: var(--gd) !important; border: 1px solid rgba(14,165,233,.2) !important; }
.exp-days.ok { background: rgba(34,197,94,.1) !important; color: #22c55e !important; border: 1px solid rgba(34,197,94,.15) !important; }
.exp-item::after {
  content: 'Apply Now \2192' !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  padding: 3px 10px !important;
  background: var(--gd-glow) !important;
  color: var(--gd) !important;
  border: 1px solid rgba(14,165,233,.2) !important;
  border-radius: 6px !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  opacity: 0 !important;
  transform: translateY(5px) !important;
  transition: opacity .2s, transform .2s !important;
}
.exp-item:hover::after { opacity: 1 !important; transform: translateY(0) !important; }
.panel-head { font-size: .65rem !important; color: var(--gd) !important; }

/* ── SEC TITLE ── */
.sec-title { font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; animation: fadeSlideLeft 0.7s ease both !important; }
.sec-eye {
  position: relative !important;
}
.sec-eye::before {
  animation: breathe 2s ease infinite !important;
}

/* ── BADGES ── */
.jct-unpaid { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.15) !important; }

/* ── TICKER + OVERFLOW ── */
html, body { overflow-x: hidden !important; }
.ticker-bar, .ticker-outer, .announce-bar { max-width: 100vw !important; overflow: hidden !important; width: 100% !important; }
.ld-nav, .feat-strip, .sec-dark, .section, .ld-footer { max-width: 100vw !important; overflow-x: hidden !important; }

/* ── ANNOUNCE BAR — Premium ── */
.announce-bar {
  position: relative !important;
}
.announce-bar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
}

/* ── FOOTER LOGO ── */
.fb-name { font-size: 0.85rem !important; }
.fb-mark {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.72rem !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.fb-logo:hover .fb-mark {
  transform: rotate(10deg) scale(1.1) !important;
  box-shadow: 0 4px 16px rgba(14,165,233,0.3) !important;
}

/* ── QUICK APPLY BUTTON — Premium ── */
a.quick-apply-btn,
.quick-apply-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  background: linear-gradient(135deg, var(--gd), #0284c7) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  margin: 12px 0 16px !important;
  box-shadow: 0 8px 24px rgba(14,165,233,.3) !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
a.quick-apply-btn::before,
.quick-apply-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s !important;
}
a.quick-apply-btn:hover::before,
.quick-apply-btn:hover::before {
  transform: translateX(100%) !important;
}
a.quick-apply-btn:hover,
.quick-apply-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 36px rgba(14,165,233,.5) !important;
}

/* ── TG BOX ICON ── */
.tg-icon {
  font-size: 0 !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(14,165,233,.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.tg-icon:hover {
  transform: scale(1.1) rotate(5deg) !important;
}
.tg-icon svg { width: 28px !important; height: 28px !important; }

/* ── TG BOX — Premium ── */
.tg-box {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.tg-box::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(14,165,233,0.05), transparent 60%) !important;
  animation: gentleFloat 6s ease-in-out infinite !important;
  pointer-events: none !important;
}
.tg-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(79,142,247,0.2) !important;
}
.tg-count {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.tg-box:hover .tg-count {
  transform: scale(1.1) !important;
}

/* ── SHARE BUTTONS — Premium ── */
.sh-wa { background: #25D366 !important; color: #fff !important; }
.sh-wa svg { fill: #fff !important; }
.sh-tg { background: #229ED9 !important; color: #fff !important; }
.sh-tg svg { fill: #fff !important; }
.sh-li { background: #0A66C2 !important; color: #fff !important; }
.sh-li svg { fill: #fff !important; }
.sh-btn {
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.sh-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}
.sh-btn:hover::before {
  opacity: 1 !important;
}
.sh-btn:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* ── LINKEDIN STAT CARD ── */
.linkedin-stat-card {
  position: relative !important;
  overflow: hidden !important;
}
.linkedin-stat-card .sc-i {
  background: rgba(10,102,194,0.12) !important;
  border-color: rgba(10,102,194,0.2) !important;
}
.linkedin-stat-card .sc-b.b-blue {
  background: rgba(10,102,194,0.12) !important;
  color: #0A66C2 !important;
  border: 1px solid rgba(10,102,194,0.2) !important;
  transition: all 0.3s !important;
}
.linkedin-stat-card:hover {
  border-color: rgba(10,102,194,0.4) !important;
  box-shadow: 0 16px 40px rgba(10,102,194,0.18) !important;
}
.linkedin-stat-card:hover .sc-b.b-blue {
  background: #0A66C2 !important;
  color: #fff !important;
}

/* ── JOIN CARD LINKEDIN ── */
.join-li {
  background: linear-gradient(135deg, #0A66C2, #004182) !important;
}
.join-li:hover {
  box-shadow: 0 24px 56px rgba(10,102,194,0.45) !important;
}

/* ══════════════════════════════════
   PRACTICE SUITE PROMOTION — PREMIUM
   ══════════════════════════════════ */

/* ── PRACTICE PROMO STRIP (Homepage) ── */
.practice-strip {
  background: linear-gradient(135deg, #0c1929 0%, #0a1628 50%, #0d1117 100%) !important;
  border-top: 1px solid rgba(14,165,233,.12) !important;
  border-bottom: 1px solid rgba(14,165,233,.12) !important;
  position: relative !important;
  overflow: hidden !important;
}
.practice-strip::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(14,165,233,.08), transparent) !important;
  pointer-events: none !important;
  animation: morphBlob 8s ease-in-out infinite !important;
}
.practice-strip::after {
  content: '' !important;
  position: absolute !important;
  bottom: -60px !important;
  left: 10% !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(56,189,248,.05), transparent) !important;
  pointer-events: none !important;
  animation: morphBlob 10s ease-in-out infinite reverse !important;
}
.practice-strip-inner {
  max-width: 1340px !important;
  margin: 0 auto !important;
  padding: 40px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  position: relative !important;
  z-index: 1 !important;
  animation: practiceSlideIn 0.8s ease both !important;
}
.practice-strip-left {
  flex: 1 !important;
  min-width: 0 !important;
}
.practice-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  background: rgba(14,165,233,.1) !important;
  border: 1px solid rgba(14,165,233,.2) !important;
  border-radius: 20px !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 14px !important;
}
.practice-pill-dot {
  width: 6px !important;
  height: 6px !important;
  background: #0ea5e9 !important;
  border-radius: 50% !important;
  animation: pulse 2s infinite !important;
}
.practice-strip-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  font-weight: 800 !important;
  color: #f8f8f2 !important;
  margin-bottom: 8px !important;
  letter-spacing: -.02em !important;
}
.practice-strip-sub {
  font-size: .84rem !important;
  color: #9a9db0 !important;
  line-height: 1.65 !important;
  max-width: 520px !important;
  margin-bottom: 16px !important;
}
.practice-features {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.practice-feat-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 11px !important;
  background: rgba(14,165,233,.08) !important;
  border: 1px solid rgba(14,165,233,.15) !important;
  border-radius: 6px !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  color: #38bdf8 !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.practice-feat-tag:hover {
  background: rgba(14,165,233,.15) !important;
  border-color: rgba(14,165,233,.3) !important;
  transform: translateY(-2px) scale(1.05) !important;
}
.practice-strip-right {
  flex-shrink: 0 !important;
  text-align: center !important;
}
.practice-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  text-decoration: none !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow: 0 8px 28px rgba(14,165,233,.3) !important;
  animation: practiceGlow 3s ease infinite !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
}
.practice-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s !important;
}
.practice-cta:hover::before {
  transform: translateX(100%) !important;
}
.practice-cta:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 40px rgba(14,165,233,.5) !important;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
}
.practice-cta-arr {
  transition: transform .2s !important;
}
.practice-cta:hover .practice-cta-arr {
  transform: translateX(6px) !important;
}
.practice-strip-note {
  font-size: .65rem !important;
  color: #6b6e80 !important;
  margin-top: 10px !important;
}

/* ── PRACTICE PANEL CARD (Trending Sidebar) ── */
.practice-panel-card {
  display: block !important;
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(14,165,233,.03)) !important;
  border: 1px solid rgba(14,165,233,.18) !important;
  border-radius: 13px !important;
  padding: 22px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  animation: fadeSlideUp 0.7s ease 0.3s both !important;
  position: relative !important;
  overflow: hidden !important;
}
.practice-panel-card::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  left: -30% !important;
  width: 160% !important;
  height: 160% !important;
  background: radial-gradient(circle, rgba(14,165,233,0.05), transparent 60%) !important;
  animation: gentleFloat 8s ease-in-out infinite !important;
  pointer-events: none !important;
}
.practice-panel-card:hover {
  border-color: rgba(14,165,233,.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(14,165,233,0.18) !important;
}
.practice-panel-icon {
  width: 48px !important;
  height: 48px !important;
  background: rgba(14,165,233,.12) !important;
  border: 1px solid rgba(14,165,233,.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.practice-panel-card:hover .practice-panel-icon {
  transform: scale(1.15) rotate(5deg) !important;
}
.practice-panel-title {
  font-family: 'Playfair Display', serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: #f8f8f2 !important;
  margin-bottom: 6px !important;
}
.practice-panel-sub {
  font-size: .73rem !important;
  color: rgba(255,255,255,.55) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}
.practice-panel-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.practice-panel-card:hover .practice-panel-btn {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  box-shadow: 0 8px 24px rgba(14,165,233,.35) !important;
  transform: translateY(-2px) !important;
}

/* ── PRACTICE STAT CARD (Hero area) ── */
.practice-stat-card:hover {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: 0 20px 48px rgba(14,165,233,.15) !important;
}

/* ── FLOATING PRACTICE BUTTON (Mobile) ── */
.practice-fab {
  display: none !important;
}
@media (max-width: 768px) {
  .practice-fab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: fixed !important;
    bottom: 76px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 9px 18px !important;
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    border-radius: 24px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    z-index: 9997 !important;
    box-shadow: 0 6px 24px rgba(14,165,233,.4), 0 2px 8px rgba(0,0,0,.3) !important;
    transition: all .25s !important;
    white-space: nowrap !important;
    animation: fadeSlideUp 0.5s ease 1s both !important;
  }
  .practice-fab:hover,
  .practice-fab:active {
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(14,165,233,.5), 0 4px 12px rgba(0,0,0,.4) !important;
  }
  .practice-fab svg {
    flex-shrink: 0 !important;
  }
}

/* ══════════════════════════════════
   HERO ORB — PARALLAX ENHANCED
   ══════════════════════════════════ */
.hero-orb {
  transition: transform 0.1s linear !important;
  will-change: transform !important;
}
.hero-grid {
  transition: transform 0.1s linear !important;
}

/* ══════════════════════════════════
   RESOURCE CARDS — PREMIUM
   ══════════════════════════════════ */
.res-feat {
  position: relative !important;
  overflow: hidden !important;
}
.res-feat::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gd), var(--accent-purple), var(--accent-pink)) !important;
  transform: scaleX(0) !important;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1) !important;
  transform-origin: left !important;
}
.res-feat:hover::after {
  transform: scaleX(1) !important;
}
.res-card {
  position: relative !important;
  overflow: hidden !important;
}
.res-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gd), var(--accent-teal)) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
  transform-origin: left !important;
}
.res-card:hover::after {
  transform: scaleX(1) !important;
}
.res-icon {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.res-card:hover .res-icon {
  transform: scale(1.15) rotate(-5deg) !important;
}

/* ══════════════════════════════════
   BLOG CARDS — PREMIUM
   ══════════════════════════════════ */
.blog-card {
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1) !important;
}
.blog-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(14,165,233,0.1) !important;
}
.blog-card:hover .blog-thumb img {
  transform: scale(1.08) !important;
}
.blog-av {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.blog-card:hover .blog-av {
  transform: scale(1.1) !important;
}

/* ══════════════════════════════════
   RELATED CARDS — PREMIUM
   ══════════════════════════════════ */
.rel-card {
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.rel-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25) !important;
}

/* ══════════════════════════════════
   AUTHOR BOX — PREMIUM
   ══════════════════════════════════ */
.author-box {
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.author-box::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--gd), var(--accent-purple)) !important;
  border-radius: 3px !important;
}
.author-box:hover {
  transform: translateX(4px) !important;
  border-color: rgba(14,165,233,0.2) !important;
}
.au-av {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.author-box:hover .au-av {
  transform: scale(1.1) rotate(5deg) !important;
}

/* ══════════════════════════════════
   SHARE BLOCK — PREMIUM
   ══════════════════════════════════ */
.share-block {
  position: relative !important;
  overflow: hidden !important;
}
.share-block::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--gd), var(--accent-purple), transparent) !important;
}

/* ══════════════════════════════════
   FILTER BAR — PREMIUM
   ══════════════════════════════════ */
.ftab {
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.ftab::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--gd) !important;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
  transform: translateX(-50%) !important;
}
.ftab:hover::before,
.ftab.active::before {
  width: 70% !important;
}
.ftab:hover {
  transform: translateY(-2px) !important;
}
.ftab.active {
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════
   SEARCH OVERLAY — PREMIUM
   ══════════════════════════════════ */
.search-ov.open {
  animation: scaleIn 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.search-field {
  transition: all 0.3s ease !important;
}
.search-field:focus {
  transform: scale(1.01) !important;
}
.s-tag {
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
}
.s-tag:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

/* ══════════════════════════════════
   PAGINATION — PREMIUM
   ══════════════════════════════════ */
.pagination > a {
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1) !important;
}
.pagination > a:hover {
  transform: translateY(-3px) scale(1.05) !important;
}
.pagination > span.current {
  animation: glowPulse 3s ease infinite !important;
}
.pagination > a.next,
.pagination > a.prev {
  padding: 0 16px !important;
  min-width: auto !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════
   LOAD MORE BUTTON — PREMIUM
   ══════════════════════════════════ */
.load-btn {
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.load-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.1), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s !important;
}
.load-btn:hover::before {
  transform: translateX(100%) !important;
}

/* ══════════════════════════════════
   COMMENTS — PREMIUM
   ══════════════════════════════════ */
.comment-body {
  transition: all 0.25s ease !important;
  border-left: 3px solid transparent !important;
}
.comment-body:hover {
  border-left-color: var(--gd) !important;
  transform: translateX(4px) !important;
}

/* ══════════════════════════════════
   CUSTOM CURSOR TRAIL
   ══════════════════════════════════ */
.cursor-dot {
  position: fixed !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--gd) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  transition: transform 0.15s ease !important;
  mix-blend-mode: screen !important;
  opacity: 0.7 !important;
}
.cursor-ring {
  position: fixed !important;
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid rgba(14,165,233,0.4) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 99998 !important;
  transition: all 0.2s ease-out !important;
  mix-blend-mode: screen !important;
}
.cursor-ring.hover {
  width: 48px !important;
  height: 48px !important;
  border-color: rgba(14,165,233,0.6) !important;
  background: rgba(14,165,233,0.05) !important;
}

/* ══════════════════
   LIGHT MODE
   ══════════════════ */
body.light-mode {
  --bk: #eef1f7 !important;
  --bk2: #e4e8f0 !important;
  --sf: #f8fafc !important;
  --sf2: #edf0f7 !important;
  --sf3: #e2e6ef !important;
  --wh: #0d1117 !important;
  --wh2: #1a2030 !important;
  --mt: #5a6478 !important;
  --mt2: #3d4a5c !important;
  --br: rgba(0,0,0,.09) !important;
  --br2: rgba(0,0,0,.16) !important;
}
body.light-mode .ld-nav { background: rgba(238,241,247,.95) !important; border-bottom: 1px solid rgba(0,0,0,.1) !important; }
body.light-mode .stat-card,
body.light-mode .job-card,
body.light-mode .trend-card,
body.light-mode .panel-box,
body.light-mode .tg-wide,
body.light-mode .res-card,
body.light-mode .res-feat,
body.light-mode .toc-box,
body.light-mode .ring-box,
body.light-mode .author-box,
body.light-mode .comment-body,
body.light-mode .share-block,
body.light-mode .write-for-us,
body.light-mode .ad-box {
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
}
body.light-mode .stat-card:hover,
body.light-mode .job-card:hover,
body.light-mode .res-card:hover,
body.light-mode .blog-card:hover {
  box-shadow: 0 20px 48px rgba(14,165,233,0.1) !important;
}
body.light-mode .hero-grid { background-image: linear-gradient(rgba(14,165,233,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(14,165,233,.03) 1px,transparent 1px) !important; }
body.light-mode .ticker-bar { background: #dde2ec !important; }
body.light-mode .sec-dark { background: #e4e8f0 !important; }
body.light-mode .article-body { color: #334155 !important; }
body.light-mode .article-body h2, body.light-mode .article-body h3 { color: #0f172a !important; }
body.light-mode ::-webkit-scrollbar-track { background: #e2e8f0 !important; }

/* Light mode — Practice Strip */
body.light-mode .practice-strip { background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #eef1f7 100%) !important; border-color: rgba(14,165,233,.15) !important; }
body.light-mode .practice-strip-title { color: #0f172a !important; }
body.light-mode .practice-strip-sub { color: #475569 !important; }
body.light-mode .practice-feat-tag { background: rgba(14,165,233,.08) !important; color: #0369a1 !important; border-color: rgba(14,165,233,.2) !important; }
body.light-mode .practice-panel-card { background: #ffffff !important; box-shadow: 0 2px 16px rgba(0,0,0,.06) !important; }
body.light-mode .practice-panel-title { color: #0f172a !important; }
body.light-mode .practice-panel-sub { color: #475569 !important; }
body.light-mode .announce-bar { background: #dde2ec !important; color: #334155 !important; }
body.light-mode .announce-bar a { color: #0369a1 !important; }

/* Light mode — Cursor */
body.light-mode .cursor-dot { background: #0369a1 !important; }
body.light-mode .cursor-ring { border-color: rgba(3,105,161,0.3) !important; }

/* Light mode — Share block */
body.light-mode .share-block::before { background: linear-gradient(90deg, transparent, #0ea5e9, #a855f7, transparent) !important; }

/* Light mode — Join cards shadow */
body.light-mode .join-card:hover {
  box-shadow: 0 24px 56px rgba(0,0,0,0.15) !important;
}

/* ── THEME TOGGLE — Premium ── */
#themeToggle {
  position: fixed !important;
  bottom: 80px !important;
  right: 26px !important;
  width: 42px !important;
  height: 42px !important;
  background: var(--sf2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: 11px !important;
  color: var(--wh2) !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
#themeToggle:hover {
  background: var(--gd) !important;
  color: var(--bk) !important;
  transform: translateY(-3px) rotate(15deg) !important;
  box-shadow: 0 12px 32px rgba(14,165,233,0.4) !important;
}

/* ══════════════════
   MOBILE RESPONSIVE
   ══════════════════ */
@media (max-width: 900px) {
  .hero { padding: 32px 16px !important; min-height: auto !important; overflow: hidden !important; max-width: 100vw !important; }
  .hero-inner { display: flex !important; flex-direction: column !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .hero-left { width: 100% !important; min-width: 0 !important; }
  .hero-right { width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tg-wide { grid-column: span 2 !important; }
  .linkedin-stat-card { grid-column: span 1 !important; }
  .hero-sub { max-width: 100% !important; }
  h1.hero-title, .hero-title { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; line-height: 1.25 !important; }
  .hero-pill { max-width: fit-content !important; white-space: nowrap !important; font-size: .6rem !important; }
  /* Hide cursor on mobile */
  .cursor-dot, .cursor-ring { display: none !important; }

  /* Practice strip mobile */
  .practice-strip-inner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 20px !important;
    gap: 24px !important;
  }
  .practice-strip-sub { max-width: 100% !important; }
  .practice-features { justify-content: center !important; }
  .practice-strip-title { font-size: 1.15rem !important; }
}

@media (max-width: 768px) {
  .nav-wrap { padding: 0 10px !important; gap: 4px !important; }
  .nav-cta { padding: 7px 8px !important; font-size: 0.68rem !important; white-space: nowrap !important; }
  .logo-txt { font-size: 0.82rem !important; }
  .logo-mark { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; }
  .nav-logo { gap: 6px !important; margin-right: 8px !important; }
  .nav-search-btn { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; }
  .read-ctrl { display: flex !important; flex-wrap: wrap !important; overflow-x: visible !important; gap: 6px !important; padding: 10px 0 !important; align-items: center !important; }
  .ctrl-sep { display: none !important; }
  .ctrl-lbl { font-size: 0.6rem !important; white-space: nowrap !important; }
  .fz-btn { padding: 6px 10px !important; font-size: 0.75rem !important; }
  .hl-dot { width: 28px !important; height: 28px !important; border-radius: 6px !important; }
  .hl-e { width: 28px !important; height: 28px !important; font-size: 0.9rem !important; }
  #focusBtn, #readAloudBtn, #stopReadBtn { flex: 1 !important; justify-content: center !important; padding: 8px 10px !important; font-size: 0.73rem !important; }
  #ttsSpeedWrap { width: 100% !important; justify-content: center !important; }

  /* Practice promo strip mobile */
  .practice-cta { padding: 12px 24px !important; font-size: .82rem !important; width: 100% !important; justify-content: center !important; }

  /* Adjust theme toggle above mobile nav */
  #themeToggle { bottom: 140px !important; right: 16px !important; width: 36px !important; height: 36px !important; font-size: .95rem !important; }

  /* Hide Practice nav link on mobile (FAB covers it) */
  .nav-practice-link { display: none !important; }

  /* Share buttons stack on mobile */
  .sh-btns { flex-wrap: wrap !important; }
  .sh-btn { flex: 1 !important; min-width: 120px !important; justify-content: center !important; font-size: 0.72rem !important; }

  /* Animated emoji smaller on mobile */
  .emoji-bounce, .emoji-wave { font-size: 0.9em !important; }

  /* LinkedIn stat card mobile */
  .linkedin-stat-card .sc-n { font-size: 1rem !important; }
}

/* ── FEATURE STRIP ANIMATION — Premium ── */
.feat-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.6s ease forwards !important;
  position: relative !important;
}
.feat-item:nth-child(1) { animation-delay: 0.1s !important; }
.feat-item:nth-child(2) { animation-delay: 0.2s !important; }
.feat-item:nth-child(3) { animation-delay: 0.3s !important; }
.feat-item:nth-child(4) { animation-delay: 0.4s !important; }
.feat-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 22px !important;
  right: 22px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gd), transparent) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
  transform-origin: left !important;
}
.feat-item:hover::after {
  transform: scaleX(1) !important;
}
.feat-item:hover {
  background: var(--sf2) !important;
  transform: translateY(-3px) !important;
  transition: all 0.3s ease !important;
}
.feat-icon {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.feat-item:hover .feat-icon {
  transform: scale(1.2) rotate(-8deg) !important;
}
.feat-title {
  transition: color 0.2s !important;
}
.feat-item:hover .feat-title {
  color: var(--gd) !important;
}

/* ── ARCHIVE — Premium ── */
.arch-count {
  font-size: .78rem !important;
  color: var(--mt) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--sf2) !important;
  border: 1px solid var(--br) !important;
  border-radius: 20px !important;
  margin-top: 4px !important;
}
.arch-count::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gr) !important;
  flex-shrink: 0 !important;
  animation: pulse 2s infinite !important;
}
.arch-hero {
  padding: 56px 28px !important;
  background: linear-gradient(135deg, var(--sf) 0%, var(--sf2) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.arch-eye {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  background: var(--gd-glow) !important;
  border: 1px solid rgba(14,165,233,.25) !important;
  border-radius: 20px !important;
  color: var(--gd) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  margin-bottom: 16px !important;
}
.arch-title {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  margin-bottom: 10px !important;
}
.arch-inner > p {
  font-size: .88rem !important;
  color: var(--mt2) !important;
  max-width: 700px !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

/* ══════════════════════════════════
   SMOOTH PAGE TRANSITION
   ══════════════════════════════════ */
.page-transition {
  animation: fadeSlideUp 0.5s ease both !important;
}

/* ══════════════════════════════════
   SKELETON LOADING STATE
   ══════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--sf) 25%, var(--sf2) 50%, var(--sf) 75%) !important;
  background-size: 400% 100% !important;
  animation: skeletonLoad 1.5s ease infinite !important;
  border-radius: 8px !important;
}

/* ══════════════════════════════════
   NOISE TEXTURE OVERLAY
   ══════════════════════════════════ */
.hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--noise) !important;
  background-repeat: repeat !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ══════════════════════════════════
   PREMIUM SCROLLBAR
   ══════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px !important;
}
::-webkit-scrollbar-track {
  background: var(--bk2, #0d0e14) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gd-dim), var(--gd)) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gd), var(--gd2)) !important;
}

/* ══════════════════════════════════
   FOCUS VISIBLE — ACCESSIBILITY
   ══════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--gd) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════
   SMOOTH SELECTION
   ══════════════════════════════════ */
::selection {
  background: rgba(14,165,233,0.3) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════
   GIF-LIKE ANIMATED ELEMENTS — CSS-Only Animations
   ══════════════════════════════════════════════════ */

/* ── KEYFRAMES FOR GIF-LIKE EFFECTS ── */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes rocketShake {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-3px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
  75% { transform: translateY(-3px) rotate(0deg); }
}
@keyframes fireFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  25% { transform: scaleY(1.1) scaleX(0.95); opacity: 0.9; }
  50% { transform: scaleY(0.95) scaleX(1.05); opacity: 1; }
  75% { transform: scaleY(1.05) scaleX(0.98); opacity: 0.85; }
}
@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}
@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollArrow {
  0% { opacity: 0; transform: translateY(-8px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes orbitSpin {
  0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}
@keyframes floatBubble {
  0% { transform: translateY(100%) scale(0); opacity: 0; }
  10% { opacity: 0.7; transform: translateY(80%) scale(0.6); }
  90% { opacity: 0.3; }
  100% { transform: translateY(-20%) scale(1); opacity: 0; }
}
@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pendulum {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  56% { transform: scale(1); }
}
@keyframes typewriter {
  0% { width: 0; }
  50% { width: 100%; }
  90% { width: 100%; }
  100% { width: 0; }
}
@keyframes blinkCaret {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--gd); }
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(720deg); opacity: 0; }
}
@keyframes spotlightSweep {
  0% { left: -30%; }
  100% { left: 130%; }
}
@keyframes liveRadar {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

/* ── HERO FLOATING PARTICLES ── */
.hero-particles {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.hero-particle {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.hero-particle:nth-child(1) {
  width: 6px !important; height: 6px !important;
  background: rgba(14,165,233,0.5) !important;
  top: 15% !important; left: 10% !important;
  animation: twinkle 3s ease-in-out infinite !important;
}
.hero-particle:nth-child(2) {
  width: 4px !important; height: 4px !important;
  background: rgba(168,85,247,0.5) !important;
  top: 25% !important; left: 85% !important;
  animation: twinkle 2.5s ease-in-out 0.5s infinite !important;
}
.hero-particle:nth-child(3) {
  width: 8px !important; height: 8px !important;
  background: rgba(14,165,233,0.3) !important;
  top: 60% !important; left: 5% !important;
  animation: twinkle 4s ease-in-out 1s infinite !important;
}
.hero-particle:nth-child(4) {
  width: 5px !important; height: 5px !important;
  background: rgba(56,189,248,0.4) !important;
  top: 70% !important; left: 90% !important;
  animation: twinkle 3.5s ease-in-out 0.8s infinite !important;
}
.hero-particle:nth-child(5) {
  width: 3px !important; height: 3px !important;
  background: rgba(236,72,153,0.4) !important;
  top: 40% !important; left: 50% !important;
  animation: twinkle 2.8s ease-in-out 1.5s infinite !important;
}
.hero-particle:nth-child(6) {
  width: 7px !important; height: 7px !important;
  background: rgba(14,165,233,0.25) !important;
  top: 80% !important; left: 30% !important;
  animation: twinkle 3.2s ease-in-out 0.3s infinite !important;
}
.hero-particle:nth-child(7) {
  width: 4px !important; height: 4px !important;
  background: rgba(168,85,247,0.35) !important;
  top: 10% !important; left: 60% !important;
  animation: twinkle 2.6s ease-in-out 2s infinite !important;
}
.hero-particle:nth-child(8) {
  width: 6px !important; height: 6px !important;
  background: rgba(20,184,166,0.4) !important;
  top: 50% !important; left: 75% !important;
  animation: twinkle 3.8s ease-in-out 1.2s infinite !important;
}

/* ── SPARKLE STARS (decorative near CTAs) ── */
.sparkle-wrap {
  position: relative !important;
  display: inline-block !important;
}
.sparkle-star {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  pointer-events: none !important;
}
.sparkle-star::before,
.sparkle-star::after {
  content: '' !important;
  position: absolute !important;
  background: var(--gd) !important;
  border-radius: 2px !important;
}
.sparkle-star::before {
  width: 100% !important; height: 2px !important;
  top: 50% !important; left: 0 !important;
  transform: translateY(-50%) !important;
}
.sparkle-star::after {
  width: 2px !important; height: 100% !important;
  left: 50% !important; top: 0 !important;
  transform: translateX(-50%) !important;
}
.sparkle-star:nth-child(1) { top: -8px !important; right: -12px !important; animation: sparkle 2s ease-in-out infinite !important; }
.sparkle-star:nth-child(2) { bottom: -6px !important; left: -10px !important; animation: sparkle 2s ease-in-out 0.6s infinite !important; width: 7px !important; height: 7px !important; }
.sparkle-star:nth-child(3) { top: 50% !important; right: -16px !important; animation: sparkle 2s ease-in-out 1.2s infinite !important; width: 6px !important; height: 6px !important; }

/* ── ANIMATED SCROLL DOWN INDICATOR ── */
.scroll-indicator {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 5 !important;
  cursor: pointer !important;
}
.scroll-indicator-text {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--mt) !important;
}
.scroll-indicator-arrows {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
.scroll-indicator-arrows span {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--gd) !important;
  border-bottom: 2px solid var(--gd) !important;
  transform: rotate(45deg) !important;
  animation: scrollArrow 1.5s ease-in-out infinite !important;
}
.scroll-indicator-arrows span:nth-child(2) { animation-delay: 0.15s !important; }
.scroll-indicator-arrows span:nth-child(3) { animation-delay: 0.3s !important; }

/* ── ANIMATED WAVE SECTION DIVIDER ── */
.wave-divider {
  position: relative !important;
  width: 100% !important;
  height: 40px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.wave-divider svg {
  position: absolute !important;
  bottom: 0 !important;
  width: 200% !important;
  height: 100% !important;
  animation: waveMove 8s linear infinite !important;
}
.wave-divider svg path {
  fill: var(--sf2, rgba(14,165,233,0.05)) !important;
}
.wave-divider-gd svg path {
  fill: rgba(14,165,233,0.06) !important;
}

/* ── TYPING DOTS (search bar placeholder) ── */
.typing-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
}
.typing-dots span {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--gd) !important;
  animation: typingDot 1.4s ease-in-out infinite !important;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }

/* ── LIVE PULSE INDICATOR ── */
.live-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #22c55e !important;
}
.live-dot {
  position: relative !important;
  width: 8px !important;
  height: 8px !important;
}
.live-dot::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: #22c55e !important;
  border-radius: 50% !important;
}
.live-dot::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border: 2px solid #22c55e !important;
  border-radius: 50% !important;
  animation: liveRadar 1.5s ease-out infinite !important;
}

/* ── ANIMATED FIRE ICON (GIF-like) ── */
.anim-fire {
  display: inline-block !important;
  animation: fireFlicker 0.8s ease-in-out infinite !important;
  transform-origin: bottom center !important;
}

/* ── ANIMATED ROCKET ── */
.anim-rocket {
  display: inline-block !important;
  animation: rocketShake 1.5s ease-in-out infinite !important;
  transform-origin: bottom center !important;
}

/* ── ANIMATED PEN (writing) ── */
.anim-pen {
  display: inline-block !important;
  animation: pendulum 2s ease-in-out infinite !important;
  transform-origin: top center !important;
}

/* ── ANIMATED HEART ── */
.anim-heart {
  display: inline-block !important;
  animation: heartbeat 1.5s ease-in-out infinite !important;
}

/* ── ANIMATED BOOK (page flipping effect) ── */
.anim-book {
  display: inline-block !important;
  animation: wobble 3s ease-in-out infinite !important;
}

/* ── ORBITING DOTS AROUND SECTION ICONS ── */
.orbit-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.orbit-dot {
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--gd) !important;
  border-radius: 50% !important;
  animation: orbitSpin 4s linear infinite !important;
}
.orbit-dot:nth-child(2) { animation-delay: -1.33s !important; width: 3px !important; height: 3px !important; background: var(--accent-purple) !important; }
.orbit-dot:nth-child(3) { animation-delay: -2.66s !important; width: 3px !important; height: 3px !important; background: var(--accent-teal) !important; }

/* ── FLOATING BUBBLES (behind sections) ── */
.bubble-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.bubble {
  position: absolute !important;
  bottom: -20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(14,165,233,0.15) !important;
  background: rgba(14,165,233,0.03) !important;
}
.bubble:nth-child(1) { width: 40px !important; height: 40px !important; left: 10% !important; animation: floatBubble 8s ease-in-out infinite !important; }
.bubble:nth-child(2) { width: 25px !important; height: 25px !important; left: 30% !important; animation: floatBubble 6s ease-in-out 1s infinite !important; }
.bubble:nth-child(3) { width: 50px !important; height: 50px !important; left: 55% !important; animation: floatBubble 10s ease-in-out 2s infinite !important; }
.bubble:nth-child(4) { width: 20px !important; height: 20px !important; left: 75% !important; animation: floatBubble 7s ease-in-out 3s infinite !important; }
.bubble:nth-child(5) { width: 35px !important; height: 35px !important; left: 90% !important; animation: floatBubble 9s ease-in-out 1.5s infinite !important; }

/* ── GRADIENT ANIMATED BORDER (for sections) ── */
.gradient-border {
  position: relative !important;
}
.gradient-border::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--gd), var(--accent-purple), var(--gd), transparent) !important;
  background-size: 200% 100% !important;
  animation: gradientBorder 3s linear infinite !important;
}

/* ── SPOTLIGHT SWEEP (on hero cards) ── */
.spotlight-card {
  position: relative !important;
  overflow: hidden !important;
}
.spotlight-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -30% !important;
  width: 30% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent) !important;
  transform: skewX(-20deg) !important;
  animation: spotlightSweep 5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── CONFETTI BURST (for celebration areas) ── */
.confetti-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.confetti-piece {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  top: -10px !important;
}
.confetti-piece:nth-child(1) { left: 10% !important; background: #0ea5e9 !important; animation: confettiFall 3s ease-in 0s infinite !important; border-radius: 50% !important; }
.confetti-piece:nth-child(2) { left: 25% !important; background: #a855f7 !important; animation: confettiFall 2.5s ease-in 0.5s infinite !important; border-radius: 2px !important; width: 8px !important; height: 4px !important; }
.confetti-piece:nth-child(3) { left: 45% !important; background: #22c55e !important; animation: confettiFall 3.2s ease-in 1s infinite !important; border-radius: 50% !important; width: 5px !important; height: 5px !important; }
.confetti-piece:nth-child(4) { left: 60% !important; background: #f59e0b !important; animation: confettiFall 2.8s ease-in 0.3s infinite !important; border-radius: 1px !important; width: 4px !important; height: 8px !important; }
.confetti-piece:nth-child(5) { left: 78% !important; background: #ec4899 !important; animation: confettiFall 3.5s ease-in 0.8s infinite !important; border-radius: 50% !important; }
.confetti-piece:nth-child(6) { left: 90% !important; background: #0ea5e9 !important; animation: confettiFall 2.6s ease-in 1.5s infinite !important; width: 7px !important; height: 3px !important; border-radius: 2px !important; }

/* ── TYPEWRITER TEXT EFFECT ── */
.typewriter-text {
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border-right: 2px solid var(--gd) !important;
  animation: typewriter 6s steps(30) infinite, blinkCaret 0.75s step-end infinite !important;
  max-width: fit-content !important;
}

/* ── ANIMATED GRADIENT TEXT (GIF-like shimmer) ── */
.shimmer-text {
  background: linear-gradient(90deg, var(--gd), var(--accent-purple), var(--accent-pink), var(--gd)) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 3s ease infinite !important;
}

/* ── ANIMATED STAT NUMBER GLOW ── */
.stat-glow {
  position: relative !important;
}
.stat-glow::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  background: radial-gradient(circle, rgba(14,165,233,0.2), transparent 70%) !important;
  border-radius: 50% !important;
  animation: breathe 3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ── ANIMATED NOTIFICATION BELL ── */
.anim-bell {
  display: inline-block !important;
  animation: pendulum 1s ease-in-out infinite !important;
  transform-origin: top center !important;
}

/* ── MOBILE: Hide heavy animations ── */
@media (max-width: 640px) {
  .hero-particles { display: none !important; }
  .bubble-container { display: none !important; }
  .confetti-container { display: none !important; }
  .orbit-dot { display: none !important; }
  .scroll-indicator { display: none !important; }
  .sparkle-star { display: none !important; }
  .spotlight-card::before { display: none !important; }
}

/* ══════════════════════════════════
   PREFERS REDUCED MOTION
   ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cursor-dot, .cursor-ring { display: none !important; }
  .hero-particles, .bubble-container, .confetti-container,
  .scroll-indicator, .sparkle-star, .typing-dots { display: none !important; }
}