@font-face {
    font-family: 'Cairo-Regular';
    src: url('/fonts/Cairo-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ReemKufiInk-Regular';
    src: url('/fonts/ReemKufiInk-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    --navy: #15384d;
    --navy-2: #1c4965;
    --navy-dark: #0d2b3d;
    --navy-soft: #edf5fa;
    --blue: #367fbd;
    --blue-2: #56a6df;
    --blue-dark: #286a9f;
    --blue-soft: #eaf5fc;
    --cyan-soft: #dff2fb;
    --green: #12a957;
    --green-dark: #0c8c47;
    --green-soft: #e9f8ef;
    --orange: #f09a14;
    --orange-soft: #fff4e1;
    --red: #ea4c52;
    --red-soft: #fff0f1;
    --white: #fff;
    --page: #f7fafc;
    --page-2: #f0f6f9;
    --text: #243c4c;
    --text-2: #536b79;
    --muted: #899ba6;
    --border: #dce8ee;
    --border-dark: #c6dce7;
    --border-blue: #96c6e7;
    --shadow-xs: 0 .15em .55em rgba(15, 48, 68, .05);
    --shadow-sm: 0 .35em 1.1em rgba(15, 48, 68, .08);
    --shadow-md: 0 .75em 2.1em rgba(15, 48, 68, .11);
    --shadow-lg: 0 1.4em 4em rgba(15, 48, 68, .15);
    --shadow-xl: 0 2em 5em rgba(15, 48, 68, .2);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --radius-xs: .45em;
    --radius-sm: .7em;
    --radius: 1em;
    --radius-lg: 1.45em;
    --radius-xl: 2em;
    --header-height: 3.45em;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7em;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background: var(--page);
    font-family: 'Cairo-Regular', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

    body.menu-open {
        overflow: hidden;
    }

::selection {
    color: #fff;
    background: var(--blue);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    display: block;
}

.si-container {
    width: 100%;
    padding : 0 2em;
    margin-inline: auto;
}

main {
    position: relative;
    isolation: isolate;
}


/* =========================================================
   Shared buttons
========================================================= */

.button,
.primary-button,
.outline-button,
.nav-login,
.rental-search-button,
.plan-button,
.contact-primary,
.contact-secondary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.button {
    min-height: 3em;
    padding: 0 1.3em;
    border: .0625em solid transparent;
    border-radius: .72em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-size: .94em;
    font-weight: 700;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}

/*.primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #2d75b1);
    box-shadow: 0 .55em 1.3em rgba(44, 119, 177, .24);
}

    .primary-button:hover {
        color: #fff;
        transform: translateY(-.18em);
        box-shadow: 0 .8em 1.8em rgba(44, 119, 177, .3);
    }

    .primary-button:active {
        transform: translateY(0) scale(.98);
    }*/

.outline-button {
    color: var(--navy);
    border-color: var(--border-dark);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(.5em);
}

    .outline-button:hover {
        color: var(--blue-dark);
        border-color: var(--border-blue);
        background: #fff;
        transform: translateY(-.18em);
        box-shadow: var(--shadow-sm);
    }

.large-button {
    min-height: 3.3em;
    padding-inline: 1.55em;
    font-size: 1em;
}

.button i,
.nav-login i,
.rental-search-button i {
    transition: transform .35s var(--ease);
}

.nav-login i {
    white-space:nowrap;
}

.button:hover i.fa-arrow-left,
.primary-button:hover i.fa-arrow-left,
.plan-button:hover i.fa-arrow-left {
    transform: translateX(-.3em);
}


/* =========================================================
   Ripple
========================================================= */

.si-ripple {
    width: 1em;
    height: 1em;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) scale(0);
    animation: siRipple .65s ease-out forwards;
}


/* =========================================================
   Loader
========================================================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 42%, rgba(54, 127, 189, .12), transparent 24em), linear-gradient(145deg, #fff, #f1f7fa);
    transition: opacity .65s var(--ease), visibility .65s var(--ease);
}

    .page-loader::before {
        content: "";
        width: 22em;
        height: 22em;
        position: absolute;
        border: .0625em solid rgba(54, 127, 189, .12);
        border-radius: 50%;
        animation: loaderOrbit 5s linear infinite;
    }

    .page-loader::after {
        content: "";
        width: 16em;
        height: 16em;
        position: absolute;
        border: .0625em dashed rgba(54, 127, 189, .15);
        border-radius: 50%;
        animation: loaderOrbitReverse 8s linear infinite;
    }

    .page-loader.hide {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.loader-card {
    min-width: 15em;
    position: relative;
    z-index: 2;
    padding: 2em;
    border: .0625em solid rgba(255, 255, 255, .85);
    border-radius: 1.4em;
    text-align: center;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(1em);
}

.loader-icon {
    width: 4.2em;
    height: 4.2em;
    margin: 0 auto .9em;
    border-radius: 1.2em;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--navy-2));
    box-shadow: 0 .7em 1.7em rgba(13, 43, 61, .2);
    font-size: 1.15em;
    animation: loaderIcon 2s var(--ease) infinite;
}

.loader-card strong {
    display: block;
    color: var(--navy);
    font-size: 1.45em;
    font-weight: 800;
}

.loader-card > span,
.loader-card > small {
    display: block;
    margin-top: .3em;
    color: var(--text-2);
    font-size: .82em;
}

.loader-progress {
    height: .3em;
    margin-top: 1.15em;
    overflow: hidden;
    border-radius: 10em;
    background: #e2ebf0;
}

    .loader-progress i,
    .loader-progress span {
        width: 38%;
        height: 100%;
        display: block;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--blue), #63b6ee);
        box-shadow: 0 0 1em rgba(54, 127, 189, .4);
        animation: loaderProgress 1.15s var(--ease) infinite;
    }


/* =========================================================
   Top bar
========================================================= */

.top-bar {
    min-height: 2.45em;
    display: flex;
    align-items: center;
    color: #dbe8ef;
    background: linear-gradient(90deg, rgba(13, 43, 61, .98), rgba(21, 56, 77, .98)), var(--navy-dark);
}

.top-bar-inner {
    min-height: 2.45em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
}

.top-contact,
.top-links {
    display: flex;
    align-items: center;
}

.top-contact {
    gap: 1.5em;
}

.top-links {
    gap: 1.2em;
}

    .top-contact a,
    .top-contact > span,
    .top-links a {
        display: inline-flex;
        align-items: center;
        gap: .45em;
        font-size: .78em;
    }

.top-contact i {
    color: #75b9eb;
}

.top-links a {
    position: relative;
    color: #d6e3ea;
    transition: color .3s var(--ease);
}

    .top-links a::after {
        content: "";
        height: .08em;
        position: absolute;
        right: 50%;
        bottom: -.32em;
        left: 50%;
        background: #fff;
        transition: right .3s var(--ease), left .3s var(--ease);
    }

    .top-links a:hover {
        color: #fff;
    }

        .top-links a:hover::after {
            right: 0;
            left: 0;
        }


/* =========================================================
   Main header
========================================================= */

.main-header {
    min-height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1200;
    border-bottom: .0625em solid rgba(21, 56, 77, .07);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(1em) saturate(140%);
    transition: box-shadow .35s var(--ease), background .35s var(--ease), min-height .35s var(--ease);
}

    .main-header.is-scrolled {
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 .45em 1.8em rgba(13, 43, 61, .08);
    }

.navbar {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.65em;
}

.brand {
    min-width: 11.5em;
    display: flex;
    align-items: center;
    gap: .72em;
    transition: transform .35s var(--ease);
}

    .brand:hover {
        transform: translateY(-.08em);
    }

    .brand img {
        height: 3.15em;
        object-fit: contain;
    }

.brand-text {
    display: flex;
    flex-direction: column;
}

    .brand-text strong {
        color: var(--navy);
        font-size: 1.34em;
        line-height: 1.3;
        font-weight: 800;
    }

    .brand-text span {
        margin-top: .16em;
        color: var(--text-2);
        font-size: .73em;
    }

.main-menu {
    display: flex;
    align-items: center;
    gap: .18em;
}

    .main-menu a {
        min-height: var(--header-height);
        position: relative;
        padding: 0 .72em;
        display: flex;
        align-items: center;
        color: #496474;
        font-size: .92em;
        font-weight: 700;
        transition: color .3s var(--ease);
    }

        .main-menu a::before {
            content: "";
            height: 2.45em;
            position: absolute;
            z-index: -1;
            right: .25em;
            left: .25em;
            border-radius: .75em;
            background: var(--blue-soft);
            opacity: 0;
            transform: scale(.88);
            transition: opacity .3s var(--ease), transform .3s var(--ease);
        }

        .main-menu a:hover::before {
            opacity: 1;
            transform: scale(1);
        }

        .main-menu a:hover,
        .main-menu a.active {
            color: var(--blue-dark);
        }

            .main-menu a.active::after {
                content: "";
                height: .18em;
                position: absolute;
                right: .72em;
                bottom: 0;
                left: .72em;
                border-radius: .5em .5em 0 0;
                background: linear-gradient(90deg, var(--blue), #69b6e7);
                box-shadow: 0 0 .9em rgba(54, 127, 189, .4);
            }

.nav-actions {
    display: flex;
    align-items: center;
    gap: .55em;
}

.nav-login, .primary-button {
    min-height: 2.8em;
    padding: 0 1em;
    border-radius: .7em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--navy);
    font-size: .9em;
    font-weight: 700;
    transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}

    .nav-login:hover, .primary-button:hover {
        color: var(--blue-dark);
        background: var(--blue-soft);
        transform: translateY(-.1em);
    }

.menu-button {
    width: 2.85em;
    height: 2.85em;
    padding: .65em;
    border: 0;
    border-radius: .75em;
    display: none;
    background: var(--blue-soft);
    transition: background .3s var(--ease), transform .3s var(--ease);
}

    .menu-button:hover {
        background: #dbeef9;
    }

    .menu-button span {
        width: 100%;
        height: .14em;
        margin: .3em 0;
        border-radius: 10em;
        display: block;
        background: var(--navy);
        transform-origin: center;
        transition: transform .35s var(--ease), opacity .25s var(--ease);
    }

    .menu-button.is-active span:nth-child(1) {
        transform: translateY(.44em) rotate(45deg);
    }

    .menu-button.is-active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(.2);
    }

    .menu-button.is-active span:nth-child(3) {
        transform: translateY(-.44em) rotate(-45deg);
    }


/* =========================================================
   Rental search bar
========================================================= */

.rental-search-bar {
    position: relative;
    z-index: 150;
    padding: .72em 0;
    color: #fff;
    background: linear-gradient(110deg, rgba(13, 43, 61, .98), rgba(28, 73, 101, .98)), var(--navy);
    box-shadow: 0 .4em 1.6em rgba(13, 43, 61, .16);
    display:none;
}

    .rental-search-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .12;
        background: radial-gradient(circle at 10% 50%, #fff 0, transparent 16em), radial-gradient(circle at 90% 0, #4ba4dc 0, transparent 18em);
    }

.rental-search-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.25em;
}

