@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --navy-dark: #0B1A2C;
  --navy: #17365C;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-500: #64748B;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white: #FFFFFF;
  
  --electric-start: #0EA5E9; /* Cyan */
  --electric-end: #3B82F6;   /* Blue */
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  
  --border-delicate: 1px solid rgba(15, 23, 42, 0.08);
  --border-light: 1px solid rgba(255, 255, 255, 0.15);
  
  --shadow-float: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
  --shadow-btn: 0 10px 20px -5px rgba(14, 165, 233, 0.4);
  
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background-color: var(--white);
  color: var(--slate-500);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Extreme Typographical Hierarchy */
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; color: var(--slate-900); }
h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 1.25rem; }
h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 0.75rem;}
p { font-size: 1.125rem; margin-bottom: 1.5rem; font-weight: 400; color: var(--slate-500); }
strong { font-weight: 600; color: var(--slate-800); }
a { text-decoration: none; color: var(--electric-start); font-weight: 500; transition: var(--transition-fast); }

@media (min-width: 768px) {
  h1 { font-size: 5rem; letter-spacing: -0.04em; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 1.75rem; }
}

/* Layout Core */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 800px; }
.section { padding: 5rem 0; position: relative; }
@media (min-width: 768px) { .section { padding: 5rem 0; } }

/* The Grid Blueprint Canvas */
.bg-blueprint {
  background-color: var(--slate-50);
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 3rem 3rem;
  background-position: center top;
}
.bg-blueprint-dark {
  background-color: var(--navy-dark);
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 3rem 3rem;
  background-position: center top;
}
.bg-blueprint-dark * { position: relative; z-index: 1; }
.bg-blueprint-dark h1, .bg-blueprint-dark h2, .bg-blueprint-dark h3 { color: var(--white); }
.bg-blueprint-dark p { color: #94A3B8; }

/* Gradients & Badges */
.text-electric {
  background: linear-gradient(135deg, var(--electric-start), var(--electric-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-dark {
  background: linear-gradient(135deg, var(--white) 0%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: var(--slate-100);
  border: var(--border-delicate);
  border-radius: 100px;
  color: var(--slate-800);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.eyebrow-dark {
  background: rgba(255, 255, 255, 0.05);
  border: var(--border-light);
  color: var(--slate-200);
}
.eyebrow-muted {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  color: #94A3B8;
  letter-spacing: 0.1em;
}

/* Electric Buttons */
.btn-electric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--electric-start), var(--electric-end));
  color: var(--white) !important;
  padding: 1.15rem 2.5rem;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.btn-electric::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 50%, transparent);
  transform: skewX(-20deg); transition: 0.5s;
}
.btn-electric:hover { transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgba(14, 165, 233, 0.5); }
.btn-electric:hover::before { left: 150%; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--slate-900) !important;
  padding: 1.15rem 2.5rem; border-radius: 100px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.125rem;
  border: var(--border-delicate); box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  transition: var(--transition-fast);
}
.btn-secondary:hover { border-color: var(--slate-200); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateY(-2px); }

/* Header Navbar */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15,23,42,0.05);
  z-index: 1000; transition: var(--transition-smooth);
}
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; max-width:1200px; margin:0 auto; }
.logo-img { max-height: 40px; }
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
.nav-links a.nav-item { color: var(--slate-500); font-weight: 500; font-size: 0.95rem; }
.nav-links a.nav-item:hover { color: var(--slate-900); }
.nav-btn {
  background: var(--slate-900); color: var(--white) !important; padding: 0.6rem 1.25rem;
  border-radius: 100px; font-weight: 600; font-size: 0.9rem; transition: var(--transition-fast);
}
.nav-btn:hover { background: var(--electric-start); }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--slate-900); padding: 0.25rem;}
.mobile-toggle svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 2rem; border-bottom: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); gap: 1.5rem; text-align: center;
  }
  .nav-links.active { display: flex; }
  .mobile-toggle { display: block; }
}

/* Clean Hero */
.hero { display: flex; align-items: center; min-height: 90vh; padding-top: 120px; text-align:center; }
.hero-content { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-text-constrain { max-width: 700px; margin: 0 auto; }
.hero-pill-grid { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.75rem; margin: 2.5rem 0 3.5rem 0; }
.hero-pill {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(15,23,42,0.4); backdrop-filter: blur(12px); border: var(--border-light);
  padding: 0.6rem 1.25rem; border-radius: 100px; color: var(--slate-200); font-size: 0.95rem; font-weight: 500;
}
.hero-pill svg { width: 18px; height: 18px; color: var(--electric-start); }
@media (max-width: 900px) {
  .hero-pill-grid { flex-wrap: wrap; }
}

/* Enterprise Enterprise Marquee */
.marquee-wrapper { border-top: var(--border-delicate); border-bottom: var(--border-delicate); background: var(--white); overflow: hidden; padding: 1.5rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.marquee-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate-500); font-weight: 600; margin-bottom: 1.5rem; }
.marquee-container {
  width: 100%; overflow: hidden; display: flex; position: relative;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-content {
  display: flex; align-items: center; gap: 4rem; padding-left: 4rem;
  animation: scroll-left-fast 40s linear infinite; width: max-content;
}
.marquee-img {
  height: 28px; /* Extremely small and sophisticated */
  object-fit: contain; opacity: 0.4; filter: grayscale(100%); transition: var(--transition-fast);
}
.marquee-container:hover .marquee-content { animation-play-state: paused; }
.marquee-container .marquee-img:hover { opacity: 0.8; }
@keyframes scroll-left-fast { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* FinTech Bento Cards */
.bento-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.fintech-card {
  background: var(--white);
  border: var(--border-delicate);
  border-radius: var(--radius-md);
  padding: 3rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  transition: var(--transition-smooth);
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
}
/* Inner structural ring */
.fintech-card::before {
  content:''; position:absolute; inset: 4px; border: 1px dashed rgba(15,23,42,0.06); border-radius: var(--radius-sm); pointer-events:none;
}
.fintech-card.card-dark { background: var(--slate-900); color: var(--slate-200); border-color: var(--slate-800); box-shadow: var(--shadow-float); }
.fintech-card.card-dark::before { border-color: rgba(255,255,255,0.05); }

.fintech-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: rgba(15,23,42,0.1); }
.fintech-icon-wrap {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--slate-50); border: var(--border-delicate);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-900); margin-bottom: 2rem; position:relative; z-index:1;
}
.card-dark .fintech-icon-wrap { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--electric-start); }

