/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* Brand */
    --primary: #3B82F6;
    --primary-hover: #2563EB;

    --primary-light: #EFF6FF;
    --primary-soft: #DBEAFE;

    /* Text */
    --text-dark: #0F172A;
    --text: #334155;
    --text-muted: #64748B;
    --text-light: #94A3B8;

    /* Background */
    --white: #FFFFFF;
    --background: #F8FAFC;
    --background-blue: #F5F9FF;

    /* Borders */
    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* Status */
    --success: #16A34A;
    --success-light: #ECFDF3;

    --warning: #D97706;
    --warning-light: #FFFBEB;

    --danger: #DC2626;
    --danger-light: #FEF2F2;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Shadows */
    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.04);

    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.07);

    --shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.10);

    /* Container */
    --container-width: 1180px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    padding: 0;

    background: var(--white);

    color: var(--text);

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

    font-size: 16px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


img {

    max-width: 100%;

    height: auto;

    display: block;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

}


::selection {

    background: var(--primary-soft);

    color: var(--primary-hover);

}


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

.container {

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

    margin-left: auto;

    margin-right: auto;

}


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

section {

    position: relative;

}


.section-padding {

    padding-top: 100px;

    padding-bottom: 100px;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    max-width: 680px;

    margin-bottom: 50px;

}


.section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.section-label::before {

    content: "";

    width: 22px;

    height: 2px;

    border-radius: 10px;

    background: var(--primary);

}


.section-heading h2 {

    margin: 0 0 16px;

    color: var(--text-dark);

    font-size:
        clamp(32px, 4vw, 46px);

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.section-heading p {

    margin: 0;

    max-width: 600px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.75;

}


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

.btn {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 20px;

    border: 1px solid transparent;

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

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.btn:hover {

    transform: translateY(-2px);

}


/* Primary */

.btn-primary {

    background: var(--primary);

    color: var(--white);

    box-shadow:
        0 8px 20px
        rgba(59, 130, 246, 0.18);

}


.btn-primary:hover {

    background: var(--primary-hover);

    box-shadow:
        0 12px 26px
        rgba(37, 99, 235, 0.24);

}


/* Light */

.btn-light {

    background: var(--primary-light);

    color: var(--primary);

    border-color: var(--primary-soft);

}


.btn-light:hover {

    background: var(--primary-soft);

}


/* Outline */

.btn-outline {

    background: var(--white);

    color: var(--text-dark);

    border-color: var(--border);

}


.btn-outline:hover {

    color: var(--primary);

    border-color: var(--primary-soft);

    background: var(--primary-light);

}


/* =========================================================
   CARDS
========================================================= */

.card {

    background: var(--white);

    border:
        1px solid var(--border);

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

    box-shadow:
        var(--shadow-sm);

}


.card-hover {

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.card-hover:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--primary-soft);

    box-shadow:
        var(--shadow-lg);

}


/* =========================================================
   ICON BOX
========================================================= */

.icon-box {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 15px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 22px;

}


.icon-box.small {

    width: 42px;

    height: 42px;

    border-radius: 11px;

    font-size: 17px;

}


/* =========================================================
   LIGHT BLUE SECTION
========================================================= */

.section-blue {

    background:
        var(--background-blue);

}


.section-light {

    background:
        var(--background);

}


/* =========================================================
   BADGE
========================================================= */

.badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        6px 11px;

    border-radius: 30px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 12px;

    font-weight: 700;

}


.badge-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        currentColor;

}


/* =========================================================
   FORM ELEMENTS
========================================================= */

.form-group {

    margin-bottom: 20px;

}


.form-label {

    display: block;

    margin-bottom: 8px;

    color: var(--text-dark);

    font-size: 14px;

    font-weight: 600;

}


.form-control {

    width: 100%;

    min-height: 48px;

    padding:
        0 14px;

    border:
        1px solid var(--border);

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

    outline: none;

    background:
        var(--white);

    color:
        var(--text-dark);

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


textarea.form-control {

    min-height: 120px;

    padding-top: 13px;

    padding-bottom: 13px;

    resize: vertical;

}


.form-control::placeholder {

    color:
        var(--text-light);

}


.form-control:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.10);

}


/* =========================================================
   LINK
========================================================= */

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--primary);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

}


.text-link i {

    transition:
        transform 0.25s ease;

}


.text-link:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   DIVIDER
========================================================= */

.divider {

    width: 100%;

    height: 1px;

    background:
        var(--border-light);

}


/* =========================================================
   VISUALLY HIDDEN
========================================================= */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(
        0,
        0,
        0,
        0
    );

    white-space: nowrap;

    border: 0;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .container {

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

    }


    .section-padding {

        padding-top: 75px;

        padding-bottom: 75px;

    }


    .section-heading {

        margin-bottom: 35px;

    }


    .section-heading h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }


    .section-heading p {

        font-size: 15px;

    }

}


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

@media (max-width: 480px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .section-padding {

        padding-top: 60px;

        padding-bottom: 60px;

    }


    .section-heading h2 {

        font-size: 30px;

    }


    .btn {

        width: 100%;

    }

}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid #e2e8f0;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


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

.header-container {
    width: min(
        calc(100% - 40px),
        1180px
    );

    min-height: 78px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    flex-shrink: 0;

    color: #0f172a;

    text-decoration: none;
}


.logo-mark {
    width: 43px;
    height: 43px;

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

    border-radius: 13px;

    background: #eff6ff;

    border: 1px solid #dbeafe;

    color: #3b82f6;

    font-size: 18px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.logo-mark img{
    width: 50px;
    height: auto;
}


.site-logo:hover .logo-mark {
    background: #3b82f6;
    color: #ffffff;

    transform: rotate(-4deg);
}


.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.logo-text strong {
    color: #0f172a;

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

    letter-spacing: -0.6px;
}


.logo-text span {
    margin-top: 5px;

    color: #64748b;

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

    letter-spacing: 1.1px;

    text-transform: uppercase;
}




/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.main-navigation {
    display: flex;
    align-items: center;

    gap: 32px;

    margin-left: auto;
}


.nav-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 78px;

    color: #334155;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 20px;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: #3b82f6;

    transform: translateX(-50%);

    transition:
        width 0.25s ease;
}


.nav-link:hover {
    color: #3b82f6;
}


.nav-link:hover::after {
    width: 24px;
}


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

.header-actions {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-left: 18px;
}


/* =========================================================
   LOGIN
========================================================= */