.rental-search-title {
    min-width: 10em;
    display: flex;
    align-items: center;
    gap: .7em;
    color: #fff;
}

.rental-search-title-icon {
    width: 2.8em;
    height: 2.8em;
    flex: none;
    border: .0625em solid rgba(255, 255, 255, .12);
    border-radius: .8em;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 .0625em rgba(255, 255, 255, .15);
}

.rental-search-title strong,
.rental-search-title small {
    display: block;
}

.rental-search-title strong {
    font-size: 1em;
    font-weight: 800;
}

.rental-search-title small {
    margin-top: .15em;
    color: #bcd7e6;
    font-size: .72em;
}

.rental-search-fields {
    flex: 1;
    min-width: 0;
    padding: .4em;
    border: .0625em solid rgba(255, 255, 255, .09);
    border-radius: .95em;
    display: grid;
    grid-template-columns: 1.3fr .9fr 2em .9fr auto;
    align-items: center;
    gap: .4em;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(.6em);
}

.rental-search-field {
    min-width: 0;
    min-height: 3.45em;
    position: relative;
    padding: .42em .75em;
    border: .0625em solid transparent;
    border-radius: .7em;
    background: #fff;
    box-shadow: 0 .18em .7em rgba(13, 43, 61, .06);
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

    .rental-search-field:hover {
        transform: translateY(-.06em);
    }

    .rental-search-field:focus-within {
        border-color: #7ebee7;
        box-shadow: 0 0 0 .18em rgba(86, 166, 223, .16), 0 .45em 1.2em rgba(13, 43, 61, .11);
    }

    .rental-search-field.is-invalid {
        border-color: var(--red);
        animation: inputShake .42s var(--ease);
    }

    .rental-search-field label {
        display: block;
        margin-bottom: .06em;
        color: #758995;
        font-size: .68em;
        font-weight: 700;
    }

.rental-input {
    min-height: 1.9em;
    display: flex;
    align-items: center;
    gap: .5em;
}

    .rental-input > i {
        width: 1.1em;
        color: var(--blue);
        text-align: center;
        font-size: .9em;
        transition: transform .3s var(--ease), color .3s var(--ease);
    }

.rental-search-field:focus-within .rental-input > i {
    color: var(--blue-dark);
    transform: scale(1.12);
}

.rental-input input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--navy);
    background: transparent;
    font-size: .82em;
    font-weight: 700;
}

    .rental-input input::placeholder {
        color: #9aaab3;
        font-weight: 400;
    }

.rental-search-arrow {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #a9cfe5;
    background: rgba(255, 255, 255, .08);
    font-size: .72em;
    animation: searchArrow 2s var(--ease) infinite;
}

.rental-search-button {
    min-width: 8.7em;
    min-height: 3.45em;
    padding: 0 1.15em;
    border: 0;
    border-radius: .72em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    color: #fff;
    background: linear-gradient(135deg, #468fd0, #2c74b2);
    box-shadow: 0 .45em 1.15em rgba(4, 34, 55, .25);
    font-size: .82em;
    font-weight: 800;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}

    .rental-search-button:hover {
        filter: brightness(1.08);
        transform: translateY(-.12em);
        box-shadow: 0 .7em 1.6em rgba(4, 34, 55, .3);
    }

    .rental-search-button:active {
        transform: scale(.98);
    }

.rental-location-list,
.markit-loc-list {
    max-height: 17em;
    position: absolute;
    top: calc(100% + .45em);
    right: 0;
    left: 0;
    z-index: 1800;
    overflow-y: auto;
    border: .0625em solid var(--border);
    border-radius: .8em;
    background: #fff;
    box-shadow: var(--shadow-lg);
}


/* Legacy rental bar */

.rental-market-bar {
    position: relative;
    z-index: 100;
    color: #fff;
    background: linear-gradient(100deg, var(--navy-dark), var(--navy-2));
}

.rental-market-inner {
    min-height: 4em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2em;
}

.rental-market-content {
    display: flex;
    align-items: center;
    gap: .8em;
}

.rental-market-icon {
    width: 2.6em;
    height: 2.6em;
    flex: none;
    border-radius: .75em;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .11);
}

.rental-market-content strong,
.rental-market-content span {
    display: block;
}

.rental-market-content strong {
    font-size: .95em;
}

