/* GLOBAL */
body{
    font-family:Segoe UI;
    background:#f8fafc;
    margin:0;
}

/* NAVBAR */
.navbar{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* HERO */
.hero{
    background:linear-gradient(135deg,#0f172a,#1d4ed8);
    color:#fff;
    padding:100px 0;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

.hero h1{
    font-size:48px;
}

.hero p{
    font-size:18px;
    opacity:.9;
}

/* BUTTON */
.btn-gold{
    background:#f59e0b;
    color:#fff;
    border:none;
}

.btn-gold:hover{
    background:#d97706;
    color:#fff;
}

/* SECTIONS */
.section{
    padding:80px 0;
}

/* CARDS */
.feature-card,
.product-card{
    border-radius:15px;
    transition:.3s;
}

.feature-card:hover,
.product-card:hover{
    transform:translateY(-5px);
}

/* CTA */
.cta{
    padding:80px 0;
    background:#0f172a;
    color:#fff;
}

/* FOOTER */
footer{
    background:#0f172a;
    color:#fff;
    padding:20px;
}

/* LOGIN PAGE */
.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg,#0f172a,#1d4ed8);
}

.login-container{
    width:100%;
    max-width:1000px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 400px;
    gap:50px;
    padding:20px;
}

.login-left{
    color:#fff;
}

.login-left h1{
    font-size:45px;
}

.login-left ul{
    margin-top:20px;
    list-style:none;
    padding:0;
}

.login-left li{
    margin-bottom:10px;
}

.login-box{
    background:#fff;
    padding:40px;
    border-radius:15px;
}

/* MOBILE */
@media(max-width:900px){

.hero-grid,
.login-container{
    grid-template-columns:1fr;
    text-align:center;
}

.login-box{
    width:100%;
}
}