.login-link {
    color: #334155;

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

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


.login-link:hover {
    color: #3b82f6;
}


/* =========================================================
   GET STARTED
========================================================= */

.header-cta {
    min-height: 44px;

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

    gap: 9px;

    padding: 0 19px;

    border-radius: 11px;

    background: #3b82f6;

    color: #ffffff;

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

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 7px 18px
        rgba(59, 130, 246, 0.18);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.header-cta:hover {
    background: #2563eb;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(37, 99, 235, 0.24);
}


.header-cta i {
    font-size: 15px;

    transition:
        transform 0.25s ease;
}


.header-cta:hover i {
    transform:
        translate(2px, -2px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-toggle {
    width: 44px;
    height: 44px;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    margin-left: auto;

    padding: 0;

    border: 1px solid #e2e8f0;

    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.mobile-menu-toggle:hover {
    border-color: #dbeafe;

    background: #eff6ff;
}


.mobile-menu-toggle span {
    width: 19px;
    height: 2px;

    border-radius: 10px;

    background: #0f172a;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */

.mobile-menu-toggle.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}


.mobile-menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.mobile-navigation {
    display: none;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

    box-shadow:
        0 15px 30px
        rgba(15, 23, 42, 0.06);
}


.mobile-navigation.active {
    display: block;
}


.mobile-navigation-inner {
    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;

    padding: 8px 0 24px;
}


/* =========================================================
   MOBILE NAV LINKS
========================================================= */

.mobile-nav-link {
    min-height: 58px;

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

    border-bottom: 1px solid #f1f5f9;

    color: #334155;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.mobile-nav-link:hover {
    color: #3b82f6;
}


.mobile-nav-link span {
    display: flex;
    align-items: center;

    gap: 13px;
}


.mobile-nav-link span i {
    width: 36px;
    height: 36px;

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

    border-radius: 10px;

    background: #eff6ff;

    color: #3b82f6;

    font-size: 15px;
}


.mobile-nav-link > i {
    color: #94a3b8;

    font-size: 12px;
}


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

.mobile-navigation-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 20px;
}


.mobile-login,
.mobile-cta {
    min-height: 46px;

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

    border-radius: 11px;

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

    text-decoration: none;
}


.mobile-login {
    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #334155;
}


.mobile-login:hover {
    border-color: #dbeafe;

    background: #eff6ff;

    color: #2563eb;
}


.mobile-cta {
    gap: 8px;

    background: #3b82f6;

    color: #ffffff;
}


.mobile-cta:hover {
    background: #2563eb;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .header-container {
        width:
            calc(100% - 32px);

        gap: 20px;
    }


    .main-navigation {
        gap: 20px;
    }


    .header-actions {
        gap: 12px;

        margin-left: 8px;
    }


    .header-cta {
        padding-left: 15px;
        padding-right: 15px;
    }

}


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

@media (max-width: 800px) {

    .header-container {
        min-height: 70px;
    }


    .main-navigation,
    .header-actions {
        display: none;
    }


    .mobile-menu-toggle {
        display: flex;
    }


    .logo-mark {
        width: 40px;
        height: 40px;
    }


    .logo-text strong {
        font-size: 18px;
    }
    

}


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

@media (max-width: 600px) {

    .header-container {
        width:
            calc(100% - 30px);

        min-height: 68px;
    }


    .mobile-navigation-inner {
        width:
            calc(100% - 30px);
    }


    .logo-mark {
        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 16px;
    }


    .logo-text strong {
        font-size: 17px;
    }


    .logo-text span {
        font-size: 7px;
    }


    .mobile-navigation-actions {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 380px) {

    .header-container {
        width:
            calc(100% - 24px);
    }


    .mobile-navigation-inner {
        width:
            calc(100% - 24px);
    }


    .logo-text span {
        display: none;
    }


    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
    }

}

.hero-section {
position: relative;
overflow: hidden;

width: 100%;


padding: 90px 0 110px;


background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #eff6ff 55%,
        #e8f2ff 100%
    );

}

.hero-section::before {
content: "";

position: absolute;


width: 500px;
height: 500px;


top: -250px;
right: -150px;


border-radius: 50%;


background: rgba(59, 130, 246, 0.08);


pointer-events: none;

}

.hero-section::after {
content: "";

position: absolute;


width: 350px;
height: 350px;


left: -150px;
bottom: -220px;


border-radius: 50%;


background: rgba(59, 130, 246, 0.06);


pointer-events: none;

}

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

.hero-section .hero-container {
position: relative;
z-index: 2;

width: min(
    calc(100% - 40px),
    1180px
);


min-height: 560px;


margin: 0 auto;


display: grid;


grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.85fr);


align-items: center;


gap: 70px;

}

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

.hero-section .hero-content {
max-width: 620px;
}

/* =========================================================
BADGE
========================================================= */

.hero-section .hero-badge {
display: inline-flex;
align-items: center;

gap: 8px;


padding: 7px 12px;


margin-bottom: 22px;


border: 1px solid #dbeafe;


border-radius: 30px;


background: rgba(255, 255, 255, 0.75);


color: #2563eb;


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

}

.hero-section .hero-badge-dot {
width: 7px;
height: 7px;

border-radius: 50%;


background: #3b82f6;


box-shadow:
    0 0 0 4px
    rgba(59, 130, 246, 0.10);

}

/* =========================================================
HEADING
========================================================= */

.hero-section .hero-content h1 {
margin: 0;

color: #0f172a;


font-size:
    clamp(42px, 5vw, 68px);


line-height: 1.05;


font-weight: 800;


letter-spacing: -2.8px;

}

.hero-section .hero-content h1 span {
display: block;

color: #3b82f6;

}

/* =========================================================
DESCRIPTION
========================================================= */

.hero-section .hero-content > p {
max-width: 540px;

margin: 24px 0 0;


color: #64748b;


font-size: 17px;


line-height: 1.75;

}

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

.hero-section .hero-actions {
display: flex;
align-items: center;

gap: 12px;


margin-top: 32px;

}

.hero-section .hero-btn {
min-height: 50px;

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


gap: 9px;


padding: 0 20px;


border-radius: 11px;


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


text-decoration: none;


transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.hero-section .hero-btn:hover {
transform: translateY(-2px);
}

/* =========================================================
PRIMARY BUTTON
========================================================= */

.hero-section .hero-btn-primary {
background: #3b82f6;

color: #ffffff;


box-shadow:
    0 10px 24px
    rgba(59, 130, 246, 0.20);

}

.hero-section .hero-btn-primary:hover {
background: #2563eb;

box-shadow:
    0 14px 30px
    rgba(37, 99, 235, 0.25);

}

.hero-section .hero-btn-primary i {
transition:
transform 0.25s ease;
}

.hero-section .hero-btn-primary:hover i {
transform:
translate(2px, -2px);
}

/* =========================================================
SECONDARY BUTTON
========================================================= */

.hero-section .hero-btn-secondary {
background: #ffffff;

color: #334155;


border: 1px solid #dbe3ee;

}

.hero-section .hero-btn-secondary:hover {
color: #2563eb;

border-color: #bfdbfe;


background: #eff6ff;

}

.hero-section .hero-btn-secondary i {
color: #3b82f6;
}

/* =========================================================
TRUST
========================================================= */

.hero-section .hero-trust {
display: flex;
align-items: center;

gap: 11px;


margin-top: 32px;

}

.hero-section .hero-trust-icon {
width: 38px;
height: 38px;

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


border-radius: 10px;


background: #ffffff;


color: #3b82f6;


border: 1px solid #dbeafe;

}

.hero-section .hero-trust-text {
display: flex;
flex-direction: column;

line-height: 1.3;

}

.hero-section .hero-trust-text strong {
color: #334155;

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

}

.hero-section .hero-trust-text span {
margin-top: 3px;

color: #94a3b8;


font-size: 11px;

}

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

.hero-section .hero-visual {
position: relative;

min-height: 500px;


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

}

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

.hero-section .hero-card {
position: relative;

width: min(100%, 430px);


padding: 27px;


border:
    1px solid
    rgba(255, 255, 255, 0.8);


border-radius: 26px;


background:
    rgba(255, 255, 255, 0.88);


box-shadow:
    0 25px 70px
    rgba(37, 99, 235, 0.13);


backdrop-filter: blur(15px);


-webkit-backdrop-filter: blur(15px);

}

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

.hero-section .hero-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}

.hero-section .hero-card-label {
display: block;

margin-bottom: 7px;


color: #94a3b8;


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

}

.hero-section .hero-card-header strong {
display: block;

color: #0f172a;


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


letter-spacing: -1px;

}

.hero-section .hero-card-icon {
width: 46px;
height: 46px;

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


border-radius: 13px;


background: #eff6ff;


color: #3b82f6;


font-size: 19px;

}

/* =========================================================
CHART
========================================================= */

.hero-section .hero-chart {
position: relative;

height: 145px;


margin-top: 30px;


overflow: hidden;


border-radius: 16px;


background:
    linear-gradient(
        to bottom,
        #f8fbff,
        #ffffff
    );

}

.hero-section .hero-chart::before {
content: "";

position: absolute;


inset: 20px 0;


background:
    repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 31px,
        #eef2f7 32px
    );

}

