/* ===== LANDING PAGE CSS – FinTrack ===== */

:root {
  --bg:          #0D1117;
  --bg-card:     #161B22;
  --bg-input:    #0D1117;
  --border:      #30363D;
  --text:        #E6EDF3;
  --text-muted:  #8B949E;
  --accent:      #6366F1;
  --accent-h:    #4F46E5;
  --accent-g:    #10B981;
  --accent-b:    #3B82F6;
  --accent-p:    #8B5CF6;
  --accent-r:    #EF4444;
  --radius:      14px;
  --nav-h:       68px;
}
[data-theme="light"] {
  --bg:         #F1F5F9;
  --bg-card:    #FFFFFF;
  --bg-input:   #F8FAFC;
  --border:     #E2E8F0;
  --text:       #0F172A;
  --text-muted: #64748B;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar, .feat-card, .price-card, .how-section, .dashboard-frame, .footer, .modal-card, .btn-outline, .btn-primary, .input-wrap input {
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a { text-decoration: none; color: inherit; }

/* ── BLOBS ── */
.bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: .13;
  animation: blobf 14s ease-in-out infinite alternate;
  transition: opacity 0.5s ease;
}
[data-theme="light"] .blob { opacity: .07; }
.blob-1 { width:600px;height:600px;background:#6366F1;top:-200px;left:-200px; }
.blob-2 { width:500px;height:500px;background:#10B981;bottom:-150px;right:-150px;animation-delay:4s; }
.blob-3 { width:350px;height:350px;background:#8B5CF6;top:50%;left:45%;animation-delay:8s; }
@keyframes blobf {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(40px,-40px) scale(1.1); }
}

/* ── NAVBAR ── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:200;
  background: rgba(13,17,23,.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
[data-theme="light"] .navbar { background: rgba(241,245,249,.85); }
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 24px;
}
.nav-logo {
  display: flex; align-items: center; gap:10px;
  font-weight:700; font-size:1.15rem; color:var(--text);
  flex-shrink:0;
}
.logo-icon {
  width:36px;height:36px;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:#fff;
}
.nav-links { display:flex; gap:28px; flex:1; }
.nav-links a { font-size:.9rem; color:var(--text-muted); font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--text); }
.nav-actions { display:flex; align-items:center; gap:10px; }

.theme-toggle {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:50%; width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--text-muted); transition:all .2s;
}
.theme-toggle:hover { color:var(--text); border-color:var(--accent); }
.theme-toggle svg { width:16px;height:16px; }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  border:none; border-radius:var(--radius);
  color:#fff; font-family:'Inter',sans-serif;
  font-size:.9rem; font-weight:600; cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(99,102,241,.35); }
.btn-primary svg { width:16px;height:16px; }
.btn-primary.btn-lg { padding:14px 28px; font-size:1rem; border-radius:16px; }
.btn-primary.btn-white { background:#fff; color:#6366F1; }
.btn-primary.btn-white:hover { box-shadow:0 8px 24px rgba(255,255,255,.2); }

.btn-outline {
  padding:10px 20px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text); font-family:'Inter',sans-serif;
  font-size:.9rem; font-weight:500; cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-outline.btn-lg { padding:14px 28px; font-size:1rem; border-radius:16px; }

.btn-ghost {
  padding:14px 28px;
  background:transparent; border:none;
  color:var(--text-muted); font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:500; cursor:pointer;
  transition:color .2s;
}
.btn-ghost:hover { color:var(--text); }

/* ── HAMBURGER ── */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px;height:2px; background:var(--text); border-radius:2px; transition:all .3s; }
.mobile-menu {
  display:none; flex-direction:column; gap:12px;
  padding:16px 24px 20px; border-top:1px solid var(--border);
}
.mobile-menu a { font-size:.95rem; color:var(--text-muted); font-weight:500; }
.mobile-menu.open { display:flex; }

/* ── HERO ── */
.hero {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center;
  max-width:1200px; margin:0 auto;
  padding: calc(var(--nav-h) + 60px) 24px 80px;
  gap: 64px;
}
.hero-content { flex:1; min-width:0; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.3);
  color:var(--accent); border-radius:99px;
  padding:6px 14px; font-size:.8rem; font-weight:600;
  margin-bottom:24px;
}
.badge-dot {
  width:7px;height:7px; background:var(--accent-g);
  border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4);}
  50%{box-shadow:0 0 0 6px rgba(16,185,129,0);}
}
.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight:900; line-height:1.1;
  letter-spacing:-2px; margin-bottom:20px;
}
.gradient-text {
  background:linear-gradient(135deg,#6366F1,#8B5CF6,#10B981);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:1.15rem; color:var(--text-muted);
  line-height:1.7; max-width:480px; margin-bottom:36px;
}
.hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.hero-trust { display:flex; align-items:center; gap:12px; }
.trust-avatars { display:flex; }
.tavatar {
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:#fff;
  border:2px solid var(--bg);
  margin-left:-8px;
}
.tavatar:first-child { margin-left:0; }
.hero-trust span { font-size:.82rem; color:var(--text-muted); }

/* ── HERO VISUAL ── */
.hero-visual { flex:1.1; position:relative; min-width:0; }
.dashboard-frame {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
[data-theme="light"] .dashboard-frame { box-shadow:0 40px 100px rgba(0,0,0,.15); }
.frame-bar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
.frame-dot { width:10px;height:10px;border-radius:50%; }
.frame-dot.red{background:#EF4444;} .frame-dot.yellow{background:#F59E0B;} .frame-dot.green{background:#10B981;}
.frame-url { font-size:.75rem; color:var(--text-muted); margin-left:8px; }
.frame-img-wrap { position:relative; }
.dashboard-img { width:100%; display:block; }
.frame-glow {
  position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 60%, var(--bg-card));
  pointer-events:none;
}

/* FLOAT CARDS */
.float-card {
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  font-size:.82rem;
  animation:floatAnim 4s ease-in-out infinite alternate;
}
.float-card-1 { bottom:60px; left:-24px; animation-delay:0s; }
.float-card-2 { top:80px; right:-20px; animation-delay:2s; }
@keyframes floatAnim {
  from{transform:translateY(0);}
  to{transform:translateY(-10px);}
}
.float-icon { font-size:1.3rem; }
.float-title { color:var(--text-muted); margin-bottom:2px; }
.float-val { font-weight:700; color:var(--text); }
.float-val.green { color:var(--accent-g); }

/* ── STATS BAR ── */
.stats-bar {
  position:relative;z-index:1;
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:28px 24px;
}
.stat-item { text-align:center; padding:0 40px; }
.stat-num { display:block; font-size:1.8rem; font-weight:800; color:var(--accent); }
.stat-lbl { font-size:.82rem; color:var(--text-muted); }
.stat-sep { width:1px;height:40px;background:var(--border); }

/* ── SECTIONS COMMON ── */
.section-header { text-align:center; margin-bottom:56px; }
.section-tag {
  display:inline-block;
  background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.25);
  color:var(--accent);
  border-radius:99px; padding:5px 14px;
  font-size:.8rem; font-weight:600;
  margin-bottom:16px;
}
.section-header h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; letter-spacing:-1px; margin-bottom:12px; }
.section-header p { color:var(--text-muted); font-size:1rem; max-width:520px; margin:0 auto; }