.rental-market-content div > span {
    margin-top: .12em;
    color: #c1d9e6;
    font-size: .75em;
}

.rental-market-button {
    min-height: 2.55em;
    padding: 0 1em;
    border: .0625em solid rgba(255, 255, 255, .24);
    border-radius: .7em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: .8em;
    font-weight: 700;
    transition: .3s var(--ease);
}

    .rental-market-button:hover {
        border-color: transparent;
        background: var(--blue);
        transform: translateY(-.1em);
    }


/* =========================================================
   Hero
========================================================= */

.hero-section {
    min-height: 36em;
    position: relative;
    overflow: hidden;
    padding: 2.7em 0 5.3em;
    background: radial-gradient(circle at 12% 16%, rgba(70, 143, 202, .14), transparent 18em), radial-gradient(circle at 90% 80%, rgba(21, 56, 77, .08), transparent 22em), linear-gradient(135deg, #fff 0%, #f5faff 54%, #edf6fb 100%);
}

    .hero-section::after {
        content: "";
        width: 32em;
        height: 32em;
        position: absolute;
        left: -18em;
        bottom: -20em;
        border: 3em solid rgba(54, 127, 189, .025);
        border-radius: 50%;
    }

.hero-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-decoration-one {
    width: 25em;
    height: 25em;
    top: -13em;
    right: -6em;
    border: .0625em solid rgba(54, 127, 189, .05);
    background: rgba(54, 127, 189, .055);
    animation: heroOrb 10s ease-in-out infinite alternate;
}

.hero-decoration-two {
    width: 20em;
    height: 20em;
    left: -8em;
    bottom: -11em;
    background: rgba(21, 56, 77, .04);
    animation: heroOrb 13s ease-in-out infinite alternate-reverse;
}

.hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    align-items: center;
    gap: 3.2em;
}

.hero-content {
    position: relative;
    z-index: 5;
}

.hero-badge {
    width: fit-content;
    margin-bottom: 1.1em;
    padding: .48em .82em;
    border: .0625em solid #bddaf0;
    border-radius: 10em;
    display: flex;
    align-items: center;
    gap: .5em;
    color: var(--blue-dark);
    background: rgba(234, 245, 252, .88);
    box-shadow: inset 0 .0625em rgba(255, 255, 255, .8);
    backdrop-filter: blur(.5em);
    font-size: .86em;
    font-weight: 700;
}

    .hero-badge > span {
        width: 2em;
        height: 2em;
        border-radius: .62em;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, var(--blue), #65b1e5);
        box-shadow: 0 .35em .8em rgba(54, 127, 189, .24);
    }

.hero-content h1 {
    max-width: 11em;
    margin: 0;
    color: var(--navy);
    font-size: clamp(2.7em, 4.5vw, 4.45em);
    line-height: 1.23;
    letter-spacing: -.035em;
    font-weight: 800;
}

    .hero-content h1 span {
        display: block;
        color: var(--blue);
        text-shadow: 0 .15em .7em rgba(54, 127, 189, .09);
    }

.hero-description {
    max-width: 35em;
    margin: 1.25em 0 1.55em;
    color: var(--text-2);
    font-size: 1.02em;
    line-height: 2;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65em;
}

.hero-benefits {
    margin-top: 1.35em;
    display: flex;
    flex-wrap: wrap;
    gap: 1.15em;
}

    .hero-benefits div {
        display: flex;
        align-items: center;
        gap: .42em;
        color: #4b6675;
        font-size: .84em;
        font-weight: 700;
    }

    .hero-benefits i {
        color: var(--green);
        filter: drop-shadow(0 .12em .3em rgba(18, 169, 87, .18));
    }


/* =========================================================
   Dashboard preview
========================================================= */

.dashboard-visual {
    min-height: 27em;
    position: relative;
    display: flex;
    align-items: center;
    perspective: 70em;
}

.dashboard-glow {
    width: 25em;
    height: 25em;
    position: absolute;
    right: 50%;
    top: 50%;
    border-radius: 50%;
    background: rgba(54, 127, 189, .17);
    filter: blur(2.2em);
    transform: translate(50%, -50%);
    animation: dashboardGlow 5s ease-in-out infinite alternate;
}

.dashboard-window {
    --rx: 0deg;
    --ry: 0deg;
    width: 100%;
    position: relative;
    z-index: 3;
    overflow: hidden;
    border: .0625em solid #bfd9e8;
    border-radius: 1.25em;
    background: #fff;
    box-shadow: 0 2em 4em rgba(15, 48, 68, .2), 0 .3em 1em rgba(15, 48, 68, .08);
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .4s var(--ease);
    will-change: transform;
}

.dashboard-visual:hover .dashboard-window {
    box-shadow: 0 2.5em 5em rgba(15, 48, 68, .24), 0 .5em 1.5em rgba(15, 48, 68, .1);
}

.dashboard-head {
    min-height: 3.55em;
    padding: 0 1em;
    border-bottom: .0625em solid #dde8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .96);
}

.dash-title {
    display: flex;
    align-items: center;
    gap: .62em;
}

.dash-logo {
    width: 2.3em;
    height: 2.3em;
    border-radius: .65em;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--navy-2));
    box-shadow: 0 .35em .8em rgba(21, 56, 77, .2);
}

.dash-title strong,
.dash-title small {
    display: block;
}

.dash-title strong {
    color: var(--navy);
    font-size: .86em;
}

.dash-title small {
    margin-top: .12em;
    color: var(--muted);
    font-size: .65em;
}

.dash-tools {
    display: flex;
    gap: .4em;
}

    .dash-tools span {
        width: 2em;
        height: 2em;
        border-radius: .58em;
        display: grid;
        place-items: center;
        color: #fff;
        background: var(--navy);
        font-size: .82em;
        transition: transform .3s var(--ease), background .3s var(--ease);
    }

        .dash-tools span:hover {
            background: var(--blue);
            transform: translateY(-.12em) rotate(-4deg);
        }

.dashboard-layout {
    min-height: 20em;
    display: grid;
    grid-template-columns: 8em 1fr;
}