.hero-section .chart-line {
position: absolute;

left: 5%;
bottom: 25px;


width: 90%;
height: 85px;


border-top: 3px solid #3b82f6;


border-radius: 50%;


transform:
    rotate(-5deg)
    skewX(-12deg);

}

.hero-section .chart-dot {
position: absolute;

width: 9px;
height: 9px;


border: 3px solid #ffffff;


border-radius: 50%;


background: #3b82f6;


box-shadow:
    0 3px 10px
    rgba(59, 130, 246, 0.25);

}

.hero-section .dot-one {
left: 12%;
bottom: 43px;
}

.hero-section .dot-two {
left: 38%;
bottom: 57px;
}

.hero-section .dot-three {
left: 65%;
bottom: 75px;
}

.hero-section .dot-four {
right: 8%;
bottom: 96px;
}

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

.hero-section .hero-card-footer {
display: grid;

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


gap: 12px;


margin-top: 25px;


padding-top: 20px;


border-top: 1px solid #eef2f7;

}

.hero-section .hero-stat {
display: flex;
flex-direction: column;
}

.hero-section .hero-stat span {
color: #94a3b8;

font-size: 10px;
font-weight: 600;

}

.hero-section .hero-stat strong {
margin-top: 4px;

color: #334155;


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

}

.hero-section .hero-stat .status-active {
color: #16a34a;
}

/* =========================================================
FLOATING CARDS
========================================================= */

.hero-section .hero-floating-card {
position: absolute;

display: flex;
align-items: center;


gap: 11px;


min-width: 190px;


padding: 13px;


border:
    1px solid
    rgba(255, 255, 255, 0.9);


border-radius: 15px;


background:
    rgba(255, 255, 255, 0.94);


box-shadow:
    0 15px 35px
    rgba(15, 23, 42, 0.10);


backdrop-filter: blur(10px);


-webkit-backdrop-filter: blur(10px);

}

.hero-section .floating-icon {
width: 38px;
height: 38px;

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


flex-shrink: 0;


border-radius: 10px;


background: #eff6ff;


color: #3b82f6;


font-size: 16px;

}

.hero-section .hero-floating-card div:not(.floating-icon) {
display: flex;
flex-direction: column;

line-height: 1.3;

}

.hero-section .hero-floating-card span {
color: #94a3b8;

font-size: 9px;
font-weight: 600;

}

.hero-section .hero-floating-card strong {
margin-top: 3px;

color: #0f172a;


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

}

.hero-section .floating-check {
margin-left: auto;

color: #22c55e;


font-size: 16px;

}

/* =========================================================
FLOATING CARD POSITIONS
========================================================= */

.hero-section .loan-floating-card {
top: 48px;
left: -15px;

animation:
    heroFloatOne 4s ease-in-out infinite;

}

.hero-section .transfer-floating-card {
right: -20px;
bottom: 55px;

animation:
    heroFloatTwo 4.5s ease-in-out infinite;

}

/* =========================================================
ANIMATION
========================================================= */

@keyframes heroFloatOne {

0%,
100% {
    transform: translateY(0);
}


50% {
    transform: translateY(-8px);
}

}

