/* =========================================================
   POLLARD CAD VISUAL SYSTEM
========================================================= */


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


.hero {

    min-height:
    650px;

    display:
    flex;

    align-items:
    center;

    background:
    linear-gradient(
        rgba(15,23,42,.75),
        rgba(15,23,42,.75)
    ),
    url("/assets/images/hero-home.png");

    background-size:
    cover;

    background-position:
    center;

}



.hero-content {

    max-width:
    900px;

    margin:
    auto;

    padding:
    60px 20px;

}



.hero h1 {

    color:
    white;

    font-size:
    52px;

    line-height:
    1.1;

    max-width:
    850px;

    margin-bottom:
    25px;

}



.hero p {

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

    font-size:
    20px;

    line-height:
    1.6;

    max-width:
    750px;

    margin-bottom:
    30px;

}





/* =========================================================
   BUTTON SYSTEM
========================================================= */


.btn {

    display:
    inline-block;

    background:
    var(--primary-blue);

    color:
    white;

    padding:
    14px 32px;

    border-radius:
    var(--radius-medium);

    font-weight:
    bold;

    transition:
    var(--transition);

}



.btn:hover {

    background:
    var(--primary-blue-hover);

    transform:
    translateY(-3px);

}







/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */


.container {

    padding:
    80px 20px;

}



.container h2 {

    font-size:
    36px;

    line-height:
    1.2;

    margin-bottom:
    35px;

}



.container > p {

    max-width:
    900px;

    font-size:
    18px;

    line-height:
    1.8;

    margin-bottom:
    35px;

}





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


.highlight {

    padding:
    80px 20px;

    text-align:
    center;

    background:
    #f8fafc;

}



.highlight:nth-of-type(even){

    background:
    white;

}



.highlight h2 {

    font-size:
    36px;

    margin-bottom:
    25px;

}



.highlight p {

    max-width:
    900px;

    margin:
    0 auto 35px;

    font-size:
    18px;

    line-height:
    1.8;

}







/* =========================================================
   TRUST METRIC CARD
========================================================= */


.trust-bar {

    max-width:
    1200px;

    margin:
    -45px auto 40px;

    background:
    white;

    position:
    relative;

    z-index:
    5;

    display:
    grid;

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

    border-radius:
    16px;

    padding:
    40px 25px;

    box-shadow:
    0 15px 40px rgba(15,23,42,.15);

}



.trust-item {

    text-align:
    center;

    padding:
    10px;

    border-right:
    1px solid #e5e7eb;

}



.trust-item:last-child {

    border-right:
    none;

}



.trust-item h3 {

    font-size:
    44px;

    color:
    #2563eb;

    font-weight:
    900;

    margin-bottom:
    8px;

}



.trust-item p {

    color:
    #475569;

    font-weight:
    600;

}





/* =========================================================
   CARD IMPROVEMENTS
========================================================= */


.card {

    min-height:
    100%;

}



.card h3 {

    letter-spacing:
    -.3px;

}



.card p {

    line-height:
    1.8;

}







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


.container > .btn,
.highlight > .btn {

    margin-top:
    20px;

}






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


footer {

    margin-top:
    80px;

    padding:
    50px 20px;

    background:
    #0f172a;

    color:
    white;

    text-align:
    center;

}



footer p {

    margin:
    10px 0;

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

}







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


@media(max-width:768px){


.hero {

    min-height:
    550px;

}



.hero h1 {

    font-size:
    36px;

}



.hero p {

    font-size:
    17px;

}



.container {

    padding:
    50px 20px;

}



.container h2 {

    font-size:
    28px;

}



.highlight {

    padding:
    55px 20px;

}



.trust-bar {

    grid-template-columns:
    1fr;

    margin:
    20px;

}



.trust-item {

    border-right:
    none;

    border-bottom:
    1px solid #e5e7eb;

    padding:
    20px;

}



.trust-item:last-child {

    border-bottom:
    none;

}



footer {

    margin-top:
    50px;

}


}