.dashboard-side {
    padding: .8em .5em;
    border-left: .0625em solid #d8e5eb;
    display: flex;
    flex-direction: column;
    gap: .3em;
    background: linear-gradient(180deg, #fcfeff, #f7fafc);
}

.dash-side-title {
    padding: .25em .5em .7em;
    color: var(--navy);
    font-size: .78em;
    font-weight: 800;
}

.dashboard-side span {
    min-height: 2.45em;
    padding: 0 .62em;
    border: .0625em solid #b6d4e5;
    border-radius: .7em;
    display: flex;
    align-items: center;
    gap: .5em;
    color: #365e77;
    background: #fff;
    font-size: .68em;
    font-weight: 700;
    transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

    .dashboard-side span:hover {
        color: var(--blue-dark);
        border-color: var(--border-blue);
        transform: translateX(-.18em);
    }

    .dashboard-side span.active {
        color: #fff;
        border-color: var(--navy);
        background: linear-gradient(135deg, var(--navy), var(--navy-2));
        box-shadow: 0 .25em .7em rgba(21, 56, 77, .15);
    }

.dashboard-side i {
    width: 1em;
    font-size: 1em;
}

.dashboard-body {
    padding: .85em;
    background: linear-gradient(rgba(247, 250, 252, .92), rgba(247, 250, 252, .92)), radial-gradient(circle at 50% 0, #dff2fb, transparent 15em);
}

.dashboard-welcome {
    margin-bottom: .7em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dashboard-welcome small,
    .dashboard-welcome strong {
        display: block;
    }

    .dashboard-welcome small {
        margin-bottom: .12em;
        color: var(--muted);
        font-size: .62em;
    }

    .dashboard-welcome strong {
        color: var(--navy);
        font-size: .78em;
    }

    .dashboard-welcome > span {
        width: 2em;
        height: 2em;
        border-radius: .6em;
        display: grid;
        place-items: center;
        color: var(--blue);
        background: var(--blue-soft);
    }

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .48em;
}

.dash-stat {
    min-height: 4.4em;
    position: relative;
    overflow: hidden;
    padding: .55em;
    border: .0625em solid #dfe8ed;
    border-radius: .7em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

    .dash-stat::after {
        content: "";
        width: 4em;
        height: 4em;
        position: absolute;
        top: -2em;
        left: -2em;
        border-radius: 50%;
        background: rgba(54, 127, 189, .04);
    }

    .dash-stat:hover {
        transform: translateY(-.18em);
        box-shadow: var(--shadow-sm);
    }

.stat-icon {
    width: 1.75em;
    height: 1.75em;
    margin-bottom: .24em;
    border-radius: .55em;
    display: grid;
    place-items: center;
    font-size: .72em;
}

.blue {
    color: var(--blue);
    background: var(--blue-soft);
}

.green {
    color: var(--green);
    background: var(--green-soft);
}

.orange {
    color: var(--orange);
    background: var(--orange-soft);
}

.red {
    color: var(--red);
    background: var(--red-soft);
}

.dash-stat small {
    display: block;
    color: var(--text-2);
    font-size: .58em;
}

.dash-stat strong {
    display: block;
    margin-top: .12em;
    color: var(--navy);
    font-size: 1.08em;
    font-weight: 800;
}

.dashboard-panels {
    margin-top: .55em;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: .55em;
}

.dash-chart-card,
.dash-contracts {
    padding: .7em;
    border: .0625em solid #dde8ed;
    border-radius: .78em;
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.dash-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dash-card-title strong,
    .dash-card-title small {
        display: block;
    }

    .dash-card-title strong {
        color: var(--navy);
        font-size: .68em;
    }

    .dash-card-title small {
        margin-top: .08em;
        color: var(--muted);
        font-size: .53em;
    }

    .dash-card-title > i {
        color: var(--blue);
    }

.dash-donut {
    width: 6em;
    height: 6em;
    margin: .8em auto .5em;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--green) 0 64%, var(--blue) 64% 82%, var(--orange) 82% 100%);
    animation: donutIn 1.2s var(--ease) both;
}

    .dash-donut::before {
        content: "";
        width: 3.55em;
        height: 3.55em;
        position: absolute;
        border-radius: 50%;
        background: #fff;
        box-shadow: inset 0 0 .5em rgba(15, 48, 68, .04);
    }

.dash-donut-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .dash-donut-inner strong,
    .dash-donut-inner span {
        display: block;
    }

    .dash-donut-inner strong {
        color: var(--navy);
        font-size: 1em;
    }

    .dash-donut-inner span {
        color: var(--muted);
        font-size: .52em;
    }

.dash-legend {
    display: flex;
    justify-content: center;
    gap: .5em;
    color: var(--text-2);
    font-size: .52em;
}

    .dash-legend span {
        display: flex;
        align-items: center;
        gap: .25em;
    }

    .dash-legend i {
        width: .48em;
        height: .48em;
        border-radius: .15em;
    }

.green-dot {
    background: var(--green);
}

.blue-dot {
    background: var(--blue);
}

.orange-dot {
    background: var(--orange);
}

.contract-row {
    padding: .52em 0;
    border-bottom: .0625em solid #edf2f4;
    display: grid;
    grid-template-columns: 1.85em 1fr auto;
    align-items: center;
    gap: .45em;
    transition: padding .25s var(--ease), background .25s var(--ease);
}

    .contract-row:hover {
        padding-inline: .35em;
        background: #f8fbfd;
    }

    .contract-row:last-child {
        border-bottom: 0;
    }

.contract-car {
    width: 1.85em;
    height: 1.85em;
    border-radius: .52em;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: var(--blue-soft);
}

.contract-row strong,
.contract-row small {
    display: block;
}

.contract-row strong {
    color: var(--navy);
    font-size: .58em;
}

.contract-row small {
    margin-top: .08em;
    color: var(--muted);
    font-size: .5em;
}

.contract-row b {
    padding: .22em .42em;
    border-radius: .4em;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: .5em;
}

.floating-card {
    min-width: 10.5em;
    position: absolute;
    z-index: 8;
    padding: .65em;
    border: .0625em solid rgba(215, 229, 236, .9);
    border-radius: .85em;
    display: flex;
    align-items: center;
    gap: .55em;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(.8em);
    animation: floatingCard 4s ease-in-out infinite;
}

.floating-card-one {
    right: -1.45em;
    bottom: 2em;
}

.floating-card-two {
    top: 2.2em;
    left: -1.5em;
    animation-delay: -1.8s;
}

.float-icon {
    width: 2.25em;
    height: 2.25em;
    border-radius: .65em;
    display: grid;
    place-items: center;
}

.floating-card small,
.floating-card strong {
    display: block;
}

.floating-card small {
    color: var(--muted);
    font-size: .6em;
}

.floating-card strong {
    margin-top: .08em;
    color: var(--navy);
    font-size: .68em;
}


/* =========================================================
   Quick strip
========================================================= */

.quick-strip {
    position: relative;
    z-index: 20;
    padding: 0 0 1.3em;
    background: #fff;
}

.quick-grid {
    min-height: 6em;
    margin-top: -3em;
    padding: 1.05em;
    border: .0625em solid var(--border);
    border-radius: 1.15em;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(.8em);
}

.quick-item {
    position: relative;
    padding: .45em 1.2em;
    border-left: .0625em solid #e3ebef;
    display: flex;
    align-items: center;
    gap: .8em;
    transition: background .3s var(--ease), transform .3s var(--ease);
}

    .quick-item:hover {
        background: #f8fbfd;
        transform: translateY(-.12em);
    }

    .quick-item:last-child {
        border-left: 0;
    }

.quick-icon {
    width: 3em;
    height: 3em;
    flex: none;
    border-radius: .88em;
    display: grid;
    place-items: center;
    font-size: 1em;
    transition: transform .4s var(--ease-bounce);
}

.quick-item:hover .quick-icon {
    transform: translateY(-.15em) rotate(-5deg) scale(1.08);
}

.quick-item strong,
.quick-item small {
    display: block;
}

.quick-item strong {
    color: var(--navy);
    font-size: .96em;
}

.quick-item small {
    margin-top: .14em;
    color: var(--text-2);
    font-size: .7em;
}


/* =========================================================
   Sections
========================================================= */

.section {
    position: relative;
    padding: 5.4em 0;
}

.section-heading {
    max-width: 42em;
    margin: 0 auto 2.9em;
    text-align: center;
}

.section-label {
    width: fit-content;
    margin: 0 auto .55em;
    padding: .3em .7em;
    border-radius: 10em;
    display: block;
    color: var(--blue-dark);
    background: var(--blue-soft);
    font-size: .8em;
    font-weight: 800;
}

.section-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2em, 3.1vw, 3em);
    line-height: 1.45;
    letter-spacing: -.025em;
    font-weight: 800;
}

    .section-heading h2 span {
        color: var(--blue);
    }

.section-heading p {
    max-width: 38em;
    margin: .8em auto 0;
    color: var(--text-2);
    font-size: .94em;
    line-height: 2;
}


/* =========================================================
   Interactive card common
========================================================= */

.feature-card,
.system-card,
.workflow-card,
.plan-card {
    --mx: 50%;
    --my: 50%;
}

    .feature-card::before,
    .system-card::before,
    .workflow-card::before,
    .plan-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(circle at var(--mx) var(--my), rgba(74, 150, 205, .12), transparent 11em);
        transition: opacity .35s var(--ease);
    }

    .feature-card:hover::before,
    .system-card:hover::before,
    .workflow-card:hover::before,
    .plan-card:hover::before {
        opacity: 1;
    }

    .feature-card > *,
    .system-card > *,
    .workflow-card > *,
    .plan-card > * {
        position: relative;
        z-index: 1;
    }


