/**
 * VidPulse website - same look as the desktop app (theme v2)
 * Graphite surfaces, soft borders, rounded cards, one green family (#BEFF00 / #D4FF4D), no blue.
 * Loaded last on every public page.
 */
:root {
  --accent-color: #BEFF00;
  --accent-glow: rgba(190, 255, 0, 0.26);
  --accent-rgb: 190, 255, 0;
  --primary: #BEFF00;
  --primary-light: #D4FF4D;
  --vp-panel: linear-gradient(180deg, rgba(23, 24, 28, 0.88), rgba(15, 16, 19, 0.88));
  --vp-border: rgba(255, 255, 255, 0.07);
  --vp-lime: linear-gradient(180deg, #D4FF4D 0%, #BEFF00 100%);
}

html, body { background-color: #07080A !important; }
body {
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(190, 255, 0, 0.065), transparent 60%),
    radial-gradient(760px 460px at 6% 108%, rgba(190, 255, 0, 0.035), transparent 60%) !important;
  background-attachment: fixed;
  color: #EDEFF2;
}
::selection { background: rgba(190, 255, 0, 0.3); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #25272D; border-radius: 8px; }

/* ---------- Panels and cards ---------- */
.glass-card, .glass-card-neon, .glass-panel, .pricing-card, .feature-card, .faq-item, .blog-card, .card {
  background: var(--vp-panel) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(16px);
}
.glass-card-neon { border-color: rgba(190, 255, 0, 0.35) !important; box-shadow: 0 0 0 1px rgba(190, 255, 0, 0.12), 0 24px 60px -30px rgba(190, 255, 0, 0.35) !important; }
.bg-grid-tech { opacity: 0.7; }

/* ---------- Buttons ---------- */
.btn-neon, a.btn-neon, button.btn-neon {
  background: var(--vp-lime) !important;
  color: #0A0D02 !important;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(190, 255, 0, 0.35), 0 12px 30px -10px rgba(190, 255, 0, 0.5) !important;
  font-weight: 800;
}
.btn-neon:hover { background: linear-gradient(180deg, #DEFF73 0%, #C6FF1A 100%) !important; box-shadow: 0 0 0 1px rgba(190, 255, 0, 0.5), 0 14px 34px -10px rgba(190, 255, 0, 0.65) !important; }
.bg-neon { background: var(--vp-lime) !important; }

/* ---------- One green family: off-brand Tailwind colors become the brand greens ---------- */
[class*="text-cyan-"], [class*="text-sky-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"], [class*="text-teal-"] { color: #D4FF4D !important; }
[class*="text-emerald-"], [class*="text-green-"] { color: #BEFF00 !important; }
[class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"], [class*="bg-teal-"] { background-color: rgba(190, 255, 0, 0.1) !important; }
[class*="border-cyan-"], [class*="border-sky-"], [class*="border-blue-"], [class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-fuchsia-"], [class*="border-teal-"] { border-color: rgba(190, 255, 0, 0.35) !important; }
[class*="from-cyan-"], [class*="from-sky-"], [class*="from-blue-"], [class*="from-indigo-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-fuchsia-"], [class*="from-teal-"] { --tw-gradient-from: #BEFF00 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(190, 255, 0, 0)) !important; }
[class*="to-cyan-"], [class*="to-sky-"], [class*="to-blue-"], [class*="to-indigo-"], [class*="to-violet-"], [class*="to-purple-"], [class*="to-fuchsia-"], [class*="to-teal-"], [class*="to-emerald-"] { --tw-gradient-to: #D4FF4D !important; }
[class*="via-cyan-"], [class*="via-blue-"], [class*="via-indigo-"], [class*="via-purple-"] { --tw-gradient-stops: var(--tw-gradient-from), #C9FF2A, var(--tw-gradient-to) !important; }
[class*="shadow-cyan-"], [class*="shadow-blue-"], [class*="shadow-indigo-"], [class*="shadow-purple-"] { --tw-shadow-color: rgba(190, 255, 0, 0.3) !important; }
[class*="ring-cyan-"], [class*="ring-blue-"], [class*="ring-indigo-"], [class*="ring-purple-"] { --tw-ring-color: rgba(190, 255, 0, 0.45) !important; }

/* ---------- Inputs, header, footer ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  background-color: #0F1013;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
input:focus, textarea:focus, select:focus { border-color: rgba(190, 255, 0, 0.5) !important; box-shadow: 0 0 0 3px rgba(190, 255, 0, 0.08); outline: none; }
header, nav { border-color: rgba(255, 255, 255, 0.05) !important; }
header.fixed, header.sticky, nav.fixed, nav.sticky, .site-header { background: rgba(7, 8, 10, 0.72) !important; backdrop-filter: blur(18px); }
footer { background: #07080A; border-color: rgba(255, 255, 255, 0.05) !important; }

/* Chips / badges in the green family */
.badge, .chip, .pill { border-radius: 10px; }

/* ---------- Section badges: moving lime edge + shine ---------- */
[class*="rounded-full"][class*="bg-neon/10"][class*="border-neon"],
[class*="rounded-full"][class*="bg-white/5"][class*="font-mono"][class*="border-white/10"] {
  position: relative; isolation: isolate; overflow: hidden;
  border-color: transparent !important;
  background: rgba(15, 16, 19, 0.85) !important;
  color: #D4FF4D !important;
  letter-spacing: 0.14em;
}
[class*="rounded-full"][class*="bg-neon/10"][class*="border-neon"]::before,
[class*="rounded-full"][class*="bg-white/5"][class*="font-mono"][class*="border-white/10"]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(190,255,0,0.85), rgba(255,255,255,0.08));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vpSweep 3.2s linear infinite;
}
[class*="rounded-full"][class*="bg-neon/10"][class*="border-neon"]::after,
[class*="rounded-full"][class*="bg-white/5"][class*="font-mono"][class*="border-white/10"]::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190,255,0,0.14), transparent);
  animation: vpShine 3.2s ease-in-out infinite;
}
@keyframes vpSweep { to { background-position: -200% 0; } }
@keyframes vpShine { 0%, 15% { left: -40%; } 60%, 100% { left: 110%; } }

/* Small mono section labels get lime rules on both sides */
h2[class*="font-mono"][class*="uppercase"][class*="text-neon"] { display: inline-flex; align-items: center; gap: 12px; letter-spacing: 0.22em; }
h2[class*="font-mono"][class*="uppercase"][class*="text-neon"]::before,
h2[class*="font-mono"][class*="uppercase"][class*="text-neon"]::after { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,255,0,0.7)); }
h2[class*="font-mono"][class*="uppercase"][class*="text-neon"]::after { transform: scaleX(-1); }

/* Step numbers ("01", "02"...) become outlined, lit on hover */
.glass-card [class*="font-mono"][class*="text-neon/40"] { color: transparent !important; -webkit-text-stroke: 1.5px rgba(190,255,0,0.55); transition: all .35s; }
.glass-card:hover [class*="font-mono"][class*="text-neon/40"] { color: #BEFF00 !important; -webkit-text-stroke: 0; text-shadow: 0 0 26px rgba(190,255,0,0.4); }

/* ---------- Cards: cursor spotlight, lift, icon pop ---------- */
.vp-spot { position: relative; isolation: isolate; transition: transform .3s ease, border-color .3s ease, opacity .7s ease; }
.vp-spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(190,255,0,0.10), transparent 45%); }
.vp-spot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -20%), rgba(190,255,0,0.7), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.vp-spot:hover::before, .vp-spot:hover::after { opacity: 1; }
.glass-card.vp-spot:hover { transform: translateY(-4px); }
.glass-card:hover [class*="rounded-2xl"][class*="bg-neon/15"] { transform: rotate(-8deg) scale(1.1); box-shadow: 0 0 22px rgba(190,255,0,0.35); }
.vp-fade { opacity: 0; transform: translateY(22px); }
.vp-fade.vp-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [class*="rounded-full"]::before, [class*="rounded-full"]::after { animation: none !important; }
  .vp-fade { opacity: 1; transform: none; }
}