/* =====================================================
   CoeLoans.sg — Style v6
   Optimised for index.html (2025-10)
   Brand: Navy #223A5E, Green #00A36C, Accent #00C37A
   ===================================================== */

/* ---------- Variables ---------- */
:root{
  --bg:           #F4F6FB;
  --text:         #223A5E;
  --muted:        #7B8AA5;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FF;
  --border:       #E9EEF7;
  --brand:        #00A36C;
  --cta:          #00C37A;
  --radius:       16px;
  --shadow:       0 6px 30px rgba(34,58,94,0.08);
  --container:    1100px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 16px;}
.section{padding:60px 0;}
@media(max-width:900px){.section{padding:40px 0;}}

/* ---------- Typography ---------- */
h1{font-size:clamp(1.7rem,1.2rem+1.8vw,2.3rem);line-height:1.25;margin:0 0 10px;}
h2{font-size:clamp(1.3rem,1.1rem+1vw,1.7rem);margin:0 0 8px;}
h3{font-size:1.1rem;margin:0 0 6px;}
p{line-height:1.65;margin:.3rem 0 .9rem;}
.muted{color:var(--muted);} .small{font-size:.9rem;} .bold{font-weight:700;}

/* ---------- Header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;box-shadow:0 1px 10px rgba(0,0,0,0.04);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand-badge{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;}
.brand-name{font-weight:800;color:var(--text);font-size:1.15rem;}
.brand-sub{font-size:.8rem;color:var(--muted);}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{color:var(--text);text-decoration:none;font-weight:700;}
.nav-links a:hover{color:var(--brand);}
.btn-quote{background:var(--cta);color:#fff !important;padding:.7rem 1rem;border-radius:10px;font-weight:800;}
.btn-quote:hover{background:var(--brand);} 
@media(max-width:900px){.nav-links{gap:14px;font-size:.95rem;overflow-x:auto;}}

/* ---------- Hero ---------- */
.hero{position:relative;background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('images/1.jpg');background-size:cover;background-position:center;color:#fff;text-align:center;}
.hero-content{padding:120px 20px 80px;}
.hero-content h1,.hero-content p{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.hero-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px;}
.anchor-btn{background:var(--cta);color:#fff;text-decoration:none;font-weight:800;padding:.9rem 1.3rem;border-radius:10px;transition:all .2s;}
.anchor-btn:hover{background:var(--brand);} .anchor-btn.white{background:#fff;color:var(--text);} .anchor-btn.white:hover{background:#f4f6fb;}
.trust-strip{margin-top:20px;font-weight:700;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}

/* ---------- 3-Column Section ---------- */
.three-column-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:30px;}
.column{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);text-align:left;}
.column-icon{width:56px;height:56px;margin-bottom:10px;}

/* ---------- How It Works ---------- */
.how-it-works-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px;}
@media(max-width:900px){.how-it-works-row{grid-template-columns:1fr;}}
.how-it-works .column{text-align:center;}

/* ---------- Testimonials ---------- */
.testimonial-slider{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:30px;}
.testimonial{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;line-height:1.6;}

/* ---------- Form Split Section ---------- */
.split-section{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:60px 16px;background:var(--bg);}
.split-left{background:var(--text);color:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.split-left h2{margin:0 0 10px;color:#fff;} .split-left p{color:rgba(255,255,255,.88);}
.split-right{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.split-right form{display:flex;flex-direction:column;gap:12px;}
.split-right input{padding:12px 14px;border:1px solid #bfc9d9;border-radius:10px;background:#f4f6fb;font-size:1rem;}
.split-right input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(0,163,108,.15);}
.split-right button{padding:14px 16px;border:none;border-radius:12px;background:var(--cta);color:#fff;font-weight:800;cursor:pointer;transition:background .2s ease;}
.split-right button:hover{background:var(--brand);} 
@media(max-width:980px){.split-section{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.footer{background:#0F1F36;color:#BFC9D9;padding:40px 0 80px;font-size:.95rem;}
.footer-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;}
.footer a{color:#BFC9D9;text-decoration:none;} .footer a:hover{text-decoration:underline;}
.footer h4{margin:0 0 8px;color:#fff;} .footer hr{border:none;border-top:1px solid rgba(191,201,217,.25);margin:20px 0;}
@media(max-width:900px){.footer-row{grid-template-columns:1fr;} .footer{padding-bottom:100px;}}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--text);color:#fff;display:flex;justify-content:space-around;align-items:center;padding:10px 12px;z-index:9999;}
.sticky-cta a{color:#fff;text-decoration:none;font-weight:800;}
@media(min-width:900px){.sticky-cta{display:none;}}

/* ---------- Utilities ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.hide{display:none!important;}