/* =========================================================
   Features
========================================================= */

.features-section {
    overflow: hidden;
    background: #fff;
}

    .features-section::before {
        content: "";
        width: 24em;
        height: 24em;
        position: absolute;
        top: 3em;
        right: -16em;
        border-radius: 50%;
        background: rgba(54, 127, 189, .035);
    }

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1em;
}

.feature-card {
    min-height: 13.5em;
    position: relative;
    overflow: hidden;
    padding: 1.5em;
    border: .0625em solid var(--border);
    border-radius: 1.15em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

    .feature-card:hover {
        border-color: #acd0e5;
        transform: translateY(-.42em);
        box-shadow: var(--shadow-md);
    }

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-icon {
    width: 3.35em;
    height: 3.35em;
    border-radius: .95em;
    display: grid;
    place-items: center;
    font-size: 1em;
    transition: transform .4s var(--ease-bounce), box-shadow .4s var(--ease);
}

.feature-card:hover .feature-icon {
    transform: translateY(-.2em) rotate(-6deg) scale(1.08);
    box-shadow: 0 .6em 1.25em rgba(15, 48, 68, .08);
}

.feature-number {
    color: #d5e0e6;
    font-size: 1.85em;
    font-weight: 900;
    transition: color .35s var(--ease);
}

.feature-card:hover .feature-number {
    color: #b8cfdd;
}

.feature-card h3 {
    margin: 1.15em 0 .5em;
    color: var(--navy);
    font-size: 1.12em;
}

.feature-card p {
    margin: 0;
    color: var(--text-2);
    font-size: .82em;
    line-height: 2;
}

.feature-line {
    width: 3em;
    height: .2em;
    position: absolute;
    right: 1.5em;
    bottom: 0;
    border-radius: .5em .5em 0 0;
    background: linear-gradient(90deg, var(--blue), #6bb5e5);
    transition: width .45s var(--ease);
}

.feature-card:hover .feature-line {
    width: calc(100% - 3em);
}


/* =========================================================
   Systems
========================================================= */

.systems-section {
    overflow: hidden;
    background: linear-gradient(rgba(240, 246, 249, .94), rgba(240, 246, 249, .94)), radial-gradient(circle at 90% 10%, #cae8f8, transparent 22em);
}

.systems-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
}

.system-card {
    min-height: 13em;
    position: relative;
    overflow: hidden;
    padding: 1.4em;
    border: .0625em solid #d7e4ea;
    border-radius: 1.1em;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--shadow-xs);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

    .system-card:hover {
        border-color: #98c5e0;
        transform: translateY(-.4em);
        box-shadow: var(--shadow-md);
    }

.system-icon {
    width: 3.4em;
    height: 3.4em;
    border-radius: .95em;
    display: grid;
    place-items: center;
    font-size: 1em;
    transition: transform .42s var(--ease-bounce);
}

.system-card:hover .system-icon {
    transform: translateY(-.18em) rotate(-5deg) scale(1.08);
}

.system-card h3 {
    margin: 1em 0 .48em;
    color: var(--navy);
    font-size: 1.1em;
}

.system-card p {
    margin: 0;
    color: var(--text-2);
    font-size: .8em;
    line-height: 1.95;
}

.system-arrow {
    position: absolute;
    left: 1.35em;
    bottom: 1.15em;
    color: var(--blue);
    font-size: .9em;
    transition: transform .35s var(--ease);
}

.system-card:hover .system-arrow {
    transform: translateX(-.45em);
}


/* =========================================================
   Showcase
========================================================= */

.dashboard-section {
    overflow: hidden;
    background: #fff;
}

.showcase-panel {
    min-height: 31em;
    position: relative;
    overflow: hidden;
    border-radius: 1.65em;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    background: radial-gradient(circle at 10% 10%, rgba(89, 170, 223, .2), transparent 17em), linear-gradient(135deg, var(--navy-dark), #175276);
    box-shadow: var(--shadow-xl);
}

    .showcase-panel::after {
        content: "";
        width: 22em;
        height: 22em;
        position: absolute;
        right: -13em;
        bottom: -13em;
        border: 2.5em solid rgba(255, 255, 255, .025);
        border-radius: 50%;
    }

.showcase-content {
    position: relative;
    z-index: 3;
    padding: 3.5em 3em;
    color: #fff;
}

.light-label {
    margin-inline: 0;
    color: #a5dcff;
    background: rgba(255, 255, 255, .08);
}

.showcase-content h2 {
    margin: .55em 0 .7em;
    color: #fff;
    font-size: 2.25em;
    line-height: 1.55;
}

.showcase-content > p {
    color: #c5d9e4;
    font-size: .9em;
    line-height: 2;
}

.showcase-points {
    margin: 1.4em 0 1.7em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8em;
}

    .showcase-points span {
        display: flex;
        align-items: center;
        gap: .5em;
        color: #eaf4f8;
        font-size: .8em;
    }

    .showcase-points i {
        color: #71c3f4;
    }

.showcase-button {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #4b9ed7);
}

.showcase-screen {
    margin: 3em 2.5em 3em 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
    border: .36em solid rgba(255, 255, 255, .13);
    border-radius: 1.15em;
    background: #f8fafc;
    box-shadow: 0 1.6em 3.4em rgba(0, 0, 0, .25);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.showcase-panel:hover .showcase-screen {
    transform: translateY(-.25em);
    box-shadow: 0 2em 4em rgba(0, 0, 0, .3);
}

.showcase-browser {
    height: 2.2em;
    padding: 0 .75em;
    display: flex;
    align-items: center;
    gap: .35em;
    background: #e9eff3;
}

    .showcase-browser span {
        width: .48em;
        height: .48em;
        border-radius: 50%;
        background: #b5c3cb;
    }

        .showcase-browser span:nth-child(1) {
            background: #e66a6a;
        }

        .showcase-browser span:nth-child(2) {
            background: #eab451;
        }

        .showcase-browser span:nth-child(3) {
            background: #59b97d;
        }

.showcase-header {
    min-height: 3.2em;
    padding: 0 1.1em;
    border-bottom: .0625em solid #dce7ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

    .showcase-header strong {
        color: var(--navy);
        font-size: .82em;
    }

    .showcase-header span {
        color: var(--text-2);
        font-size: .68em;
    }

.showcase-stat-grid {
    padding: .95em;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55em;
}

    .showcase-stat-grid > div {
        min-height: 5em;
        padding: .7em;
        border: .0625em solid #dfe8ed;
        border-radius: .7em;
        background: #fff;
        box-shadow: var(--shadow-xs);
        transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }

        .showcase-stat-grid > div:hover {
            transform: translateY(-.18em);
            box-shadow: var(--shadow-sm);
        }

    .showcase-stat-grid i {
        color: var(--blue);
    }

    .showcase-stat-grid small,
    .showcase-stat-grid strong {
        display: block;
    }

    .showcase-stat-grid small {
        margin-top: .42em;
        color: var(--text-2);
        font-size: .58em;
    }

    .showcase-stat-grid strong {
        margin-top: .15em;
        color: var(--navy);
        font-size: 1.18em;
    }

.showcase-bottom {
    padding: 0 .95em .95em;
    display: grid;
    grid-template-columns: 1.5fr .7fr;
    gap: .65em;
}

.showcase-chart,
.showcase-donut {
    min-height: 11.5em;
    padding: .95em;
    border: .0625em solid #dfe8ed;
    border-radius: .75em;
    background: #fff;
}

.chart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .chart-title strong {
        color: var(--navy);
        font-size: .72em;
    }

    .chart-title i {
        color: var(--blue);
    }

.bars {
    height: 8em;
    padding-top: 1.2em;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: .42em;
}

    .bars i {
        width: 11%;
        height: 0;
        border-radius: .3em .3em 0 0;
        background: linear-gradient(#65b3e8, #327bc0);
        box-shadow: 0 -.2em .7em rgba(54, 127, 189, .11);
        transition: height 1.1s var(--ease);
    }

    .bars.is-animated i {
        height: var(--height);
    }

.showcase-donut > strong {
    color: var(--navy);
    font-size: .72em;
}

.large-donut {
    width: 7.5em;
    height: 7.5em;
    margin: 1em auto 0;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--green) 0 64%, var(--blue) 64% 83%, var(--orange) 83% 100%);
    transform: rotate(-90deg) scale(.75);
    opacity: 0;
    transition: opacity .8s var(--ease), transform 1s var(--ease-bounce);
}

    .large-donut.is-animated {
        opacity: 1;
        transform: rotate(0) scale(1);
    }

    .large-donut::before {
        content: "";
        width: 4.55em;
        height: 4.55em;
        position: absolute;
        border-radius: 50%;
        background: #fff;
    }

    .large-donut span {
        position: relative;
        z-index: 2;
        color: var(--navy);
        text-align: center;
        font-size: 1.2em;
        font-weight: 800;
    }

    .large-donut small {
        display: block;
        color: var(--muted);
        font-size: .48em;
    }


/* =========================================================
   Workflow
========================================================= */

.workflow-section {
    overflow: hidden;
    background: var(--page-2);
}

.workflow-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1em;
}

    .workflow-grid::before {
        content: "";
        height: .0625em;
        position: absolute;
        top: 2.9em;
        right: 8%;
        left: 8%;
        z-index: 0;
        background: linear-gradient(90deg, transparent, #b9d7e8 10%, #b9d7e8 90%, transparent);
    }

.workflow-card {
    min-height: 12.5em;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 1.4em;
    border: .0625em solid #d7e4ea;
    border-radius: 1.1em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

    .workflow-card:hover {
        transform: translateY(-.4em);
        box-shadow: var(--shadow-md);
    }

.workflow-number {
    position: absolute;
    top: 1.1em;
    left: 1.15em;
    color: #d2dee5;
    font-size: 1.8em;
    font-weight: 900;
}

.workflow-icon {
    width: 3.3em;
    height: 3.3em;
    border-radius: .95em;
    display: grid;
    place-items: center;
    font-size: 1em;
    transition: transform .4s var(--ease-bounce);
}

.workflow-card:hover .workflow-icon {
    transform: scale(1.1) rotate(-5deg);
}

.workflow-card h3 {
    margin: 1.15em 0 .48em;
    color: var(--navy);
    font-size: 1.08em;
}

.workflow-card p {
    margin: 0;
    color: var(--text-2);
    font-size: .8em;
    line-height: 1.95;
}


/* =========================================================
   Plans
========================================================= */

.plans-section {
    background: #fff;
}

.plans-grid {
    max-width: 59em;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15em;
    align-items: stretch;
}

.plan-card {
    min-height: 26em;
    position: relative;
    overflow: hidden;
    padding: 1.7em;
    border: .0625em solid #d8e5eb;
    border-radius: 1.25em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

    .plan-card:hover {
        transform: translateY(-.45em);
        box-shadow: var(--shadow-lg);
    }

    .plan-card.featured {
        border: .12em solid var(--blue);
        box-shadow: 0 1em 2.7em rgba(54, 127, 189, .15);
        transform: translateY(-.3em);
    }

        .plan-card.featured:hover {
            transform: translateY(-.7em);
        }

.popular-badge {
    position: absolute;
    top: 0;
    right: 50%;
    padding: .42em .9em;
    border-radius: 0 0 .75em .75em;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #4b9dd6);
    box-shadow: 0 .35em .9em rgba(54, 127, 189, .17);
    font-size: .7em;
    font-weight: 700;
    transform: translateX(50%);
}

.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-icon {
    width: 3.2em;
    height: 3.2em;
    border-radius: .9em;
    display: grid;
    place-items: center;
    font-size: 1em;
}

.plan-name {
    padding: .38em .7em;
    border-radius: .55em;
    color: var(--navy);
    background: #eef4f7;
    font-size: .72em;
    font-weight: 700;
}

.plan-card h3 {
    margin: 1.15em 0 .45em;
    color: var(--navy);
    font-size: 1.3em;
}

.plan-card > p {
    min-height: 3em;
    margin: 0;
    color: var(--text-2);
    font-size: .8em;
    line-height: 1.9;
}

.plan-price {
    margin: 1.25em 0;
    padding: 1em 0;
    border-top: .0625em solid #e3eaee;
    border-bottom: .0625em solid #e3eaee;
}

    .plan-price strong,
    .plan-price span {
        display: block;
    }

    .plan-price strong {
        color: var(--navy);
        font-size: 1.45em;
    }

    .plan-price span {
        margin-top: .2em;
        color: var(--muted);
        font-size: .68em;
    }

.plan-card ul {
    min-height: 7.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-card li {
    margin-bottom: .62em;
    display: flex;
    align-items: center;
    gap: .5em;
    color: var(--text-2);
    font-size: .8em;
}

    .plan-card li i {
        color: var(--green);
    }

.plan-button {
    min-height: 2.8em;
    margin-top: 1em;
    border: .0625em solid #a7c9dd;
    border-radius: .72em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    background: #fff;
    font-size: .8em;
    font-weight: 700;
    transition: .3s var(--ease);
}

    .plan-button:hover,
    .featured-button {
        color: #fff;
        border-color: var(--blue);
        background: linear-gradient(135deg, var(--blue), var(--blue-dark));
        box-shadow: 0 .5em 1.1em rgba(54, 127, 189, .19);
    }


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

.faq-section {
    background: var(--page-2);
}

.faq-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 4em;
}

.faq-info h2 {
    margin: .4em 0 .7em;
    color: var(--navy);
    font-size: 2.25em;
    line-height: 1.5;
}

    .faq-info h2 span {
        color: var(--blue);
    }

.faq-info > p {
    max-width: 24em;
    color: var(--text-2);
    font-size: .85em;
    line-height: 2;
}

.faq-info > a {
    max-width: 20em;
    margin-top: 1.5em;
    padding: .8em;
    border: .0625em solid #d4e2e9;
    border-radius: .85em;
    display: flex;
    align-items: center;
    gap: .72em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

    .faq-info > a:hover {
        transform: translateY(-.2em);
        box-shadow: var(--shadow-sm);
    }

    .faq-info > a > span {
        width: 2.7em;
        height: 2.7em;
        border-radius: .75em;
        display: grid;
        place-items: center;
        color: var(--blue);
        background: var(--blue-soft);
    }

    .faq-info > a div {
        flex: 1;
    }

    .faq-info > a small,
    .faq-info > a strong {
        display: block;
    }

    .faq-info > a small {
        color: var(--muted);
        font-size: .62em;
    }

    .faq-info > a strong {
        margin-top: .1em;
        color: var(--navy);
        font-size: .82em;
    }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .58em;
}

.faq-item {
    overflow: hidden;
    border: .0625em solid #d6e3e9;
    border-radius: .9em;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

    .faq-item:hover {
        border-color: #b4d0df;
    }

    .faq-item.active {
        border-color: #a9cce0;
        box-shadow: var(--shadow-sm);
        transform: translateY(-.08em);
    }

.faq-button {
    width: 100%;
    min-height: 3.7em;
    padding: 0 1.1em;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    color: var(--navy);
    background: #fff;
    text-align: right;
    font-size: .84em;
    font-weight: 700;
}

    .faq-button i {
        width: 2em;
        height: 2em;
        flex: none;
        border-radius: .55em;
        display: grid;
        place-items: center;
        color: var(--blue);
        background: var(--blue-soft);
        transition: transform .4s var(--ease), color .3s var(--ease), background .3s var(--ease);
    }

.faq-item.active .faq-button i {
    color: #fff;
    background: var(--blue);
    transform: rotate(45deg);
}

.faq-answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .42s var(--ease), opacity .3s var(--ease);
}

.faq-item.active .faq-answer {
    opacity: 1;
}

.faq-answer p {
    margin: 0;
    padding: 0 1.1em 1.2em;
    color: var(--text-2);
    font-size: .8em;
    line-height: 2;
}


/* =========================================================
   Contact
========================================================= */

.contact-section {
    padding: 1.6em 0 5.5em;
    background: #fff;
}

.contact-panel {
    min-height: 14em;
    position: relative;
    overflow: hidden;
    border-radius: 1.55em;
    color: #fff;
    background: radial-gradient(circle at 10% 0, rgba(101, 181, 233, .22), transparent 17em), linear-gradient(110deg, var(--navy-dark), #155477);
    box-shadow: var(--shadow-xl);
}

.contact-pattern {
    width: 24em;
    height: 24em;
    position: absolute;
    top: -13em;
    left: -5em;
    border: 2.8em solid rgba(255, 255, 255, .035);
    border-radius: 50%;
    animation: contactPattern 12s linear infinite;
}

.contact-content {
    min-height: 14em;
    position: relative;
    z-index: 2;
    padding: 2.8em 3.3em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5em;
}

    .contact-content > div:first-child > span {
        color: #8bcaf4;
        font-size: .78em;
        font-weight: 700;
    }

    .contact-content h2 {
        max-width: 24em;
        margin: .4em 0 .45em;
        color: #fff;
        font-size: 1.9em;
        line-height: 1.55;
    }

    .contact-content p {
        margin: 0;
        color: #c7dbe5;
        font-size: .82em;
    }

.contact-actions {
    display: flex;
    gap: .55em;
    flex-shrink: 0;
}

.contact-primary,
.contact-secondary {
    min-height: 3em;
    padding: 0 1.2em;
    border-radius: .72em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-size: .8em;
    font-weight: 700;
    transition: .3s var(--ease);
}

.contact-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #4c9ed6);
    box-shadow: 0 .5em 1.1em rgba(0, 0, 0, .15);
}

.contact-secondary {
    color: #fff;
    border: .0625em solid rgba(255, 255, 255, .27);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(.5em);
}

    .contact-primary:hover,
    .contact-secondary:hover {
        color: #fff;
        transform: translateY(-.18em);
    }


/* =========================================================
   Footer
========================================================= */

.main-footer {
    padding: 3.8em 0 0;
    color: #c4d3dc;
    background: radial-gradient(circle at 80% 10%, rgba(63, 139, 190, .13), transparent 20em), var(--navy-dark);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 3em;
}

.footer-brand {
    min-width: 0;
    width: fit-content;
}

    .footer-brand img {
        filter: brightness(0) invert(1);
    }

    .footer-brand .brand-text strong {
        color: #fff;
    }

    .footer-brand .brand-text span {
        color: #9fb5c2;
    }

.footer-about p {
    max-width: 25em;
    margin: 1em 0;
    color: #a5b9c4;
    font-size: .78em;
    line-height: 2;
}

.footer-social {
    display: flex;
    gap: .5em;
}

    .footer-social a {
        width: 2.45em;
        height: 2.45em;
        border: .0625em solid rgba(255, 255, 255, .05);
        border-radius: .7em;
        display: grid;
        place-items: center;
        color: #d7e4ea;
        background: rgba(255, 255, 255, .06);
        transition: .35s var(--ease);
    }

        .footer-social a:hover {
            color: #fff;
            border-color: transparent;
            background: var(--blue);
            transform: translateY(-.22em) rotate(-4deg);
        }

.footer-links {
    display: flex;
    flex-direction: column;
    gap: .68em;
}

    .footer-links h4,
    .footer-contact h4 {
        margin: 0 0 .55em;
        color: #fff;
        font-size: .96em;
    }

    .footer-links a {
        width: fit-content;
        position: relative;
        color: #a5b9c4;
        font-size: .78em;
        transition: color .3s var(--ease), transform .3s var(--ease);
    }

        .footer-links a:hover {
            color: #73bce9;
            transform: translateX(-.25em);
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: .78em;
}

    .footer-contact > div {
        display: flex;
        align-items: center;
        gap: .55em;
        color: #a5b9c4;
        font-size: .78em;
    }

    .footer-contact i {
        width: 1.1em;
        color: #6cb4e3;
    }

.footer-bottom {
    min-height: 4em;
    margin-top: 3em;
    border-top: .0625em solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7d96a3;
    font-size: .7em;
}

    .footer-bottom div {
        display: flex;
        align-items: center;
        gap: .65em;
    }


/* =========================================================
   Floating controls
========================================================= */

.floating-whatsapp,
.back-to-top {
    width: 3em;
    height: 3em;
    position: fixed;
    left: 1.2em;
    z-index: 1100;
    border: 0;
    border-radius: .85em;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: transform .35s var(--ease), opacity .35s var(--ease), box-shadow .35s var(--ease);
}

.floating-whatsapp {
    bottom: 1.2em;
    background: linear-gradient(135deg, #22bd63, #129148);
    font-size: 1.05em;
    animation: whatsappPulse 3s ease-in-out infinite;
}

    .floating-whatsapp:hover {
        color: #fff;
        transform: translateY(-.25em) scale(1.05);
        box-shadow: 0 .8em 2em rgba(18, 169, 87, .3);
    }

.back-to-top {
    bottom: 4.55em;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    font-size: .9em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.8em) scale(.9);
}

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .back-to-top:hover {
        transform: translateY(-.18em);
    }


/* =========================================================
   Scroll progress
========================================================= */

.si-scroll-progress {
    height: .15em;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(90deg, #66b9eb, var(--blue));
    box-shadow: 0 0 .6em rgba(54, 127, 189, .5);
    transform-origin: right center;
    transform: scaleX(0);
    pointer-events: none;
}


/* =========================================================
   Reveal animation
========================================================= */

.reveal,
[data-reveal] {
    opacity: 0;
    filter: blur(.25em);
    transform: translateY(2em) scale(.985);
    transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
}

    .reveal.show,
    [data-reveal].show {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }

.reveal-left {
    opacity: 0;
    transform: translateX(2em);
}

.reveal-right {
    opacity: 0;
    transform: translateX(-2em);
}

    .reveal-left.show,
    .reveal-right.show {
        opacity: 1;
        transform: none;
    }


/* =========================================================
   Hero initial animation
========================================================= */

.hero-animate {
    opacity: 0;
    filter: blur(.2em);
    transform: translateY(1.4em);
    animation: heroEnter .85s var(--ease) forwards;
}

.hero-delay-1 {
    animation-delay: .12s;
}

.hero-delay-2 {
    animation-delay: .22s;
}

.hero-delay-3 {
    animation-delay: .34s;
}

.hero-delay-4 {
    animation-delay: .46s;
}


/* =========================================================
   Keyframes
========================================================= */

@keyframes heroEnter {
    0% {
        opacity: 0;
        filter: blur(.3em);
        transform: translateY(1.5em) scale(.985);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes loaderProgress {
    0% {
        transform: translateX(190%);
    }

    100% {
        transform: translateX(-300%);
    }
}

@keyframes loaderOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderOrbitReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes loaderIcon {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-.35em) rotate(-3deg);
    }
}

@keyframes heroOrb {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-1.5em, 1.2em, 0) scale(1.08);
    }
}

@keyframes dashboardGlow {
    from {
        opacity: .55;
        transform: translate(50%, -50%) scale(.92);
    }

    to {
        opacity: 1;
        transform: translate(50%, -50%) scale(1.08);
    }
}

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

    50% {
        transform: translateY(-.45em);
    }
}

@keyframes donutIn {
    from {
        opacity: 0;
        transform: rotate(-80deg) scale(.7);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: var(--shadow-md);
    }

    50% {
        box-shadow: 0 0 0 .45em rgba(18, 169, 87, .09), 0 .8em 2em rgba(18, 169, 87, .25);
    }
}

@keyframes contactPattern {
    to {
        transform: rotate(360deg);
    }
}

@keyframes searchArrow {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-.18em);
    }
}

@keyframes inputShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(.3em);
    }

    50% {
        transform: translateX(-.3em);
    }

    75% {
        transform: translateX(.15em);
    }
}

