* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #ffffff;
    color: #172033;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
}

.font-heading {
    font-family: 'Manrope', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}


/* ============================= */
/* MAIN BRAND COLORS             */
/* ============================= */

.brand-blue {
    color: #1a3d79;
}

.brand-orange {
    color: #ff5d05;
}

.brand-red {
    color: #9c2d07;
}

.bg-brand-blue {
    background-color: #1a3d79;
}

.bg-brand-orange {
    background-color: #ff5d05;
}

.bg-brand-red {
    background-color: #9c2d07;
}


/* ============================= */
/* SOFT BACKGROUNDS              */
/* ============================= */

.blue-soft {
    background: #eef3fa;
}

.orange-soft {
    background: #fff1e9;
}

.red-soft {
    background: #f8ece8;
}


/* ============================= */
/* BRAND GRADIENT                */
/* ============================= */

.brand-gradient {
    background: linear-gradient(135deg,
            #1a3d79 0%,
            #245494 55%,
            #ff5d05 100%);
}

.text-gradient {
    background: linear-gradient(135deg,
            #1a3d79,
            #ff5d05);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


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

.brand-card {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    transition: all 0.3s ease;
}

.brand-card:hover {
    transform: translateY(-5px);
    border-color: #1a3d79;
    box-shadow: 0 18px 45px rgba(26, 61, 121, 0.12);
}


/* ============================= */
/* BLUE CARD                     */
/* ============================= */

.blue-card {
    background: #1a3d79;
    color: #ffffff;
    border: 1px solid #1a3d79;
}

.blue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(26, 61, 121, 0.22);
}


/* ============================= */
/* ORANGE BUTTON                 */
/* ============================= */

.orange-button {
    background: #ff5d05;
    color: #ffffff;
    transition: all 0.3s ease;
}

.orange-button:hover {
    background: #9c2d07;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(255, 93, 5, 0.25);
}


/* ============================= */
/* BLUE BUTTON                   */
/* ============================= */

.blue-button {
    background: #1a3d79;
    color: #ffffff;
    transition: all 0.3s ease;
}

.blue-button:hover {
    background: #9c2d07;
    transform: translateY(-2px);
}


/* ============================= */
/* SECTION LABEL                 */
/* ============================= */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    border-radius: 8px;

    background: #eef3fa;
    color: #1a3d79;

    border: 1px solid #d8e2f0;

    font-family: 'JetBrains Mono', monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ============================= */
/* FAQ                           */
/* ============================= */

details summary {
    list-style: none;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary .chevron {
    transform: rotate(180deg);
}

.chevron {
    transition: transform 0.3s ease;
}


/* ============================= */
/* INPUT                         */
/* ============================= */

.brand-input {
    width: 100%;

    padding: 14px 16px;

    border-radius: 12px;

    border: 1px solid #d5deeb;

    background: #ffffff;
    color: #172033;

    outline: none;

    transition: all 0.25s ease;
}

.brand-input:focus {
    border-color: #1a3d79;

    box-shadow:
        0 0 0 3px rgba(26, 61, 121, 0.10);
}


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

.hero-decoration {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}