/* ============================================================
   FINSEICH — THEME.CSS
   Design tokens · Base styles · Shared components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ─── DESIGN TOKENS ───────────────────────────────────── */
:root {
  --ink:      #0e0e0f;
  --soft:     #3a3a3c;
  --muted:    #8a8a8e;
  --cream:    #f5f3ee;
  --accent:   #1a5c4a;
  --alight:   #e8f2ef;
  --abright:  #22c997;
  --white:    #ffffff;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'DM Sans', sans-serif;

  --nav-h: 68px;

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 8px rgba(14,14,15,.06);
  --shadow-md: 0 4px 20px rgba(14,14,15,.10);
  --shadow-lg: 0 8px 40px rgba(14,14,15,.14);
  --shadow-xl: 0 16px 60px rgba(14,14,15,.18);
}

/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--font-sans); background:var(--white); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-serif); }
a   { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:var(--font-sans); border:none; background:none; }

/* ─── CONTAINER ────────────────────────────────────────── */
.container { width:100%; max-width:1280px; margin-inline:auto; padding-inline:1rem; }
@media(min-width:640px)  { .container { padding-inline:1.5rem; } }
@media(min-width:1024px) { .container { padding-inline:2rem; } }

/* ─── SECTION SPACING ──────────────────────────────────── */
.section    { padding-block:4rem; }
.section-lg { padding-block:5rem; }
@media(min-width:1024px){
  .section    { padding-block:5rem; }
  .section-lg { padding-block:7rem; }
}

/* ─── TYPOGRAPHY ───────────────────────────────────────── */
.heading-xl { font-family:var(--font-serif); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; line-height:1.1; letter-spacing:-.03em; }
.heading-lg { font-family:var(--font-serif); font-size:clamp(1.875rem,4vw,3rem); font-weight:300; line-height:1.15; letter-spacing:-.02em; }
.heading-md { font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.25rem); font-weight:300; line-height:1.2; letter-spacing:-.01em; }
.heading-accent { color:var(--accent); font-style:italic; }

.body-lg   { font-size:1rem;     font-weight:300; line-height:1.75; color:var(--soft); }
.body-base { font-size:.9375rem; font-weight:300; line-height:1.70; color:var(--soft); }
.body-sm   { font-size:.8125rem; font-weight:300; line-height:1.65; color:var(--muted); }

.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.75rem; }
.eyebrow::before,.eyebrow::after { content:''; display:block; width:1.5rem; height:1px; background:var(--accent); }

