/* =============================================================================
   Modern fintech skin — loaded after Tailwind on every public page.
   Palette lives in each page's tailwind.config (navy = ink/indigo, gold = mint);
   this file handles shape, depth, gradients and motion.
   ============================================================================= */
:root {
  --ink: #0a0d26;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --mint: #2dd4b0;
  --surface: #f5f7ff;
  --radius-card: 20px;
  --shadow-soft: 0 1px 2px rgba(17, 22, 51, .04), 0 12px 32px -12px rgba(79, 70, 229, .18);
  --shadow-lift: 0 24px 48px -16px rgba(79, 70, 229, .28);
}

html { scroll-behavior: smooth; }
body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  background: #fff;
}
h1, h2, h3, .font-serif { letter-spacing: -0.025em; }
.font-serif { font-weight: 800 !important; }
h1.font-serif { line-height: 1.05; }

::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: #a5b0e6; border-radius: 8px; }

/* ---- Header ------------------------------------------------------------- */
#main-header {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(79, 70, 229, .08) !important;
}
header.scrolled { box-shadow: 0 8px 30px -10px rgba(79, 70, 229, .22) !important; }
.mega-menu {
  border-radius: 20px !important;
  border: 1px solid rgba(79, 70, 229, .1) !important;
  box-shadow: 0 30px 60px -20px rgba(17, 22, 51, .28) !important;
}
body > div.bg-navy-950 { background: linear-gradient(90deg, #0a0d26, #1c1760) !important; }

/* ---- Buttons ------------------------------------------------------------ */
a[class*="px-"][class*="py-"].rounded-lg,
button[class*="px-"][class*="py-"].rounded-lg {
  border-radius: 999px !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
a.bg-navy-900[class*="px-"], button.bg-navy-900[class*="px-"],
a.bg-navy-800[class*="px-"], button.bg-navy-800[class*="px-"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .7);
}
a.bg-navy-900[class*="px-"]:hover, button.bg-navy-900[class*="px-"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(79, 70, 229, .8);
}
a.bg-gold-400[class*="px-"], button.bg-gold-400[class*="px-"] {
  background: linear-gradient(135deg, #34e3bd, #22c3a3) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 26px -10px rgba(45, 212, 176, .75) !important;
}
a.bg-gold-400[class*="px-"]:hover { transform: translateY(-2px); }
a.border-white\/30 { border-color: rgba(255, 255, 255, .35) !important; backdrop-filter: blur(6px); }

/* ---- Cards & surfaces --------------------------------------------------- */
.rounded-xl { border-radius: var(--radius-card) !important; }
.rounded-2xl { border-radius: 28px !important; }
article.rounded-xl, .product-card, div.rounded-xl.border {
  border-color: rgba(79, 70, 229, .1) !important;
  box-shadow: var(--shadow-soft);
  background-color: #fff;
}
.product-card { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift) !important; }
.bg-navy-50 { background-color: var(--surface) !important; }
.feature-img { box-shadow: var(--shadow-lift); }
.feature-img img { transition: transform .6s ease; }
.feature-img:hover img { transform: scale(1.04); }
input, select, textarea { border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(79, 70, 229, .35) !important; outline-offset: 1px; }

/* ---- Dark sections: deep indigo mesh ------------------------------------ */
section.bg-navy-950, footer.bg-navy-950 {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(124, 58, 237, .45), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(45, 212, 176, .22), transparent 60%),
    linear-gradient(160deg, #0a0d26 0%, #141a5c 100%) !important;
}
section.bg-navy-950 .text-gold-400 { color: var(--mint); }

/* ---- Accent band (was gold) --------------------------------------------- */
section.bg-gold-400 {
  background: linear-gradient(110deg, #2dd4b0 0%, #6ee7d3 45%, #93c5fd 100%) !important;
}
section.bg-gold-400 p, section.bg-gold-400 h2, section.bg-gold-400 span { color: var(--ink); }

/* ---- Small things ------------------------------------------------------- */
.rounded-full.border { border-color: rgba(255, 255, 255, .22); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
table { border-radius: 16px; overflow: hidden; }
details, .faq-item { border-radius: 16px; }

/* ---- Hero (home page) ---------------------------------------------------- */
.hero-modern {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 480px at 90% 0%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(45, 212, 176, .2), transparent 60%),
    linear-gradient(180deg, #f5f7ff 0%, #fff 100%);
}
.hero-modern h1 { color: var(--ink); }
.hero-grad {
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 55%, #14b891);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem;
  border-radius: 999px; background: #fff; border: 1px solid rgba(79, 70, 229, .15);
  box-shadow: var(--shadow-soft); font-size: .85rem; font-weight: 500; color: #2d3760;
}
.hero-stage { position: relative; min-height: 460px; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.bank-card {
  position: absolute; width: 330px; max-width: 86%; aspect-ratio: 1.586; padding: 1.4rem;
  border-radius: 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 120%);
  box-shadow: 0 40px 70px -24px rgba(79, 70, 229, .65);
  animation: float 7s ease-in-out infinite;
}
.bank-card.alt {
  background: linear-gradient(135deg, #0a0d26, #1c2347); animation-delay: -3.5s;
  box-shadow: 0 30px 60px -24px rgba(10, 13, 38, .6);
}
.bank-card .chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.glass-panel {
  position: absolute; padding: 1rem 1.15rem; border-radius: 20px; background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 50px -20px rgba(17, 22, 51, .35);
  animation: float 8s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .bank-card, .glass-panel { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1023px) { .hero-stage { min-height: 380px; margin-top: 1rem; } }

/* ---- Mega menu placement -------------------------------------------------
   The hover rule used to replace Tailwind's -translate-x-1/2 with a plain
   translateY, so an open menu jumped 340px right and ran off screen. Each
   menu now keeps its own offset and is anchored to stay inside the window:
   first item opens rightwards, last item opens leftwards, middle is centred. */
nav > .group > .mega-menu {
  width: min(680px, calc(100vw - 32px)) !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) translateY(8px) !important;
}
nav > .group:hover > .mega-menu, nav > .group > .mega-menu:hover {
  transform: translateX(-50%) translateY(0) !important;
}
nav > .group:first-child > .mega-menu {
  left: 0 !important; transform: translateY(8px) !important;
}
nav > .group:first-child:hover > .mega-menu, nav > .group:first-child > .mega-menu:hover {
  transform: translateY(0) !important;
}
nav > .group:last-child > .mega-menu {
  left: auto !important; right: 0 !important; transform: translateY(8px) !important;
}
nav > .group:last-child:hover > .mega-menu, nav > .group:last-child > .mega-menu:hover {
  transform: translateY(0) !important;
}