/* ── Custom CSS — Financtics ──────────────────────────────
   Tailwind CDN handles utility classes.
   This file adds the design-token classes from index.css.
   ─────────────────────────────────────────────────────── */

/* Decorative backgrounds */
.bg-grid-soft {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.bg-grid-light {
  background-image:
    linear-gradient(rgba(10,15,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,15,28,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.bg-aurora {
  background:
    radial-gradient(60% 60% at 18% 20%, rgba(0, 206, 200, 0.22) 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 0%,  rgba(0, 206, 200, 0.18) 0%, transparent 55%),
    radial-gradient(40% 40% at 60% 100%,rgba(0, 206, 200, 0.10) 0%, transparent 60%);
}
.bg-aurora-light {
  background:
    radial-gradient(60% 60% at 80% 0%,  rgba(0, 206, 200, 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(0, 206, 200, 0.07) 0%, transparent 55%);
}

/* Gradient text */
.text-gradient-teal {
  background: linear-gradient(90deg, #00CEC8 0%, #6FE0DC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Buttons */
.btn-primary {
  background: #00CEC8;
  color: #0A0F1C;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-primary:hover {
  background: #5FE3DF;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(0, 206, 200, 0.55);
}
.btn-primary:disabled, .btn-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost-dark {
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.18);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); }

.btn-outline-light {
  border: 1px solid rgba(10,15,28,0.18);
  color: #0A0F1C;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  font-size: 0.9rem;
}
.btn-outline-light:hover { background: #0A0F1C; color: #fff; border-color: #0A0F1C; }

/* Inputs */
.fi-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #E5E8EE;
  border-radius: 0.625rem;
  background: #fff;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  color: #1A1F2E;
  font-family: inherit;
}
.fi-input:focus { outline: none; border-color: #00CEC8; box-shadow: 0 0 0 3px rgba(0,206,200,0.15); }
.fi-input::placeholder { color: #98A1B3; }

/* Blog prose */
.prose-finance h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #0A0F1C;
  letter-spacing: -0.02em;
  margin-top: 2.2rem;
  margin-bottom: 0.85rem;
}
.prose-finance p {
  color: #3F4555;
  line-height: 1.78;
  margin-bottom: 1.15rem;
  font-size: 1.05rem;
}
.prose-finance a {
  color: #0A0F1C;
  border-bottom: 1.5px solid #00CEC8;
  font-weight: 500;
}

/* Toast notification */
.fi-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.fi-toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 10px 40px -8px rgba(0,0,0,0.3);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: toast-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
  max-width: 380px;
}
.fi-toast.success { background: #059669; }
.fi-toast.error   { background: #DC2626; }
.fi-toast.info    { background: #0A0F1C; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Aurora animation */
@keyframes aurora-float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-20px,30px) scale(1.05); }
}
.animate-aurora { animation: aurora-float 14s ease-in-out infinite; }

/* Selection */
::selection { background: #00CEC8; color: #0A0F1C; }

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

/* Base body */
body {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff;
  color: #1A1F2E;
  letter-spacing: -0.005em;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.025em;
  color: #0A0F1C;
}

.bg-brand-ink h1,
.bg-brand-ink h2,
.bg-brand-ink h3,
.bg-brand-ink h4 {
  color: inherit;
}

.bg-brand-ink .text-brand-ink {
  color: #0A0F1C;
}

.bg-brand-ink .text-gradient-teal {
  color: transparent;
}

/* Mobile nav transition */
#mobile-nav {
  display: none;
}
#mobile-nav.open {
  display: block;
}

/* FAQ accordion */
.faq-answer {
  display: none;
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: #52525b;
  line-height: 1.7;
}
.faq-answer.open {
  display: block;
}
.faq-icon {
  transition: transform 0.25s ease;
}
.faq-btn.open .faq-icon {
  transform: rotate(180deg);
}

/* Admin sidebar */
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  border: 1px solid transparent;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-link.active { background: rgba(0,206,200,0.15); color: #00CEC8; border-color: rgba(0,206,200,0.2); }

/* ── WhatsApp floating button ─────────────────────────── */
.fi-whatsapp-btn {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 500;
  width: 3.5rem;
  height: 3.5rem;
  background: #25D366;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(37,211,102,0.5);
  transition: all 0.25s ease;
  text-decoration: none;
}
.fi-whatsapp-btn:hover {
  background: #1ebe5d;
  transform: scale(1.1);
  box-shadow: 0 14px 40px rgba(37,211,102,0.6);
}
.fi-whatsapp-btn svg { width: 1.625rem; height: 1.625rem; fill: #fff; }

/* ── Quiz Popup ────────────────────────────────────────── */
#fi-quiz-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,15,28,0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#fi-quiz-overlay.open { display: flex; }
#fi-quiz-modal {
  background: #fff;
  border-radius: 1.5rem;
  width: 100%;
  max-width: 500px;
  padding: 2rem 2rem 1.75rem;
  position: relative;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  animation: quiz-pop 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes quiz-pop {
  from { opacity: 0; transform: scale(0.93) translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.fi-quiz-progress {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.75rem;
}
.fi-quiz-dot {
  height: 3px;
  border-radius: 999px;
  flex: 1;
  background: #E5E8EE;
  transition: background 0.3s ease;
}
.fi-quiz-dot.done   { background: #00CEC8; }
.fi-quiz-dot.active { background: #0A0F1C; }
.fi-quiz-options { display: flex; flex-direction: column; gap: 0.625rem; }
.fi-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  border: 1.5px solid #E5E8EE;
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.16s ease;
  background: #fff;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1A1F2E;
  font-weight: 500;
}
.fi-quiz-option:hover  { border-color: #00CEC8; background: #f0fffe; }
.fi-quiz-option.chosen { border-color: #00CEC8; background: #e6fffe; color: #007a77; }
.fi-quiz-emoji { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.fi-quiz-close-btn {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease;
}
.fi-quiz-close-btn:hover { color: #374151; }
.fi-quiz-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #9CA3AF;
  padding: 0;
  font-family: inherit;
  margin-top: 0.75rem;
  transition: color 0.15s;
}
.fi-quiz-back-btn:hover { color: #6B7280; }
.fi-quiz-submit {
  width: 100%;
  padding: 0.875rem;
  background: #00CEC8;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0A0F1C;
  font-family: inherit;
  transition: background 0.2s ease;
  margin-top: 1.25rem;
}
.fi-quiz-submit:hover:not(:disabled)  { background: #00B0AB; }
.fi-quiz-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Questionnaire lead form */
.lead-questionnaire-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10,15,28,0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lead-questionnaire-modal.open { display: flex; }
.lead-questionnaire-panel {
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  position: relative;
  border-radius: 1rem;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 24px 80px -28px rgba(0,0,0,0.5);
  animation: questionnaire-pop 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes questionnaire-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.lead-questionnaire-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9CA3AF;
  cursor: pointer;
}
.lead-questionnaire-close:hover { background: #F4F4F5; color: #0A0F1C; }
.lead-questionnaire-progress {
  display: flex;
  gap: 0.5rem;
  padding-right: 2.75rem;
  margin-bottom: 1.5rem;
}
.lead-questionnaire-progress span {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: #E5E8EE;
}
.lead-questionnaire-progress span.done { background: #00CEC8; }
.lead-questionnaire-progress span.active { background: #0A0F1C; }
.lead-question-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00B0AB;
}
.lead-question h3 {
  margin: 0 0 1.25rem;
  color: #0A0F1C;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
}
.lead-question-help {
  margin: -0.75rem 0 1.25rem;
  color: #71717A;
  font-size: 0.9rem;
  line-height: 1.6;
}
.lead-question-options {
  display: grid;
  gap: 0.625rem;
}
.lead-question-option {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #E5E8EE;
  border-radius: 0.75rem;
  background: #fff;
  color: #3F4555;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.lead-question-option:hover { border-color: #00CEC8; background: #F6F7F9; }
.lead-question-option.selected {
  border-color: #00CEC8;
  background: #CFF6F4;
  color: #0A0F1C;
}
.lead-questionnaire-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.lead-questionnaire-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #71717A;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 0.75rem;
}
.lead-questionnaire-back:hover:not(:disabled) { background: #F4F4F5; color: #0A0F1C; }
.lead-questionnaire-back:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
  .lead-questionnaire-panel {
    padding: 1.5rem;
    border-radius: 0.875rem;
  }
}

/* Drawer overlay */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 50;
}
.drawer-overlay.open { display: flex; }
.drawer-panel {
  margin-left: auto;
  width: 100%;
  max-width: 28rem;
  background: #fff;
  height: 100%;
  overflow-y: auto;
}