/* =========================================================
   PUREB12VAPE.COM
   B12 BLUE DESIGN SYSTEM V1
========================================================= */

:root{

    /* Core */
    --pb12-navy:#16233A;
    --pb12-navy-2:#1F3152;

    --pb12-blue:#3156D9;
    --pb12-blue-dark:#2444B4;
    --pb12-blue-light:#EAF0FF;

    --pb12-cyan:#4AA8C7;
    --pb12-cyan-light:#EAF8FC;

    /* Neutral */
    --pb12-ink:#202936;
    --pb12-text:#3D4755;
    --pb12-muted:#6D7785;

    --pb12-white:#FFFFFF;
    --pb12-cream:#FAFAF7;
    --pb12-soft:#F6F8FC;

    --pb12-border:#E4E8EF;

    /* UI */
    --pb12-radius-sm:10px;
    --pb12-radius:18px;
    --pb12-radius-lg:28px;

    --pb12-shadow:
        0 12px 35px rgba(22,35,58,.08);

    --pb12-shadow-strong:
        0 18px 50px rgba(22,35,58,.13);

    --pb12-container:1200px;
}


/* =========================================================
   BASE
========================================================= */

html{
    scroll-behavior:smooth;
}

body.pureb12vape-site{
    margin:0;

    background:var(--pb12-white);
    color:var(--pb12-text);

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.pureb12vape-site,
body.pureb12vape-site button,
body.pureb12vape-site input,
body.pureb12vape-site textarea,
body.pureb12vape-site select{

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


body.pureb12vape-site h1,
body.pureb12vape-site h2,
body.pureb12vape-site h3,
body.pureb12vape-site h4{

    color:var(--pb12-ink);

    letter-spacing:-.025em;
}


body.pureb12vape-site a{
    text-decoration:none;
}


/* =========================================================
   CONTAINER
========================================================= */

.pb12-container{

    width:min(
        calc(100% - 40px),
        var(--pb12-container)
    );

    margin-inline:auto;
}


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

.pb12-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;

    padding:0 27px;

    border:1px solid var(--pb12-blue);
    border-radius:999px;

    background:var(--pb12-blue);

    color:#fff !important;

    font-size:15px;
    font-weight:750;
    line-height:1;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.pb12-btn:hover{

    background:var(--pb12-blue-dark);
    border-color:var(--pb12-blue-dark);

    color:#fff !important;

    transform:translateY(-1px);

    box-shadow:
        0 12px 28px rgba(49,86,217,.22);
}


.pb12-btn--secondary{

    background:#fff;

    color:var(--pb12-navy) !important;

    border-color:var(--pb12-border);
}


.pb12-btn--secondary:hover{

    background:var(--pb12-blue-light);

    color:var(--pb12-blue-dark) !important;

    border-color:#CAD6FF;
}


/* =========================================================
   SECTION SYSTEM
========================================================= */

.pb12-section{
    padding:76px 0;
}


.pb12-section--soft{
    background:var(--pb12-soft);
}


.pb12-section--blue{
    background:var(--pb12-blue-light);
}


.pb12-eyebrow{

    margin-bottom:12px;

    color:var(--pb12-blue);

    font-size:12px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;
}


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

@media (max-width:767px){

    .pb12-container{

        width:min(
            calc(100% - 28px),
            var(--pb12-container)
        );
    }

    .pb12-section{
        padding:54px 0;
    }

    .pb12-btn{

        min-height:50px;

        padding:0 22px;
    }

}