/* ── FEATURES ── */
.features {
  position:relative;z-index:1;
  max-width:1200px; margin:0 auto;
  padding:100px 24px;
}
.features-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:auto auto;
  gap:20px;
}
.feat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  transition:transform .2s, border-color .2s;
}
.feat-card:hover { transform:translateY(-4px); border-color:rgba(99,102,241,.4); }
.feat-card-big { grid-column:span 2; }
.feat-card-dark {
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));
  border-color:rgba(99,102,241,.25);
}
.feat-icon {
  width:48px;height:48px; border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.feat-icon svg { width:22px;height:22px; }
.feat-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.feat-card p { font-size:.88rem; color:var(--text-muted); line-height:1.6; }
.feat-banks { display:flex;align-items:center;gap:8px;margin-top:16px; }
.bank-chip {
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:#fff;
}
.bank-more { font-size:.8rem; color:var(--text-muted); }
.security-badges { display:flex;gap:8px;margin-top:14px;flex-wrap:wrap; }
.security-badges span {
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:8px;padding:4px 10px;
  font-size:.78rem;color:var(--text);
}

/* ── HOW IT WORKS ── */
.how-section {
  position:relative;z-index:1;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:100px 24px;
}
.steps-row {
  display:flex; align-items:flex-start; justify-content:center;
  gap:8px; max-width:1000px; margin:0 auto;
  flex-wrap:wrap;
}
.step-item {
  flex:1;min-width:180px;max-width:220px;
  text-align:center; padding:20px;
}
.step-num { font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:1px;margin-bottom:8px; }
.step-icon { font-size:2.4rem; margin-bottom:12px; }
.step-item h3 { font-size:.98rem;font-weight:700;margin-bottom:8px; }
.step-item p { font-size:.83rem;color:var(--text-muted);line-height:1.6; }
.step-arrow { font-size:1.5rem;color:var(--border);align-self:center;padding:0 4px;flex-shrink:0; }

/* ── PRICING ── */
.pricing-section {
  position:relative;z-index:1;
  max-width:1100px; margin:0 auto;
  padding:100px 24px;
}
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:24px; align-items:start; justify-content:center; }
.price-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  position:relative;
  transition:transform .2s, border-color .2s;
  text-align:center;
}
.price-card:hover { transform:translateY(-4px); }
.price-card-featured {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 24px 64px rgba(99,102,241,.15);
  transform:scale(1.03);
}
.price-card-featured:hover { transform:scale(1.03) translateY(-4px); }
.plan-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  color:#fff; border-radius:99px; padding:4px 16px;
  font-size:.78rem; font-weight:700; white-space:nowrap;
}
.plan-name { font-size:.9rem;font-weight:600;color:var(--text-muted);margin-bottom:8px; }
.plan-price { font-size:2.6rem;font-weight:900;color:var(--text);margin-bottom:4px; }
.plan-price span { font-size:1rem;font-weight:400;color:var(--text-muted); }
.plan-desc { font-size:.85rem;color:var(--text-muted);margin-bottom:24px;line-height:1.5; }
.plan-features { list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:10px; }
.plan-features li { font-size:.88rem;color:var(--text); }
.plan-features li.disabled { color:var(--text-muted); }
.plan-btn { width:100%;justify-content:center; }

