/* =====================================
   HORIZONS360 SALES PAGE CSS
   ===================================== */


* {
    box-sizing: border-box;
}


body {
    margin:0;
    font-family:'Inter', sans-serif;
    line-height:1.6;
    color:#222;
    background:#ffffff;
}


.container {
    width:min(1200px, 90%);
    margin:auto;
}



/* =====================================
   HEADER
===================================== */


header {
    background:#ffffff;
    padding:25px 0;
    border-bottom:1px solid #eee;
}


header .container {

    display:flex;
    justify-content:space-between;
    align-items:center;

}


.logo {

    font-family:'Oswald', sans-serif;
    font-size:32px;
    font-weight:700;
    text-decoration:none;
    color:#111;

}


nav {

    display:flex;
    align-items:center;
    gap:30px;

}


nav a {

    text-decoration:none;
    color:#222;
    font-weight:500;

}


nav a:hover {

    color:#0b63ce;

}



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


.btn-primary,
.btn-secondary {


    display:inline-block;
    padding:15px 32px;
    border-radius:6px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;

}


.btn-primary {

    background:#0b63ce;
    color:white;

}


.btn-primary:hover {

    transform:translateY(-2px);

}


.btn-secondary {

    border:2px solid #0b63ce;
    color:#0b63ce;

}





/* =====================================
   HERO IMAGE BANNER
===================================== */


.hz-banner {

    position:relative;
    min-height:700px;
    overflow:hidden;

}


.banner-image {

    width:100%;
    height:700px;
    object-fit:cover;

}



.banner-overlay {

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.75),
    rgba(0,0,0,.25)
    );

}



.banner-overlay .container {

    color:white;

}



.banner-overlay h1 {


    max-width:800px;

    font-family:'Oswald', sans-serif;

    font-size:64px;

    line-height:1.1;

    margin-bottom:25px;


}



.banner-overlay p {


    max-width:650px;

    font-size:24px;

    margin-bottom:35px;


}



.hero-buttons {

    display:flex;
    gap:20px;

}





/* =====================================
   SECTIONS
===================================== */


section {

    padding:90px 0;

}



section h2 {

    text-align:center;

    font-family:'Oswald', sans-serif;

    font-size:44px;

    margin-bottom:40px;


}


.intro p {

    max-width:850px;

    margin:auto;

    text-align:center;

    font-size:22px;

}






/* =====================================
   FEATURES
===================================== */


.feature-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;


}



.card {


    padding:40px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);


}



.card h3 {


    font-family:'Oswald',sans-serif;

    font-size:28px;

    margin-bottom:15px;


}





/* =====================================
   HOW IT WORKS
===================================== */


.steps {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}



.steps div {


    text-align:center;

    padding:35px;

}





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


.cta {


    background:#111;

    color:white;

    text-align:center;

}


.cta h2 {

    color:white;

}





/* =====================================
   FOOTER
===================================== */


footer {


    background:#0b0b0b;

    color:white;

    padding:40px 0;

    text-align:center;


}



.footer-links {


    display:flex;

    justify-content:center;

    gap:30px;

    margin-bottom:20px;


}



.footer-links a {

    color:white;

    text-decoration:none;

}





/* =====================================
   MOBILE
===================================== */


@media(max-width:900px){


header .container {

    flex-direction:column;

    gap:20px;

}


nav {

    flex-wrap:wrap;

    justify-content:center;

}



.banner-overlay h1 {

    font-size:42px;

}


.feature-grid,
.steps {

    grid-template-columns:1fr;

}



.hz-banner,
.banner-image {

    height:600px;

}

/* ======================================
   APP STORE BUTTONS
====================================== */

.store-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:35px;
}

.store-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:260px;

    padding:18px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    font-size:18px;

    transition:.25s;
}

.store-btn.apple{
    background:#000;
    color:#fff;
}

.store-btn.google{
    background:#34A853;
    color:#fff;
}

.store-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.20);
}