/* Shared public-page brand tokens and background treatments. */
:root {
  --brand-royal: #1d4ed8;
  --brand-blue: #2563eb;
  --brand-cyan: #06b6d4;
  --brand-navy: #0b1f4b;
  --brand-accent: #67e8f9;
}

.bg-light-theme {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.035), transparent 68%);
}

section[class*="bg-[#050805]"],
section[class*="bg-[#08100E]"],
section[class*="bg-[#091310]"] {
  background-image: linear-gradient(125deg, #07152e 0%, #0b1f3e 52%, #081a35 100%);
}

footer {
  color: #e2e8f0;
  background-color: #07152e !important;
  background-image: linear-gradient(125deg, #07152e 0%, #091d3b 55%, #06152d 100%) !important;
  border-top: 0 !important;
}

footer .border-t,
footer .border-b {
  border-color: rgba(226, 232, 240, 0.14) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #f8fafc !important;
}

footer p,
footer a,
footer li,
footer address {
  color: #cbd5e1;
}

footer [class*="text-slate-500"],
footer [class*="text-slate-600"],
footer [class*="text-slate-700"],
footer [class*="text-slate-800"] {
  color: #cbd5e1 !important;
}

footer [class*="text-slate-900"] {
  color: #f8fafc !important;
}

footer a:hover {
  color: var(--brand-accent);
}

body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3 {
  animation: brand-heading-shift 12s ease-in-out infinite;
}

@keyframes brand-heading-shift {
  0%, 100% { color: #1e3a8a; }
  50% { color: #0369a1; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.dark) h1,
  body:not(.dark) h2,
  body:not(.dark) h3 {
    animation: none;
  }
}

/* ==========================================================================
   GLOBAL BUTTON STYLE REQUIREMENT (ACROSS EVERY PAGE OF THE WEBSITE)
   - Always use rounded-edge buttons.
   - Do not use square, sharp-cornered, or box-type buttons anywhere.
   - All standard buttons should have a solid, polished gradient-color background.
   - Do not use plain/flat colors.
   - Do not use neon-colored buttons or neon-style gradients.
   - Maintain the same rounded button style and gradient treatment consistently across all pages.
   ========================================================================== */

/* 1. All Button Elements and Button Links Must Have Fully Rounded Edges */
button:not([role="tab"]):not([role="switch"]),
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-compact,
.btn-glow,
.btn-gradient-primary,
.btn-gradient-secondary,
.btn-gradient-zinc,
.btn-gradient-emerald-light,
.btn-gradient-zinc-subtle,
.card-btn,
.nav-btn-white,
.portal-btn,
.demo-btn,
.hero-primary-btn,
.hero-secondary-btn,
.benefit-pill-btn,
.study-mode-pill,
.portfolio-theme-pill,
.interview-q-tab,
a[class*="btn-"],
a[class*="nav-btn"],
button[class*="rounded-"],
a[class*="rounded-"][class*="py-"],
a[class*="rounded-"][class*="px-"] {
  border-radius: 9999px !important;
}

/* 2. Homepage Navbar Button System: Dynamic Polished Brand Gradient Shift */
@keyframes dualColorShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.brand-gradient-fill,
.nav-btn-white,
a.nav-btn-white,
header .nav-btn-white,
.navbar a[href*="signup"] {
  background-image: linear-gradient(105deg, #1d4ed8 0%, #2563eb 48%, #06b6d4 100%) !important;
  background-size: 220% 220% !important;
  animation: dualColorShift 8s ease infinite !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35) !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.brand-gradient-fill:hover,
.nav-btn-white:hover,
a.nav-btn-white:hover,
header .nav-btn-white:hover,
.navbar a[href*="signup"]:hover {
  background-image: linear-gradient(105deg, #1e40af 0%, #1d4ed8 48%, #0284c7 100%) !important;
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.45) !important;
  transform: scale(1.02) !important;
  color: #ffffff !important;
}

.brand-gradient-fill:active,
.nav-btn-white:active,
a.nav-btn-white:active,
header .nav-btn-white:active,
.navbar a[href*="signup"]:active {
  transform: scale(0.98) !important;
}

/* 2b. Primary Standard In-Page Buttons: Solid Polished Premium Gradient */
.btn-primary,
.btn-gradient-primary,
.hero-primary-btn,
.demo-btn,
.card-btn.btn-solid,
#contact-submit-btn,
#newsletter-btn,
#submit-btn,
#submitDemoBtn {
  background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0284c7 100%) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3) !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.btn-primary:hover,
.btn-gradient-primary:hover,
.hero-primary-btn:hover,
.demo-btn:hover,
.card-btn.btn-solid:hover,
#contact-submit-btn:hover,
#newsletter-btn:hover,
#submit-btn:hover,
#submitDemoBtn:hover {
  background-image: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #0369a1 100%) !important;
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.42) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Dark gradient action buttons use the site's light secondary treatment. */
button[class*="from-slate-8"], button[class*="from-slate-9"],
button[class*="from-zinc-8"], button[class*="from-zinc-9"],
button[class*="from-neutral-8"], button[class*="from-neutral-9"],
button[class*="from-gray-8"], button[class*="from-gray-9"],
button[class*="from-black"], button[class*="to-black"],
button[class*="to-slate-9"], button[class*="to-zinc-9"],
a[class*="rounded-full"][class*="from-slate-8"], a[class*="rounded-full"][class*="from-slate-9"],
a[class*="rounded-full"][class*="from-zinc-8"], a[class*="rounded-full"][class*="from-zinc-9"],
a[class*="rounded-full"][class*="from-neutral-8"], a[class*="rounded-full"][class*="from-neutral-9"],
a[class*="rounded-full"][class*="from-gray-8"], a[class*="rounded-full"][class*="from-gray-9"],
a[class*="rounded-full"][class*="from-black"], a[class*="rounded-full"][class*="to-black"],
a[class*="rounded-full"][class*="to-slate-9"], a[class*="rounded-full"][class*="to-zinc-9"] {
  background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #e2e8f0 100%) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.09) !important;
}

button[class*="from-slate-8"] *, button[class*="from-slate-9"] *,
button[class*="from-zinc-8"] *, button[class*="from-zinc-9"] *,
button[class*="from-neutral-8"] *, button[class*="from-neutral-9"] *,
button[class*="from-gray-8"] *, button[class*="from-gray-9"] *,
button[class*="from-black"] *, button[class*="to-black"] *,
button[class*="to-slate-9"] *, button[class*="to-zinc-9"] *,
a[class*="rounded-full"][class*="from-slate-8"] *, a[class*="rounded-full"][class*="from-slate-9"] *,
a[class*="rounded-full"][class*="from-zinc-8"] *, a[class*="rounded-full"][class*="from-zinc-9"] *,
a[class*="rounded-full"][class*="from-neutral-8"] *, a[class*="rounded-full"][class*="from-neutral-9"] *,
a[class*="rounded-full"][class*="from-gray-8"] *, a[class*="rounded-full"][class*="from-gray-9"] *,
a[class*="rounded-full"][class*="from-black"] *, a[class*="rounded-full"][class*="to-black"] *,
a[class*="rounded-full"][class*="to-slate-9"] *, a[class*="rounded-full"][class*="to-zinc-9"] * {
  color: #0f172a !important;
}

button[class*="from-slate-8"]:hover, button[class*="from-slate-9"]:hover,
button[class*="from-zinc-8"]:hover, button[class*="from-zinc-9"]:hover,
button[class*="from-neutral-8"]:hover, button[class*="from-neutral-9"]:hover,
button[class*="from-gray-8"]:hover, button[class*="from-gray-9"]:hover,
button[class*="from-black"]:hover, button[class*="to-black"]:hover,
button[class*="to-slate-9"]:hover, button[class*="to-zinc-9"]:hover,
a[class*="rounded-full"][class*="from-slate-8"]:hover, a[class*="rounded-full"][class*="from-slate-9"]:hover,
a[class*="rounded-full"][class*="from-zinc-8"]:hover, a[class*="rounded-full"][class*="from-zinc-9"]:hover,
a[class*="rounded-full"][class*="from-neutral-8"]:hover, a[class*="rounded-full"][class*="from-neutral-9"]:hover,
a[class*="rounded-full"][class*="from-gray-8"]:hover, a[class*="rounded-full"][class*="from-gray-9"]:hover,
a[class*="rounded-full"][class*="from-black"]:hover, a[class*="rounded-full"][class*="to-black"]:hover,
a[class*="rounded-full"][class*="to-slate-9"]:hover, a[class*="rounded-full"][class*="to-zinc-9"]:hover {
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* 3. Secondary & Neutral Buttons: Solid Polished Slate or Pearl Gradient */
.btn-secondary,
.btn-gradient-zinc,
.hero-secondary-btn,
.portal-btn {
  background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #e2e8f0 100%) !important;
  background-color: transparent !important;
  color: #0f172a !important;
  border-radius: 9999px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.btn-secondary:hover,
.btn-gradient-zinc:hover,
.hero-secondary-btn:hover,
.portal-btn:hover {
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.btn-gradient-secondary,
.btn-outline,
.card-btn.btn-outline {
  background-image: linear-gradient(180deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  background-color: transparent !important;
  color: #0f172a !important;
  border-radius: 9999px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.btn-gradient-secondary:hover,
.btn-outline:hover,
.card-btn.btn-outline:hover {
  background-image: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #0284c7 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}