:root{
    --primary:#8b5e34;
    --primary-light:#f3c892;
    --primary-soft:#e3b97f;
    --bg-soft:#f9f6f1;
    --text-dark:#1f1f1f;
    --shadow-soft:0 10px 30px rgba(0,0,0,0.05);
    --shadow-hover:0 20px 40px rgba(0,0,0,0.08);
}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:var(--bg-soft);
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
}

/* Layout Container */
.container{
    width:92%;
    max-width:1200px;
    margin:auto;
}

/* ================= HERO ================= */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
        linear-gradient(110deg, rgba(0,0,0,.85) 40%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.3)),
        url('../images/hero-finance.webp') center/cover no-repeat;
    padding:160px 8% 100px;
    color:#fff;
    position:relative;
}

.hero-content{
    max-width:650px;
    animation:fadeUp .8s ease forwards;
}

.hero h1{
    font-size:clamp(2.2rem,4vw,3.5rem);
    line-height:1.1;
    font-weight:700;
    margin-bottom:20px;
    letter-spacing:-0.5px;
}

.hero p{
    font-size:1.05rem;
    opacity:.9;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-main,.btn-outline{
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:all .3s ease;
    display:inline-block;
}

.btn-main{
    background:linear-gradient(135deg,var(--primary-light),var(--primary-soft));
    color:#000;
    box-shadow:0 8px 20px rgba(243,200,146,.3);
}

.btn-main:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(243,200,146,.4);
}

.btn-outline{
    border:2px solid #fff;
    color:#fff;
}

.btn-outline:hover{
    background:#fff;
    color:#000;
}

/* ================= LOAN GRID ================= */

.loan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.loan-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:var(--shadow-soft);
    text-align:center;
    transition:all .3s ease;
    border:1px solid rgba(0,0,0,0.03);
}

.loan-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}

.loan-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    background:#f8f8f8;
    border-radius:14px;
    margin-bottom:15px;
}

.loan-card h3{
    margin:10px 0;
    font-size:1.2rem;
    font-weight:600;
}

.loan-card p{
    font-size:.95rem;
    opacity:.75;
}

/* ================= CA SECTION ================= */

.ca-flex{
    display:flex;
    gap:40px;
    align-items:center;
    margin-top:80px;
}

.ca-image img{
    width:100%;
    border-radius:20px;
    box-shadow:var(--shadow-soft);
}

/* ================= BANK SLIDER ================= */

.bank-track{
    display:flex;
    transition:transform .6s ease;
}

.bank-slide{
    min-width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
}

.bank-card{
    background:#fff;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    border:1px solid #f0f0f0;
    box-shadow:var(--shadow-soft);
    transition:all .3s ease;
}

.bank-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.bank-card img{
    max-height:60px;
    filter:grayscale(100%);
    opacity:.7;
    transition:.3s;
}

.bank-card:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.05);
}

/* ================= CTA ================= */

.cta{
    background:linear-gradient(135deg,#8b5e34,#6f4926);
    color:#fff;
    text-align:center;
    padding:90px 0;
    margin-top:80px;
}

.cta h2{
    font-size:clamp(1.8rem,3vw,2.5rem);
    margin-bottom:20px;
}

.cta a{
    background:#fff;
    color:var(--primary);
    padding:14px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    transition:all .3s ease;
}

.cta a:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

/* ================= Animations ================= */

@keyframes fadeUp{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}

/* ================= Responsive ================= */

@media(max-width:768px){

    .hero{
        padding:120px 5% 80px;
        text-align:center;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-main,.btn-outline{
        width:100%;
        text-align:center;
    }

    .ca-flex{
        flex-direction:column;
        text-align:center;
    }

    .loan-grid{
        gap:20px;
    }
}