@keyframes heroFloatTwo {

0%,
100% {
    transform: translateY(0);
}


50% {
    transform: translateY(8px);
}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {

.hero-section {
    padding: 75px 0 90px;
}




.hero-section .hero-container {
    width: calc(100% - 32px);


    grid-template-columns: 1fr;


    min-height: auto;


    gap: 65px;
}




.hero-section .hero-content {
    max-width: 700px;


    margin: 0 auto;


    text-align: center;
}




.hero-section .hero-content > p {
    margin-left: auto;
    margin-right: auto;
}




.hero-section .hero-actions {
    justify-content: center;
}




.hero-section .hero-trust {
    justify-content: center;
}




.hero-section .hero-visual {
    width: 100%;


    max-width: 560px;


    min-height: 500px;


    margin: 0 auto;
}

}

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

@media (max-width: 600px) {

.hero-section {




.hero-section .hero-content > p {
    font-size: 15px;


    line-height: 1.7;
}




.hero-section .hero-actions {
    align-items: stretch;


    flex-direction: column;
}




.hero-section .hero-btn {
    width: 100%;
}




.hero-section .hero-trust {
    justify-content: flex-start;
}




.hero-section .hero-visual {
    min-height: 410px;
}




.hero-section .hero-card {
    width: 100%;


    padding: 20px;


    border-radius: 21px;
}




.hero-section .hero-card-header strong {
    font-size: 24px;
}




.hero-section .hero-chart {
    height: 125px;
}




.hero-section .hero-card-footer {
    gap: 7px;
}




.hero-section .hero-floating-card {
    min-width: 165px;


    padding: 10px;


    border-radius: 13px;


    transform: scale(0.88);
}




.hero-section .loan-floating-card {
    top: 15px;
    left: -18px;
}




.hero-section .transfer-floating-card {
    right: -18px;
    bottom: 20px;
}

}

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

@media (max-width: 400px) {

.hero-section .hero-content h1 {
    font-size: 34px;
}




.hero-section .hero-badge {
    font-size: 10px;
}




.hero-section .hero-card {
    padding: 17px;
}




.hero-section .hero-card-header strong {
    font-size: 21px;
}




.hero-section .hero-floating-card {
    min-width: 145px;


    transform: scale(0.78);
}




.hero-section .loan-floating-card {
    left: -30px;
}




.hero-section .transfer-floating-card {
    right: -30px;
}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

.hero-section .hero-floating-card {
    animation: none;
}

}
}

.services-section {

position: relative;


padding:
    100px 0;


background:
    #ffffff;

}

.services-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

/* =========================================================
HEADING
========================================================= */

.services-heading {

max-width:
    650px;


margin-bottom:
    45px;

}

.services-heading h2 {

margin:
    0 0 15px;


color:
    #0f172a;


font-size:
    clamp(32px, 4vw, 44px);


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.services-heading p {

max-width:
    600px;


margin:
    0;


color:
    #64748b;


font-size:
    16px;


line-height:
    1.75;

}

/* =========================================================
SERVICES GRID
========================================================= */

.services-grid {

display:
    grid;


grid-template-columns:
    repeat(
        2,
        minmax(0, 1fr)
    );


gap:
    24px;

}

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

.service-card {

position:
    relative;


min-height:
    340px;


display:
    flex;


flex-direction:
    column;


padding:
    32px;


overflow:
    hidden;


border:
    1px solid #e2e8f0;


border-radius:
    24px;


background:
    #ffffff;


transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

}

.service-card::after {

content:
    "";


position:
    absolute;


width:
    220px;


height:
    220px;


right:
    -100px;


bottom:
    -120px;


border-radius:
    50%;


background:
    #eff6ff;


transition:
    transform 0.4s ease;

}

.service-card:hover {

transform:
    translateY(-6px);


border-color:
    #bfdbfe;


box-shadow:
    0 20px 45px
    rgba(
        37,
        99,
        235,
        0.09
    );

}

.service-card:hover::after {

transform:
    scale(1.25);

}

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

.service-card-top {

position:
    relative;


z-index:
    2;


display:
    flex;


align-items:
    center;


justify-content:
    space-between;

}

.service-icon {

width:
    54px;


height:
    54px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    15px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    22px;

}

.service-number {

color:
    #cbd5e1;


font-size:
    13px;


font-weight:
    800;

}

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

.service-card h3 {

position:
    relative;


z-index:
    2;


margin:
    30px 0 12px;


color:
    #0f172a;


font-size:
    25px;


line-height:
    1.2;


font-weight:
    800;


letter-spacing:
    -0.5px;

}

.service-card p {

position:
    relative;


z-index:
    2;


max-width:
    500px;


margin:
    0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.75;

}

/* =========================================================
SERVICE LINK
========================================================= */

.service-link {

position:
    relative;


z-index:
    3;


display:
    inline-flex;


align-items:
    center;


gap:
    8px;


width:
    fit-content;


margin-top:
    auto;


padding-top:
    28px;


color:
    #2563eb;


font-size:
    14px;


font-weight:
    700;


text-decoration:
    none;

}

.service-link i {

transition:
    transform 0.25s ease;

}

.service-link:hover i {

transform:
    translate(
        3px,
        -3px
    );

}

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

.loan-service-card {

background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 100%
    );

}

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

.transfer-service-card {

background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f4f9ff 100%
    );

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 768px) {

.services-section {


    padding:
        75px 0;


}




.services-section .container {


    width:
        calc(
            100% - 32px
        );


}




.services-heading {


    margin-bottom:
        35px;


}




.services-grid {


    grid-template-columns:
        1fr;


    gap:
        18px;


}




.service-card {


    min-height:
        320px;


    padding:
        28px;


}

}

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

@media (max-width: 600px) {

.services-section {


    padding:
        60px 0;


}




.services-section .container {


    width:
        calc(
            100% - 30px
        );


}




.services-heading h2 {


    font-size:
        32px;


    letter-spacing:
        -1px;


}




.services-heading p {


    font-size:
        15px;


}




.service-card {


    min-height:
        300px;


    padding:
        24px;


    border-radius:
        20px;


}




.service-card h3 {


    margin-top:
        24px;


    font-size:
        23px;


}




.service-card p {


    font-size:
        14px;


}

}

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

@media (max-width: 380px) {

.services-section .container {


    width:
        calc(
            100% - 24px
        );


}




.service-card {


    padding:
        21px;


}




.service-card h3 {


    font-size:
        21px;


}

}


.about-section {

position: relative;


overflow: hidden;


padding:
    100px 0;


background:
    #f8fbff;

}

.about-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

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

.about-container {

display:
    grid;


grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1fr);


align-items:
    center;


gap:
    90px;

}

/* =========================================================
VISUAL
========================================================= */

