/* ---------- GLOBAL ---------- */

body {

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

    background: white;

    color: #1f2937;

}


/* ---------- HEADER ---------- */

.app-header {

    background: white;

    border-bottom: 1px solid #ececec;

}


.app-header-inner {

    max-width: 1200px;

    margin: auto;

    padding: 20px 25px;

}


/* ---------- BRAND ---------- */

.logo-main {

    font-size: 3.4rem;

    font-weight: 800;

    letter-spacing: 4px;

    color: #0d3b8c;

    line-height: 1;

}


.logo-sub {

    font-size: 1.85rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #777;

}


/* ---------- PRODUCT PROMISE ---------- */

.product-promise {

    font-family: 'Caveat', cursive;

    font-size: 1.4rem;

    color: #0b4dbb;

    margin-top: 8px;

}


/* ---------- TOP ACTIONS ---------- */

.auth-links a {

    text-decoration: none;

    margin-left: 20px;

    color: #1f2937;

    font-weight: 500;

}


.auth-links a:hover {

    color: #0b4dbb;

}


/* ---------- NAVIGATION ---------- */

.app-nav {

    border-top: 1px solid #ececec;

    border-bottom: 1px solid #ececec;

    background: white;

}


.app-nav-inner {

    max-width: 1200px;

    margin: auto;

    padding: 12px 25px;

    display: flex;

    justify-content: center;

    gap: 40px;

}


.app-nav a {

    text-decoration: none;

    color: #1f2937;

    font-weight: 500;

    transition: 0.2s;

}


.app-nav a:hover {

    color: #0b4dbb;

}


/* ---------- MAIN CONTENT ---------- */

.app-content {

    max-width: 1200px;

    margin: auto;

    padding: 25px;

}


/* ---------- CTA SECTION ---------- */

.cta-section {

    text-align: center;

    margin-top: 30px;

    margin-bottom: 30px;

}


.cta-section h3 {

    font-size: 1.5rem;

    margin-bottom: 10px;

}


.cta-section p {

    color: #666;

}

.cta-button {
    margin-top: 20px;
}

.btn-ink {

    background: #0b4dbb;

    color: white;

    border: none;

    border-radius: 10px;

    padding: 12px 24px;

    font-weight: 600;

}


.btn-ink:hover {

    background: #08398a;

}


/* ---------- FOOTER ---------- */

.app-footer {

    border-top: 1px solid #ececec;

    text-align: center;

    padding: 25px;

    color: #666;

}


.footer-tagline {

    font-family: 'Caveat', cursive;

    color: #0b4dbb;

    font-size: 1.3rem;

    margin-bottom: 10px;

}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    .app-header-inner {

        text-align: center;

    }

    .app-nav-inner {

        flex-wrap: wrap;

        gap: 15px;

    }

    .logo-main {

        font-size: 1.8rem;

    }

    .app-content {

        padding: 10px;

    }

}