/* ── CTA ── */
.cta-section {
  position:relative;z-index:1;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));
  border-top:1px solid rgba(99,102,241,.2);
  border-bottom:1px solid rgba(99,102,241,.2);
  padding:100px 24px;
  text-align:center;
}
.cta-inner { max-width:600px;margin:0 auto; }
.cta-inner h2 { font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-1px;margin-bottom:12px; }
.cta-inner p { color:var(--text-muted);font-size:1rem;margin-bottom:32px; }
.cta-note { font-size:.82rem;color:var(--text-muted);margin-top:14px; }

/* ── FOOTER ── */
.footer { position:relative;z-index:1; border-top:1px solid var(--border); padding:60px 24px 24px; }
.footer-inner { max-width:1100px;margin:0 auto;display:flex;gap:48px;flex-wrap:wrap; margin-bottom:40px; }
.footer-brand { flex:1;min-width:200px; }
.footer-brand p { margin-top:12px;font-size:.87rem;color:var(--text-muted);max-width:220px;line-height:1.6; }
.footer-links { display:flex;gap:48px;flex-wrap:wrap; }
.footer-col { display:flex;flex-direction:column;gap:10px; }
.footer-col h4 { font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:4px; }
.footer-col a { font-size:.85rem;color:var(--text-muted);transition:color .2s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom {
  max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding-top:20px;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--text-muted);
}

/* ── MODAL ── */
.modal-overlay {
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:1;transition:opacity .25s;
}
.modal-overlay.hidden { display:none; }
.modal-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 32px;
  width:100%;max-width:420px;
  position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;} }