.about-visual {

position:
    relative;


min-height:
    440px;


display:
    flex;


align-items:
    center;


justify-content:
    center;

}

.about-main-card {

position:
    relative;


width:
    min(
        100%,
        400px
    );


min-height:
    360px;


display:
    flex;


flex-direction:
    column;


justify-content:
    center;


padding:
    40px;


overflow:
    hidden;


border:
    1px solid #dbeafe;


border-radius:
    28px;


background:
    linear-gradient(
        145deg,
        #eaf4ff,
        #f8fbff
    );


box-shadow:
    0 25px 60px
    rgba(
        37,
        99,
        235,
        0.08
    );

}

.about-main-card::after {

content:
    "";


position:
    absolute;


width:
    260px;


height:
    260px;


right:
    -100px;


bottom:
    -120px;


border-radius:
    50%;


background:
    rgba(
        59,
        130,
        246,
        0.08
    );

}

.about-card-icon {

position:
    relative;


z-index:
    2;


width:
    58px;


height:
    58px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


margin-bottom:
    22px;


border-radius:
    16px;


background:
    #ffffff;


color:
    #3b82f6;


font-size:
    23px;


box-shadow:
    0 8px 20px
    rgba(
        37,
        99,
        235,
        0.08
    );

}

.about-main-card > span {

position:
    relative;


z-index:
    2;


color:
    #3b82f6;


font-size:
    12px;


font-weight:
    700;

}