.fintech-icon-wrap.large { width: 64px; height: 64px; border-radius: 50%; svg { width: 32px; height: 32px; } }
.card-amber { background: var(--slate-900); border-color: #F59E0B; box-shadow: var(--shadow-float); }

.card-danger { border-top: 4px solid #EF4444; background: rgba(239, 68, 68, 0.01); }
.card-success { border-top: 4px solid #10B981; background: rgba(16, 185, 129, 0.02); }
.text-danger { color: #EF4444; }
.text-success { color: #10B981; }

.col-3 { flex: 1 1 calc(33.333% - 1rem); min-width: 280px; }
.col-6 { flex: 1 1 calc(50% - 0.75rem); min-width: 320px; }
.col-12 { flex: 1 1 100%; }

/* Refined Checking Lists */
.data-list { list-style: none; padding: 0; position:relative; z-index:1; }
.data-list li {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; font-size: 1.05rem; font-weight: 500; color: var(--slate-800);
}
.data-list li svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--electric-start); margin-top:2px; }
.data-list.list-dark li { color: var(--slate-200); }
.data-list.list-cross li svg { color: #EF4444; }

/* Micro-Components */
.highlight-badge {
  color: #EF4444;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* FAQ Precision */
.faq-wrap { border-top: var(--border-delicate); margin-top: 3rem; }
.faq-row, .faq-item { border-bottom: var(--border-delicate); }
.faq-q, .faq-question {
  padding: 2rem 0; width: 100%; display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--slate-900);
  transition: var(--transition-fast);
}
.faq-q:hover, .faq-question:hover { color: var(--electric-start); }
.faq-q svg, .faq-question svg { width: 20px; height: 20px; color: var(--slate-500); transition: var(--transition-fast); }
.faq-row.active .faq-q svg, .faq-item.active .faq-question svg { transform: rotate(180deg); color: var(--electric-start); }
.faq-a { padding-bottom: 2rem; color: #1A2540; font-size: 1.1rem; display: none; }
.faq-row.active .faq-a, .faq-item.active .faq-a { display: block; animation: openFaq 0.3s ease; }
@keyframes openFaq { from {opacity:0; transform:translateY(-10px);} to {opacity:1; transform:translateY(0);} }

/* Modal Absolute Control */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.8); backdrop-filter: blur(8px);
  display: none; justify-content: center; align-items: center; z-index: 2000; padding: 1rem;
}
.modal-overlay.active { display: flex; animation: fadeModal 0.2s ease; }
@keyframes fadeModal { from {opacity:0;} to {opacity:1;} }
.modal-card {
  background: var(--white); padding: 3.5rem; border-radius: var(--radius-md); width: 100%; max-width: 480px;
  position: relative; box-shadow: var(--shadow-float);
}
.modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; cursor: pointer; color: var(--slate-500); }
.modal-close:hover { color: var(--slate-900); }

/* Unified Forms */
.form-grp { margin-bottom: 1.5rem; }
.form-grp label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--slate-800); text-transform:uppercase; letter-spacing:0.05em;}
.form-grp input {
  width: 100%; padding: 1rem 1.25rem; border: var(--border-delicate); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; background: var(--slate-50); color: var(--slate-900); transition: var(--transition-fast);
}
.form-grp input:focus { border-color: var(--electric-start); background: var(--white); outline: none; box-shadow: 0 0 0 4px rgba(14,165,233,0.1); }
.form-success { display: none; text-align: center; }

/* Calculator UI Upgrade */
.calc-wrapper {
  background: var(--white); padding: 3.5rem; border-radius: var(--radius-md); border: var(--border-delicate);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03); max-width: 650px; margin: 0 auto; position: relative;
}
.calc-wrapper::after { content:''; position:absolute; inset:6px; border:1px dashed rgba(15,23,42,0.05); border-radius:var(--radius-sm); pointer-events:none;}
.calc-res-box { background: var(--slate-50); border: 1px solid var(--slate-200); padding: 2rem; border-radius: var(--radius-sm); margin-top:2.5rem; }
.calc-total { background: var(--electric-start); color: var(--white); padding: 1.5rem; text-align: center; border-radius: var(--radius-sm); font-family: 'Outfit'; font-weight:800; font-size:1.75rem; margin-top:1.5rem;}
.calc-select, .calc-input { background: var(--white); border: 1px solid var(--slate-200); }

/* Minimalist Footer */
.footer { background: var(--white); padding: 4rem 0; text-align: center; border-top: var(--border-delicate); color: var(--slate-500); }