.modal-close {
  position:absolute;top:14px;right:16px;
  background:none;border:none;
  font-size:1.4rem;color:var(--text-muted);
  cursor:pointer;line-height:1;
  transition:color .2s;
}
.modal-close:hover { color:var(--text); }
.login-logo { display:flex;align-items:center;gap:10px;margin-bottom:20px; }
.logo-text { font-weight:700;font-size:1.15rem; }
.modal-headline { margin-bottom:22px; }
.modal-headline h2 { font-size:1.4rem;font-weight:700; }
.modal-headline p { color:var(--text-muted);font-size:.88rem;margin-top:4px; }

/* ── FORM ── */
.btn-google {
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-family:'Inter',sans-serif;font-size:.93rem;font-weight:500;cursor:pointer;
  transition:all .2s;
}
.btn-google:hover { border-color:var(--accent);background:rgba(99,102,241,.06); }
.google-icon { width:20px;height:20px;flex-shrink:0; }
.login-divider {
  display:flex;align-items:center;gap:10px;
  margin:18px 0;color:var(--text-muted);font-size:.8rem;
}
.login-divider::before,.login-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.email-form { display:flex;flex-direction:column;gap:13px; }
.form-group { display:flex;flex-direction:column;gap:5px; }
.form-group label { font-size:.83rem;font-weight:500;color:var(--text-muted); }
.input-wrap { position:relative;display:flex;align-items:center; }
.input-wrap svg:first-child {
  position:absolute;left:11px;width:15px;height:15px;
  color:var(--text-muted);pointer-events:none;
}
.input-wrap input {
  width:100%;padding:10px 11px 10px 36px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:10px;color:var(--text);
  font-family:'Inter',sans-serif;font-size:.88rem;outline:none;
  transition:border-color .2s;
}
.input-wrap input:focus { border-color:var(--accent); }
.input-wrap input::placeholder { color:var(--text-muted); }
.toggle-pass {
  position:absolute;right:9px;background:none;border:none;cursor:pointer;
  color:var(--text-muted);display:flex;padding:4px;
}
.toggle-pass svg { width:15px;height:15px; }
.form-options { display:flex;align-items:center;justify-content:space-between; }
.checkbox-wrap {
  display:flex;align-items:center;gap:7px;
  font-size:.81rem;color:var(--text-muted);cursor:pointer;
}
.checkbox-wrap input { display:none; }
.checkmark {
  width:15px;height:15px;border:1px solid var(--border);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .2s;
}
.checkbox-wrap input:checked~.checkmark { background:var(--accent);border-color:var(--accent); }
.checkbox-wrap input:checked~.checkmark::after { content:'✓';color:#fff;font-size:9px;font-weight:700; }
.forgot-link { font-size:.81rem;color:var(--accent);text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }
.modal-submit { width:100%;justify-content:center;padding:12px; border-radius:var(--radius); }
.btn-spinner {
  width:17px;height:17px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hidden{display:none!important;}
.form-switch { text-align:center;font-size:.83rem;color:var(--text-muted); }
.form-switch a { color:var(--accent);font-weight:500; }
.alert-msg { padding:9px 13px;border-radius:10px;font-size:.83rem;margin-top:4px; }
.alert-msg.error { background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#EF4444; }
.alert-msg.success { background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10B981; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .hero { flex-direction:column; min-height:auto; padding-top:calc(var(--nav-h)+40px); }
  .hero-visual { width:100%; }
  .float-card-1,.float-card-2 { display:none; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .feat-card-big { grid-column:span 2; }
  .pricing-grid { grid-template-columns:1fr; }
  .price-card-featured { transform:none; }
  .steps-row { flex-direction:column;align-items:center; }
  .step-arrow { transform:rotate(90deg); }
}
@media(max-width:640px) {
  .nav-links,.nav-actions .btn-outline,.nav-actions .btn-primary { display:none; }
  .hamburger { display:flex; }
  .features-grid { grid-template-columns:1fr; }
  .feat-card-big { grid-column:span 1; }
  .stats-bar { gap:16px; }
  .stat-sep { display:none; }
  .stat-item { padding:0 16px; }
}