.about-main-card strong {

position:
    relative;


z-index:
    2;


max-width:
    280px;


margin-top:
    12px;


color:
    #0f172a;


font-size:
    36px;


line-height:
    1.1;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.about-main-card strong em {

color:
    #3b82f6;


font-style:
    normal;

}

.about-main-card p {

position:
    relative;


z-index:
    2;


max-width:
    290px;


margin:
    18px 0 0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.7;

}

/* =========================================================
SMALL FLOATING CARD
========================================================= */

.about-small-card {

position:
    absolute;


right:
    0;


bottom:
    28px;


display:
    flex;


align-items:
    center;


gap:
    11px;


padding:
    13px 16px;


border:
    1px solid
    rgba(
        255,
        255,
        255,
        0.9
    );


border-radius:
    14px;


background:
    rgba(
        255,
        255,
        255,
        0.95
    );


box-shadow:
    0 15px 35px
    rgba(
        15,
        23,
        42,
        0.10
    );

}

.about-small-icon {

width:
    38px;


height:
    38px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    10px;


background:
    #eff6ff;


color:
    #3b82f6;

}

.about-small-card > div:last-child {

display:
    flex;


flex-direction:
    column;

}

.about-small-card strong {

color:
    #334155;


font-size:
    12px;

}

.about-small-card span {

margin-top:
    3px;


color:
    #94a3b8;


font-size:
    10px;

}

/* =========================================================
ABOUT CONTENT
========================================================= */

.about-content {

max-width:
    560px;

}

.about-content h2 {

margin:
    12px 0 18px;


color:
    #0f172a;


font-size:
    clamp(
        34px,
        4vw,
        46px
    );


line-height:
    1.1;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.about-content > p {

margin:
    0 0 16px;


color:
    #64748b;


font-size:
    15px;


line-height:
    1.8;

}

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

.about-features {

display:
    grid;


grid-template-columns:
    repeat(
        2,
        minmax(0, 1fr)
    );


gap:
    14px;


margin-top:
    30px;

}

.about-feature {

display:
    flex;


align-items:
    center;


gap:
    11px;


padding:
    14px;


border:
    1px solid #e2e8f0;


border-radius:
    13px;


background:
    #ffffff;

}

.about-feature-icon {

width:
    38px;


height:
    38px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


flex-shrink:
    0;


border-radius:
    10px;


background:
    #eff6ff;


color:
    #3b82f6;

}

.about-feature > div:last-child {

display:
    flex;


flex-direction:
    column;

}

.about-feature strong {

color:
    #334155;


font-size:
    12px;

}

.about-feature span {

margin-top:
    3px;


color:
    #94a3b8;


font-size:
    10px;

}

/* =========================================================
ABOUT LINK
========================================================= */

.about-link {

display:
    inline-flex;


align-items:
    center;


gap:
    8px;


margin-top:
    30px;


color:
    #2563eb;


font-size:
    14px;


font-weight:
    700;


text-decoration:
    none;

}

.about-link i {

transition:
    transform
    0.25s
    ease;

}

.about-link:hover i {

transform:
    translate(
        3px,
        -3px
    );

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {

.about-section {


    padding:
        75px 0;


}




.about-container {


    grid-template-columns:
        1fr;


    gap:
        60px;


}




.about-visual {


    max-width:
        520px;


    width:
        100%;


    margin:
        0 auto;


}




.about-content {


    max-width:
        700px;


    margin:
        0 auto;


}

}

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

@media (max-width: 600px) {

.about-section {


    padding:
        60px 0;


}




.about-section .container {


    width:
        calc(
            100% - 30px
        );


}




.about-visual {


    min-height:
        370px;


}




.about-main-card {


    min-height:
        320px;


    padding:
        28px;


    border-radius:
        22px;


}




.about-main-card strong {


    font-size:
        30px;


}




.about-small-card {


    right:
        -5px;


    bottom:
        15px;


    padding:
        10px 12px;


}




.about-content h2 {


    font-size:
        34px;


}




.about-content > p {


    font-size:
        14px;


}




.about-features {


    grid-template-columns:
        1fr;


}

}

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

@media (max-width: 380px) {

.about-section .container {


    width:
        calc(
            100% - 24px
        );


}




.about-main-card {


    padding:
        24px;


}




.about-main-card strong {


    font-size:
        27px;


}




.about-small-card {


    right:
        -15px;


}

}

.why-section {

position: relative;


padding:
    100px 0;


background:
    #ffffff;

}

.why-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

/* =========================================================
HEADING
========================================================= */

.why-heading {

max-width:
    650px;


margin-bottom:
    45px;

}

.why-heading h2 {

margin:
    12px 0 15px;


color:
    #0f172a;


font-size:
    clamp(
        32px,
        4vw,
        44px
    );


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.why-heading p {

max-width:
    580px;


margin:
    0;


color:
    #64748b;


font-size:
    16px;


line-height:
    1.75;

}

/* =========================================================
WHY GRID
========================================================= */

.why-grid {

display:
    grid;


grid-template-columns:
    repeat(
        2,
        minmax(0, 1fr)
    );


gap:
    16px;

}

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

.why-card {

display:
    flex;


align-items:
    flex-start;


gap:
    18px;


padding:
    25px;


border:
    1px solid #e2e8f0;


border-radius:
    18px;


background:
    #ffffff;


transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.why-card:hover {

transform:
    translateY(-4px);


border-color:
    #bfdbfe;


box-shadow:
    0 15px 35px
    rgba(
        37,
        99,
        235,
        0.07
    );

}

/* =========================================================
ICON
========================================================= */

.why-icon {

width:
    48px;


height:
    48px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


flex-shrink:
    0;


border-radius:
    13px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    19px;

}

/* =========================================================
CONTENT
========================================================= */

.why-card h3 {

margin:
    2px 0 7px;


color:
    #0f172a;


font-size:
    17px;


font-weight:
    800;

}

.why-card p {

margin:
    0;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.7;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 768px) {

.why-section {


    padding:
        75px 0;


}




.why-section .container {


    width:
        calc(
            100% - 32px
        );


}




.why-grid {


    grid-template-columns:
        1fr;


}

}

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

@media (max-width: 600px) {

.why-section {


    padding:
        60px 0;


}




.why-section .container {


    width:
        calc(
            100% - 30px
        );


}




.why-heading h2 {


    font-size:
        32px;


    letter-spacing:
        -1px;


}




.why-heading p {


    font-size:
        15px;


}




.why-card {


    padding:
        20px;


    gap:
        14px;


    border-radius:
        16px;


}




.why-icon {


    width:
        43px;


    height:
        43px;


    border-radius:
        11px;


    font-size:
        17px;


}




.why-card h3 {


    font-size:
        16px;


}




.why-card p {


    font-size:
        12px;


}

}

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

@media (max-width: 380px) {

.why-section .container {


    width:
        calc(
            100% - 24px
        );


}




.why-card {


    padding:
        18px;


}

}

.how-it-works-section {

position:
    relative;


padding:
    100px 0;


background:
    #f8fbff;

}

.how-it-works-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

/* =========================================================
HEADING
========================================================= */

.how-heading {

max-width:
    650px;


margin-bottom:
    50px;

}

.how-heading h2 {

margin:
    12px 0 15px;


color:
    #0f172a;


font-size:
    clamp(
        32px,
        4vw,
        44px
    );


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.how-heading p {

max-width:
    580px;


margin:
    0;


color:
    #64748b;


font-size:
    16px;


line-height:
    1.75;

}

/* =========================================================
STEPS GRID
========================================================= */

.steps-grid {

position:
    relative;


display:
    grid;


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


gap:
    20px;

}

/* =========================================================
CONNECTING LINE
========================================================= */

.steps-grid::before {

content:
    "";


position:
    absolute;


top:
    46px;


left:
    16%;


right:
    16%;


height:
    1px;


background:
    #dbeafe;


z-index:
    0;

}

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

.step-card {

position:
    relative;


z-index:
    1;


padding:
    30px;


border:
    1px solid #e2e8f0;


border-radius:
    20px;


background:
    #ffffff;


transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.step-card:hover {

transform:
    translateY(-5px);


border-color:
    #bfdbfe;


box-shadow:
    0 15px 35px
    rgba(
        37,
        99,
        235,
        0.07
    );

}

/* =========================================================
NUMBER
========================================================= */

.step-number {

position:
    absolute;


top:
    18px;


right:
    20px;


color:
    #dbeafe;


font-size:
    12px;


font-weight:
    800;

}

/* =========================================================
ICON
========================================================= */

.step-icon {

width:
    54px;


height:
    54px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    15px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    21px;

}

.step-card h3 {

margin:
    25px 0 10px;


color:
    #0f172a;


font-size:
    18px;


line-height:
    1.3;


font-weight:
    800;

}

.step-card p {

margin:
    0;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.75;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 768px) {

.how-it-works-section {


    padding:
        75px 0;


}




.how-it-works-section .container {


    width:
        calc(
            100% - 32px
        );


}




.steps-grid {


    grid-template-columns:
        1fr;


    gap:
        16px;


}




.steps-grid::before {


    display:
        none;


}




.step-card {


    min-height:
        200px;


}

}

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

@media (max-width: 600px) {

.how-it-works-section {




.how-heading h2 {


    font-size:
        32px;


    letter-spacing:
        -1px;


}




.how-heading p {


    font-size:
        15px;


}




.step-card {


    padding:
        23px;


    border-radius:
        17px;


}




.step-icon {


    width:
        48px;


    height:
        48px;


    border-radius:
        13px;


    font-size:
        19px;


}




.step-card h3 {


    margin-top:
        20px;


    font-size:
        17px;


}




.step-card p {


    font-size:
        12px;


}

}

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

@media (max-width: 380px) {

.how-it-works-section .container {


    width:
        calc(
            100% - 24px
        );


}




.step-card {


    padding:
        20px;


}

}
}

.cta-section {

padding:
    90px 0;


background:
    #ffffff;

}

.cta-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

.cta-card {

position:
    relative;


display:
    flex;


align-items:
    center;


justify-content:
    space-between;


gap:
    40px;


padding:
    55px;


overflow:
    hidden;


border:
    1px solid #bfdbfe;


border-radius:
    28px;


background:
    linear-gradient(
        135deg,
        #eaf4ff 0%,
        #f5faff 100%
    );

}

.cta-card::before {

content:
    "";


position:
    absolute;


width:
    300px;


height:
    300px;


right:
    -130px;


top:
    -150px;


border-radius:
    50%;


background:
    rgba(
        59,
        130,
        246,
        0.08
    );

}

.cta-content {

position:
    relative;


z-index:
    2;


max-width:
    650px;

}

.cta-label {

display:
    inline-block;


margin-bottom:
    12px;


color:
    #2563eb;


font-size:
    12px;


font-weight:
    700;

}

.cta-content h2 {

margin:
    0;


color:
    #0f172a;


font-size:
    clamp(
        32px,
        4vw,
        46px
    );


line-height:
    1.1;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.cta-content p {

max-width:
    560px;


margin:
    17px 0 0;


color:
    #64748b;


font-size:
    15px;


line-height:
    1.75;

}

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

.cta-actions {

display:
    flex;


align-items:
    center;


gap:
    12px;


margin-top:
    28px;

}

.cta-btn {

min-height:
    48px;


display:
    inline-flex;


align-items:
    center;


justify-content:
    center;


gap:
    8px;


padding:
    0 20px;


border-radius:
    10px;


font-size:
    13px;


font-weight:
    700;


text-decoration:
    none;


transition:
    all 0.25s ease;

}

.cta-btn-primary {

color:
    #ffffff;


background:
    #3b82f6;


box-shadow:
    0 10px 25px
    rgba(
        59,
        130,
        246,
        0.18
    );

}

.cta-btn-primary:hover {

color:
    #ffffff;


background:
    #2563eb;


transform:
    translateY(-2px);

}

.cta-btn-secondary {

color:
    #334155;


background:
    #ffffff;


border:
    1px solid #dbe3ee;

}

.cta-btn-secondary:hover {

color:
    #2563eb;


border-color:
    #bfdbfe;


background:
    #eff6ff;

}

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

.cta-icon {

position:
    relative;


z-index:
    2;


width:
    110px;


height:
    110px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


flex-shrink:
    0;


border-radius:
    30px;


background:
    #ffffff;


color:
    #3b82f6;


font-size:
    48px;


box-shadow:
    0 15px 35px
    rgba(
        37,
        99,
        235,
        0.10
    );

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 768px) {

.cta-section {


    padding:
        75px 0;


}




.cta-section .container {


    width:
        calc(
            100% - 32px
        );


}




.cta-card {


    padding:
        40px;


}




.cta-icon {


    width:
        85px;


    height:
        85px;


    border-radius:
        24px;


    font-size:
        36px;


}

}

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

@media (max-width: 600px) {

.cta-section {


    padding:
        60px 0;


}




.cta-section .container {


    width:
        calc(
            100% - 30px
        );


}




.cta-card {


    display:
        block;


    padding:
        30px 24px;


    border-radius:
        22px;


}




.cta-content h2 {


    font-size:
        32px;


    letter-spacing:
        -1px;


}




.cta-content p {


    font-size:
        14px;


}




.cta-actions {


    flex-direction:
        column;


    align-items:
        stretch;


}




.cta-btn {


    width:
        100%;


}




.cta-icon {


    display:
        none;


}

}

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

@media (max-width: 380px) {

.cta-section .container {


    width:
        calc(
            100% - 24px
        );


}




.cta-card {


    padding:
        26px 20px;


}




.cta-content h2 {


    font-size:
        29px;


}

}
.contact-section {

position:
    relative;


padding:
    100px 0;


background:
    #f8fbff;

}

.contact-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

.contact-container {

display:
    grid;


grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1fr);


align-items:
    start;


gap:
    80px;

}

/* =========================================================
CONTACT CONTENT
========================================================= */

.contact-content {

max-width:
    480px;

}

.contact-content h2 {

margin:
    12px 0 16px;


color:
    #0f172a;


font-size:
    clamp(
        34px,
        4vw,
        46px
    );


line-height:
    1.1;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.contact-content > p {

margin:
    0;


color:
    #64748b;


font-size:
    15px;


line-height:
    1.8;

}

/* =========================================================
CONTACT DETAILS
========================================================= */

.contact-details {

display:
    flex;


flex-direction:
    column;


gap:
    13px;


margin-top:
    35px;

}

.contact-detail {

display:
    flex;


align-items:
    center;


gap:
    13px;


padding:
    12px;


border:
    1px solid #e2e8f0;


border-radius:
    13px;


background:
    #ffffff;


text-decoration:
    none;


transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

a.contact-detail:hover {

transform:
    translateX(3px);


border-color:
    #bfdbfe;


box-shadow:
    0 8px 20px
    rgba(
        37,
        99,
        235,
        0.06
    );

}

.contact-detail-icon {

width:
    42px;


height:
    42px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


flex-shrink:
    0;


border-radius:
    11px;


background:
    #eff6ff;


color:
    #3b82f6;

}

.contact-detail > div:last-child {

display:
    flex;


flex-direction:
    column;

}

.contact-detail span {

color:
    #94a3b8;


font-size:
    10px;


font-weight:
    600;

}

.contact-detail strong {

margin-top:
    3px;


color:
    #334155;


font-size:
    13px;


font-weight:
    700;

}

/* =========================================================
FORM WRAPPER
========================================================= */

.contact-form-wrapper {

width:
    100%;

}

.contact-form {

padding:
    32px;


border:
    1px solid #e2e8f0;


border-radius:
    22px;


background:
    #ffffff;


box-shadow:
    0 20px 50px
    rgba(
        15,
        23,
        42,
        0.05
    );

}

.contact-form-header {

margin-bottom:
    25px;

}

.contact-form-header h3 {

margin:
    0 0 7px;


color:
    #0f172a;


font-size:
    20px;


font-weight:
    800;

}

.contact-form-header p {

margin:
    0;


color:
    #94a3b8;


font-size:
    12px;

}

/* =========================================================
FORM ROW
========================================================= */

.contact-form-row {

display:
    grid;


grid-template-columns:
    repeat(
        2,
        minmax(0, 1fr)
    );


gap:
    14px;

}

/* =========================================================
FORM GROUP
========================================================= */

.form-group {

margin-bottom:
    17px;

}

.form-group label {

display:
    block;


margin-bottom:
    7px;


color:
    #334155;


font-size:
    12px;


font-weight:
    700;

}

.form-group input,
.form-group textarea {

width:
    100%;


box-sizing:
    border-box;


padding:
    12px 13px;


border:
    1px solid #dbe3ee;


border-radius:
    10px;


outline:
    none;


background:
    #ffffff;


color:
    #0f172a;


font-family:
    inherit;


font-size:
    13px;


transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

}

.form-group input {

height:
    47px;

}

.form-group textarea {

min-height:
    130px;


resize:
    vertical;

}

.form-group input::placeholder,
.form-group textarea::placeholder {

color:
    #a8b2c1;

}

.form-group input:focus,
.form-group textarea:focus {

border-color:
    #60a5fa;


background:
    #fafdff;


box-shadow:
    0 0 0 3px
    rgba(
        59,
        130,
        246,
        0.08
    );

}

/* =========================================================
SUBMIT BUTTON
========================================================= */

.contact-submit {

width:
    100%;


min-height:
    49px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


gap:
    8px;


border:
    0;


border-radius:
    10px;


background:
    #3b82f6;


color:
    #ffffff;


cursor:
    pointer;


font-family:
    inherit;


font-size:
    13px;


font-weight:
    700;


box-shadow:
    0 10px 25px
    rgba(
        59,
        130,
        246,
        0.16
    );


transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

}

.contact-submit:hover {

background:
    #2563eb;


transform:
    translateY(-2px);


box-shadow:
    0 14px 30px
    rgba(
        37,
        99,
        235,
        0.22
    );

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {

.contact-section {


    padding:
        75px 0;


}




.contact-section .container {


    width:
        calc(
            100% - 32px
        );


}




.contact-container {


    grid-template-columns:
        1fr;


    gap:
        50px;


}




.contact-content {


    max-width:
        650px;


}

}

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

@media (max-width: 600px) {

.contact-section {


    padding:
        60px 0;


}




.contact-section .container {


    width:
        calc(
            100% - 30px
        );


}




.contact-content h2 {


    font-size:
        34px;


}




.contact-content > p {


    font-size:
        14px;


}




.contact-form {


    padding:
        23px;


    border-radius:
        18px;


}




.contact-form-row {


    grid-template-columns:
        1fr;


    gap:
        0;


}




.form-group input {


    height:
        46px;


}

}

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

@media (max-width: 380px) {

.contact-section .container {


    width:
        calc(
            100% - 24px
        );


}




.contact-form {


    padding:
        20px;


}




.contact-content h2 {


    font-size:
        30px;


}

}

.site-footer {

position:
    relative;


background:
    #f8fbff;


color:
    #64748b;

}

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

.site-footer .footer-main {

padding:
    70px 0 55px;


border-top:
    1px solid #e2e8f0;

}

.site-footer .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

.footer-container {

display:
    grid;


grid-template-columns:
    1.5fr
    0.8fr
    0.8fr
    1fr;


gap:
    60px;

}

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

.footer-brand {

max-width:
    330px;

}

.footer-logo {

display:
    inline-flex;


align-items:
    center;


gap:
    10px;


color:
    #0f172a;


text-decoration:
    none;

}

.footer-logo-mark {

width:
    38px;


height:
    38px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    10px;


background:
    #3b82f6;


color:
    #ffffff;


font-size:
    18px;


font-weight:
    800;


box-shadow:
    0 8px 20px
    rgba(
        59,
        130,
        246,
        0.18
    );

}

.footer-logo-text {

color:
    #0f172a;


font-size:
    20px;


font-weight:
    800;


letter-spacing:
    -0.5px;

}

.footer-brand > p {

max-width:
    290px;


margin:
    18px 0 22px;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.75;

}

/* =========================================================
SOCIAL LINKS
========================================================= */

.footer-socials {

display:
    flex;


align-items:
    center;


gap:
    8px;

}

.footer-socials a {

width:
    34px;


height:
    34px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border:
    1px solid #dbe3ee;


border-radius:
    9px;


background:
    #ffffff;


color:
    #64748b;


font-size:
    13px;


text-decoration:
    none;


transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;

}

.footer-socials a:hover {

color:
    #2563eb;


border-color:
    #bfdbfe;


background:
    #eff6ff;


transform:
    translateY(-2px);

}

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

.footer-column h3 {

margin:
    3px 0 18px;


color:
    #0f172a;


font-size:
    13px;


font-weight:
    800;

}

.footer-column ul {

display:
    flex;


flex-direction:
    column;


gap:
    11px;


margin:
    0;


padding:
    0;


list-style:
    none;

}

.footer-column ul li {

margin:
    0;

}

.footer-column ul li a {

color:
    #64748b;


font-size:
    12px;


text-decoration:
    none;


transition:
    color 0.2s ease;

}

.footer-column ul li a:hover {

color:
    #2563eb;

}

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

.footer-action p {

max-width:
    210px;


margin:
    0 0 18px;


color:
    #64748b;


font-size:
    12px;


line-height:
    1.65;

}

.footer-start-btn {

display:
    inline-flex;


align-items:
    center;


justify-content:
    center;


gap:
    7px;


min-height:
    42px;


padding:
    0 16px;


border-radius:
    9px;


background:
    #3b82f6;


color:
    #ffffff;


font-size:
    12px;


font-weight:
    700;


text-decoration:
    none;


box-shadow:
    0 8px 20px
    rgba(
        59,
        130,
        246,
        0.15
    );


transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.footer-start-btn:hover {

background:
    #2563eb;


color:
    #ffffff;


transform:
    translateY(-2px);


box-shadow:
    0 12px 25px
    rgba(
        37,
        99,
        235,
        0.20
    );

}

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

.footer-bottom {

border-top:
    1px solid #e2e8f0;


background:
    #f1f7ff;

}

.footer-bottom-container {

min-height:
    65px;


display:
    flex;


align-items:
    center;


justify-content:
    space-between;


gap:
    20px;

}

.footer-bottom p {

margin:
    0;


color:
    #94a3b8;


font-size:
    11px;

}

.footer-bottom-links {

display:
    flex;


align-items:
    center;


gap:
    20px;

}

.footer-bottom-links a {

color:
    #94a3b8;


font-size:
    11px;


text-decoration:
    none;


transition:
    color 0.2s ease;

}

.footer-bottom-links a:hover {

color:
    #2563eb;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {

.site-footer .footer-main {


    padding:
        60px 0 45px;


}




.site-footer .container {


    width:
        calc(
            100% - 32px
        );


}




.footer-container {


    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );


    gap:
        45px 35px;


}




.footer-brand {


    grid-column:
        1 / -1;


    max-width:
        450px;


}

}

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

@media (max-width: 600px) {

.site-footer .footer-main {


    padding:
        50px 0 40px;


}




.site-footer .container {


    width:
        calc(
            100% - 30px
        );


}




.footer-container {


    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );


    gap:
        35px 25px;


}




.footer-brand {


    grid-column:
        1 / -1;


}




.footer-column h3 {


    margin-bottom:
        15px;


}




.footer-action {


    grid-column:
        1 / -1;


}




.footer-bottom-container {


    min-height:
        auto;


    padding:
        18px 0;


    flex-direction:
        column;


    align-items:
        flex-start;


    gap:
        10px;


}

}

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

@media (max-width: 380px) {

.site-footer .container {


    width:
        calc(
            100% - 24px
        );


}




.footer-container {


    gap:
        30px 18px;


}




.footer-column ul {


    gap:
        9px;


}




.footer-column ul li a {


    font-size:
        11px;


}




.footer-bottom-links {


    gap:
        15px;


}

}