/* ==========================================================
   BELGRAVE PRIVATE BANK
   HOME LAYOUT
========================================================== */


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

.hero{

    position:relative;

    display:grid;

    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);

    align-items:center;

    gap:clamp(3rem,6vw,5.6rem);

    min-height:100svh;

    padding:
        clamp(8rem,12vw,10.6rem)
        8%
        clamp(5rem,8vw,7.5rem);

    overflow:hidden;

    background:
        linear-gradient(
            rgba(8,10,16,.72),
            rgba(8,10,16,.78)
        ),
        url("../assets/hero-dashboard.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



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

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(201,162,39,.18),
            transparent 45%
        );

    pointer-events:none;

}



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

.hero-left{

    position:relative;

    z-index:2;

}



.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.8rem 1.6rem;

    border-radius:999px;

    border:1px solid rgba(201,162,39,.35);

    background:rgba(201,162,39,.08);

    color:var(--gold);

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

}



.hero-left h1{

    margin:1.75rem 0;

    font-family:"Playfair Display",serif;

    font-size:clamp(3rem,6vw,4.8rem);

    line-height:1.08;

    color:#fff;

}



.hero-left h1 span{

    color:var(--gold);

}



.hero-left p{

    max-width:620px;

    font-size:1.1rem;

    line-height:1.9;

    color:rgba(255,255,255,.75);

}



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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:1.125rem;

    margin-top:2.8rem;

}



/* ==========================================================
   TRUST NUMBERS
========================================================== */

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:clamp(2rem,4vw,3.8rem);

    margin-top:3.8rem;

}



.hero-trust h3{

    margin-bottom:.4rem;

    font-size:clamp(1.7rem,3vw,2rem);

    color:#fff;

}



.hero-trust span{

    font-size:.95rem;

    color:rgba(255,255,255,.65);

}



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

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}



/* ==========================================================
   PORTFOLIO CARD
========================================================== */

.hero-card{

    width:100%;

    max-width:520px;

    padding:2.4rem;

    border-radius:28px;

    background:rgba(17,20,27,.78);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 45px rgba(0,0,0,.30),
        0 40px 90px rgba(0,0,0,.42);

}



.hero-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:1rem;

    margin-bottom:2.2rem;

}



.hero-card-header small{

    color:rgba(255,255,255,.55);

}



.hero-card-header h2{

    margin-top:.5rem;

    color:#fff;

    font-size:clamp(1.9rem,3vw,2.3rem);

}



.status{

    color:#58d68d;

    font-weight:600;

}



/* ==========================================================
   PORTFOLIO GRID
========================================================== */

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1.25rem;

}



.portfolio-item{

    padding:1.35rem;

    border-radius:18px;

    background:rgba(255,255,255,.05);

}



.portfolio-item small{

    color:rgba(255,255,255,.55);

}



.portfolio-item h3{

    margin:.65rem 0;

    color:#fff;

}



.portfolio-item span{

    color:var(--gold);

}



/* ==========================================================
   FINANCIAL SNAPSHOT
========================================================== */

.stats{

    position:relative;

    z-index:5;

    padding:0 8%;

    margin-top:-70px;

}



.section-heading{

    text-align:center;

    margin-bottom:3rem;

}



.section-heading h2{

    margin-top:1rem;

    font-family:"Playfair Display",serif;

    font-size:clamp(2.5rem,4vw,3.5rem);

    color:#FFFFFF;

}



.section-tag{

    display:inline-flex;

    padding:.75rem 1.6rem;

    border-radius:999px;

    border:1px solid rgba(201,162,39,.35);

    background:rgba(201,162,39,.08);

    color:var(--gold);

    letter-spacing:.15em;

    font-size:.8rem;

    font-weight:600;

    text-transform:uppercase;

}



.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:1.75rem;

}



.stat-card{

    padding:2.1rem;

    border-radius:24px;

    background:#111318;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}



.stat-icon{

    margin-bottom:1.35rem;

    font-size:2rem;

    color:var(--gold);

}



.stat-card h3{

    margin-bottom:.75rem;

    color:#FFFFFF;

}



.stat-card p{

    color:rgba(255,255,255,.65);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-left{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-left p{

        margin-inline:auto;

        max-width:650px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-trust{

        justify-content:center;

    }

    .hero-right{

        margin-top:3rem;

    }

    .stats{

        margin-top:3rem;

    }

    .stats-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}



@media (max-width:768px){

    .hero{

        min-height:auto;

        padding:
            7rem
            1.5rem
            4rem;

        gap:2.5rem;

    }

    .hero-left h1{

        font-size:clamp(2.4rem,10vw,3.4rem);

    }

    .hero-left p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-trust{

        display:grid;

        grid-template-columns:1fr;

        gap:1.5rem;

        text-align:center;

    }

    .hero-card{

        padding:1.5rem;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .stats{

        padding:2rem 1.5rem;

    }

    .stats-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:1rem;

    }

    .stat-card{

        padding:1.4rem;

    }

}



@media (max-width:480px){

    .hero{

        padding:
            6.5rem
            1rem
            3rem;

    }

    .hero-left h1{

        font-size:2.3rem;

    }

    .hero-card{

        padding:1.25rem;

    }

    .stats{

        padding:1.5rem 1rem;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stat-card{

        padding:1.3rem;

    }

}