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

:root{
  /* =========================
     GOOD SOIL THEME TOKENS
     ========================= */
  --bg: #FBFAF7;              /* warm paper */
  --surface: #FFFFFF;
  --brand: #22324A;           /* deep slate-blue (trust) */
  --brand-light: #2E4263;

  --accent: #3F7D57;          /* evergreen */
  --accent-hover: #356A4A;
  --accent-soft: rgba(63, 125, 87, 0.12);

  --text-main: #131A2A;
  --text-muted: #5D6776;

  --border: #E7E1D8;          /* warm border */
  --border-strong: #D8D0C4;

  --max: 1200px;
  --pad: 24px;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow-sm: 0 10px 24px rgba(34, 50, 74, 0.06);
  --shadow-lg: 0 28px 70px rgba(34, 50, 74, 0.12);

  --font-head: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-main);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* =========================================
   TEXTURE (soft, organic)
   ========================================= */
.texture{
  background:
    radial-gradient(circle at 15% 10%, rgba(63,125,87,0.10), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(34,50,74,0.07), transparent 50%),
    linear-gradient(to bottom, rgba(255,255,255,0.70), rgba(255,255,255,0));
  position:relative;
}
.texture::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 40%, rgba(251,250,247,1) 100%);
  pointer-events:none;
}
.texture > *{ position:relative; z-index:1; }

/* =========================================
   TYPOGRAPHY
   ========================================= */
h1,h2,h3,.brand{
  font-family:var(--font-head);
  color:var(--brand);
  margin:0;
  line-height:1.12;
}
h1{
  font-size:clamp(40px,5vw,62px);
  letter-spacing:-0.02em;
  font-weight:800;
}
h2{
  font-size:clamp(30px,3vw,42px);
  margin-bottom:18px;
  font-weight:700;
}
h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
}
p{
  margin-top:0;
  margin-bottom:22px;
  color:var(--text-muted);
  font-size:16px;
}

/* kicker: more “seed tag” than fintech badge */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--accent);
  font-weight:800;
  margin-bottom:14px;
  background:var(--accent-soft);
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(63,125,87,0.18);
}

/* =========================================
   LAYOUT
   ========================================= */
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.section{ padding:90px 0; }
.grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* =========================================
   NAV
   ========================================= */
.nav{
  padding:18px 0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000;
}
.nav-inner{ display:flex; justify-content:space-between; align-items:center; position:relative; }

.nav-menu{ display:flex; align-items:center; gap:28px; }
.links{ display:flex; gap:22px; }
.links a{
  text-decoration:none;
  color:var(--text-muted);
  font-weight:600;
  font-size:14px;
  transition:color .18s ease;
}
.links a:hover{ color:var(--brand); }

/* Mobile toggle */
.mobile-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px; height:20px;
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:1001;
  padding:0;
}
.mobile-toggle .bar{
  width:100%;
  height:2px;
  background-color:var(--brand);
  border-radius:2px;
  transition:all .3s ease;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:14px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  line-height:1;
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 14px 28px rgba(63,125,87,0.22);
}
.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(63,125,87,0.26);
}

.btn-secondary{
  background:rgba(255,255,255,0.88);
  color:var(--brand);
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.btn-secondary:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}

.w-full{ width:100%; }

/* =========================================
   CARDS
   ========================================= */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg);
}

/* =========================================
   FORMS
   ========================================= */
label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
  color:var(--brand);
}

.input,.select,.textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  font-family:var(--font-body);
  font-size:15px;
  margin-bottom:16px;
  outline:none;
  background:rgba(255,255,255,0.95);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  color:var(--text-main);
}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(63,125,87,0.55);
  box-shadow:0 0 0 4px rgba(63,125,87,0.14);
  background:#fff;
}

/* =========================================
   DOC VISUAL
   ========================================= */
.doc-visual{
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  border-radius:18px;
  overflow:hidden;
}
.doc-header{
  background:linear-gradient(135deg, var(--brand), #2C3E5F);
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.08em;
}
.doc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:12px;
}

/* =========================================
   FOOTER
   ========================================= */
.footer{
  border-top:1px solid var(--border);
  padding-top:40px;
  padding-bottom:0;
  background:#fff;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:40px;
}
.footer-bottom{
  background:linear-gradient(135deg, var(--brand), #2C3E5F);
  color:#fff;
  width:100%;
  padding:16px 0;
}
.footer-legal{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,0.9);
}
.footer-legal a{
  color:rgba(255,255,255,0.76);
  text-decoration:none;
  transition:color .18s ease;
}
.footer-legal a:hover{ color:#fff; text-decoration:underline; }

/* =========================================
   FLOATING
   ========================================= */
.floating-container{
  position:fixed;
  z-index:999;
  pointer-events:none;
  bottom:24px; left:24px; right:24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.scroll-top{
  pointer-events:auto;
  width:44px; height:44px;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  transition:all .3s;
  color:var(--brand);
}
.scroll-top.visible{ opacity:1; transform:translateY(0); }
.scroll-top:hover{
  background:#fff;
  border-color:var(--border-strong);
  transform:translateY(-2px);
}

/* Keep class name so you don’t have to edit HTML yet */
.whatsapp-btn{
  pointer-events:auto;
  width:54px; height:54px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 16px 30px rgba(63,125,87,0.22);
  display:grid;
  place-items:center;
  color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.whatsapp-btn:hover{
  transform:translateY(-4px);
  background:var(--accent-hover);
  box-shadow:0 20px 40px rgba(63,125,87,0.26);
}
.whatsapp-btn svg{ width:28px; height:28px; fill:white; }

/* =========================================
   MOBILE
   ========================================= */
@media (max-width:768px){
  .mobile-toggle{ display:flex; }

  .nav-menu{
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:rgba(255,255,255,0.98);
    padding:26px 18px;
    gap:18px;
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(34,50,74,0.12);
    border-radius:0 0 18px 18px;
  }
  .nav-menu.active{ display:flex; }

  .links{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:14px;
  }
  .links a{
    font-size:17px;
    display:block;
    padding:10px;
  }

  .grid-2,.grid-3{ grid-template-columns:1fr; gap:36px; }
  .section{ padding:60px 0; }
  h1{ font-size:36px; }

  .footer-row{ flex-direction:column; align-items:flex-start; }
  .footer-legal{ flex-direction:column; gap:12px; }
  .floating-container{ bottom:16px; left:16px; right:16px; }
}

/* =========================================
   IMPORTANT: INLINE STYLE OVERRIDES FIX
   You have lots of inline hard-coded colors (old navy/emerald).
   This makes the theme feel like it didn't change.
   This block forces key areas to use CSS variables without changing wording.
   ========================================= */

/* Old inline navy used in your big 01/02/03 numbers */
.card h1[style*="rgba(15,44,103"]{
  color: color-mix(in srgb, var(--brand) 12%, transparent) !important;
}

/* Doc “Next Step” box uses hard-coded #F8FAFC */
.doc-visual div[style*="background: #F8FAFC"]{
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--border) !important;
}

/* Scroll-top SVG stroke is hard-coded to #0F2C67 */
.scroll-top svg{
  stroke: var(--brand) !important;
}