/* ─── BUTTONS ──────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:.9375rem; font-weight:500; border-radius:var(--r-full); padding:.875rem 2rem; transition:all .25s ease; white-space:nowrap; }
.btn-primary { background:var(--accent); color:var(--white); }
.btn-primary:hover { background:var(--ink); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.btn-dark    { background:var(--ink); color:var(--white); }
.btn-dark:hover { background:var(--accent); }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid rgba(14,14,15,.15); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-white   { background:var(--white); color:var(--accent); font-weight:600; }
.btn-white:hover { background:var(--cream); }
.btn-sm { font-size:.8125rem; padding:.625rem 1.25rem; }
.btn-lg { font-size:1rem; padding:1rem 2.5rem; }

/* ─── CARDS ────────────────────────────────────────────── */
.card { background:var(--white); border-radius:var(--r-2xl); border:1px solid rgba(14,14,15,.06); padding:1.5rem; transition:transform .25s ease,box-shadow .25s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-cream  { background:var(--cream);  border-color:transparent; }
.card-dark   { background:var(--ink);    border-color:transparent; }
.card-accent { background:var(--accent); border-color:transparent; }

/* ─── ICON BOX ─────────────────────────────────────────── */
.icon-box { width:2.75rem; height:2.75rem; border-radius:var(--r-lg); background:var(--alight); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; transition:background .15s ease; }

/* ─── BADGE ────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.375rem; font-size:.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:.375rem .875rem; border-radius:var(--r-full); }
.badge-accent { background:var(--alight); color:var(--accent); }
.badge-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--abright); animation:pulse2 2s infinite; }

/* ─── FORM ELEMENTS ────────────────────────────────────── */
.form-label { display:block; font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:.375rem; }
.form-input,
.form-select { width:100%; border:1.5px solid rgba(14,14,15,.12); border-radius:var(--r-xl); padding:.75rem 1rem; font-family:var(--font-sans); font-size:.9375rem; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s ease; }
.form-input::placeholder { color:var(--muted); }
.form-input:focus, .form-select:focus { border-color:var(--accent); }
input[type=range] { -webkit-appearance:none; width:100%; height:6px; border-radius:3px; background:#e2e8f0; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }

/* ─── TABLE ────────────────────────────────────────────── */
.fin-table { width:100%; }
.fin-table thead tr { background:var(--ink); color:var(--white); }
.fin-table thead th { padding:1rem 1.5rem; font-size:.8125rem; font-weight:500; letter-spacing:.04em; text-align:left; }
.fin-table tbody tr { border-bottom:1px solid rgba(14,14,15,.06); transition:background .15s ease; }
.fin-table tbody tr:hover { background:var(--cream); }
.fin-table tbody td { padding:1rem 1.5rem; font-size:.875rem; }
.fin-table tbody td:first-child { font-weight:500; }
.fin-table tbody td:last-child  { color:var(--soft); font-weight:300; }

/* ─── CHECKLIST ────────────────────────────────────────── */
.checklist { display:flex; flex-direction:column; gap:.875rem; }
.checklist li { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; color:var(--soft); font-weight:300; line-height:1.6; }
.check-dot  { width:1.25rem; height:1.25rem; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem; color:white; font-size:.625rem; }
.arrow-dot  { width:1.25rem; height:1.25rem; border-radius:50%; background:rgba(34,201,151,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem; color:var(--abright); font-size:.625rem; }

/* ─── FAQ ──────────────────────────────────────────────── */
.faq-item    { background:var(--cream); border-radius:var(--r-2xl); overflow:hidden; }
.faq-trigger { width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.5rem; text-align:left; }
.faq-q       { font-size:.9375rem; font-weight:500; color:var(--ink); line-height:1.5; }
.faq-icon    { font-size:1.5rem; font-weight:300; color:var(--accent); flex-shrink:0; line-height:1; margin-top:.125rem; }
.faq-body    { display:none; padding:0 1.5rem 1.5rem; }
.faq-body p  { font-size:.875rem; color:var(--muted); font-weight:300; line-height:1.75; }

/* ─── STICKY TABS ──────────────────────────────────────── */
.sticky-tabs { position:sticky; top:var(--nav-h); z-index:30; background:var(--white); border-bottom:1px solid rgba(14,14,15,.08); box-shadow:var(--shadow-sm); }
.tabs-row    { display:flex; gap:.25rem; overflow-x:auto; padding-block:.5rem; scrollbar-width:none; }
.tabs-row::-webkit-scrollbar { display:none; }
.tab-link    { white-space:nowrap; padding:.5rem 1rem; border-radius:var(--r-lg); font-size:.875rem; font-weight:500; color:var(--soft); transition:all .15s ease; }
.tab-link:hover,.tab-link.active { color:var(--accent); background:var(--alight); }

/* ─── BREADCRUMB ───────────────────────────────────────── */
.breadcrumb   { font-size:.8125rem; color:var(--muted); font-weight:300; }
.breadcrumb a:hover { color:var(--accent); }
.bc-sep { margin-inline:.5rem; }

/* ─── TESTIMONIAL ──────────────────────────────────────── */
.testimonial  { background:var(--cream); border-radius:var(--r-2xl); padding:1.5rem; }
.t-stars      { color:var(--accent); font-size:.875rem; margin-bottom:.75rem; letter-spacing:.1em; }
.t-text       { font-family:var(--font-serif); font-size:1rem; font-weight:300; font-style:italic; color:var(--soft); line-height:1.7; margin-bottom:1.25rem; }
.t-author     { display:flex; align-items:center; gap:.75rem; padding-top:1rem; border-top:1px solid rgba(14,14,15,.08); }
.t-avatar     { width:2.5rem; height:2.5rem; border-radius:50%; background:var(--alight); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600; color:var(--accent); font-size:.875rem; flex-shrink:0; }
.t-name       { font-size:.875rem; font-weight:500; }
.t-role       { font-size:.75rem; color:var(--muted); font-weight:300; }

/* ─── LENDER STRIP ─────────────────────────────────────── */
.lender-row  { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.lender-pill { background:var(--white); font-size:.875rem; font-weight:500; color:var(--soft); padding:.625rem 1.25rem; border-radius:var(--r-full); box-shadow:var(--shadow-sm); }

/* ─── REVEAL ANIMATION ─────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── KEYFRAMES ────────────────────────────────────────── */
@keyframes slideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fadeUp    { from{transform:translateY(24px);opacity:0}  to{transform:translateY(0);opacity:1} }
@keyframes pulse2    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
@keyframes megaIn    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.anim-slideDown { animation:slideDown .55s ease both; }
.anim-fadeUp    { animation:fadeUp .7s ease both; }
.anim-fadeUpD   { animation:fadeUp .7s .2s ease both; }
.anim-pulse     { animation:pulse2 2s infinite; }
.anim-megaIn    { animation:megaIn .2s ease both; }

/* ─── UTILITIES ────────────────────────────────────────── */
.hidden { display:none !important; }

/* ─── GLOBAL RESPONSIVE FIXES ──────────────────────────── */
/* Table scroll wrapper — applied to .table-wrap globally */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* fin-table min-width so it scrolls rather than squishes */
.fin-table { min-width:480px; }

/* Responsive max-width helpers used on prose/content blocks */
@media(max-width:640px) {
  /* form-grid: always single column on small screens */
  .form-grid { grid-template-columns:1fr !important; }
  .form-grid .full { grid-column:1/-1; }

  /* steps row: always single column on small screens */
  .steps-row { grid-template-columns:1fr !important; }

  /* quick-stats: 3-up can be tight; allow 2-up wrap */
  .quick-stats { grid-template-columns:repeat(2,1fr); }

  /* hero loan grid stacks */
  .hero-loan-grid { grid-template-columns:1fr !important; }

  /* two-col layout stacks */
  .two-col { grid-template-columns:1fr !important; }

  /* loan types grid: single col on very small screens */
  .loan-types-grid { grid-template-columns:1fr !important; }
}

@media(max-width:480px) {
  /* Even quick-stats goes single col on very small phones */
  .quick-stats { grid-template-columns:1fr; }

  /* heading sizes scale down a bit */
  .heading-xl { font-size:clamp(1.75rem, 6vw, 2.5rem); }
  .heading-lg { font-size:clamp(1.5rem, 5vw, 2.25rem); }

  /* section padding reduction */
  .section { padding-block:3rem; }

  /* feat pills wrap nicely */
  .feat-pills { gap:.5rem; }
  .feat-pill { font-size:.75rem; padding:.375rem .75rem; }
}

/* ─── SOCIAL ICONS (footer) ────────────────────────────────── */
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:var(--r-md); background:rgba(255,255,255,.08); color:rgba(255,255,255,.55); transition:all .2s ease; }
.social-icon:hover { background:var(--accent); color:var(--white); }