.dark .section-overlay-text h2 { text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.dark .section-overlay-text p { text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
html { scroll-behavior: smooth; }
/* Background grid */
.bg-grid {
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.glass { backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
/* Dark mode overrides */
.dark .bg-white { background-color: #0f172a !important; }
.dark .bg-white\/80 { background-color: rgba(15,23,42,0.80) !important; }
.dark .bg-white\/70 { background-color: rgba(15,23,42,0.70) !important; }
.dark .bg-white\/60 { background-color: rgba(15,23,42,0.60) !important; }
.dark .border-slate-200 { border-color: #334155 !important; }
.dark .text-slate-600 { color: #94a3b8 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #e2e8f0 !important; }
.dark .text-slate-500 { color: #a8b3cf !important; }
/* Tailwind nested color class names used in HTML (with dot) */
.dark .text-vs\.navy { color: #e2e8f0 !important; }
.dark .text-vs\.blue { color: #93c5fd !important; }

/* Active nav link */
.nav-active { color: #0B1D51 !important; font-weight: 600; position: relative; }
.dark .nav-active { color: #e2e8f0 !important; }
.nav-active::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: linear-gradient(90deg,#0B1D51,#1F8E02); border-radius:2px; }

/* Ensure text stays legible over dark gradients */
.dark .section-overlay-text h2,
.dark .section-overlay-text p,
.dark .section-overlay-text div,
.dark .section-overlay-text span { color: #e2e8f0; }
/* Buttons */
.btn-primary { background-color: #1F8E02; color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background-color: #0B1D51; color: #fff; }
.btn-secondary:hover { filter: brightness(1.05); }
.dark .btn-primary { background-color: #2aa405; color: #fff; }
.dark .btn-secondary { background-color: #13306f; color: #fff; }
.btn-outline { border-color: rgba(11,29,81,.25); color: #0B1D51; background: #fff; }
.dark .btn-outline { color: #e2e8f0; background: transparent; border-color: rgba(226,232,240,.25); }
.btn-outline:hover { background: rgba(237,245,255,.6); }
.dark .btn-outline:hover { background: rgba(11,29,81,.35); }
/* Futuristic glow accents */
.neon-border { box-shadow: 0 0 0 1px rgba(31,142,2,.35), 0 0 30px -8px rgba(31,142,2,.6); }
.neon-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 16px; background: radial-gradient(60% 60% at 50% 50%, rgba(31,142,2,.35), transparent 70%); filter: blur(12px); z-index: -1; }

/* Typed text: keep height stable even when empty during erase */
.typed-fixed { display: inline-block; min-height: 1.25rem; line-height: 1.25rem; white-space: nowrap; }
.typed-fixed:empty::before { content: "A"; visibility: hidden; }
/* Subtle tilt hover */
[data-tilt] { transform-style: preserve-3d; transition: transform .2s ease; }
[data-tilt]:hover { transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateZ(0); }

/* Site-wide animated brand background */
.site-animated-bg { position:absolute; inset:-25%; z-index:-1; pointer-events:none; filter: blur(60px); opacity:.55; transform: translateZ(0);
  background:
    radial-gradient(600px 600px at 12% 18%, rgba(0,134,229,.22), transparent 60%),
    radial-gradient(520px 520px at 82% 28%, rgba(31,142,2,.20), transparent 60%),
    radial-gradient(620px 620px at 30% 82%, rgba(11,29,81,.18), transparent 60%);
  animation: siteBgShift 26s ease-in-out infinite alternate;
}
.site-animated-bg::after { content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(420px 420px at 70% 70%, rgba(0,134,229,.14), transparent 60%),
    radial-gradient(360px 360px at 20% 70%, rgba(31,142,2,.12), transparent 60%);
  animation: siteBgDrift 38s ease-in-out infinite alternate;
}
.dark .site-animated-bg { opacity:.50; filter: blur(70px); }
@keyframes siteBgShift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-2%, -3%, 0) rotate(8deg); } }
@keyframes siteBgDrift { from { transform: translate3d(3%, -2%, 0) rotate(-6deg); } to { transform: translate3d(-3%, 2%, 0) rotate(6deg); } }

/* Premium top bar */
.topbar { position: relative; overflow: hidden; color:#fff;
  background: linear-gradient(90deg, rgba(11,29,81,.98) 0%, rgba(11,29,81,.96) 45%, rgba(31,142,2,.96) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.topbar::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient( 120deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px );
  opacity:.35; animation: topbarMove 16s linear infinite; }
.topbar::after { content:""; position:absolute; inset:-40% -10%; pointer-events:none;
  background:
    radial-gradient(900px 120px at -10% 50%, rgba(255,255,255,.22), rgba(255,255,255,0)),
    radial-gradient(900px 120px at 110% 50%, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode: screen; animation: topbarBeam 9s ease-in-out infinite alternate; }
@keyframes topbarMove { from { background-position: 0 0; } to { background-position: 800px 0; } }
@keyframes topbarBeam { from { transform: translateX(0); } to { transform: translateX(-6%); } }
@media (prefers-reduced-motion: reduce) { .topbar::before, .topbar::after { animation: none; } }

/* Cards and surfaces in dark mode */
.dark .shadow-card { box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6) !important; }
.dark .border { border-color: #334155 !important; }
.dark .bg-slate-50 { background-color: #0b1220 !important; }
.dark .bg-white\/80 { backdrop-filter: saturate(140%) blur(6px); }

/* ⚡ Premium Electric Flow Line (for topbar bottom edge) */
 .electric-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
     height: 3px;
    overflow: visible;
     /* no persistent base line; only pulses are visible */
     background: transparent;
     box-shadow: none;
    border-radius: 9999px;
     opacity: 0;
    animation: pulseCycle 6s ease-in-out infinite;
  }
  
  /* ✨ Main pulse sweep */
  .electric-line::before {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -20%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    filter: blur(8px);
    animation: electricSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0.9;
  }
  
  /* 🔥 Dynamic spark particle */
   .electric-line::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -2%;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
     background: #1F8E02; /* brand green */
    box-shadow: 
      0 0 18px rgba(31, 142, 2, 0.85),
      0 0 12px rgba(11, 29, 81, 0.55),
      0 0 22px rgba(255, 255, 255, 0.28);
    animation: electricSpark 2.8s linear infinite;
  }
  
  /* 🌈 Keyframes for smooth electric flow */
  @keyframes electricSweep {
    0% { transform: translateX(-150%) scaleX(0.9); opacity: 0.3; }
    30% { opacity: 1; }
    100% { transform: translateX(250%) scaleX(1); opacity: 0.4; }
  }
  
  @keyframes electricSpark {
    0% { transform: translateX(-10%) scale(0.9); opacity: 1; filter: brightness(1.2); }
    40% { filter: brightness(1.8); }
    100% { transform: translateX(110%) scale(1); opacity: 0.7; filter: brightness(1); }
  }
  
   @keyframes pulseCycle {
     0%, 30% { opacity: 0; }
     35%, 85% { opacity: 1; }
     100% { opacity: 0; }
   }
  
  /* 🧘 Accessibility: reduced motion mode */
  @media (prefers-reduced-motion: reduce) {
    .electric-line, .electric-line::before, .electric-line::after {
      animation: none;
      opacity: 0.25;
    }
  }
   /* Dark tune */
   .dark .electric-line { opacity: 0; box-shadow: none; }
  
/* Gradient helpers for dark to avoid harsh banding */
.dark .from-vs\.sky\/50 { --tw-gradient-from: rgba(237,245,255,0.10) !important; }
.dark .to-white { --tw-gradient-to: rgba(255,255,255,0.00) !important; }
.dark .from-vs\.green\/10 { --tw-gradient-from: rgba(31,142,2,0.10) !important; }
.dark .to-vs\.navy\/10 { --tw-gradient-to: rgba(11,29,81,0.10) !important; }

/* 🌟 Most Popular badge - Premium glow fix */
[data-i18n="pricing.popular"],
.badge-popular {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, #0B1D51 0%, #1F8E02 100%);
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  box-shadow: 0 0 12px rgba(31,142,2,0.45), 0 0 6px rgba(11,29,81,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  filter: saturate(130%);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  transition: all 0.4s ease;
}

/* ✨ Inner pulse halo */
[data-i18n="pricing.popular"]::before,
.badge-popular::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(70% 70% at 50% 50%, rgba(31,142,2,0.4), transparent 70%);
  filter: blur(10px);
  opacity: 0.8;
  z-index: -1;
  animation: badgeGlow 4s ease-in-out infinite alternate;
}

/* 💎 Hover / focus intensify */
.group:hover [data-i18n="pricing.popular"],
.group:hover .badge-popular {
  box-shadow: 0 0 20px rgba(31,142,2,0.65), 0 0 10px rgba(0,134,229,0.45);
  transform: translateY(-1px) scale(1.05);
}

/* 🌓 Dark mode balance */
.dark [data-i18n="pricing.popular"],
.dark .badge-popular {
  background: linear-gradient(90deg, #13306f 0%, #2aa405 100%);
  border-color: rgba(255,255,255,0.15);
  color: #f1f5f9 !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.4);
  box-shadow: 0 0 14px rgba(31,142,2,0.45);
}

@keyframes badgeGlow {
  0% { opacity: 0.4; filter: blur(8px) brightness(1); }
  100% { opacity: 0.9; filter: blur(12px) brightness(1.4); }
}

/* === Voltron Smart Minimal Premium Footer === */
footer {
    position: relative;
    backdrop-filter: blur(10px);
  }
  
  /* Hafif üst parıltı çizgisi */
  footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,134,229,0.4), transparent);
    opacity: 0.6;
  }
  
  /* Link hover transition */
  footer a {
    transition: color 0.25s ease, text-shadow 0.3s ease;
  }
  footer a:hover {
    text-shadow: 0 0 6px rgba(0,134,229,0.35);
  }
  
  /* Küçük parlak nokta efekti (çok ince detay, fark edilir ama dikkat dağıtmaz) */
  footer::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 12%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0,134,229,0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: softPulse 6s ease-in-out infinite;
    opacity: 0.5;
  }
  
  @keyframes softPulse {
    0%,100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.8); opacity: 0.8; }
  }
  
  .nav-link {
    position: relative;
    color: rgb(100,116,139);
    transition: all 0.3s ease;
  }
  .dark .nav-link {
    color: rgb(203,213,225);
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, #1e3a8a, #22c55e);
    transition: width 0.3s ease;
  }
  .nav-link:hover::after {
    width: 100%;
  }
  .nav-link:hover {
    color: #1e3a8a;
  }
  .dark .nav-link:hover {
    color: #22c55e;
  }
  .nav-link.active {
    color: #1e3a8a;
    font-weight: 600;
  }
  .nav-link.active::after {
    width: 100%;
  }

  /* Mobile */
  .mobile-link {
    @apply px-3 py-2 rounded-lg hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800;
  }
  /* Premium feature cards */
  .feature-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
  .feature-card::after { content:""; position:absolute; inset:-2px; border-radius:16px; background: radial-gradient(60% 60% at 50% 50%, rgba(31,142,2,0.18), transparent 70%); filter: blur(14px); opacity:.6; z-index:-1; transition: opacity .3s ease; }
  .feature-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 30px -14px rgba(0,0,0,.2); }
  .feature-icon { height: 42px; width: 42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; }
  .feature-icon svg { animation: floaty 6s ease-in-out infinite; }
  @keyframes floaty { 0% { transform: translateY(0);} 50% { transform: translateY(-3px);} 100% { transform: translateY(0);} }