@keyframes siRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(18);
    }
}


@media (max-width: 75em) {
    .si-container {
        padding: 0 1em;
    }

    .main-menu a {
        padding-inline: .5em;
        font-size: .82em;
    }

    .brand {
        min-width: 9.5em;
    }

    .hero-grid {
        gap: 2em;
    }

    .dashboard-window {
        transform: none !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .systems-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-item {
        padding-inline: .75em;
    }

    .rental-search-inner {
        align-items: stretch;
        flex-direction: column;
        gap: .65em;
    }

    .rental-search-title {
        min-width: 0;
    }
}


@media (max-width: 62.5em) {
    .top-links {
        display: none;
    }

    .main-menu {
        display: none;
    }

    .primary-button {
        display:none;
    }
    .menu-button {
        display: block;
    }

    .main-menu.mobile-open {
        position: absolute;
        top: calc(100% + .45em);
        right: 1em;
        left: 1em;
        z-index: 1500;
        padding: .65em;
        border: .0625em solid var(--border);
        border-radius: 1em;
        display: block;
        background: rgba(255, 255, 255, .98);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(1em);
        animation: mobileMenuIn .35s var(--ease);
    }

        .main-menu.mobile-open a {
            min-height: 3em;
            padding: 0 .85em;
            border-radius: .6em;
            font-size: .9em;
        }

            .main-menu.mobile-open a:hover {
                background: var(--blue-soft);
            }

            .main-menu.mobile-open a.active::after {
                display: none;
            }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
    }

    .hero-badge {
        margin-inline: auto;
    }

    .hero-content h1,
    .hero-description {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-benefits {
        justify-content: center;
    }

    .dashboard-visual {
        width:100%;
        margin: auto;
    }

    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-item:nth-child(2) {
        border-left: 0;
    }

    .quick-item:nth-child(-n+2) {
        border-bottom: .0625em solid #e3ebef;
    }

    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase-panel {
        grid-template-columns: 1fr;
    }

    .showcase-content {
        text-align: center;
    }

    .light-label {
        margin-inline: auto;
    }

    .showcase-points {
        max-width: 34em;
        margin-inline: auto;
    }

    .showcase-screen {
        margin: 0 2em 2.5em;
    }

    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .workflow-grid::before {
            display: none;
        }

    .plans-grid {
        max-width: 34em;
        grid-template-columns: 1fr;
    }

    .plan-card {
        min-height: 0;
    }

        .plan-card ul {
            min-height: 0;
        }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2.5em;
    }

    .faq-info {
        text-align: center;
    }

        .faq-info .section-label {
            margin-inline: auto;
        }

        .faq-info > p,
        .faq-info > a {
            margin-inline: auto;
        }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rental-search-fields {
        grid-template-columns: 1.35fr 1fr 1fr auto;
    }

    .rental-search-arrow {
        display: none;
    }
}


