/* ── Custom styles for Viksha FinServ ── */

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Glassmorphism nav ── */
.nav-glass {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0.72) 100%
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(200, 208, 240, 0.40);
}

/* Desktop: narrower solid white area */
@media (min-width: 768px) {
  .nav-glass {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 0.6) 100%
    );
  }
}

/* ── Hero section ── */
/* Replace hero.svg with hero.jpg (or any image) when available */
#home {
  background-image: url('hero.jpg'), url('hero.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 70vh;
  position: relative;
}

/* Fallback gradient when hero.jpg is absent */
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 16, 48, 0.86) 0%,
    rgba(26, 47, 114, 0.72) 55%,
    rgba(43, 61, 137, 0.50) 100%
  );
  z-index: 0;
}

#home > * {
  position: relative;
  z-index: 1;
}

/* ── Hero glass card overlying the image ── */
.hero-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 1.5rem;
}

/* ── Service cards ── */
.card-glass {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px rgba(26, 47, 114, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26, 47, 114, 0.13);
}

/* ── Comparison table ── */
.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(14, 100, 200, 0.08);
}

.compare-table thead tr th {
  background: linear-gradient(135deg, #1a2f72, #3348a4);
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 1.2rem;
  text-align: left;
}

.compare-table tbody tr:nth-child(even) td {
  background: rgba(213, 218, 240, 0.38);
}

.compare-table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.85);
}

.compare-table tbody td {
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid rgba(180, 190, 230, 0.32);
  vertical-align: top;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── FAQ accordion ── */
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-item[open] summary {
  color: #1a2f72;
}

/* ── CTA button ── */
.btn-cta {
  background: linear-gradient(135deg, #1a2e6f, #32459d);
  color: #fff;
  border-radius: 9999px;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(26, 47, 114, 0.32);
}

.btn-cta:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

/* ── Mobile menu slide-down ── */
#mobile-menu {
  transition: max-height 0.35s ease, opacity 0.35s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* ── Section background stripes ── */
.section-alt {
  background: linear-gradient(180deg, #f4f5fb 0%, #ffffff 100%);
}

/* ── Contact card ── */
.contact-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(190, 198, 232, 0.48);
  border-radius: 1.5rem;
  box-shadow: 0 4px 30px rgba(26, 47, 114, 0.10);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #c5caeb;
  border-radius: 3px;
}