@media (max-width: 48em) {
    body {
        font-size: 1.17em;
    }

    .si-container {
        padding:0 1em;
    }

    .top-bar {
        display: none;
    }

    :root {
        --header-height: 3.85em;
    }

    .brand {
        min-width: 0;
    }

        .brand img {
            height: 2.1em;
        }

    .brand-text strong {
        font-size: 1.15em;
    }

    .brand-text span {
        display: none;
    }

    .rental-search-fields {
        grid-template-columns: 1fr 1fr;
    }

    .rental-location {
        grid-column: 1 / -1;
    }

    .rental-search-button {
        grid-column: 1 / -1;
        min-height: 3.1em;
    }

    .hero-section {
        min-height: 0;
        padding: 3.5em 0 6em;
    }

    .hero-content h1 {
        font-size: 2.65em;
        letter-spacing: -.02em;
    }

    .hero-description {
        font-size: .92em;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-side {
        display: none;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-panels {
        grid-template-columns: 1fr;
    }

    .floating-card {
        display: none;
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }

    .quick-item {
        min-height: 4.8em;
        border-left: 0;
        border-bottom: .0625em solid #e3ebef;
    }

        .quick-item:last-child {
            border-bottom: 0;
        }

    .section {
        padding: 4em 0;
    }

    .section-heading {
        margin-bottom: 2em;
    }

    .features-grid,
    .systems-grid,
    .workflow-grid {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .system-card,
    .workflow-card {
        min-height: 0;
    }

    .showcase-content {
        padding: 2.4em 1.2em;
    }

        .showcase-content h2 {
            font-size: 1.85em;
        }

    .showcase-points {
        grid-template-columns: 1fr;
    }

    .showcase-screen {
        margin: 0 .7em 1.5em;
    }

    .showcase-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase-bottom {
        grid-template-columns: 1fr;
    }

    .contact-content {
        padding: 2.2em 1.3em;
        align-items: flex-start;
        flex-direction: column;
    }

        .contact-content h2 {
            font-size: 1.65em;
        }

    .contact-actions {
        width: 100%;
    }

    .contact-primary,
    .contact-secondary {
        flex: 1;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .footer-bottom {
        padding: 1em 0;
        flex-direction: column;
        justify-content: center;
        gap: .5em;
        text-align: center;
    }
}

@media (max-width: 37.5em) {
    body {
        font-size: 1.08em;
    }

    .rental-search-fields {
        display: block;
    }

    .rental-search-field {
        margin-bottom: .45em;
    }

    .rental-search-button {
        width: 100%;
    }

    .rental-search-title {
        padding-inline: .2em;
    }

    .hero-content h1 {
        font-size: 2.35em;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

        .hero-actions .button {
            width: 100%;
        }

    .hero-benefits {
        align-items: center;
        flex-direction: column;
    }

    .dashboard-head {
        padding-inline: .65em;
    }

    .dash-tools span:nth-child(2) {
        display: none;
    }

    .quick-grid {
        padding: .6em;
    }

    .section-heading h2 {
        font-size: 2em;
    }

    .plans-grid {
        width: 100%;
    }

    .faq-info h2 {
        font-size: 1.9em;
    }

    .contact-actions {
        flex-direction: column;
    }

    .contact-primary,
    .contact-secondary {
        width: 100%;
    }

    .floating-whatsapp,
    .back-to-top {
        left: .7em;
    }
}


@keyframes mobileMenuIn {
    from {
        opacity: 0;
        transform: translateY(-.6em) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01s !important;
    }

    .dashboard-window {
        transform: none !important;
    }
}