/* =====================================================
           ROOT COLORS
        ===================================================== */
:root {
    /* Main Colors */
    --primary: #0BA6A6;
    --primary-dark: #008c92;
    --primary-light: #16C6C8;
    /* Navy */
    --navy: #071B49;
    --navy-2: #0A2558;
    --navy-3: #102E66;
    /* Background */
    --white: #FFFFFF;
    --background: #F7FBFC;
    --background-soft: #EEF9FA;
    /* Text */
    --text-dark: #071B49;
    --text: #33415C;
    --text-light: #718096;
    /* Borders */
    --border: #E5ECF3;
    --border-light: #EEF2F6;
    /* Cards */
    --card: #FFFFFF;
    /* Status */
    --green: #19B779;
    --red: #FF5A65;
    --orange: #FFAE35;
    --purple: #7757E8;
    --blue: #4D7CFE;
    /* Shadows */
    --shadow-sm:
        0 4px 15px rgba(7, 27, 73, 0.06);
    --shadow:
        0 15px 45px rgba(7, 27, 73, 0.10);
    --shadow-lg:
        0 25px 70px rgba(7, 27, 73, 0.16);
    /* Radius */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    /* Container */
    --container: 1280px;
    /* Typography */
    --font: "Inter", sans-serif;
}
:root {
    --lead-navy: #071B49;
    --lead-text: #33415C;
    --lead-green: #16A765;
    --lead-purple: #8554F1;
    --lead-teal: #0BA6A6;
    --lead-orange: #FF8A00;
    --lead-white: #FFFFFF;
    --lead-border: #E7EDF2;
    --lead-background: #F7FBFC;
}
/* =====================================================
           RESET
        ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--font);
    background: var(--background);
    color: var(--text);
}
button,
a,
input {
    font-family: inherit;
}
a {
    text-decoration: none;
    color: inherit;
}
/* =====================================================
           CONTAINER
        ===================================================== */
.container {
    width: min(calc(100% - 40px),
            var(--container));
    margin: auto;
}
/* =====================================================
           HEADER
        ===================================================== */
.header {
    height: 100px;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(7, 27, 73, .05);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 50;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
/* =====================================================
           LOGO
        ===================================================== */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}
/* =====================================================
           NAVIGATION
        ===================================================== */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    padding: 29px 0;
}
.nav-link:hover {
    color: var(--primary);
}
.nav-link.active {
    color: var(--primary);
}
.nav-link.active::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 25px;
    background: var(--primary);
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
}
.arrow {
    font-size: 9px;
}
/* =====================================================
           HEADER ACTIONS
        ===================================================== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    transition: .25s ease;
}
.btn-demo {
    height: 38px;
    padding: 0 18px;
    color: var(--white);
    background: var(--primary);
    box-shadow:
        0 7px 18px rgba(11, 166, 166, .22);
}
.btn-demo:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}
.login-btn {
    height: 38px;
    padding: 0 14px;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--border);
}
.login-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
/* =====================================================
           HERO
        ===================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg,
            #ffffff 0%,
            #f7fcfd 48%,
            #eefafa 100%);
    padding: 28px 0 40px;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-bg-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(11, 166, 166, .22) 1.15px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 78% 90% at 16% 42%, #000 18%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 78% 90% at 16% 42%, #000 18%, transparent 72%);
    opacity: .85;
}
.hero-bg-glow {
    position: absolute;
    width: 560px;
    height: 560px;
    left: -120px;
    top: 10%;
    background:
        radial-gradient(circle,
            rgba(11, 166, 166, .16),
            rgba(22, 198, 200, .06) 42%,
            transparent 70%);
}
.hero-bg-wave {
    position: absolute;
    left: -18%;
    width: 78%;
    height: 78%;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
    opacity: .9;
}
.hero-bg-wave--1 {
    bottom: -28%;
    transform: rotate(-8deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230BA6A6' fill-opacity='0.07' d='M0,224L80,197.3C160,171,320,117,480,122.7C640,128,800,192,960,197.3C1120,203,1280,149,1360,122.7L1440,96L1440,320L0,320Z'/%3E%3C/svg%3E");
}
.hero-bg-wave--2 {
    bottom: -18%;
    left: -24%;
    width: 86%;
    transform: rotate(-14deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%2316C6C8' fill-opacity='0.1' d='M0,160L60,165.3C120,171,240,181,360,165.3C480,149,600,107,720,112C840,117,960,171,1080,176C1200,181,1320,139,1380,117.3L1440,96L1440,320L0,320Z'/%3E%3C/svg%3E");
}
.hero-bg-wave--3 {
    bottom: -8%;
    left: -10%;
    width: 70%;
    height: 62%;
    transform: rotate(-6deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23008c92' fill-opacity='0.06' d='M0,256L80,240C160,224,320,192,480,186.7C640,181,800,203,960,197.3C1120,192,1280,160,1360,144L1440,128L1440,320L0,320Z'/%3E%3C/svg%3E");
}
.hero .hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 36px;
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 10px;
}
.hero .hero-content {
    padding-left: 0;
    max-width: 540px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(11, 166, 166, .1);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 22px;
}
.eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #19B779;
    box-shadow: 0 0 0 4px rgba(25, 183, 121, .16);
}
.hero-title {
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -1.8px;
    color: var(--navy);
    font-weight: 800;
    margin-bottom: 18px;
}
.hero-title .teal {
    background: linear-gradient(90deg, #0BA6A6 0%, #16C6C8 55%, #19B779 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-description {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--text);
}
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.hero-buttons .btn {
    min-height: 48px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 10px;
}
.btn-primary {
    color: var(--white);
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 10px 25px rgba(11, 166, 166, .22);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}
.btn-outline {
    color: var(--primary-dark);
    background: #ffffff;
    border: 1px solid var(--primary);
}
.btn-outline:hover {
    color: var(--white);
    background: var(--primary);
}
.play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 1;
}
.login-btn i {
    font-size: 13px;
}
.trusted {
    margin-top: 40px;
}
.trusted-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 14px;
}
.trusted-logos {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.trusted-logo {
    height: 22px;
    width: auto;
    max-width: 118px;
    object-fit: contain;
    opacity: .85;
}
.hero-visual {
    min-width: 0;
}
.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(7, 27, 73, .08);
    box-shadow:
        0 22px 50px rgba(7, 27, 73, .14);
    object-fit: cover;
    background: #fff;
}
.hero--desktop-png .hero-visual img {
    border: 0;
    background: transparent;
    box-shadow: 0 18px 40px rgba(7, 27, 73, .12);
    object-fit: contain;
    border-radius: 14px;
}
/* =====================================================
           DASHBOARD WRAPPER
        ===================================================== */
.dashboard-wrap {
    min-width: 0;
    perspective: 1200px;
}
.dashboard {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(7, 27, 73, .08);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-height: 560px;
}
/* =====================================================
           DASHBOARD TOP BAR
        ===================================================== */
.dashboard-top {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-light);
    gap: 15px;
}
.dashboard-brand {
    width: 105px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-weight: 800;
    font-size: 13px;
}
.mini-star {
    color: var(--primary);
}
.search {
    height: 32px;
    flex: 1;
    max-width: 330px;
    border:
        1px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: #A2ADBC;
    font-size: 9px;
}
.search-icon {
    font-size: 12px;
}
.dashboard-date {
    margin-left: auto;
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 8px;
    color: var(--text);
}
.notification {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
/* =====================================================
           DASHBOARD BODY
        ===================================================== */
.dashboard-body {
    display: grid;
    grid-template-columns: 110px 1fr;
    min-height: 500px;
}
/* =====================================================
           SIDEBAR
        ===================================================== */
.sidebar {
    background:
        linear-gradient(180deg,
            var(--navy),
            #031333);
    padding: 18px 10px;
}
.sidebar-logo {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 18px;
    padding-left: 5px;
}
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 7px;
    border-radius: 5px;
    color: #B9C7DD;
    font-size: 8px;
    font-weight: 500;
}
.sidebar-item:hover {
    background: rgba(255, 255, 255, .07);
    color: white;
}
.sidebar-item.active {
    color: white;
    background: var(--primary);
}
.sidebar-icon {
    width: 12px;
    text-align: center;
}
/* =====================================================
           MAIN DASHBOARD
        ===================================================== */
.dashboard-main {
    background: #FAFCFD;
    padding: 18px;
}
.welcome {
    margin-bottom: 18px;
}
.welcome h3 {
    font-size: 14px;
    color: var(--navy);
    margin-bottom: 4px;
}
.welcome p {
    font-size: 8px;
    color: var(--text-light);
}
/* =====================================================
           STAT CARDS
        ===================================================== */
.stats {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-label {
    font-size: 7px;
    color: var(--text-light);
}
.stat-number {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    margin-top: 7px;
}
.stat-growth {
    margin-top: 5px;
    font-size: 6px;
    color: var(--green);
}
/* =====================================================
           SECONDARY CARDS
        ===================================================== */
.mini-stats {
    display: grid;
    grid-template-columns:
        repeat(6, 1fr);
    gap: 7px;
    margin-bottom: 18px;
}
.mini-card {
    background: var(--white);
    border:
        1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
}
.mini-label {
    font-size: 6px;
    color: var(--text-light);
}
.mini-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--navy);
    margin-top: 5px;
}
.mini-change {
    font-size: 6px;
    color: var(--green);
    margin-top: 3px;
}
/* =====================================================
           ACTIVITIES
        ===================================================== */
.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.activity-header h3 {
    font-size: 11px;
    color: var(--navy);
}
.activity-tabs {
    display: flex;
    gap: 5px;
}
.activity-tab {
    padding: 5px 8px;
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    font-size: 6px;
    color: var(--text-light);
}
.activity-tab.active {
    color: white;
    background: var(--primary);
    border-color: var(--primary);
}
/* =====================================================
           ACTIVITY CARDS
        ===================================================== */
.activities {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    gap: 7px;
}
.activity-card {
    background: var(--white);
    border:
        1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
    min-height: 120px;
}
.activity-time {
    font-size: 6px;
    color: var(--text-light);
    margin-bottom: 9px;
}
.activity-type {
    display: inline-flex;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--background-soft);
    color: var(--primary-dark);
    font-size: 6px;
    font-weight: 700;
    margin-bottom: 8px;
}
.activity-name {
    font-size: 7px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.5;
}
.activity-person {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 6px;
    color: var(--text-light);
}
.avatar {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background:
        linear-gradient(135deg,
            var(--primary),
            var(--navy));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    font-weight: 700;
}
/* =====================================================
           FLOATING DASHBOARD EFFECT
        ===================================================== */
.dashboard {
    animation:
        dashboardFloat 6s ease-in-out infinite;
}
@keyframes dashboardFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
/* =====================================================
           RESPONSIVE
        ===================================================== */
@media (max-width: 1100px) {
    .nav-links {
        gap: 18px;
    }
    .hero-title {
        font-size: 44px;
    }
    .hero .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .dashboard {
        min-height: 500px;
    }
    .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .mini-stats {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    .hero .hero-container {
        grid-template-columns: 1fr;
        padding-top: 28px;
    }
    .hero .hero-content {
        text-align: center;
        max-width: 640px;
        margin: 0 auto;
    }
    .hero-title {
        font-size: 42px;
    }
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
    }
    .trusted-logos {
        justify-content: center;
    }
    .hero-bg-wave {
        width: 110%;
        left: -20%;
        height: 58%;
    }
    .hero-visual {
        max-width: 720px;
        margin: 8px auto 0;
    }
    .dashboard-wrap {
        width: 100%;
    }
    .dashboard {
        animation: none;
    }
}
@media (max-width: 650px) {
    .container {
        width:
            min(calc(100% - 24px),
                var(--container));
    }
    .header {
        height: 65px;
    }
    .logo {
        min-width: auto;
    }
    .logo-name {
        font-size: 17px;
    }
    .login-btn {
        display: none;
    }
    .btn-demo {
        height: 34px;
        padding: 0 12px;
        font-size: 9px;
    }
    .hero {
        padding: 18px 0 28px;
    }
    .hero .hero-container {
        min-height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .hero-title {
        font-size: 34px;
        letter-spacing: -1px;
    }
    .hero-description {
        font-size: 14px;
    }
    .hero-buttons .btn {
        min-height: 44px;
        font-size: 13px;
    }
    .trusted {
        margin-top: 28px;
    }
    .dashboard {
        min-height: auto;
        border-radius: 10px;
    }
    .dashboard-top {
        padding: 0 10px;
    }
    .dashboard-brand {
        width: auto;
    }
    .search {
        display: none;
    }
    .dashboard-date {
        margin-left: auto;
    }
    .dashboard-body {
        grid-template-columns: 75px 1fr;
    }
    .sidebar {
        padding: 12px 5px;
    }
    .sidebar-item {
        font-size: 7px;
    }
    .dashboard-main {
        padding: 10px;
    }
    .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .mini-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .activities {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .activity-card:last-child {
        display: none;
    }
}
@media (max-width: 420px) {
    .hero-title {
        font-size: 34px;
    }
    .hero-buttons {
        flex-direction: column;
    }
    .hero-buttons .btn {
        width: 100%;
    }
    .dashboard-top {
        height: 48px;
    }
    .notification {
        display: none;
    }
    .dashboard-date {
        font-size: 7px;
    }
    .stats {
        gap: 5px;
    }
    .stat-card {
        padding: 8px;
    }
    .stat-number {
        font-size: 15px;
    }
}
/* =====================================================
   ROOT COLORS
   Uses the same colors as your hero section
===================================================== */
/* =====================================================
   TRUST SECTION
===================================================== */
.trust-section {
    position: relative;
    background:
        linear-gradient(180deg,
            #F8FBFD 0%,
            #F4F9FB 100%);
    padding: 0 0 15px;
}
/* =====================================================
   TRUST CARD
===================================================== */
.trust-card {
    position: relative;
    min-height: 138px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: center;
    padding: 20px 45px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92));
    border: 1px solid rgba(7, 27, 73, .035);
    border-radius: var(--radius);
    box-shadow: 0 14px 35px rgba(7, 27, 73, .08), 0 2px 8px rgba(7, 27, 73, .025);
}
/* =====================================================
   TRUST ITEM
===================================================== */
.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 0;
}
/* =====================================================
   ICON
===================================================== */
.trust-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}
.trust-icon svg {
    width: 27px;
    height: 27px;
}
.trust-item:hover .trust-icon {
    transform: translateY(-3px);
    box-shadow:
        0 8px 18px rgba(7, 27, 73, .10);
}
/* =====================================================
   BLUE
===================================================== */
.trust-blue {
    color: var(--blue);
    background:
        linear-gradient(145deg,
            #EDF5FF,
            #E4F0FF);
}
/* =====================================================
   PURPLE
===================================================== */
.trust-purple {
    color: var(--purple);
    background:
        linear-gradient(145deg,
            #F3EFFF,
            #EDE7FF);
}
/* =====================================================
   ORANGE
===================================================== */
.trust-orange {
    color: var(--orange);
    background:
        linear-gradient(145deg,
            #FFF8EA,
            #FFF2D7);
}
/* =====================================================
   GREEN
===================================================== */
.trust-green {
    color: var(--green);
    background:
        linear-gradient(145deg,
            #EDF9F3,
            #E2F6EB);
}
/* =====================================================
   SECURITY
===================================================== */
.trust-security {
    color: var(--blue);
    background:
        linear-gradient(145deg,
            #EDF5FF,
            #E5F0FF);
}
/* =====================================================
   TEXT
===================================================== */
.trust-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.trust-content strong {
    color: var(--navy);
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.5px;
}
.trust-content span {
    color: #596780;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
}
/* =====================================================
   DIVIDER
===================================================== */
.trust-divider {
    width: 1px;
    height: 54px;
    background:
        linear-gradient(to bottom,
            transparent,
            #DCE5EE,
            transparent);
}
/* =====================================================
   MODULES HEADING
===================================================== */
.modules-heading {
    padding: 24px 0 60px;
    text-align: center;
    background: var(--background);
}
.modules-label {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    margin-bottom: 10px;
}
.modules-heading h2 {
    color: var(--navy);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
}
.modules-heading h2 span {
    color: var(--primary);
}
.modules-heading p {
    max-width: 570px;
    margin: 12px auto 0;
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.7;
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1050px) {
    .trust-card {
        padding: 20px 25px;
    }
    .trust-item {
        gap: 9px;
    }
    .trust-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }
    .trust-icon svg {
        width: 23px;
        height: 23px;
    }
    .trust-content strong {
        font-size: 19px;
    }
    .trust-content span {
        font-size: 8px;
    }
}
@media (max-width: 800px) {
    .trust-card {
        grid-template-columns:
            repeat(2, 1fr);
        gap: 0;
        padding: 15px;
    }
    .trust-divider {
        display: none;
    }
    .trust-item {
        justify-content: flex-start;
        padding: 15px;
        border-bottom:
            1px solid var(--border);
    }
    .trust-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}
@media (max-width: 520px) {
    .trust-card {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .trust-item {
        padding: 14px 12px;
        border-bottom:
            1px solid var(--border) !important;
    }
    .trust-item:last-child {
        border-bottom: 0 !important;
    }
    .trust-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
    .trust-content strong {
        font-size: 20px;
    }
    .trust-content span {
        font-size: 9px;
    }
    .modules-heading h2 {
        font-size: 27px;
    }
}
/* =====================================================
   POWERFUL MODULES SECTION
===================================================== */
.modules-section {
    position: relative;
    padding: 20px 0 20px;
    overflow: hidden;
}
/* =====================================================
   BACKGROUND DECORATION
===================================================== */
.modules-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    left: -250px;
    background:
        radial-gradient(circle,
            rgba(11, 166, 166, .045),
            transparent 70%);
    pointer-events: none;
}
.modules-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -250px;
    bottom: -250px;
    background:
        radial-gradient(circle,
            rgba(33, 103, 243, .035),
            transparent 70%);
    pointer-events: none;
}
/* =====================================================
   HEADER
===================================================== */
.modules-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 850px;
    margin: 0 auto 34px;
}
.modules-label {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    line-height: 1;
    margin-bottom: 11px;
}
.modules-header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 27px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.7px;
}
.modules-header h2 span {
    color: var(--navy);
}
.modules-header p {
    margin: 9px auto 0;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}
/* =====================================================
   MODULE GRID
===================================================== */
.modules-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
}
/* =====================================================
   MODULE CARD
===================================================== */
.module-card {
    min-height: 108px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 24px 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .90));
    border: 1px solid rgba(229, 236, 243, .85);
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(7, 27, 73, .055);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.module-card:hover {
    transform: translateY(-4px);
    border-color:
        rgba(11, 166, 166, .20);
    box-shadow:
        0 14px 30px rgba(7, 27, 73, .10);
}
/* =====================================================
   MODULE ICON
===================================================== */
.module-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    transition: transform .25s ease;
}
.module-card:hover .module-icon {
    transform: scale(1.06);
}
.module-icon svg,
.module-icon i {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
}
/* =====================================================
   ICON COLORS
===================================================== */
.module-blue {
    color: var(--blue);
    background:
        linear-gradient(145deg,
            #EDF4FF,
            #E5F0FF);
}
.module-purple {
    color: var(--purple);
    background:
        linear-gradient(145deg,
            #F4F0FF,
            #ECE7FF);
}
.module-green {
    color: var(--green);
    background:
        linear-gradient(145deg,
            #EDF9F3,
            #E3F6EC);
}
.module-orange {
    color: var(--orange);
    background:
        linear-gradient(145deg,
            #FFF8EA,
            #FFF1D7);
}
.module-red {
    color: #FF4D4D;
    background:
        linear-gradient(145deg,
            #FFF0F0,
            #FFE7E7);
}
/* =====================================================
   MODULE CONTENT
===================================================== */
.module-content {
    min-width: 0;
    padding-top: 1px;
}
.module-content h3 {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.25;
    /* font-weight: 800; */
    letter-spacing: -.1px;
}
.module-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
}
/* =====================================================
   AND MUCH MORE
===================================================== */
.module-content .more-title {
    color: var(--primary-dark);
}
/* =====================================================
   CONTAINER
===================================================== */
.modules-section .container {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1100px) {
    .modules-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 800px) {
    .modules-section {
        padding: 55px 0 65px;
    }
    .modules-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .modules-header h2 {
        font-size: 24px;
    }
}
@media (max-width: 550px) {
    .modules-section .container {
        width: calc(100% - 24px);
    }
    .modules-header {
        margin-bottom: 25px;
    }
    .modules-header h2 {
        font-size: 21px;
    }
    .modules-header p {
        font-size: 10px;
    }
    .modules-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .module-card {
        min-height: auto;
        padding: 16px;
    }
    .module-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .module-content h3 {
        font-size: 12px;
    }
    .module-content p {
        font-size: 10px;
        line-height: 1.6;
    }
}
.integrations {
    width: 100%;
    padding: 20px 0 40px;
    font-family: var(--font);
    box-sizing: border-box;
}
.integration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
/* =========================
   MAIN CARD
========================= */
.integration-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    overflow: hidden;
    border: 1px solid rgba(11, 166, 166, .28);
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
}
.integration-card-head {
    position: relative;
    margin-bottom: 20px;
    padding-right: 118px;
    min-height: 96px;
}
.integration-card-copy {
    max-width: 430px;
}
.integration-art {
    position: absolute;
    top: -6px;
    right: -4px;
    width: 118px;
    height: 118px;
    object-fit: contain;
    pointer-events: none;
}
/* =========================
   BADGE
========================= */
.new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    color: var(--white);
    background: var(--primary-dark);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
}
/* =========================
   TYPOGRAPHY
========================= */
.integration-card h2 {
    margin: 10px 0 8px;
    color: var(--primary-dark);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.3px;
}
.integration-card .description {
    margin: 0;
    max-width: 420px;
    color: #5b6b80;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
}
.integration-card h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
}
.ivr-title {
    margin-top: 16px !important;
}
/* =========================
   LOGO GRID
========================= */
.logo-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.logo-tile {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    box-sizing: border-box;
    color: var(--text-dark);
    background: #ffffff;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(7, 27, 73, .05);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.logo-tile img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 28px;
    object-fit: contain;
}
.more-tile {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
}
.marketing-grid .logo-tile {
    min-height: 46px;
    font-size: 11px;
    font-weight: 700;
}
.marketing-grid .logo-tile span {
    color: #1f2a44;
}
.meta-icon {
    color: #2167f3;
    font-size: 18px;
}
.instagram-icon {
    color: #e1306c;
    font-size: 16px;
}
.forms-icon,
.sheets-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}
.forms-icon {
    color: #673ab7;
}
.sheets-icon {
    color: #0f9d58;
}
.whatsapp-icon {
    color: #20c66a;
    font-size: 16px;
}
.website-icon {
    color: var(--primary-dark);
    font-size: 16px;
}
.ivr-tile {
    width: fit-content;
    min-width: 118px;
    min-height: 46px;
    gap: 8px;
}
.ivr-tile i {
    color: var(--primary-dark);
    font-size: 15px;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px) {
    .integration-card {
        padding: 24px 20px 20px;
    }
    .integration-card-head {
        padding-right: 100px;
        min-height: 88px;
    }
    .integration-card h2 {
        font-size: 17px;
    }
    .integration-art {
        width: 96px;
        height: 96px;
    }
    .logo-grid {
        gap: 10px;
    }
}
@media (max-width: 900px) {
    .integration-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
@media (max-width: 600px) {
    .integrations {
        padding: 24px 0 32px;
    }
    .integration-card {
        padding: 22px 16px 18px;
    }
    .integration-card-head {
        margin-bottom: 16px;
        padding-right: 78px;
        min-height: 72px;
    }
    .integration-card h2 {
        font-size: 15px;
        margin: 8px 0 6px;
    }
    .integration-card .description {
        font-size: 12px;
    }
    .integration-art {
        width: 72px;
        height: 72px;
        top: 0;
        right: 0;
    }
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .logo-tile {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 11px;
    }
}
/* =====================================================
   WHY CHOOSE ZOPSTART
===================================================== */
.why-choose {
    width: 100%;
    padding: 42px 18px 38px;
    /* background: var(--white); */
    font-family: Inter, Arial, sans-serif;
    box-sizing: border-box;
}
.why-header {
    text-align: center;
    margin-bottom: 18px;
}
.why-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .25px;
}
.why-header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.35px;
}
/* =====================================================
   GRID
===================================================== */
.why-grid {
    width: min(1261px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
/* =====================================================
   CARD
===================================================== */
.why-card {
    min-height: 153px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px 14px;
    box-sizing: border-box;
    text-align: center;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .98),
            rgba(250, 253, 254, .98));
    border: 1px solid #edf1f5;
    border-radius: 12px;
    box-shadow:
        0 7px 18px rgba(7, 27, 73, .055);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}
.why-card:hover {
    transform: translateY(-4px);
    border-color:
        rgba(11, 166, 166, .2);
    box-shadow:
        0 14px 30px rgba(7, 27, 73, .09);
}
/* =====================================================
   ICON
===================================================== */
.why-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 50%;
    position: relative;
    font-weight: 900;
    font-size: 18px;
}
.why-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    opacity: .95;
}
.why-icon span,
.why-icon i {
    position: relative;
    z-index: 2;
}
.why-icon i {
    font-size: 18px;
    line-height: 1;
}
/* Teal */
.icon-teal {
    color: #087f84;
    background: rgba(11, 166, 166, .10);
}
.icon-teal::before {
    background: rgba(11, 166, 166, .16);
}
/* Purple */
.icon-purple {
    color: #6841d9;
    background: rgba(118, 87, 232, .09);
}
.icon-purple::before {
    background: rgba(118, 87, 232, .15);
}
/* Green */
.icon-green {
    color: #129b61;
    background: rgba(32, 169, 107, .10);
}
.icon-green::before {
    background: rgba(32, 169, 107, .16);
}
/* Orange */
.icon-orange {
    color: #f39400;
    background: rgba(255, 170, 39, .10);
}
.icon-orange::before {
    background: rgba(255, 170, 39, .17);
}
/* Cyan */
.icon-cyan {
    color: #0ab6c0;
    background: rgba(22, 198, 200, .10);
}
.icon-cyan::before {
    background: rgba(22, 198, 200, .17);
}
/* =====================================================
   CARD TEXT
===================================================== */
.why-card h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.1px;
}
.why-card p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.75;
    font-weight: 500;
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 950px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 620px) {
    .why-choose {
        padding: 35px 14px;
    }
    .why-header h2 {
        font-size: 17px;
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .why-card {
        min-height: 155px;
    }
}
@media (max-width: 390px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
    .why-card {
        min-height: 145px;
    }
}
/* =====================================================
   SECTION
===================================================== */
.cta-section {
    width: 100%;
    padding: 18px 0 28px;
    box-sizing: border-box;
    font-family: var(--font);
}
.cta-section .container {
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
}
.cta-banner {
    position: relative;
    width: 100%;
    min-height: 176px;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 86% 50%,
            rgba(22, 198, 200, .22),
            transparent 34%),
        linear-gradient(105deg,
            #07344e 0%,
            #06495b 52%,
            #047f83 100%);
    box-shadow: 0 8px 22px rgba(7, 27, 73, .16);
}
.cta-banner__body {
    position: relative;
    z-index: 3;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}
.cta-banner--support {
    min-height: 168px;
    padding: 28px 36px;
}
.cta-banner--support .cta-banner__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 620px;
}
.cta-banner--support .cta-actions {
    margin: 0;
}
.cta-banner--support .cta-secondary span {
    margin-left: 8px;
    font-size: 15px;
    line-height: 0;
}
/* =====================================================
   CTA BANNER
===================================================== */
.cta-banner {
    position: relative;
    width: min(1261px, 100%);
    min-height: 176px;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 86% 50%,
            rgba(22, 198, 200, .22),
            transparent 34%),
        linear-gradient(105deg,
            #07344e 0%,
            #06495b 52%,
            #047f83 100%);
    box-shadow:
        0 8px 22px rgba(7, 27, 73, .16);
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(-18deg,
            transparent 0 18px,
            rgba(255, 255, 255, .018) 18px 19px);
    pointer-events: none;
}
/* =====================================================
   CONTENT
===================================================== */
.cta-content {
    position: relative;
    z-index: 3;
    flex: 1;
    min-width: 0;
    max-width: 560px;
}
.cta-content h2 {
    margin: 0 0 10px;
    color: var(--white);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.3px;
}
.cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}
/* =====================================================
   BUTTONS
===================================================== */
.cta-actions {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 24px;
    margin-right: 156px;
}
.cta-btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    box-sizing: border-box;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta-btn:hover {
    transform: translateY(-2px);
}
.cta-primary {
    min-width: 148px;
    color: var(--primary-dark);
    background: var(--white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.cta-primary span {
    margin-left: 8px;
    font-size: 15px;
    line-height: 0;
}
.cta-primary i {
    margin-left: 8px;
    font-size: 13px;
}
.cta-banner--about {
    min-height: 200px;
    padding: 36px 48px;
}
.cta-banner--about .cta-banner__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 620px;
}
.cta-banner--about .cta-content h2 {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px;
}
.cta-banner--about .cta-content p {
    max-width: 520px;
}
.cta-banner--about .cta-content strong {
    color: rgba(255, 255, 255, 0.98);
    font-weight: 700;
}
.cta-banner--about .cta-actions {
    margin: 20px 0 0;
}
.cta-secondary {
    min-width: 128px;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .78);
}
.cta-secondary:hover {
    background: rgba(255, 255, 255, .1);
}
/* =====================================================
   ROCKET / SUPPORT ILLUSTRATION
===================================================== */
.cta-art,
.cta-rocket {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
}
.cta-art--rocket,
.cta-rocket {
    right: 22px;
    bottom: -8px;
    width: 138px;
    height: auto;
}
.cta-art--support {
    right: 28px;
    bottom: 50%;
    transform: translateY(50%);
    width: 220px;
    height: auto;
}
.cta-art--resources {
    right: 58px;
    bottom: 50%;
    transform: translateY(50%);
    width: 300px;
    height: auto;
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
    .cta-banner {
        padding: 24px 22px;
    }
    .cta-content h2 {
        font-size: 18px;
    }
    .cta-actions {
        margin-right: 120px;
        margin-left: 18px;
    }
    .cta-art--rocket,
    .cta-rocket {
        width: 130px;
        right: 8px;
    }
    .cta-art--support {
        width: 170px;
        right: 12px;
    }
    .cta-art--resources {
        width: 240px;
        right: 36px;
    }
}
@media (max-width: 700px) {
    .cta-section {
        padding: 15px;
    }
    .cta-banner {
        min-height: 190px;
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }
    .cta-content {
        max-width: 100%;
        padding-right: 90px;
    }
    .cta-content h2 {
        font-size: 16px;
    }
    .cta-content p {
        font-size: 13px;
    }
    .cta-actions {
        margin: 18px 0 0;
        flex-wrap: wrap;
    }
    .cta-banner--support {
        padding: 24px 20px;
    }
    .cta-banner--support .cta-banner__body {
        max-width: 100%;
        padding-right: 120px;
    }
    .cta-art--rocket,
    .cta-rocket {
        width: 108px;
        right: 4px;
        bottom: -4px;
    }
    .cta-art--support {
        width: 120px;
        right: 8px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
    .cta-art--resources {
        width: 170px;
        right: 24px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
}
@media (max-width: 450px) {
    .cta-banner {
        min-height: 220px;
    }
    .cta-actions {
        width: 100%;
        gap: 8px;
    }
    .cta-btn {
        flex: 1;
        min-width: 0;
        padding: 0 8px;
    }
    .cta-banner--support .cta-banner__body {
        padding-right: 0;
    }
    .cta-art--support {
        position: static;
        transform: none;
        width: 180px;
        margin: 12px auto 0;
        display: block;
    }
    .cta-art--resources {
        position: static;
        transform: none;
        width: 250px;
        margin: 12px auto 0;
        display: block;
    }
    .cta-art--rocket,
    .cta-rocket {
        width: 88px;
        right: 0;
    }
}
/* Footer */
.zop-footer {
    width: 100%;
    background: var(--white);
    font-family: var(--font);
    color: var(--text);
}
.zop-footer-main {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px 32px;
    align-items: start;
}
.zop-footer-brand {
    padding-right: 12px;
    min-width: 180px;
}
.zop-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}
.zop-logo img {
    display: block;
    height: 42px;
    width: auto;
}
.zop-footer-brand>p {
    max-width: 260px;
    margin: 0 0 20px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.65;
}
.zop-socials {
    display: flex;
    align-items: center;
    gap: 16px;
}
.zop-socials a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    text-decoration: none;
    font-size: 16px;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}
.zop-socials a:hover {
    color: var(--primary);
    background: #F4FAFB;
}
.zop-footer-column h4,
.zop-footer-contact h4 {
    margin: 4px 0 18px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.zop-footer-column {
    display: flex;
    flex-direction: column;
}
.zop-footer-column a {
    margin-bottom: 10px;
    color: #5B6B82;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}
.zop-footer-column a:hover {
    color: var(--primary-dark);
}
.zop-footer-contact {
    min-width: 0;
}
.zop-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #5B6B82;
    font-size: 14px;
    line-height: 1.55;
}
.zop-contact-item>i {
    width: 16px;
    margin-top: 3px;
    flex: 0 0 16px;
    color: var(--navy);
    font-size: 14px;
    text-align: center;
}
.zop-contact-item a {
    color: #5B6B82;
    text-decoration: none;
    font-size: 14px;
}
.zop-contact-item a:hover {
    color: var(--primary-dark);
}
.zop-contact-item p {
    margin: 0;
}
.zop-footer-bottom {
    width: min(var(--container), calc(100% - 48px));
    min-height: 56px;
    margin: 0 auto;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-light);
    font-size: 13px;
}
.zop-footer-bottom .fa-heart {
    color: #F04444;
    font-size: 12px;
    margin: 0 2px;
}
.zop-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}
.zop-footer-legal a {
    color: #5B6B82;
    text-decoration: none;
}
.zop-footer-legal a:hover {
    color: var(--primary-dark);
}
@media (max-width: 1100px) {
    .zop-footer-main {
        gap: 28px 24px;
    }
}
@media (max-width: 1000px) {
    .zop-footer-main {
        padding: 40px 0 28px;
    }
    .zop-footer-brand {
        padding-right: 0;
    }
}
@media (max-width: 600px) {
    .zop-footer-main {
        width: calc(100% - 32px);
        grid-template-columns: 1fr 1fr;
        padding: 32px 0 24px;
        gap: 24px 20px;
    }
    .zop-footer-brand {
        grid-column: 1 / -1;
    }
    .zop-footer-brand>p {
        max-width: 100%;
    }
    .zop-footer-contact {
        grid-column: 1 / -1;
    }
    .zop-footer-bottom {
        width: calc(100% - 32px);
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
@media (max-width: 400px) {
    .zop-footer-main {
        grid-template-columns: 1fr;
    }
}
/* /////////////////////about page//////////////////////////// */
a {
    text-decoration: none;
}
/* =========================================
   HERO SECTION (About Us)
========================================= */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    display: flex;
    align-items: center;
    padding: 48px 0 56px;
    background-color: #f7fbfc;
    background-image: url("../images/about-banner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* subtle decorative background */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(244, 250, 251, 0.55) 0%,
            rgba(244, 250, 251, 0.18) 42%,
            rgba(244, 250, 251, 0) 62%);
    pointer-events: none;
}
/* =========================================
   CONTAINER
========================================= */
.hero-section .hero-container {
    width: min(100% - 80px, var(--container));
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 2;
}
/* =========================================
   LEFT CONTENT
========================================= */
.hero-section .hero-content {
    width: 60%;
    max-width: 60%;
    padding: 20px 0;
    position: relative;
    z-index: 3;
}
/* Eyebrow */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(11, 166, 166, 0.09);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 24px;
}
/* Heading */
.hero-section .hero-content h1 {
    max-width: 560px;
    color: var(--navy);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.14;
    letter-spacing: -1.8px;
    font-weight: 800;
    margin-bottom: 20px;
}
.hero-section .hero-content h1 span {
    color: var(--primary);
    display: inline;
}
/* Description */
.hero-section .hero-content p {
    max-width: 510px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
    margin-bottom: 30px;
}
/* =========================================
   BUTTONS
========================================= */
.hero-section .hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.btn {
    min-height: 48px;
    padding: 0 19px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}
.btn span {
    font-size: 18px;
    line-height: 1;
}
/* Primary */
.btn-primary {
    color: var(--white);
    background: linear-gradient(135deg,
            var(--primary),
            var(--primary-dark));
    box-shadow: 0 8px 20px rgba(11, 166, 166, 0.22);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(11, 166, 166, 0.30);
}
/* Outline */
.btn-outline {
    color: var(--primary-dark);
    background: var(--white);
    border: 1px solid var(--primary);
    min-width: 158px;
}
.btn-outline:hover {
    color: var(--white);
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
/* =========================================
   IMAGE
========================================= */
.hero-image {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-image img {
    width: 100%;
    max-width: 680px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(7, 27, 73, 0.08));
}
/* =========================================
   TABLET
========================================= */
@media (max-width: 1100px) {
    .hero-section {
        min-height: auto;
        padding: 40px 0 48px;
    }
    .hero-section .hero-container {
        width: min(100% - 50px, var(--container));
    }
    .hero-section .hero-content h1 {
        font-size: 44px;
    }
    .hero-section .hero-content p {
        font-size: 15px;
    }
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {
    .hero-section {
        padding: 55px 0 35px;
        background-position: center;
    }
    .hero-section::before {
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.94) 0%,
                rgba(255, 255, 255, 0.88) 55%,
                rgba(247, 251, 252, 0.72) 100%);
    }
    .hero-section .hero-container {
        width: min(100% - 35px, 600px);
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .hero-section .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-eyebrow {
        margin-bottom: 20px;
    }
    .hero-section .hero-content h1 {
        max-width: 650px;
        font-size: clamp(35px, 9vw, 48px);
        line-height: 1.13;
        letter-spacing: -1.5px;
        margin-bottom: 18px;
    }
    .hero-section .hero-content p {
        max-width: 560px;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }
    .hero-section .hero-buttons {
        justify-content: center;
    }
    .hero-image {
        width: calc(100% + 20px);
        margin-left: -10px;
        justify-content: center;
    }
    .hero-image img {
        width: 100%;
    }
}
/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 480px) {
    .hero-section {
        padding-top: 40px;
    }
    .hero-section .hero-container {
        width: calc(100% - 28px);
    }
    .hero-section .hero-content h1 {
        font-size: 34px;
    }
    .hero-section .hero-content p {
        font-size: 13.5px;
    }
    .hero-section .hero-buttons {
        width: 100%;
        flex-direction: column;
    }
    .hero-section .btn {
        width: 100%;
        max-width: 220px;
    }
    .hero-image {
        width: calc(100% + 15px);
        margin-left: -7px;
    }
}
/* =========================
   SECTION
========================= */
.about-section {
    width: min(1280px, calc(100% - 40px));
    margin: 32px auto 28px;
    padding: 44px 48px 36px;
    background: var(--white);
    border: 1px solid rgba(229, 236, 243, .8);
    border-radius: 18px;
    box-shadow:
        0 10px 40px rgba(7, 27, 73, .06);
}
/* =========================
   TOP AREA
========================= */
.about-top {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
/* =========================
   STORY
========================= */
.story {
    padding-top: 2px;
}
.our-story {
    font-size: 12px;
    color: var(--primary-dark);
    font-weight: 700;
    letter-spacing: 0.4px;
}
.heading-class {
    margin: 12px 0 16px;
    color: var(--navy);
    font-size: 28px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.8px;
}
.story p {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
}
/* =========================
   STATS
========================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.stat-card {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid #f0f3f6;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.stat-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
}
.stat-icon i {
    font-size: 22px;
    line-height: 1;
}
.stat-icon.green {
    background: #E5F8EF;
    color: var(--green);
}
.stat-icon.purple {
    background: #F0EBFF;
    color: var(--purple);
}
.stat-icon.orange {
    background: #FFF3DF;
    color: var(--orange);
}
.stat-icon.blue {
    background: #E9F1FF;
    color: var(--blue);
}
.stat-icon.red {
    background: #FFECEF;
    color: #F0445E;
}
.stat-icon.teal {
    background: #E5F9F7;
    color: var(--primary);
}
.stat-card strong {
    display: block;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 4px;
}
.stat-card small {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}
/* =========================
   VALUES
========================= */
.values {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #edf2f4;
}
.values-heading {
    text-align: center;
    margin-bottom: 22px;
}
.values-heading .eyebrow {
    margin-bottom: 8px;
}
.values-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.35px;
}
/* =========================
   VALUE CARDS
========================= */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #F0F3F6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--white);
}
.value {
    position: relative;
    text-align: center;
    padding: 28px 22px 24px;
    min-height: 168px;
}
.value:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 0;
    width: 1px;
    height: calc(100% - 32px);
    background: var(--border);
}
.value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
}
.value-icon i {
    font-size: 22px;
    line-height: 1;
}
.value-icon.green {
    color: var(--green);
    background: #E4F8EE;
}
.value-icon.purple {
    color: var(--purple);
    background: #F1EDFF;
}
.value-icon.orange {
    color: #F18A00;
    background: #FFF2DF;
}
.value-icon.blue {
    color: var(--blue);
    background: #E8F1FF;
}
.heading-3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}
.value p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 950px) {
    .about-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .story {
        max-width: 600px;
    }
    .help-content {
        width: 48%;
        padding: 32px 28px;
    }
    .help-wrapper {
        min-height: 340px;
    }
    .illustration-area {
        min-height: 340px;
    }
}
@media (max-width: 700px) {
    .about-section {
        padding: 28px 22px;
        margin: 24px auto 20px;
    }
    .heading-class {
        font-size: 24px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .value:nth-child(2)::after {
        display: none;
    }
    .value:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }
}
@media (max-width: 480px) {
    .story h2 {
        font-size: 23px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .value:not(:last-child)::after {
        display: none;
    }
    .value {
        border-bottom: 1px solid var(--border);
    }
    .value:last-child {
        border-bottom: 0;
    }
}
/* =========================================
   MAIN SECTION
========================================= */
.real-estate-section {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto 32px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}
/* =========================================
   TOP SECTION
========================================= */
.help-wrapper {
    min-height: 400px;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 65% 55%,
            rgba(11, 166, 166, .08),
            transparent 30%),
        linear-gradient(110deg,
            #ffffff 0%,
            #ffffff 42%,
            #f7fbfc 100%);
}
/* =========================================
   LEFT CONTENT
========================================= */
.help-content {
    width: 42%;
    padding: 44px 48px 44px 40px;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.eyebrow,
.journey-eyebrow {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.2;
}
.section-title {
    margin-top: 6px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.18;
    font-weight: 800;
}
.business-list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.business-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}
.help-content .btn-outline {
    margin-top: 22px;
    align-self: flex-start;
}
.check {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #DDF6E8;
    color: var(--green);
    font-size: 14px;
    font-weight: 900;
}
.check i {
    font-size: 10px;
    line-height: 1;
}
.modules-btn .arrow {
    font-size: 13px;
}
/* =========================================
   ILLUSTRATION AREA
========================================= */
.illustration-area {
    flex: 1;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 24px 0 0;
}
/* =========================================
   AUDIENCE CARDS
========================================= */
.audience-card {
    position: absolute;
    z-index: 20;
    min-width: 112px;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #edf1f5;
    border-radius: 12px;
    box-shadow:
        0 7px 20px rgba(7, 27, 73, .08);
}
.builders-card {
    left: 5%;
    top: 20px;
}
.agents-card {
    left: 43%;
    top: 20px;
}
.channel-card {
    right: 2%;
    top: 68px;
    min-width: 140px;
}
.consultant-card {
    right: 4%;
    bottom: 42px;
}
.audience-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
}
.green-icon {
    color: var(--green);
    background: #E4F8EF;
}
.purple-icon {
    color: var(--purple);
    background: #F0EBFF;
}
.orange-icon {
    color: var(--orange);
    background: #FFF2DE;
}
.blue-icon {
    color: var(--blue);
    background: #E7F0FF;
}
.card-title {
    color: var(--navy);
    font-size: 9px;
    line-height: 1.15;
    font-weight: 800;
}
.card-subtitle {
    margin-top: 2px;
    color: var(--text);
    font-size: 8px;
    line-height: 1.1;
}
/* =========================================
   CONNECTOR LINES
========================================= */
.connector {
    position: absolute;
    z-index: 5;
    border: 1px dashed #B9DCE0;
    opacity: .9;
}
.connector-1 {
    width: 42px;
    height: 58px;
    left: 19%;
    top: 48px;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 14px 0 0;
}
.connector-2 {
    width: 38px;
    height: 50px;
    left: 55%;
    top: 48px;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 14px 0 0;
}
.connector-3 {
    width: 45px;
    height: 48px;
    right: 17%;
    top: 90px;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 14px 0 0;
}
.connector-4 {
    width: 45px;
    height: 40px;
    right: 19%;
    bottom: 72px;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 14px 0;
}
/* =========================================
   CITY PLATFORM
========================================= */
.city-platform {
    position: absolute;
    left: 11%;
    right: 18%;
    bottom: 21px;
    height: 91px;
    border-radius: 50%;
    background:
        linear-gradient(180deg,
            #DDF7F8 0%,
            #A9E5E7 100%);
    border: 2px solid #7BCFD3;
    box-shadow:
        0 9px 14px rgba(7, 27, 73, .08);
    transform: perspective(250px) rotateX(8deg);
}
/* =========================================
   BUILDINGS
========================================= */
.city-buildings {
    position: absolute;
    left: 8%;
    right: 5%;
    bottom: 10px;
    height: 170px;
}
.building {
    position: absolute;
    bottom: 0;
    background:
        linear-gradient(90deg,
            #70C8D0 0%,
            #C4EEF0 50%,
            #62B7C2 100%);
    border: 1px solid #4A9FAA;
    box-shadow:
        inset -5px 0 rgba(0, 0, 0, .04);
}
.building span {
    position: absolute;
    width: 5px;
    height: 7px;
    background: #1E6581;
    border-radius: 1px;
}
/* Small building */
.building-small {
    width: 30px;
    height: 58px;
    left: 8%;
}
.building-small span:nth-child(1) {
    left: 6px;
    top: 9px;
}
.building-small span:nth-child(2) {
    right: 6px;
    top: 9px;
}
.building-small span:nth-child(3) {
    left: 6px;
    top: 24px;
}
.building-small span:nth-child(4) {
    right: 6px;
    top: 24px;
}
.building-small span:nth-child(5) {
    left: 6px;
    top: 39px;
}
.building-small span:nth-child(6) {
    right: 6px;
    top: 39px;
}
/* Medium building */
.building-medium {
    width: 38px;
    height: 88px;
    left: 21%;
}
.building-medium span:nth-child(odd) {
    left: 7px;
}
.building-medium span:nth-child(even) {
    right: 7px;
}
.building-medium span:nth-child(1),
.building-medium span:nth-child(2) {
    top: 12px;
}
.building-medium span:nth-child(3),
.building-medium span:nth-child(4) {
    top: 30px;
}
.building-medium span:nth-child(5),
.building-medium span:nth-child(6) {
    top: 48px;
}
.building-medium span:nth-child(7),
.building-medium span:nth-child(8) {
    top: 66px;
}
/* Center */
.building-center {
    width: 32px;
    height: 105px;
    left: 39%;
}
.building-center span:nth-child(odd) {
    left: 6px;
}
.building-center span:nth-child(even) {
    right: 6px;
}
.building-center span:nth-child(1),
.building-center span:nth-child(2) {
    top: 10px;
}
.building-center span:nth-child(3),
.building-center span:nth-child(4) {
    top: 25px;
}
.building-center span:nth-child(5),
.building-center span:nth-child(6) {
    top: 40px;
}
.building-center span:nth-child(7),
.building-center span:nth-child(8) {
    top: 55px;
}
.building-center span:nth-child(9),
.building-center span:nth-child(10) {
    top: 70px;
}
.building-center span:nth-child(11),
.building-center span:nth-child(12) {
    top: 85px;
}
/* Tall center building */
.building-tall {
    width: 55px;
    height: 153px;
    left: 50%;
}
.building-tall .roof {
    position: absolute;
    width: 5px;
    height: 15px;
    background: #3E7C99;
    top: -15px;
    left: 25px;
}
.building-tall span:nth-child(odd) {
    left: 9px;
}
.building-tall span:nth-child(even) {
    right: 9px;
}
.building-tall span:nth-child(1),
.building-tall span:nth-child(2) {
    top: 13px;
}
.building-tall span:nth-child(3),
.building-tall span:nth-child(4) {
    top: 31px;
}
.building-tall span:nth-child(5),
.building-tall span:nth-child(6) {
    top: 49px;
}
.building-tall span:nth-child(7),
.building-tall span:nth-child(8) {
    top: 67px;
}
.building-tall span:nth-child(9),
.building-tall span:nth-child(10) {
    top: 85px;
}
.building-tall span:nth-child(11),
.building-tall span:nth-child(12) {
    top: 103px;
}
.building-tall span:nth-child(13),
.building-tall span:nth-child(14) {
    top: 121px;
}
.building-tall span:nth-child(15),
.building-tall span:nth-child(16) {
    top: 139px;
}
/* Right building */
.building-right {
    width: 38px;
    height: 111px;
    left: 67%;
}
.building-right span:nth-child(odd) {
    left: 6px;
}
.building-right span:nth-child(even) {
    right: 6px;
}
.building-right span:nth-child(1),
.building-right span:nth-child(2) {
    top: 11px;
}
.building-right span:nth-child(3),
.building-right span:nth-child(4) {
    top: 28px;
}
.building-right span:nth-child(5),
.building-right span:nth-child(6) {
    top: 45px;
}
.building-right span:nth-child(7),
.building-right span:nth-child(8) {
    top: 62px;
}
.building-right span:nth-child(9),
.building-right span:nth-child(10) {
    top: 79px;
}
/* Tiny tower */
.building-tiny {
    width: 26px;
    height: 68px;
    left: 30%;
}
.building-tiny .roof {
    position: absolute;
    left: 10px;
    top: -18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 15px solid #6DBBC5;
}
.building-tiny span:nth-child(1) {
    left: 5px;
    top: 12px;
}
.building-tiny span:nth-child(2) {
    right: 5px;
    top: 12px;
}
.building-tiny span:nth-child(3) {
    left: 5px;
    top: 29px;
}
.building-tiny span:nth-child(4) {
    right: 5px;
    top: 29px;
}
.building-tiny span:nth-child(5) {
    left: 5px;
    top: 46px;
}
/* =========================================
   HOUSE
========================================= */
.house {
    position: absolute;
    right: 7%;
    bottom: 0;
    width: 86px;
    height: 72px;
}
.house-roof {
    position: absolute;
    left: -7px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 40px solid #226080;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .08));
}
.house-body {
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 74px;
    height: 47px;
    background: #F8F7E9;
    border: 1px solid #B6C8C5;
}
.house .window {
    position: absolute;
    left: 11px;
    top: 11px;
    width: 16px;
    height: 15px;
    background: #78C8D0;
    border: 2px solid #27677F;
}
.house .door {
    position: absolute;
    right: 11px;
    bottom: 0;
    width: 18px;
    height: 30px;
    background: #557C89;
}
/* =========================================
   TREES
========================================= */
.tree {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #42A96D;
    border-radius: 50%;
    box-shadow:
        -5px 5px 0 #54B875,
        5px 6px 0 #31965D;
}
.tree::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    left: 5px;
    top: 12px;
    background: #55784A;
}
.tree-1 {
    left: 3%;
    bottom: 8px;
}
.tree-2 {
    left: 35%;
    bottom: 6px;
}
.tree-3 {
    left: 73%;
    bottom: 8px;
}
.tree-4 {
    right: 22%;
    bottom: 5px;
}
.tree-5 {
    right: 5%;
    bottom: 8px;
}
/* =========================================
   JOURNEY SECTION
========================================= */
.journey-wrapper {
    padding: 40px 48px 44px;
    background: #fff;
    border-top: 1px solid #edf2f4;
}
.journey-heading {
    text-align: center;
    margin-bottom: 8px;
}
.journey-heading .heading-class {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 26px;
}
.journey-eyebrow {
    font-size: 8px;
}
.journey-title {
    margin-top: 3px;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}
/* =========================================
   TIMELINE
========================================= */
.timeline {
    position: relative;
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    gap: 20px;
    margin-top: 28px;
    padding: 0 12px;
}
.timeline-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 32px;
    height: 1px;
    background: #D8E4E9;
}
.timeline-item {
    position: relative;
    z-index: 2;
    text-align: center;
}
.timeline-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 800;
}
.timeline-icon i {
    font-size: 24px;
    line-height: 1;
}
.green-timeline {
    color: var(--green);
    background: #E5F8EC;
}
.purple-timeline {
    color: var(--purple);
    background: #F0EBFF;
}
.blue-timeline {
    color: var(--blue);
    background: #E5EEFF;
}
.orange-timeline {
    color: var(--orange);
    background: #FFF1DC;
}
.timeline-year {
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}
.timeline-label {
    margin-top: 6px;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}
.timeline-description {
    margin-top: 5px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}
/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 900px) {
    .help-wrapper {
        min-height: 330px;
    }
    .help-content {
        width: 42%;
    }
    .illustration-area {
        min-height: 330px;
    }
    .city-platform {
        left: 5%;
        right: 5%;
        bottom: 18px;
    }
    .channel-card {
        right: 0;
    }
    .consultant-card {
        right: 0;
    }
}
@media (max-width: 700px) {
    .real-estate-section {
        border-radius: 14px;
        padding: 0;
        margin-bottom: 24px;
    }
    .help-wrapper {
        display: block;
        min-height: auto;
    }
    .help-content {
        width: 100%;
        padding: 28px 22px 20px;
    }
    .section-title {
        font-size: 24px;
    }
    .business-item {
        font-size: 13px;
    }
    .illustration-area {
        height: auto;
        min-height: 280px;
        padding: 0 16px 16px;
    }
    .illustration-image {
        max-height: 280px;
    }
    .builders-card {
        left: 4%;
        top: 10px;
    }
    .agents-card {
        left: auto;
        right: 4%;
        top: 10px;
    }
    .channel-card {
        top: 62px;
        right: 3%;
    }
    .consultant-card {
        right: 3%;
        bottom: 32px;
    }
    .city-platform {
        left: 4%;
        right: 4%;
        bottom: 10px;
    }
    .journey-wrapper {
        padding: 28px 20px 32px;
    }
    .timeline {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .timeline-line {
        top: 15px;
        bottom: 15px;
        left: 50%;
        right: auto;
        width: 1px;
        height: auto;
    }
    .timeline-item {
        display: grid;
        grid-template-columns: 1fr 42px 1fr;
        align-items: center;
        text-align: left;
    }
    .timeline-icon {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin: 0 auto;
        width: 56px;
        height: 56px;
    }
    .timeline-line {
        top: 28px;
    }
    .timeline-year,
    .timeline-label,
    .timeline-description {
        text-align: right;
        padding-right: 10px;
    }
    .timeline-year {
        grid-column: 1;
        grid-row: 1;
    }
    .timeline-label {
        grid-column: 1;
        grid-row: 2;
    }
    .timeline-description {
        grid-column: 1;
        grid-row: 3;
    }
    .timeline-item:nth-child(even) .timeline-year,
    .timeline-item:nth-child(even) .timeline-label,
    .timeline-item:nth-child(even) .timeline-description {
        grid-column: 3;
        text-align: left;
        padding-left: 10px;
        padding-right: 0;
    }
}
@media (max-width: 480px) {
    .section-title {
        font-size: 21px;
    }
    .audience-card {
        transform: scale(.9);
        transform-origin: center;
    }
    .city-platform {
        transform:
            perspective(250px) rotateX(8deg) scale(.9);
    }
    .building-tall {
        height: 130px;
    }
    .building-right {
        height: 95px;
    }
    .house {
        transform: scale(.8);
        transform-origin: bottom right;
    }
}
.real-estate-cta__content {
    position: relative;
    z-index: 2;
}
.real-estate-cta__title {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}
.real-estate-cta__description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
}
.real-estate-cta__highlight {
    color: var(--white);
    font-weight: 700;
}
.real-estate-cta__actions {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 15px;
    margin-right: 190px;
}
.real-estate-cta__button {
    height: 37px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.real-estate-cta__button--primary {
    color: var(--primary-dark);
    background: var(--white);
    border: 1px solid var(--white);
}
.real-estate-cta__button--outline {
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.real-estate-cta__arrow {
    font-size: 16px;
}
/* Target */
.real-estate-cta__target {
    position: absolute;
    right: 45px;
    top: 50%;
    width: 115px;
    height: 115px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.real-estate-cta__circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle,
            #eafafa 0 12px,
            #159f9f 13px 23px,
            #f4ffff 24px 34px,
            #1aa2a2 35px 43px,
            #d9f5f5 44px 46px,
            transparent 47px);
    box-shadow: 0 0 25px rgba(22, 198, 200, 0.25);
}
.real-estate-cta__target-arrow {
    position: absolute;
    z-index: 2;
    width: 72px;
    height: 5px;
    top: 25px;
    left: 54px;
    border-radius: 10px;
    background: var(--primary-light);
    transform: rotate(-38deg);
}
.real-estate-cta__target-arrow::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 15px solid var(--primary-light);
}
.real-estate-cta__target {
    position: absolute;
    right: 45px;
    top: 50%;
    width: 150px;
    height: 100px;
    transform: translateY(-50%);
    z-index: 2;
}
.real-estate-cta__target-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* //contact */
/* ==========================================
   CONTACT BANNER
========================================== */
.contact-banner {
    --primary: #0BA6A6;
    --primary-dark: #078B91;
    --navy: #071B49;
    --white: #FFFFFF;
    --text: #33415C;
    --text-light: #718096;
    --border: #E5ECF3;
    --blue: #2167F3;
    --green: #20A96B;
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background-color: #F4FAFB;
    background-image: url("../images/contact-banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* ==========================================
   LEFT CONTENT
========================================== */
.contact-banner__content {
    position: relative;
    z-index: 2;
    width: 60%;
    max-width: 60%;
    padding: 48px 28px 72px 6%;
}
/* ==========================================
   CONTACT LABEL
========================================== */
.contact-banner__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 22px;
    color: var(--primary-dark);
    background: #DDF5F5;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .6px;
}
.contact-banner__label i {
    font-size: 12px;
}
/* ==========================================
   HEADING
========================================== */
.contact-banner__heading {
    color: var(--navy);
    font-size: clamp(40px, 4.4vw, 56px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.4px;
}
.contact-banner__heading>div {
    display: block;
}
.contact-banner__heading span {
    color: var(--primary);
}
/* ==========================================
   DESCRIPTION
========================================== */
.contact-banner__description {
    max-width: 470px;
    margin: 18px 0 36px;
    color: #3B4A63;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}
/* ==========================================
   FEATURES
========================================== */
.contact-banner__features {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.contact-banner__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* ==========================================
   FEATURE ICON
========================================== */
.contact-banner__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E6F7F7;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}
.contact-banner__icon i {
    color: var(--primary);
    font-size: 20px;
}
/* Green icon */
.contact-banner__icon--green {
    background: #E8F8EF;
}
.contact-banner__icon--green i {
    color: var(--green);
}
/* Blue icon */
.contact-banner__icon--blue {
    background: #E8F1FF;
}
.contact-banner__icon--blue i {
    color: var(--blue);
}
/* ==========================================
   FEATURE TITLE
========================================== */
.contact-banner__feature-title {
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}
/* ==========================================
   FEATURE TEXT
========================================== */
.contact-banner__feature-text {
    color: #5B6B82;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}
/* ==========================================
   TABLET
========================================== */
@media (max-width: 1100px) {
    .contact-banner {
        min-height: 440px;
        background-size: cover;
        background-position: center center;
    }
    .contact-banner__content {
        width: 60%;
        max-width: 60%;
        padding: 40px 20px 64px 5%;
    }
    .contact-banner__heading {
        font-size: 42px;
    }
    .contact-banner__description {
        font-size: 15px;
        margin: 16px 0 28px;
    }
    .contact-banner__features {
        gap: 18px;
    }
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {
    .contact-banner {
        min-height: auto;
        display: block;
        overflow: hidden;
        background-image: none;
        background-color: #F4FAFB;
    }
    .contact-banner__content {
        width: 100%;
        max-width: 100%;
        padding: 40px 25px 30px;
    }
    .contact-banner__heading {
        font-size: 36px;
        letter-spacing: -1px;
    }
    .contact-banner__description {
        max-width: 100%;
        font-size: 15px;
    }
    .contact-banner__features {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
        gap: 15px;
    }
    .contact-banner::after {
        content: "";
        display: block;
        width: 100%;
        height: 250px;
        background-image: url("../images/contact-banner.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }
}
/* ==========================================
   SMALL MOBILE
========================================== */
@media (max-width: 500px) {
    .contact-banner__content {
        padding: 35px 20px 25px;
    }
    .contact-banner__heading {
        font-size: 32px;
    }
    .contact-banner__features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .contact-banner__feature {
        align-items: center;
    }
    .contact-banner__icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
    .contact-banner::after {
        height: 220px;
    }
}
/* =========================================================
   CONTACT INFO SECTION
========================================================= */
.contact-info-section {
    --primary: #0BA6A6;
    --primary-dark: #078B91;
    --primary-light: #16C6C8;
    --navy: #071B49;
    --navy-2: #0A2558;
    --white: #FFFFFF;
    --background: #F7FBFC;
    --background-soft: #EEF9FA;
    --text-dark: #071B49;
    --text: #33415C;
    --text-light: #718096;
    --border: #E5ECF3;
    --blue: #2167F3;
    --green: #20A96B;
    --orange: #FF7A21;
    --shadow-sm:
        0 4px 15px rgba(7, 27, 73, 0.05);
    --shadow:
        0 15px 45px rgba(7, 27, 73, 0.08);
    --radius: 14px;
    width: 100%;
    max-width: var(--container);
    margin: -64px auto 0;
    padding: 0 24px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: 24px;
    background: transparent;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}
/* =========================================================
   GLOBAL BOX SIZING
========================================================= */
.contact-info-section *,
.contact-info-section *::before,
.contact-info-section *::after {
    box-sizing: border-box;
}
/* =========================================================
   LEFT & RIGHT CARDS
========================================================= */
.contact-form-card,
.contact-details-card {
    width: 100%;
    background: var(--white);
    border: 1px solid #EAF0F5;
    border-radius: var(--radius);
    box-shadow:
        0 5px 20px rgba(7, 27, 73, 0.06);
    padding: 28px;
}
/* =========================================================
   SECTION HEADING
========================================================= */
.contact-section-title {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.4px;
}
/* =========================================================
   SECTION SUBTITLE
========================================================= */
.contact-section-subtitle {
    margin: 0 0 24px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}
/* =========================================================
   FORM
========================================================= */
.contact-form-card form {
    width: 100%;
}
/* =========================================================
   INPUT GRID
========================================================= */
.contact-form-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
/* =========================================================
   INPUT BOX
========================================================= */
.contact-input {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 17px;
    background: #FFFFFF;
    border: 2px solid #E3EAF1;
    border-radius: 8px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
/* Input hover */
.contact-input:hover {
    border-color: #CAD8E6;
}
/* Input focus */
.contact-input:focus-within {
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow:
        0 0 0 3px rgba(11, 166, 166, 0.08);
}
/* Input icon */
.contact-input>i {
    width: 20px;
    min-width: 20px;
    color: #607493;
    font-size: 17px;
    text-align: center;
}
/* Input */
.contact-input input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
}
/* Placeholder */
.contact-input input::placeholder {
    color: #52627E;
    opacity: 1;
}
/* =========================================================
   SELECT BOX
========================================================= */
.contact-select {
    position: relative;
    width: 100%;
    min-height: 74px;
    margin-top: 20px;
    padding: 12px 18px;
    display: block;
    background: #FFFFFF;
    border: 2px solid #E3EAF1;
    border-radius: 8px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.contact-select:hover {
    border-color: #CAD8E6;
}
.contact-select:focus-within {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(11, 166, 166, 0.08);
}
.contact-select__label {
    display: block;
    margin-bottom: 6px;
    color: #52627E;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    pointer-events: none;
}
.contact-select small {
    color: #52627E;
    font-size: 12px;
    line-height: 1.3;
}
.contact-select > i {
    position: absolute;
    right: 18px;
    top: 50%;
    z-index: 1;
    color: var(--navy);
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}
.contact-select select {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 34px 40px 12px 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
/* =========================================================
   MESSAGE BOX
========================================================= */
.contact-message {
    width: 100%;
    min-height: 123px;
    margin-top: 20px;
    padding: 14px 18px 9px;
    background: #FFFFFF;
    border: 2px solid #E3EAF1;
    border-radius: 8px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.contact-message:focus-within {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(11, 166, 166, 0.08);
}
/* Message label */
.contact-message label {
    display: block;
    margin: 0 0 8px;
    color: #52627E;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
}
/* Textarea */
.contact-message textarea {
    width: 100%;
    min-height: 65px;
    padding: 0;
    margin: 0;
    resize: vertical;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
}
/* Textarea placeholder */
.contact-message textarea::placeholder {
    color: #52627E;
    opacity: 1;
}
/* =========================================================
   FORM BOTTOM
========================================================= */
.contact-form-bottom {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
/* =========================================================
   SUBMIT BUTTON
========================================================= */
.contact-submit {
    min-width: 205px;
    height: 52px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 7px;
    background:
        linear-gradient(135deg,
            #0BA6A6 0%,
            #078B91 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 5px 14px rgba(11, 166, 166, 0.20);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
/* Button hover */
.contact-submit:hover {
    background:
        linear-gradient(135deg,
            #078B91 0%,
            #067D83 100%);
    transform: translateY(-1px);
    box-shadow:
        0 8px 20px rgba(11, 166, 166, 0.26);
}
/* Button active */
.contact-submit:active {
    transform: translateY(0);
}
/* Button icon */
.contact-submit i {
    font-size: 15px;
}
/* =========================================================
   PRIVACY MESSAGE
========================================================= */
.contact-privacy {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #52627E;
    font-size: 11px;
    line-height: 1.55;
}
/* Privacy icon */
.contact-privacy>i {
    flex-shrink: 0;
    color: #60789B;
    font-size: 22px;
}
/* =========================================================
   RIGHT SIDE DETAILS
========================================================= */
.contact-details-card {
    padding: 28px;
}
/* =========================================================
   DETAIL ITEM
========================================================= */
.contact-detail-item {
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px;
    margin-bottom: 12px;
    background: #FFFFFF;
    border: 2px solid #E6EDF3;
    border-radius: 9px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
/* Last item */
.contact-detail-item:last-child {
    margin-bottom: 0;
}
/* Detail hover */
.contact-detail-item:hover {
    border-color: #D4E1EA;
    box-shadow:
        0 5px 16px rgba(7, 27, 73, 0.04);
    transform: translateY(-1px);
}
/* =========================================================
   DETAIL ICON
========================================================= */
.contact-detail-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}
/* Detail icon */
.contact-detail-icon i {
    font-size: 28px;
}
/* =========================================================
   EMAIL ICON
========================================================= */
.contact-detail-icon.email {
    background: #E8F7F7;
}
.contact-detail-icon.email i {
    color: #079A9A;
}
/* =========================================================
   PHONE ICON
========================================================= */
.contact-detail-icon.phone {
    background: #E9F8F2;
}
.contact-detail-icon.phone i {
    color: #0AA875;
}
/* =========================================================
   OFFICE ICON
========================================================= */
.contact-detail-icon.office {
    background: #EAF2FF;
}
.contact-detail-icon.office i {
    color: #2167F3;
}
/* =========================================================
   WORKING HOURS ICON
========================================================= */
.contact-detail-icon.hours {
    background: #FFF1E7;
}
.contact-detail-icon.hours i {
    color: #F57D27;
}
/* =========================================================
   DETAIL CONTENT
========================================================= */
.contact-detail-content {
    min-width: 0;
    flex: 1;
}
/* Detail title */
.contact-detail-title {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}
/* Detail text */
.contact-detail-text {
    color: #33415C;
    font-size: 12px;
    line-height: 1.65;
    word-break: break-word;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1100px) {
    .contact-info-section {
        grid-template-columns:
            minmax(0, 1.2fr) minmax(320px, 0.9fr);
        margin-top: -48px;
        padding: 0 20px 48px;
    }
    .contact-form-card,
    .contact-details-card {
        padding: 24px;
    }
    .contact-section-title {
        font-size: 22px;
    }
    .contact-detail-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
    .contact-detail-icon i {
        font-size: 24px;
    }
    .contact-detail-item {
        gap: 13px;
    }
}
/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 900px) {
    .contact-info-section {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 0;
        padding: 24px 20px 48px;
    }
    .contact-form-card,
    .contact-details-card {
        padding: 26px;
    }
    .contact-detail-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 650px) {
    .contact-info-section {
        display: block;
        margin-top: 0;
        padding: 18px 15px 40px;
        background: transparent;
    }
    .contact-form-card,
    .contact-details-card {
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    .contact-details-card {
        margin-bottom: 0;
    }
    .contact-section-title {
        font-size: 21px;
        letter-spacing: -0.2px;
    }
    .contact-section-subtitle {
        margin-bottom: 20px;
        font-size: 12px;
    }
    /* Form inputs become one column */
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .contact-input {
        height: 54px;
        padding: 0 15px;
    }
    .contact-select {
        min-height: 70px;
        margin-top: 14px;
        padding: 11px 15px;
    }
    .contact-message {
        min-height: 120px;
        margin-top: 14px;
        padding: 13px 15px 8px;
    }
    /* Bottom becomes vertical */
    .contact-form-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 16px;
    }
    .contact-submit {
        width: 100%;
        min-width: 0;
    }
    .contact-privacy {
        justify-content: center;
        text-align: left;
    }
    /* Details */
    .contact-detail-item {
        min-height: 84px;
        padding: 10px;
        gap: 12px;
    }
    .contact-detail-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
        border-radius: 12px;
    }
    .contact-detail-icon i {
        font-size: 21px;
    }
    .contact-detail-title {
        font-size: 14px;
    }
    .contact-detail-text {
        font-size: 11px;
        line-height: 1.55;
    }
}
/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
    .contact-info-section {
        padding: 12px 10px;
    }
    .contact-form-card,
    .contact-details-card {
        padding: 17px;
    }
    .contact-section-title {
        font-size: 19px;
    }
    .contact-section-subtitle {
        font-size: 11px;
    }
    .contact-input {
        height: 52px;
        gap: 10px;
    }
    .contact-input>i {
        font-size: 15px;
    }
    .contact-input input {
        font-size: 12px;
    }
    .contact-detail-item {
        gap: 10px;
    }
    .contact-detail-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    .contact-detail-icon i {
        font-size: 19px;
    }
    .contact-detail-title {
        font-size: 13px;
    }
    .contact-detail-text {
        font-size: 10px;
    }
    .contact-privacy {
        font-size: 10px;
    }
}
/* =========================================================
   MAIN SECTION
========================================================= */
#offices {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 20px 0 70px;
    background: var(--background);
    color: var(--text);
}
/* =========================================================
   MAIN HEADING
========================================================= */
#offices>header {
    display: block;
    text-align: center;
    margin: 0 0 18px;
}
#offices>header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}
#offices>header>span {
    display: block;
    width: 40px;
    height: 3px;
    margin: 9px auto 0;
    border-radius: 10px;
    background: var(--primary);
}
/* =========================================================
   OFFICE CARDS GRID
========================================================= */
#offices>main {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}
/* =========================================================
   OFFICE CARD
========================================================= */
#offices>main>article {
    width: 100%;
    overflow: hidden;
    background: var(--white);
    border:
        1px solid rgba(7, 27, 73, 0.035);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
#offices>main>article:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 40px rgba(7, 27, 73, 0.10);
}
/* =========================================================
   CARD HEADER
========================================================= */
#offices>main>article>header {
    min-height: 94px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding:
        15px 18px 13px;
}
/* =========================================================
   OFFICE ICON CIRCLE
========================================================= */
#offices>main>article>header>figure {
    width: 67px;
    height: 67px;
    min-width: 67px;
    flex: 0 0 67px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
/* Font Awesome icon */
#offices>main>article>header>figure i {
    display: block;
    font-size: 30px;
    line-height: 1;
}
/* =========================================================
   FIRST OFFICE ICON
========================================================= */
#offices>main>article:nth-child(1)>header>figure {
    background: #EAF7F7;
    color: #087E83;
}
/* =========================================================
   SECOND OFFICE ICON
========================================================= */
#offices>main>article:nth-child(2)>header>figure {
    background: #EAF8F2;
    color: #20A96B;
}
/* =========================================================
   THIRD OFFICE ICON
========================================================= */
#offices>main>article:nth-child(3)>header>figure {
    background: #EDF4FF;
    color: #2167F3;
}
/* =========================================================
   OFFICE INFORMATION
========================================================= */
#offices>main>article>header>section {
    min-width: 0;
    flex: 1;
}
#offices>main>article h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}
#offices address {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
    font-style: normal;
    font-weight: 700;
}
/* =========================================================
   MAP CONTAINER
========================================================= */
#offices>main>article>figure {
    position: relative;
    width: calc(100% - 36px);
    height: 110px;
    margin:
        0 18px;
    overflow: hidden;
    border-radius: 11px;
    background:
        #EEF2F3;
}
/* Map image */
#offices>main>article>figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================================================
   MAP MARKER
========================================================= */
#offices>main>article>figure>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform:
        translate(-50%, -50%) rotate(-45deg);
    border-radius:
        50% 50% 50% 0;
    color: #FFFFFF;
    background: var(--primary);
    box-shadow:
        0 5px 12px rgba(7, 27, 73, 0.20);
    z-index: 2;
}
/* Map marker icon */
#offices>main>article>figure>span i {
    display: block;
    font-size: 16px;
    transform: rotate(45deg);
    line-height: 1;
}
/* =========================================================
   MAP MARKER COLORS
========================================================= */
#offices>main>article:nth-child(1)>figure>span {
    background: #159B9E;
}
#offices>main>article:nth-child(2)>figure>span {
    background: #20A96B;
}
#offices>main>article:nth-child(3)>figure>span {
    background: #2167F3;
}
/* =========================================================
   CARD FOOTER
========================================================= */
#offices>main>article>footer {
    padding:
        15px 20px 17px;
}
/* Directions link */
#offices>main>article>footer a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease;
}
/* Arrow */
#offices>main>article>footer a i {
    font-size: 13px;
    transition:
        transform 0.2s ease;
}
/* Hover */
#offices>main>article>footer a:hover i {
    transform: translateX(4px);
}
/* UAE link */
#offices>main>article:nth-child(3)>footer a {
    color: var(--blue);
}
/* =========================================================
   CTA BANNER
========================================================= */
#offices>aside {
    position: relative;
    width: 100%;
    min-height: 208px;
    margin-top: 20px;
    padding:
        26px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 48% 110%,
            rgba(22, 198, 200, 0.18),
            transparent 32%),
        linear-gradient(110deg,
            #08747B 0%,
            #006C74 48%,
            #05636C 100%);
    box-shadow: var(--shadow);
}
/* =========================================================
   CTA DECORATIVE DOTS
========================================================= */
#offices>aside::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 180px;
    left: 34%;
    top: 30px;
    opacity: 0.30;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.16) 1px,
            transparent 1px);
    background-size: 10px 10px;
    mask-image:
        linear-gradient(to right,
            transparent,
            black 25%,
            transparent 100%);
}
/* =========================================================
   CTA CONTENT
========================================================= */
#offices>aside>section {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
}
#offices>aside h2 {
    margin:
        0 0 8px;
    color: #FFFFFF;
    font-size: 25px;
    line-height: 1.18;
    font-weight: 700;
}
#offices>aside p {
    max-width: 405px;
    margin: 0;
    color:
        rgba(255,
            255,
            255,
            0.88);
    font-size: 13px;
    line-height: 1.6;
}
/* =========================================================
   CTA NAVIGATION
========================================================= */
#offices>aside nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 17px;
}
/* =========================================================
   CTA BUTTON BASE
========================================================= */
#offices>aside nav a {
    min-height: 43px;
    padding:
        0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border 0.2s ease;
}
/* =========================================================
   REQUEST DEMO BUTTON
========================================================= */
#offices>aside nav a:first-child {
    color: var(--primary-dark);
    background: #FFFFFF;
    border:
        1px solid #FFFFFF;
}
#offices>aside nav a:first-child:hover {
    background: #F0FFFF;
    transform:
        translateY(-2px);
}
#offices>aside nav a:first-child i {
    font-size: 13px;
    transition:
        transform 0.2s ease;
}
#offices>aside nav a:first-child:hover i {
    transform:
        translateX(4px);
}
/* =========================================================
   EXPLORE FEATURES BUTTON
========================================================= */
#offices>aside nav a:last-child {
    color: #FFFFFF;
    background: transparent;
    border:
        1px solid rgba(255, 255, 255, 0.75);
}
#offices>aside nav a:last-child:hover {
    background:
        rgba(255, 255, 255, 0.10);
    border-color:
        rgba(255, 255, 255, 0.95);
    transform:
        translateY(-2px);
}
/* =========================================================
   CTA IMAGE
========================================================= */
#offices>aside>figure {
    position: relative;
    z-index: 2;
    width: 450px;
    height: 185px;
    flex: 0 0 450px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* CTA image */
#offices>aside>figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1000px) {
    #offices {
        width:
            min(100% - 32px,
                1140px);
    }
    #offices>main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    #offices>main>article:nth-child(3) {
        grid-column:
            1 / -1;
    }
    #offices>main>article:nth-child(3)>header {
        max-width: 500px;
    }
    #offices>aside {
        padding:
            28px 30px;
    }
    #offices>aside>figure {
        width: 350px;
        flex-basis: 350px;
    }
}
/* =========================================================
   MOBILE TABLET
========================================================= */
@media (max-width: 750px) {
    #offices {
        width:
            calc(100% - 28px);
        padding:
            35px 0 55px;
    }
    #offices>main {
        grid-template-columns:
            1fr;
        gap: 16px;
    }
    #offices>main>article:nth-child(3) {
        grid-column: auto;
    }
    #offices>main>article:nth-child(3)>header {
        max-width: none;
    }
    #offices>aside {
        min-height: auto;
        padding:
            30px 25px;
    }
    #offices>aside>figure {
        display: none;
    }
    #offices>aside>section {
        max-width: 100%;
    }
    #offices>aside h2 {
        font-size: 23px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 500px) {
    #offices {
        width:
            calc(100% - 24px);
    }
    /* Heading */
    #offices>header h2 {
        font-size: 22px;
    }
    #offices>header>span {
        width: 38px;
        height: 3px;
        margin-top: 8px;
    }
    /* Card header */
    #offices>main>article>header {
        min-height: 90px;
        gap: 12px;
        padding:
            14px 15px 12px;
    }
    /* Icon */
    #offices>main>article>header>figure {
        width: 62px;
        height: 62px;
        min-width: 62px;
        flex-basis: 62px;
    }
    #offices>main>article>header>figure i {
        font-size: 27px;
    }
    /* Office title */
    #offices>main>article h3 {
        font-size: 13.5px;
    }
    /* Address */
    #offices address {
        font-size: 11px;
        line-height: 1.55;
    }
    /* Map */
    #offices>main>article>figure {
        width:
            calc(100% - 30px);
        height: 115px;
        margin:
            0 15px;
    }
    /* Footer */
    #offices>main>article>footer {
        padding:
            14px 17px 17px;
    }
    /* CTA */
    #offices>aside {
        padding:
            27px 20px;
    }
    #offices>aside h2 {
        font-size: 21px;
        line-height: 1.25;
    }
    #offices>aside p {
        font-size: 12.5px;
        line-height: 1.6;
    }
    /* CTA buttons */
    #offices>aside nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 18px;
    }
    #offices>aside nav a {
        width: 100%;
        min-height: 44px;
        padding:
            0 20px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
    #offices>main>article>header {
        gap: 10px;
    }
    #offices>main>article>header>figure {
        width: 56px;
        height: 56px;
        min-width: 56px;
        flex-basis: 56px;
    }
    #offices>main>article>header>figure i {
        font-size: 24px;
    }
    #offices>main>article h3 {
        font-size: 13px;
    }
    #offices address {
        font-size: 10.5px;
    }
    #offices>aside h2 {
        font-size: 20px;
    }
}
.heading-4 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}
.request-banner.contact-banner {
    overflow: hidden;
    min-height: 520px;
    padding-bottom: 50px;
    background-color: #F4FAFB;
    background-image: url("../images/request-demo-banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.request-banner .contact-banner__content {
    width: 60%;
    max-width: 60%;
    padding: 48px 28px 72px 6%;
}
.request-banner .contact-banner__label {
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 22px;
    color: #0B8F72;
    background: #E4F6EF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
}
.request-banner .contact-banner__label i {
    font-size: 12px;
    color: #0B8F72;
}
.request-banner .contact-banner__heading {
    color: #071B49;
    font-size: clamp(40px, 4.4vw, 56px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.4px;
}
.request-banner .contact-banner__heading span {
    color: #0B8F72;
}
.request-banner .contact-banner__description {
    max-width: 470px;
    margin: 18px 0 36px;
    color: #3B4A63;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}
.request-banner .contact-banner__features {
    align-items: flex-start;
    gap: 28px;
}
.request-banner .contact-banner__feature {
    align-items: flex-start;
    gap: 12px;
}
.request-banner .contact-banner__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: #FFFFFF;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(7, 27, 73, .08);
}
.request-banner .contact-banner__icon i,
.request-banner .contact-banner__icon--green i,
.request-banner .contact-banner__icon--blue i {
    color: #0B8F72;
    font-size: 20px;
}
.request-banner .contact-banner__feature-title {
    margin-bottom: 4px;
    color: #071B49;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
}
.request-banner .contact-banner__feature-text {
    color: #5B6B82;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}
.request-banner.contact-banner::after {
    background-image: url("../images/request-demo.png");
}
/* MAIN SECTION */
.demo-section {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: var(--container);
    margin: -72px auto 0;
    padding: 0 24px 56px;
    background: transparent;
    font-family: var(--font);
}
.demo-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}
/* LEFT FORM */
.demo-form-card {
    padding: 36px 38px 32px;
    background: var(--white);
    border: 1px solid rgba(229, 236, 243, .95);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(7, 27, 73, .08);
}
.demo-title {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.demo-subtitle {
    margin-bottom: 28px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.55;
}
.demo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.demo-input {
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    background: var(--white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.demo-input:hover,
.demo-select:hover,
.demo-message:hover,
.demo-options:hover {
    border-color: #c5d5e3;
    box-shadow: 0 0 0 3px rgba(11, 166, 166, .06);
}
.demo-input i {
    width: 18px;
    color: #718096;
    font-size: 15px;
    flex-shrink: 0;
}
.demo-input b,
.demo-label b,
.demo-options-title b {
    font-weight: 600;
    color: #e53e3e;
}
.demo-select {
    position: relative;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.demo-full {
    grid-column: 1 / -1;
    margin-top: 0;
}
.demo-label {
    margin-bottom: 4px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}
.demo-value {
    color: var(--text-light);
    font-size: 13px;
}
.demo-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #64748b;
    font-size: 12px;
    transform: translateY(-50%);
}
/* OPTIONS */
.demo-options {
    margin-top: 16px;
    padding: 18px 18px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
}
.demo-options-title {
    margin-bottom: 14px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.demo-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.demo-option {
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.demo-option input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 18px;
    border: 1.5px solid #9aa9bd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.demo-option input:checked {
    position: relative;
    border-color: var(--primary);
    background: var(--primary);
}
.demo-option input:checked::after {
    content: "\f00c";
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
    transform: translate(-50%, -50%);
}
.demo-other {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    grid-column: 1 / -1;
}
.demo-other .demo-option {
    white-space: nowrap;
}
.demo-other-input {
    display: none;
    width: 100%;
    height: 36px;
    margin-top: 0;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    color: var(--text);
    font-size: 13px;
}
.demo-other:has(input[type="checkbox"]:checked) .demo-other-input {
    display: block;
}
.demo-other-input::placeholder {
    color: var(--text-light);
}
/* MESSAGE */
.demo-message {
    min-height: 96px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
}
.demo-placeholder {
    color: var(--text-light);
    font-size: 13px;
}
/* FOOTER */
.demo-footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.demo-button {
    min-width: 180px;
    height: 50px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(11, 166, 166, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.demo-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(11, 166, 166, .32);
}
.demo-button i {
    font-size: 14px;
}
.demo-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.5;
}
.demo-privacy>i {
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
}
/* RIGHT COLUMN */
.demo-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.demo-info-card,
.demo-person-card,
.demo-talk-card {
    border: 1px solid rgba(229, 236, 243, .95);
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(7, 27, 73, .07);
}
/* WHY CARD */
.demo-info-card {
    padding: 26px 28px;
}
.demo-card-title {
    margin-bottom: 18px;
    color: var(--navy);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
}
.demo-reason {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}
.demo-reason>span {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--green);
    color: white;
}
.demo-reason i {
    font-size: 10px;
}
/* PERSON CARD */
.demo-person-card {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    background:
        radial-gradient(circle at 55% 88%, #dff8f6 0, #f4fbfb 45%, #fff 100%);
}
.demo-speech {
    position: absolute;
    z-index: 10;
    top: 22px;
    left: 22px;
    max-width: 140px;
    padding: 14px 16px;
    border-radius: 12px;
    background: white;
    color: var(--text);
    font-size: 12px;
    line-height: 1.55;
    box-shadow: 0 8px 24px rgba(7, 27, 73, .08);
}
.demo-rating {
    position: absolute;
    z-index: 10;
    bottom: 22px;
    left: 22px;
    padding: 12px 14px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 8px 24px rgba(7, 27, 73, .08);
}
.demo-rating-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.demo-rating strong {
    color: var(--navy);
    font-size: 20px;
    font-weight: 800;
}
.demo-rating span {
    color: var(--orange);
    font-size: 12px;
    letter-spacing: -1px;
}
.demo-rating small {
    display: block;
    margin-top: 4px;
    color: var(--text-light);
    font-size: 11px;
}
.demo-person-image {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: min(72%, 260px);
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
}
/* TALK TO SALES */
.demo-talk-card {
    min-height: 148px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.demo-headset {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    border-radius: 50%;
    background: #e8f9f8;
    color: var(--primary);
}
.demo-headset i {
    font-size: 28px;
}
.demo-talk-content {
    flex: 1;
}
.demo-talk-title {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}
.demo-talk-text {
    max-width: 100%;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.55;
}
.demo-sales-button {
    height: 40px;
    margin-top: 14px;
    padding: 0 18px;
    border: 1px solid #9bd8d7;
    border-radius: 8px;
    background: white;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.demo-sales-button:hover {
    background: #f0fbfb;
    border-color: var(--primary);
}
.demo-sales-button i {
    margin-left: 8px;
    font-size: 11px;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
    .request-banner {
        min-height: 440px;
        background-size: cover;
        background-position: center center;
    }
    .request-banner .contact-banner__content {
        width: 60%;
        max-width: 60%;
        padding: 40px 20px 64px 5%;
    }
    .request-banner .contact-banner__heading {
        font-size: 42px;
    }
    .request-banner .contact-banner__description {
        font-size: 15px;
        margin: 16px 0 28px;
    }
    .request-banner .contact-banner__features {
        gap: 18px;
    }
    .demo-section {
        margin-top: -48px;
        padding: 0 20px 48px;
    }
}
@media (max-width: 900px) {
    .request-banner {
        min-height: auto;
        padding-bottom: 40px;
        background-size: cover;
        background-position: center center;
    }
    .request-banner .contact-banner__content {
        width: 60%;
        max-width: 60%;
    }
    .demo-section {
        margin-top: 0;
        padding: 24px 20px 48px;
    }
    .demo-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .demo-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .demo-person-card {
        grid-column: 1 / -1;
        min-height: 260px;
    }
}
@media (max-width: 768px) {
    .request-banner {
        background-image: none;
    }
    .request-banner.contact-banner::after {
        background-image: url("../images/request-demo-banner.png");
        background-size: cover;
        background-position: center right;
    }
}
@media (max-width: 600px) {
    .demo-form-card {
        padding: 24px 20px;
    }
    .demo-title {
        font-size: 21px;
    }
    .demo-form-grid,
    .demo-options-grid {
        grid-template-columns: 1fr;
    }
    .demo-full {
        grid-column: auto;
    }
    .demo-right {
        display: flex;
    }
    .demo-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
    .demo-button {
        width: 100%;
    }
    .demo-person-card {
        min-height: 240px;
    }
    .demo-person-image {
        width: 65%;
        right: -4px;
    }
}
.demo-included-section {
    width: 100%;
    padding: 56px 24px 64px;
    background: var(--background);
    font-family: var(--font);
}
.demo-included-section .heading-class {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -.7px;
}
.demo-title-line {
    width: 42px;
    height: 3px;
    margin: 0 auto 36px;
    border-radius: 10px;
    background: var(--primary);
}
.demo-included-carousel {
    position: relative;
    width: min(var(--container), 100%);
    margin: 0 auto;
    padding: 0 48px;
}
.demo-included-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 66px) / 4);
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.demo-included-track::-webkit-scrollbar {
    display: none;
}
.demo-included-card {
    min-height: 190px;
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: var(--white);
    border: 1px solid rgba(229, 236, 243, .7);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(7, 27, 73, .06);
    scroll-snap-align: start;
    transition: transform .25s ease, box-shadow .25s ease;
}
.demo-included-nav {
    position: absolute;
    top: 42%;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 8px 20px rgba(7, 27, 73, .12);
    cursor: pointer;
}
.demo-included-nav:disabled {
    opacity: .35;
    cursor: default;
}
.demo-included-nav--prev { left: 0; }
.demo-included-nav--next { right: 0; }
.demo-included-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}
.demo-included-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5dee8;
    cursor: pointer;
}
.demo-included-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--primary);
}
.demo-included-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(7, 27, 73, .1);
}
.demo-included-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--green);
    background: linear-gradient(145deg, #e8faef, #d8f5e5);
    border: 1px solid #c7efd7;
}
.demo-included-icon i {
    font-size: 24px;
    color: inherit;
}
.demo-included-card .heading-3 {
    margin-bottom: 10px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}
.demo-included-text {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
}
/* TABLET */
@media (max-width: 900px) {
    .demo-included-carousel {
        padding: 0 40px;
    }
    .demo-included-track {
        grid-auto-columns: calc((100% - 22px) / 2);
    }
}
/* MOBILE */
@media (max-width: 550px) {
    .demo-included-section {
        padding: 40px 16px 48px;
    }
    .demo-included-section .heading-class {
        font-size: 24px;
    }
    .demo-included-carousel {
        padding: 0 36px;
    }
    .demo-included-track {
        grid-auto-columns: 100%;
        gap: 16px;
    }
    .demo-included-card {
        min-height: 160px;
        padding: 24px 20px;
    }
}
.text-center {
    text-align: center;
}
/* =====================================================
   MAIN PAGE
===================================================== */
.pricing-page {
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 28%,
            rgba(22, 198, 200, .1),
            transparent 32%),
        linear-gradient(180deg,
            #eefafa 0%,
            #f7fbfc 38%,
            #f7fbfc 100%);
    color: var(--navy);
}
/* =====================================================
   HERO
===================================================== */
.pricing-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    padding: 36px 0 88px;
    overflow: hidden;
    isolation: isolate;
    background-color: #F4FAFB;
    background-image: url("../images/pricing-hero-banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.pricing-hero__container {
    width: min(1240px, calc(100% - 40px));
    min-height: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.pricing-hero__content {
    position: relative;
    z-index: 2;
    width: 60%;
    max-width: 60%;
}
.pricing-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #d9f3f1;
    color: var(--primary-dark);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .4px;
    margin-bottom: 18px;
}
.pricing-hero__title {
    max-width: 560px;
    color: var(--navy);
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.15;
    letter-spacing: -1.4px;
    font-weight: 800;
    margin: 0 0 16px;
}
.pricing-hero__title span {
    color: var(--primary);
}
.pricing-hero__description {
    margin: 0 0 24px;
    max-width: 500px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
}
.pricing-hero__billing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(7, 27, 73, .06);
}
.billing-btn {
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}
.billing-btn--white {
    background: transparent;
    color: var(--navy);
}
.billing-btn--active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11, 166, 166, .22);
}
.billing-save {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #d9f5eb;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}
.pricing-hero__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 620px;
}
.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.pricing-feature__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    margin-top: 2px;
}
.pricing-feature h4 {
    margin: 0 0 3px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}
.pricing-feature p {
    margin: 0;
    color: var(--text-light);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}
.pricing-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 320px;
}
.pricing-hero__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
}
/* =====================================================
   PRICING CARDS CONTAINER
===================================================== */
.pricing-cards {
    position: relative;
    z-index: 5;
    width: min(1240px, calc(100% - 40px));
    margin: -48px auto 48px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    min-height: 430px;
    padding: 24px 22px 20px;
    background: #ffffff;
    border: 1px solid rgba(229, 236, 243, .95);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(7, 27, 73, .06);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(7, 27, 73, .1);
}
.pricing-card--popular {
    border: 1.5px solid #8b68ed;
    box-shadow: 0 10px 30px rgba(118, 87, 232, .12);
    padding-top: 32px;
}
.popular-label {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 24px;
    min-width: 128px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(90deg, #5924db, #7535e7);
    color: #fff;
    border-radius: 0 0 10px 10px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.popular-label i {
    font-size: 8px;
}
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.card-header h3,
.plan-name {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
}
.card-header p,
.plan-description {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
}
.plan-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55);
}
.pricing-card--starter .plan-icon {
    color: #fff;
    background: var(--green);
}
.pricing-card--professional .plan-icon {
    color: #fff;
    background: var(--blue);
}
.pricing-card--business .plan-icon {
    color: #fff;
    background: var(--purple);
}
.pricing-card--enterprise .plan-icon {
    color: #fff;
    background: var(--orange);
}
.price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 2px;
}
.price strong {
    color: var(--navy);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.4px;
}
.price span {
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
}
.billing {
    margin-top: 6px;
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}
.custom-price {
    margin-top: 4px;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.3px;
}
.features {
    list-style: none;
    margin: 18px 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.features li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}
.features li i {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 7px;
}
.pricing-card--starter .features li i {
    background: var(--green);
}
.pricing-card--professional .features li i {
    background: var(--blue);
}
.pricing-card--business .features li i {
    background: #5b2ed6;
}
.pricing-card--enterprise .features li i {
    background: var(--orange);
}
.card-btn {
    width: 100%;
    height: 40px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: .2s ease;
}
.pricing-card--selected {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(7, 27, 73, .12);
    outline: 2px solid var(--primary);
    outline-offset: 0;
}
.pricing-card--starter .card-btn {
    color: var(--green);
    border: 1px solid #4ec28d;
}
.pricing-card--starter .card-btn:hover {
    color: #fff;
    background: var(--green);
}
.pricing-card--professional .card-btn {
    color: var(--blue);
    border: 1px solid #4b83f5;
}
.pricing-card--professional .card-btn:hover {
    color: #fff;
    background: var(--blue);
}
.pricing-card--business .card-btn {
    color: #fff;
    border: 0;
    background: linear-gradient(90deg, #4d1dd2, #7230e5);
}
.pricing-card--business .card-btn:hover {
    background: #4b19c5;
}
.pricing-card--enterprise .card-btn {
    color: #f28a00;
    border: 1px solid #ffb13d;
}
.pricing-card--enterprise .card-btn:hover {
    color: #fff;
    background: var(--orange);
}
@media (max-width: 1100px) {
    .pricing-hero {
        background-size: cover;
        background-position: center center;
    }
    .pricing-hero__container {
        min-height: 360px;
    }
    .pricing-hero__content {
        width: 60%;
        max-width: 60%;
    }
    .pricing-cards {
        margin-top: 0;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 650px) {
    .pricing-hero {
        min-height: auto;
        padding: 24px 0 0;
        background-image: none;
        background-color: #F4FAFB;
    }
    .pricing-hero::after {
        content: "";
        display: block;
        width: 100%;
        height: 220px;
        background-image: url("../images/pricing-hero-banner.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
    }
    .pricing-hero__container {
        width: calc(100% - 24px);
        min-height: auto;
        padding-bottom: 24px;
    }
    .pricing-hero__content {
        width: 100%;
        max-width: 100%;
    }
    .pricing-hero__title {
        font-size: 28px;
    }
    .pricing-hero__description br {
        display: none;
    }
    .pricing-hero__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        max-width: 100%;
    }
    .pricing-cards {
        width: calc(100% - 24px);
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }
    .pricing-card {
        min-height: auto;
    }
}
body.pricing-modal-open {
    overflow: hidden;
}
.pricing-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pricing-modal[hidden] {
    display: none;
}
.pricing-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 73, .55);
}
.pricing-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px 28px 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(7, 27, 73, .22);
}
.pricing-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f4f7fa;
    color: var(--navy);
    cursor: pointer;
}
.pricing-modal__header {
    margin: 0 40px 18px 0;
}
.pricing-modal__eyebrow {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pricing-modal__header h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 26px;
    font-weight: 800;
}
.pricing-modal__header p {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}
.pricing-modal__plan {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eefbfb;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}
.pricing-modal__plan:empty {
    display: none;
}
.pricing-modal__alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.pricing-modal__alert.is-success {
    background: #e8f8f0;
    color: #167a4a;
}
.pricing-modal__alert.is-error {
    background: #fdecec;
    color: #b42318;
}
.pricing-modal .contact-form-bottom {
    flex-wrap: wrap;
}
@media (max-width: 650px) {
    .pricing-modal {
        padding: 12px;
        align-items: flex-end;
    }
    .pricing-modal__dialog {
        max-height: calc(100vh - 24px);
        padding: 22px 18px 18px;
        border-radius: 16px 16px 0 0;
    }
}
/* =====================================================
   FEATURE COMPARISON
===================================================== */
.comparison-section {
    padding: 8px 0 32px;
    background: #f7fbfc;
}
.feature-comparison {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #edf2f5;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(7, 27, 73, .06);
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.comparison-table th,
.comparison-table td {
    border-bottom: 1px solid #edf1f4;
    vertical-align: middle;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
    border-bottom: 0;
}
.comparison-table thead th {
    height: 72px;
    padding: 18px 12px 14px;
    font-weight: 800;
    text-align: center;
}
.comparison-feature-col {
    width: 28%;
    padding-left: 28px !important;
    text-align: left !important;
    color: var(--navy);
    font-size: 18px;
    background: #ffffff;
}
.comparison-feature-name {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 28px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    background: #ffffff;
}
.comparison-feature-name i {
    width: 18px;
    color: #8a94a6;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}
.comparison-table tbody tr:nth-child(even) .comparison-feature-name {
    background: #f8fafb;
}
.comparison-plan {
    position: relative;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}
.comparison-plan--starter {
    color: var(--green);
    background: rgba(32, 169, 107, .04);
}
.comparison-plan--professional {
    color: var(--blue);
    background: rgba(33, 103, 243, .04);
}
.comparison-plan--business {
    color: #5b2bd9;
    background: rgba(118, 87, 232, .08);
    padding-top: 28px;
}
.comparison-plan--enterprise {
    color: #f28a00;
    background: rgba(255, 170, 39, .04);
}
.comparison-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 128px;
    height: 24px;
    padding: 0 14px;
    color: #ffffff;
    background: linear-gradient(90deg, #5521d8, #7737e8);
    border-radius: 0 0 10px 10px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.comparison-popular i {
    font-size: 8px;
}
.comparison-value {
    padding: 14px 10px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.comparison-col--starter {
    background: rgba(32, 169, 107, .03);
}
.comparison-col--professional {
    background: rgba(33, 103, 243, .03);
}
.comparison-col--business {
    background: rgba(118, 87, 232, .07);
}
.comparison-col--enterprise {
    background: rgba(255, 170, 39, .03);
}
.comparison-check {
    font-size: 16px;
    font-weight: 800;
}
.comparison-col--starter.comparison-check {
    color: var(--green);
}
.comparison-col--professional.comparison-check {
    color: var(--blue);
}
.comparison-col--business.comparison-check {
    color: #5b2bd9;
}
.comparison-col--enterprise.comparison-check {
    color: #ff8c0a;
}
.comparison-dash {
    color: #aeb8c5;
    font-size: 14px;
    font-weight: 500;
}
.comparison-text {
    font-size: 12px;
    font-weight: 600;
}
@media (max-width: 900px) {
    .feature-comparison {
        width: calc(100% - 24px);
        overflow-x: auto;
    }
    .comparison-table {
        min-width: 860px;
    }
}
@media (max-width: 600px) {
    .feature-comparison {
        border-radius: 12px;
    }
    .comparison-table {
        min-width: 780px;
    }
    .comparison-feature-col {
        font-size: 16px;
    }
}
/* =====================================================
   PRICING FAQ
===================================================== */
.pricing-faq {
    padding: 36px 0 56px;
    background: #f7fbfc;
}
.pricing-faq__title {
    margin: 0 0 28px;
    color: var(--navy);
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
    letter-spacing: -.5px;
}
.pricing-faq__title span {
    position: relative;
    display: inline-block;
}
.pricing-faq__title span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 4px;
    border-radius: 999px;
    background: var(--green);
}
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.faq-item {
    background: #ffffff;
    border: 1px solid #e8eef3;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(7, 27, 73, .04);
    overflow: hidden;
}
.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: "⌄";
    color: #8a94a6;
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] summary::after {
    transform: rotate(180deg);
}
.faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .pricing-faq {
        padding-bottom: 40px;
    }
}
/* ==================================================
   MAIN HERO SECTION
================================================== */
.features-hero {
    width: 100%;
    position: relative;
    min-height: 520px;
    padding: 52px 0 72px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    background-color: #F4FAFB;
    background-image: url("../images/features-hero-banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* ==================================================
   SUBTLE BACKGROUND EFFECT
================================================== */
.features-hero::before,
.features-hero::after {
    display: none;
}
/* ==================================================
   LEFT CONTENT
================================================== */
.features-hero-container {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    min-height: 420px;
}
.features-hero-content {
    width: 60%;
    max-width: 60%;
    position: relative;
    z-index: 5;
    padding-left: 0;
}
/* ==================================================
   BADGE
================================================== */
.features-badge {
    width: fit-content;
    margin-bottom: 25px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    color: #147878;
    background: #E5F5F4;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* ==================================================
   MAIN TITLE
================================================== */
.features-title {
    margin: 0;
    color: var(--navy);
    font-size: clamp(36px, 3.8vw, 46px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.2px;
}
.features-title span {
    color: var(--green);
}
/* ==================================================
   DESCRIPTION
================================================== */
.features-description {
    margin-top: 20px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 500;
    max-width: 480px;
}
/* ==================================================
   RIGHT VISUAL AREA
================================================== */
.features-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    z-index: 3;
}
/* ==================================================
   DASHBOARD
================================================== */
.features-dashboard {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 22px 40px rgba(7, 27, 73, 0.14));
}
/* ==================================================
   FLOATING ICON COMMON
================================================== */
.features-floating-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    box-shadow:
        0 15px 30px rgba(7, 27, 73, 0.12);
    z-index: 6;
}
/* ==================================================
   USERS ICON
================================================== */
.features-users-icon {
    width: 92px;
    height: 92px;
    left: 3%;
    top: 58px;
    border-radius: 18px;
    background:
        linear-gradient(145deg,
            #FFFFFF,
            #F5EEFF);
    transform: rotate(7deg);
    box-shadow:
        0 12px 25px rgba(110, 65, 190, 0.18);
}
.users-icon {
    width: 52px;
    height: 45px;
    position: relative;
    transform: rotate(-7deg);
}
.user-head {
    position: absolute;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(135deg,
            #8554F1,
            #4D16D5);
    border-radius: 50%;
}
.user-head-one {
    left: 8px;
    top: 2px;
}
.user-head-two {
    right: 4px;
    top: 4px;
    width: 14px;
    height: 14px;
}
.user-body {
    position: absolute;
    height: 17px;
    background:
        linear-gradient(135deg,
            #8554F1,
            #4D16D5);
    border-radius: 12px 12px 6px 6px;
}
.user-body-one {
    width: 32px;
    left: 0;
    bottom: 3px;
}
.user-body-two {
    width: 22px;
    right: 0;
    bottom: 3px;
}
/* ==================================================
   ANALYTICS ICON
================================================== */
.features-chart-icon {
    width: 92px;
    height: 105px;
    right: 0;
    top: 105px;
    border-radius: 17px;
    background:
        linear-gradient(145deg,
            #FFFFFF,
            #EFFFF4);
    transform: rotate(7deg);
    box-shadow:
        0 14px 28px rgba(20, 150, 90, 0.14);
}
.chart-bars {
    width: 45px;
    height: 53px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transform: rotate(-7deg);
}
.chart-bars span {
    width: 10px;
    border-radius: 5px 5px 3px 3px;
    background:
        linear-gradient(to top,
            #04985E,
            #19C77B);
}
.chart-bars span:nth-child(1) {
    height: 25px;
}
.chart-bars span:nth-child(2) {
    height: 38px;
}
.chart-bars span:nth-child(3) {
    height: 52px;
}
/* ==================================================
   CHECKLIST ICON
================================================== */
.features-checklist-icon {
    width: 98px;
    height: 108px;
    right: 5%;
    bottom: 42px;
    border-radius: 18px;
    background:
        linear-gradient(145deg,
            #FFFFFF,
            #FFF5E8);
    transform: rotate(7deg);
    box-shadow:
        0 14px 28px rgba(230, 140, 30, 0.15);
}
.checklist-icon {
    width: 51px;
    height: 61px;
    padding: 8px;
    box-sizing: border-box;
    background: #FF8A00;
    border-radius: 5px;
    transform: rotate(-7deg);
}
.checklist-top {
    width: 18px;
    height: 18px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF8A00;
    background: var(--white);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 900;
}
.checklist-line {
    width: 27px;
    height: 4px;
    margin: 5px 0;
    border-radius: 4px;
    background: var(--white);
}
/* ==================================================
   BOTTOM WHITE CURVE / CARD EFFECT
================================================== */
.features-hero-visual::after {
    display: none;
}
/* ==================================================
   LARGE SCREEN
================================================== */
@media (min-width: 1400px) {
    .features-hero {
        padding: 56px 0 52px;
    }
    .features-title {
        font-size: 48px;
    }
    .features-dashboard {
        max-width: 700px;
    }
}
/* ==================================================
   TABLET
================================================== */
@media (max-width: 1100px) {
    .features-hero {
        padding: 44px 0 56px;
        background-size: cover;
        background-position: center center;
    }
    .features-hero-container {
        min-height: 360px;
    }
    .features-hero-content {
        width: 60%;
        max-width: 60%;
    }
    .features-title {
        font-size: 36px;
    }
    .features-description {
        font-size: 15px;
    }
    .features-dashboard {
        max-width: 100%;
    }
    .features-users-icon {
        width: 75px;
        height: 75px;
    }
    .features-chart-icon {
        width: 75px;
        height: 85px;
    }
    .features-checklist-icon {
        width: 78px;
        height: 88px;
    }
}
/* ==================================================
   SMALL TABLET
================================================== */
@media (max-width: 800px) {
    .features-hero {
        padding: 40px 0 0;
        background-image: none;
        background-color: #F4FAFB;
        min-height: auto;
    }
    .features-hero::after {
        display: block;
        content: "";
        position: relative;
        width: 100%;
        height: 240px;
        top: auto;
        right: auto;
        background-image: url("../images/features-hero-banner.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
        filter: none;
        border-radius: 0;
    }
    .features-hero-container {
        min-height: auto;
    }
    .features-hero-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .features-description {
        margin-left: auto;
        margin-right: auto;
    }
    .features-title {
        font-size: 34px;
    }
    .features-hero-visual {
        max-width: 560px;
        margin: 0 auto;
    }
    .features-users-icon {
        left: 10%;
        top: 35px;
    }
    .features-chart-icon {
        right: 8%;
        top: 30px;
    }
    .features-checklist-icon {
        right: 10%;
        bottom: 5px;
    }
}
/* ==================================================
   MOBILE
================================================== */
@media (max-width: 600px) {
    .features-hero {
        padding: 36px 0 28px;
    }
    .features-badge {
        margin-bottom: 18px;
        padding: 6px 12px;
        font-size: 10px;
    }
    .features-title {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -0.6px;
    }
    .features-description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.55;
    }
    .desktop-break {
        display: none;
    }
    .features-hero-visual {
        max-width: 100%;
    }
    .features-users-icon {
        width: 62px;
        height: 62px;
        left: 2%;
        top: 28px;
    }
    .features-chart-icon {
        width: 65px;
        height: 72px;
        right: 1%;
        top: 25px;
    }
    .features-checklist-icon {
        width: 68px;
        height: 75px;
        right: 4%;
        bottom: 10px;
    }
}
/* ==================================================
   VERY SMALL MOBILE
================================================== */
@media (max-width: 400px) {
    .features-hero {
        padding-top: 32px;
    }
    .features-title {
        font-size: 26px;
    }
    .features-description {
        font-size: 13px;
    }
}
/* ==================================================
   MAIN SECTION
================================================== */
.lead-management-section {
    width: 100%;
    padding: 0 20px 24px;
    box-sizing: border-box;
    background: var(--background);
}
.lead-management-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 36px 36px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.lead-management-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}
/* Header icon */
.lead-management-header-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(145deg,
            #F4FFF8,
            #E6F8ED);
    color: #13A665;
    font-size: 24px;
    box-shadow:
        0 5px 14px rgba(22, 167, 101, 0.08);
}
.lead-management-header-icon.lead-header-pink {
    background:
        linear-gradient(145deg,
            #FFF0F6,
            #FFE4F0);
    color: #E84393;
    box-shadow:
        0 5px 14px rgba(232, 67, 147, 0.10);
}
.sales-engagement-section {
    padding-top: 0;
}
.lead-management-section + .sales-engagement-section {
    padding-bottom: 24px;
}
/* Header text */
.lead-management-title {
    margin-bottom: 4px;
    color: var(--lead-navy);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}
.lead-management-subtitle {
    color: var(--lead-text);
    font-size: 14px;
    line-height: 1.45;
}
.lead-management-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.lead-card {
    min-height: 300px;
    position: relative;
    padding: 28px 24px 24px;
    box-sizing: border-box;
    text-align: center;
    background: var(--lead-white);
    border: 1px solid var(--lead-border);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(7, 27, 73, 0.06);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.lead-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 30px rgba(7, 27, 73, 0.10);
}
/* ==================================================
   CARD ICON
================================================== */
.lead-card-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.lead-card-title {
    margin-bottom: 10px;
    color: var(--lead-navy);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}
.lead-card-description {
    min-height: 48px;
    color: var(--lead-text);
    font-size: 13px;
    line-height: 1.55;
}
.lead-card-features {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.lead-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lead-text);
    font-size: 12px;
    line-height: 1.35;
}
/* Green icon background */
.lead-card-green .lead-card-icon {
    background:
        linear-gradient(145deg,
            #F0FFF7,
            #E4F8EC);
}
/* Purple icon background */
.lead-card-purple .lead-card-icon {
    background:
        linear-gradient(145deg,
            #F8F3FF,
            #EFE5FF);
}
/* Teal icon background */
.lead-card-teal .lead-card-icon {
    background:
        linear-gradient(145deg,
            #EEFFFF,
            #DDF8F7);
}
/* Orange icon background */
.lead-card-orange .lead-card-icon {
    background:
        linear-gradient(145deg,
            #FFF8ED,
            #FFF0D8);
}
.lead-card-icon i {
    font-size: 32px;
    line-height: 1;
    color: inherit;
}
.lead-card .lead-feature i {
    color: var(--card-color);
}
.lead-card .lead-card-arrow {
    background: var(--card-color);
}
.lead-card-green .lead-card-icon i {
    color: var(--lead-green);
}
.lead-card-purple .lead-card-icon i {
    color: var(--lead-purple);
}
.lead-card-teal .lead-card-icon i {
    color: var(--lead-teal);
}
.lead-card-orange .lead-card-icon i {
    color: var(--lead-orange);
}
.lead-card-pink .lead-card-icon {
    background:
        linear-gradient(145deg,
            #FFF0F6,
            #FFE4F0);
}
.lead-card-pink .lead-card-icon i {
    color: #E84393;
}
.lead-feature i {
    width: 12px;
    flex: 0 0 12px;
    font-size: 10px;
    line-height: 1;
}
.lead-card-green .lead-feature i {
    color: var(--lead-green);
}
.lead-card-purple .lead-feature i {
    color: var(--lead-purple);
}
.lead-card-teal .lead-feature i {
    color: var(--lead-teal);
}
.lead-card-orange .lead-feature i {
    color: var(--lead-orange);
}
.lead-card-pink .lead-feature i {
    color: #E84393;
}
.lead-feature-bullet {
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}
/* Feature colors */
.lead-card-green .lead-feature-bullet {
    color: var(--lead-green);
}
.lead-card-purple .lead-feature-bullet {
    color: var(--lead-purple);
}
.lead-card-teal .lead-feature-bullet {
    color: var(--lead-teal);
}
.lead-card-orange .lead-feature-bullet {
    color: var(--lead-orange);
}
/* ==================================================
   ROUND ARROW BUTTON
================================================== */
.lead-card-arrow {
    width: 29px;
    height: 29px;
    position: absolute;
    right: 20px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--lead-white);
    font-family: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.lead-card-arrow:hover {
    transform: scale(1.1);
    box-shadow:
        0 5px 12px rgba(7, 27, 73, 0.15);
}
.lead-card-green .lead-card-arrow {
    background: var(--lead-green);
}
.lead-card-purple .lead-card-arrow {
    background: var(--lead-purple);
}
.lead-card-teal .lead-card-arrow {
    background: var(--lead-teal);
}
.lead-card-orange .lead-card-arrow {
    background: var(--lead-orange);
}
.lead-card-pink .lead-card-arrow {
    background: #E84393;
}
.lead-card-arrow i {
    font-size: 12px;
    line-height: 1;
}
/* ==================================================
   RECEPTION ICON
================================================== */
.reception-icon {
    width: 48px;
    height: 48px;
    position: relative;
}
.reception-screen {
    position: absolute;
    width: 39px;
    height: 29px;
    left: 4px;
    top: 4px;
    border-radius: 4px;
    background:
        linear-gradient(135deg,
            #10B873,
            #07945D);
    box-shadow:
        0 4px 8px rgba(22, 167, 101, 0.18);
}
.reception-person-head {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 10px;
    left: 17px;
    border-radius: 50%;
    background: var(--lead-white);
}
.reception-person-body {
    position: absolute;
    width: 23px;
    height: 11px;
    left: 12px;
    top: 23px;
    border-radius: 14px 14px 3px 3px;
    background: var(--lead-white);
}
.reception-base {
    position: absolute;
    width: 28px;
    height: 4px;
    left: 10px;
    bottom: 6px;
    border-radius: 5px;
    background: #07945D;
}
/* ==================================================
   DATABASE ICON
================================================== */
.database-icon {
    width: 48px;
    height: 52px;
    position: relative;
}
.database-layer {
    position: absolute;
    width: 45px;
    height: 16px;
    left: 1px;
    border-radius: 50%;
    background:
        linear-gradient(to bottom,
            #9A5AF2,
            #6729D7);
    box-shadow:
        inset 0 -2px 2px rgba(0, 0, 0, 0.1);
}
.database-layer::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 22px;
    left: 0;
    top: 7px;
    border-left: 2px solid #6729D7;
    border-right: 2px solid #6729D7;
    border-radius: 0 0 50% 50%;
}
.database-layer-top {
    top: 3px;
    z-index: 3;
}
.database-layer-middle {
    top: 17px;
    z-index: 2;
}
.database-layer-bottom {
    top: 31px;
    z-index: 1;
}
/* ==================================================
   WORKSPACE ICON
================================================== */
.workspace-icon {
    width: 53px;
    height: 50px;
    position: relative;
}
.workspace-screen {
    position: absolute;
    width: 45px;
    height: 33px;
    left: 0;
    top: 3px;
    border-radius: 4px;
    background:
        linear-gradient(135deg,
            #08AFA9,
            #078C88);
}
.workspace-person-head {
    position: absolute;
    width: 11px;
    height: 11px;
    left: 11px;
    top: 9px;
    border-radius: 50%;
    background: var(--white);
}
.workspace-person-body {
    position: absolute;
    width: 20px;
    height: 10px;
    left: 6px;
    top: 20px;
    border-radius: 10px 10px 2px 2px;
    background: var(--white);
}
.workspace-lines {
    position: absolute;
    right: 5px;
    top: 10px;
}
.workspace-lines span {
    display: block;
    width: 16px;
    height: 3px;
    margin-bottom: 4px;
    border-radius: 3px;
    background: var(--white);
}
/* ==================================================
   POST SALES ICON
================================================== */
.post-sales-icon {
    width: 53px;
    height: 53px;
    position: relative;
}
.sales-person-head {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 10px;
    top: 2px;
    border-radius: 50%;
    background:
        linear-gradient(135deg,
            #FFA21A,
            #F27600);
}
.sales-person-body {
    position: absolute;
    width: 40px;
    height: 22px;
    left: 2px;
    top: 23px;
    border-radius: 22px 22px 7px 7px;
    background:
        linear-gradient(135deg,
            #FFA21A,
            #F27600);
}
.sales-check {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    background: #18A96A;
    font-size: 14px;
    font-weight: 800;
}
/* ==================================================
   LARGE DESKTOP
================================================== */
@media (min-width: 1400px) {
    .lead-management-container {
        max-width: var(--container);
        padding-left: 36px;
        padding-right: 36px;
    }
    .lead-management-grid {
        gap: 22px;
    }
}
/* ==================================================
   TABLET
================================================== */
@media (max-width: 1050px) {
    .lead-management-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
    .lead-card {
        min-height: 290px;
    }
}
/* ==================================================
   MOBILE
================================================== */
@media (max-width: 600px) {
    .lead-management-section {
        padding: 0 10px 15px;
    }
    .lead-management-container {
        padding: 18px 12px;
        border-radius: 12px;
    }
    .lead-management-header {
        gap: 12px;
        margin-bottom: 15px;
    }
    .lead-management-header-icon {
        width: 46px;
        height: 46px;
    }
    .lead-management-title {
        font-size: 18px;
    }
    .lead-management-subtitle {
        font-size: 11px;
    }
    .lead-management-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .lead-card {
        min-height: 275px;
        padding: 20px;
    }
    .lead-card-icon {
        margin-left: 0;
        margin-right: 0;
    }
    .lead-card-title {
        font-size: 17px;
    }
    .lead-card-description {
        max-width: 300px;
        font-size: 12px;
    }
}
/* ==================================================
   SMALL MOBILE
================================================== */
@media (max-width: 400px) {
    .lead-management-container {
        padding: 15px 10px;
    }
    .lead-card {
        padding: 18px;
    }
    .lead-management-title {
        font-size: 17px;
    }
    .lead-management-subtitle {
        font-size: 10px;
    }
}
.business-operations-section {
    width: 100%;
    padding: 0 20px 24px;
    box-sizing: border-box;
    background: var(--background);
    font-family: var(--font);
}
.business-operations-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 36px 36px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.business-operations-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}
.business-operations-header-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #F1F6FF;
    color: #1269DE;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(77, 124, 254, 0.08);
}
.business-operations-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.business-operations-title {
    color: var(--text-dark);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}
.business-operations-subtitle {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}
/* =====================================================
   GRID
===================================================== */
.business-operations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
/* =====================================================
   CARD
===================================================== */
.business-operation-card {
    --card-color: var(--purple);
    position: relative;
    min-height: 300px;
    padding: 28px 24px 24px;
    box-sizing: border-box;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(7, 27, 73, 0.055);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.business-operation-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 16px;
    font-size: 28px;
    transition: transform 0.25s ease;
}
.business-operation-title {
    margin-bottom: 10px;
    color: var(--text-dark);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}
.business-operation-description {
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    min-height: 44px;
}
.business-operation-features {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.business-operation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(7, 27, 73, 0.10);
    border-color: rgba(7, 27, 73, 0.08);
}
/* =====================================================
   CARD COLORS
===================================================== */
.card-purple {
    --card-color: var(--purple);
}
.card-orange {
    --card-color: var(--orange);
}
.card-blue {
    --card-color: var(--blue);
}
/* =====================================================
   CARD ICON
===================================================== */
.business-operation-card:hover .business-operation-icon {
    transform: scale(1.05);
}
/* Purple */
.card-purple .business-operation-icon {
    color: var(--purple);
    background:
        linear-gradient(145deg,
            #F7F2FF 0%,
            #EFE8FF 100%);
    box-shadow:
        0 8px 20px rgba(119, 87, 232, 0.08);
}
/* Orange */
.card-orange .business-operation-icon {
    color: var(--orange);
    background:
        linear-gradient(145deg,
            #FFF9EF 0%,
            #FFF0D7 100%);
    box-shadow:
        0 8px 20px rgba(255, 174, 53, 0.08);
}
/* Blue */
.card-blue .business-operation-icon {
    color: var(--blue);
    background:
        linear-gradient(145deg,
            #F2F7FF 0%,
            #E7F0FF 100%);
    box-shadow:
        0 8px 20px rgba(77, 124, 254, 0.08);
}
/* =====================================================
   FEATURES
===================================================== */
.business-operation-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}
.business-operation-feature i {
    width: 12px;
    color: var(--card-color);
    font-size: 9px;
    flex: 0 0 12px;
}
.business-operation-feature.feature-muted {
    color: #A6AEBA;
}
/* =====================================================
   ARROW BUTTON
===================================================== */
.business-operation-arrow {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-color);
    color: var(--white);
    font-size: 12px;
    box-shadow:
        0 5px 12px rgba(7, 27, 73, 0.12);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.business-operation-card:hover .business-operation-arrow {
    transform: translateX(3px);
    box-shadow:
        0 7px 16px rgba(7, 27, 73, 0.18);
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1100px) {
    .business-operations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 650px) {
    .business-operations-section {
        padding: 20px 12px;
    }
    .business-operations-container {
        padding: 20px 16px;
        border-radius: 15px;
    }
    .business-operations-header {
        gap: 13px;
        margin-bottom: 18px;
    }
    .business-operations-header-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 21px;
    }
    .business-operations-title {
        font-size: 17px;
    }
    .business-operations-subtitle {
        font-size: 12px;
    }
    .business-operations-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .business-operation-card {
        min-height: 275px;
        padding: 23px;
    }
}
@media (max-width: 400px) {
    .business-operation-card {
        padding: 20px;
    }
}
.analytics-insights-section {
    width: 100%;
    padding: 0 20px 32px;
    box-sizing: border-box;
    background: var(--background);
    font-family: var(--font);
}
.analytics-insights-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 36px 36px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.analytics-insights-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}
.analytics-insights-title {
    color: var(--text-dark);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}
.analytics-insights-header-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #F4F0FF;
    color: var(--purple);
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(119, 87, 232, 0.08);
}
.analytics-insights-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.analytics-insights-subtitle {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
}
.analytics-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.analytics-insight-card {
    --card-color: var(--blue);
    position: relative;
    min-height: 300px;
    padding: 28px 24px 24px;
    box-sizing: border-box;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(7, 27, 73, 0.055);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.analytics-insight-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 16px;
    font-size: 28px;
    transition: transform 0.25s ease;
}
.analytics-insight-title {
    margin-bottom: 10px;
    color: var(--text-dark);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}
.analytics-insight-description {
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    min-height: 44px;
}
.analytics-insight-features {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.analytics-insight-card:hover {
    transform: translateY(-4px);
    border-color:
        rgba(7, 27, 73, 0.08);
    box-shadow:
        0 15px 35px rgba(7, 27, 73, 0.10);
}
/* =====================================================
   COLORS
===================================================== */
.analytics-insight-card.card-blue {
    --card-color: var(--blue);
}
.analytics-insight-card.card-green {
    --card-color: var(--green);
}
.analytics-insight-card.card-orange {
    --card-color: var(--orange);
}
.analytics-insight-card.card-purple {
    --card-color: var(--purple);
}
/* =====================================================
   ICON
===================================================== */
.analytics-insight-card:hover .analytics-insight-icon {
    transform: scale(1.05);
}
/* Blue Icon */
.card-blue .analytics-insight-icon {
    color: var(--blue);
    background:
        linear-gradient(145deg,
            #F2F7FF 0%,
            #E7F0FF 100%);
    box-shadow:
        0 8px 20px rgba(77, 124, 254, 0.08);
}
/* Green Icon */
.card-green .analytics-insight-icon {
    color: #10A96A;
    background:
        linear-gradient(145deg,
            #EFFBF5 0%,
            #E2F7EC 100%);
    box-shadow:
        0 8px 20px rgba(25, 183, 121, 0.08);
}
/* Orange Icon */
.card-orange .analytics-insight-icon {
    color: var(--orange);
    background:
        linear-gradient(145deg,
            #FFF9EF 0%,
            #FFF0D7 100%);
    box-shadow:
        0 8px 20px rgba(255, 174, 53, 0.08);
}
/* Purple Icon */
.card-purple .analytics-insight-icon {
    color: var(--purple);
    background:
        linear-gradient(145deg,
            #F7F2FF 0%,
            #EFE8FF 100%);
    box-shadow:
        0 8px 20px rgba(119, 87, 232, 0.08);
}
/* =====================================================
   FEATURES
===================================================== */
.analytics-insight-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}
.analytics-insight-feature i {
    width: 12px;
    flex: 0 0 12px;
    color: var(--card-color);
    font-size: 9px;
}
/* =====================================================
   ARROW
===================================================== */
.analytics-insight-arrow {
    position: absolute;
    right: 22px;
    bottom: 19px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-color);
    color: var(--white);
    font-size: 12px;
    box-shadow:
        0 5px 12px rgba(7, 27, 73, 0.12);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.analytics-insight-card:hover .analytics-insight-arrow {
    transform: translateX(3px);
    box-shadow:
        0 7px 16px rgba(7, 27, 73, 0.18);
}
/* =====================================================
   TABLET
===================================================== */
@media (max-width: 1100px) {
    .analytics-insights-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 650px) {
    .analytics-insights-section {
        padding: 20px 12px;
    }
    .analytics-insights-container {
        padding: 20px 16px;
        border-radius: 15px;
    }
    .analytics-insights-header {
        gap: 13px;
        margin-bottom: 18px;
    }
    .analytics-insights-header-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 21px;
    }
    .analytics-insights-title {
        font-size: 17px;
    }
    .analytics-insights-subtitle {
        font-size: 12px;
    }
    .analytics-insights-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .analytics-insight-card {
        min-height: 275px;
        padding: 23px;
    }
}
/* =====================================================
   SMALL MOBILE
===================================================== */
@media (max-width: 400px) {
    .analytics-insight-card {
        padding: 20px;
    }
}
/* =====================================================
   REAL ESTATE CTA
===================================================== */
.real-estate-cta {
    width: 100%;
    padding: 0 20px 40px;
    box-sizing: border-box;
    font-family: var(--font, "Inter", sans-serif);
}
.real-estate-cta-container {
    width: 100%;
    max-width: 1280px;
    min-height: 255px;
    margin: 0 auto;
    padding: 30px 52px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        linear-gradient(105deg,
            #075D5D 0%,
            #08736F 48%,
            #078B82 100%);
    border-radius: 15px;
    box-shadow:
        0 12px 30px rgba(7, 27, 73, 0.14);
}
/* =====================================================
   LEFT CONTENT
===================================================== */
.real-estate-cta-content {
    position: relative;
    z-index: 10;
    width: 52%;
}
.real-estate-cta-title {
    color: #FFFFFF;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 10px;
}
.real-estate-cta-description {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: 20px;
}
/* =====================================================
   BUTTONS
===================================================== */
.real-estate-cta-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}
.real-estate-cta-button {
    height: 48px;
    padding: 0 21px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.real-estate-cta-button:hover {
    transform: translateY(-2px);
}
/* Primary Button */
.real-estate-cta-primary {
    min-width: 188px;
    background: #FFFFFF;
    color: #087B77;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);
}
.real-estate-cta-primary i {
    font-size: 13px;
    transition:
        transform 0.2s ease;
}
.real-estate-cta-primary:hover i {
    transform: translateX(3px);
}
.real-estate-cta-primary:hover {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}
/* Secondary Button */
.real-estate-cta-secondary {
    min-width: 188px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    color: #FFFFFF;
}
.real-estate-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
}
/* =====================================================
   VISUAL AREA
===================================================== */
.real-estate-cta-visual {
    position: absolute;
    right: 25px;
    bottom: -3px;
    width: 48%;
    height: 100%;
    pointer-events: none;
}
/* =====================================================
   BUILDINGS
===================================================== */
.cta-buildings {
    position: absolute;
    right: 100px;
    bottom: 38px;
    width: 370px;
    height: 195px;
}
/* Generic building */
.cta-building {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cta-building-body {
    position: relative;
    background:
        linear-gradient(90deg,
            #159A94 0%,
            #087F7B 50%,
            #056A68 100%);
    border: 1px solid rgba(188, 255, 244, 0.25);
    box-shadow:
        inset 5px 0 10px rgba(255, 255, 255, 0.08),
        inset -5px 0 10px rgba(0, 0, 0, 0.08);
}
.cta-building-roof {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 22px solid #49C9BC;
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}
/* =====================================================
   MAIN BUILDING
===================================================== */
.cta-building-main {
    left: 125px;
    bottom: 0;
    z-index: 5;
}
.cta-building-main .cta-building-roof {
    border-left-width: 42px;
    border-right-width: 42px;
    border-bottom-width: 38px;
    border-bottom-color: #54D4C8;
}
.cta-building-main .cta-building-body {
    width: 84px;
    height: 145px;
    border-radius: 2px 2px 3px 3px;
}
.cta-star {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-size: 36px;
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}
.cta-building-main .cta-building-body span {
    position: absolute;
    width: 7px;
    height: 4px;
    background: rgba(165, 246, 237, 0.55);
    border-radius: 1px;
}
.cta-building-main .cta-building-body span:nth-of-type(1) {
    left: 15px;
    bottom: 18px;
}
.cta-building-main .cta-building-body span:nth-of-type(2) {
    right: 14px;
    bottom: 18px;
}
.cta-building-main .cta-building-body span:nth-of-type(3) {
    left: 15px;
    bottom: 32px;
}
/* =====================================================
   SMALL LEFT BUILDING
===================================================== */
.cta-building-small-left {
    left: 18px;
    bottom: 15px;
    z-index: 3;
}
.cta-building-small-left .cta-building-body {
    width: 58px;
    height: 90px;
}
.cta-building-small-left .cta-building-roof {
    border-left-width: 29px;
    border-right-width: 29px;
    border-bottom-width: 25px;
}
/* =====================================================
   MID LEFT BUILDING
===================================================== */
.cta-building-mid-left {
    left: 78px;
    bottom: 4px;
    z-index: 2;
}
.cta-building-mid-left .cta-building-body {
    width: 54px;
    height: 112px;
}
.cta-building-mid-left .cta-building-roof {
    border-left-width: 27px;
    border-right-width: 27px;
    border-bottom-width: 24px;
}
/* =====================================================
   MID RIGHT BUILDING
===================================================== */
.cta-building-mid-right {
    right: 65px;
    bottom: 6px;
    z-index: 2;
}
.cta-building-mid-right .cta-building-body {
    width: 58px;
    height: 105px;
}
.cta-building-mid-right .cta-building-roof {
    border-left-width: 29px;
    border-right-width: 29px;
    border-bottom-width: 25px;
}
/* =====================================================
   SMALL RIGHT BUILDING
===================================================== */
.cta-building-small-right {
    right: 12px;
    bottom: 17px;
    z-index: 3;
}
.cta-building-small-right .cta-building-body {
    width: 62px;
    height: 92px;
}
.cta-building-small-right .cta-building-roof {
    border-left-width: 31px;
    border-right-width: 31px;
    border-bottom-width: 25px;
}
/* =====================================================
   BUILDING WINDOWS
===================================================== */
.cta-building-body span {
    position: relative;
}
/* =====================================================
   TREES
===================================================== */
.cta-tree {
    position: absolute;
    z-index: 7;
}
.cta-tree-top {
    width: 25px;
    height: 34px;
    border-radius:
        50% 50% 45% 45%;
    background:
        radial-gradient(circle at 35% 30%,
            #72E44F 0%,
            #2FB63B 45%,
            #149B36 100%);
    box-shadow:
        inset 4px 3px 5px rgba(255, 255, 255, 0.18);
}
.cta-tree-trunk {
    width: 6px;
    height: 15px;
    margin: -2px auto 0;
    border-radius: 0 0 3px 3px;
    background: #805B35;
}
/* Tree positions */
.cta-tree-one {
    right: 415px;
    bottom: 63px;
}
.cta-tree-two {
    right: 382px;
    bottom: 53px;
}
.cta-tree-three {
    right: 118px;
    bottom: 54px;
}
.cta-tree-four {
    right: 82px;
    bottom: 65px;
}
/* Different sizes */
.cta-tree-two .cta-tree-top,
.cta-tree-three .cta-tree-top {
    width: 22px;
    height: 30px;
}
/* =====================================================
   GROUND
===================================================== */
.cta-ground {
    position: absolute;
    right: 62px;
    bottom: 9px;
    width: 395px;
    height: 35px;
    border-radius: 50%;
    background:
        linear-gradient(180deg,
            #B8F4ED 0%,
            #6BCFC6 40%,
            #2AAFA8 100%);
    border: 2px solid rgba(210, 255, 249, 0.65);
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.15),
        inset 0 5px 8px rgba(255, 255, 255, 0.35);
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1050px) {
    .real-estate-cta-container {
        padding-left: 35px;
        padding-right: 35px;
    }
    .real-estate-cta-content {
        width: 58%;
    }
    .real-estate-cta-visual {
        width: 45%;
        opacity: 0.8;
    }
    .cta-buildings {
        right: 20px;
        transform: scale(0.85);
        transform-origin: bottom right;
    }
}
@media (max-width: 800px) {
    .real-estate-cta-container {
        min-height: 420px;
        padding: 35px 28px;
        align-items: flex-start;
    }
    .real-estate-cta-content {
        width: 100%;
    }
    .real-estate-cta-title {
        font-size: 25px;
    }
    .real-estate-cta-description {
        font-size: 12px;
    }
    .real-estate-cta-visual {
        width: 100%;
        height: 210px;
        right: 0;
        bottom: 0;
        opacity: 0.65;
    }
    .cta-buildings {
        right: 50%;
        transform:
            translateX(50%) scale(0.75);
        transform-origin: bottom center;
    }
    .cta-ground {
        right: 50%;
        transform:
            translateX(50%) scale(0.75);
    }
}
@media (max-width: 600px) {
    .real-estate-cta {
        padding: 15px 12px 30px;
    }
    .real-estate-cta-container {
        min-height: 470px;
        padding: 30px 22px;
        border-radius: 14px;
    }
    .real-estate-cta-title {
        font-size: 23px;
    }
    .real-estate-cta-description {
        font-size: 12px;
        max-width: 320px;
    }
    .desktop-break {
        display: none;
    }
    .real-estate-cta-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .real-estate-cta-button {
        width: 185px;
    }
    .real-estate-cta-visual {
        height: 190px;
    }
    .cta-buildings {
        transform:
            translateX(50%) scale(0.6);
    }
    .cta-ground {
        transform:
            translateX(50%) scale(0.6);
    }
}
@media (max-width: 400px) {
    .real-estate-cta-container {
        min-height: 450px;
        padding: 25px 18px;
    }
    .real-estate-cta-title {
        font-size: 21px;
    }
}
/* =====================================================
   RESOURCES PAGE
===================================================== */
.resources-hero {
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    min-height: 520px;
    background-color: #F4FAFB;
    background-image: url("../images/resources-hero-banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.resources-container {
    width: min(1240px, calc(100% - 40px));
    min-height: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 56px 0 72px;
}
.resources-content {
    position: relative;
    z-index: 2;
    width: 60%;
    max-width: 60%;
}
.resources-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(11, 166, 166, 0.10);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.resources-content h1 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: clamp(36px, 3.8vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.resources-content h1 span {
    color: var(--primary);
}
.resources-content p {
    max-width: 520px;
    margin: 0 0 28px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.65;
}
.resources-search {
    width: min(100%, 500px);
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 22px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(7, 27, 73, 0.06);
}
.resources-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--navy);
    font-size: 14px;
}
.resources-search input::placeholder {
    color: var(--text-light);
}
.search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--navy);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.resources-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.resources-image img {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(7, 27, 73, 0.10));
}
@media (max-width: 1000px) {
    .resources-hero {
        background-size: cover;
        background-position: center center;
    }
    .resources-container {
        min-height: 440px;
        padding: 40px 0 56px;
    }
    .resources-content {
        width: 60%;
        max-width: 60%;
    }
    .resources-content p,
    .resources-search {
        margin-left: 0;
        margin-right: 0;
    }
}
@media (max-width: 768px) {
    .resources-hero {
        background-image: none;
        background-color: #F4FAFB;
    }
    .resources-hero::after {
        content: "";
        display: block;
        width: 100%;
        height: 240px;
        background-image: url("../images/resources-hero-banner.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
    }
    .resources-container {
        min-height: auto;
        padding: 40px 0 24px;
    }
    .resources-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .resources-content p,
    .resources-search {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 600px) {
    .resources-container {
        width: calc(100% - 32px);
    }
    .resources-content h1 {
        font-size: 34px;
    }
    .resources-search {
        height: 52px;
    }
}
.resource-cards {
    width: 100%;
    padding: 8px 0 56px;
    background: var(--background);
}
.resource-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}
.resource-card {
    min-height: 260px;
    padding: 28px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(229, 236, 243, 0.90);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(7, 27, 73, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(7, 27, 73, 0.10);
}
.resource-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 30px;
    line-height: 1;
}
/* Green */
.resource-card.green .resource-icon {
    color: #00a96b;
    background: #e7f9f1;
}
/* Purple */
.resource-card.purple .resource-icon {
    color: #7045df;
    background: #f0ecff;
}
/* Orange */
.resource-card.orange .resource-icon {
    color: #ff7a00;
    background: #fff1e2;
}
/* Teal */
.resource-card.teal .resource-icon {
    color: #00a878;
    background: #e6f8f1;
}
/* Pink */
.resource-card.pink .resource-icon {
    color: #ed1651;
    background: #ffedf3;
}
/* Blue */
.resource-card.blue .resource-icon {
    color: #246be8;
    background: #edf4ff;
}
.resource-card h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}
.resource-card p {
    margin: 0;
    flex: 1;
    color: var(--text);
    font-size: 12px;
    line-height: 1.65;
}
.resource-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 750;
}
.resource-card span i {
    font-size: 12px;
    transition: transform 0.2s ease;
}
.resource-card:hover span i {
    transform: translateX(4px);
}
/* Explore colors */
.resource-card.green span {
    color: #0b9870;
}
.resource-card.purple span {
    color: #7757e8;
}
.resource-card.orange span {
    color: #ff7a00;
}
.resource-card.teal span {
    color: #0b9870;
}
.resource-card.pink span {
    color: #ed1651;
}
.resource-card.blue span {
    color: #246be8;
}
@media (max-width: 1100px) {
    .resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (max-width: 600px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
}
.featured-resources {
    width: 100%;
    padding: 0 0 72px;
    background: var(--background);
}
.featured-heading {
    text-align: center;
    margin-bottom: 36px;
}
.featured-heading span {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.featured-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(28px, 2.8vw, 36px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.featured-card {
    position: relative;
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6edf2;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(7, 27, 73, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.featured-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 35px rgba(7, 27, 73, 0.10);
}
/* =========================
   Badge
========================= */
.resource-badge {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 17px;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
/* Badge colors */
.guide .resource-badge {
    color: #11966f;
    background: #e4f8ef;
}
.blog .resource-badge {
    color: #2771df;
    background: #eaf2ff;
}
.webinar .resource-badge {
    color: #ed7b15;
    background: #fff0df;
}
.video .resource-badge {
    color: #ef3561;
    background: #ffeaf0;
}
/* =========================
   Image
========================= */
.featured-image {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.featured-image--guide { background: #eefbf4; }
.featured-image--blog { background: #eef4ff; }
.featured-image--webinar { background: #fff4ea; }
.featured-image--video { background: #fff0f4; }
.featured-image img {
    width: auto;
    max-width: 78%;
    max-height: 82%;
    object-fit: contain;
}
.featured-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 22px;
}
.featured-body h3 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 750;
}
.featured-body p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
}
.featured-body a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
}
.featured-body a i {
    font-size: 12px;
    transition: transform .2s ease;
}
.featured-body a:hover i {
    transform: translateX(4px);
}
/* Link colors */
.guide .featured-body a {
    color: #109673;
}
.blog .featured-body a {
    color: #2771df;
}
.webinar .featured-body a {
    color: #f47716;
}
.video .featured-body a {
    color: #ed3561;
}
@media (max-width: 1050px) {
    .featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .featured-heading h2 {
        font-size: 25px;
    }
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .featured-card {
        min-height: 390px;
    }
}
.resources-learning {
    width: 100%;
    padding: 0 0 72px;
    background: var(--background);
}
.resources-learning__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.section-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.guides-panel,
.help-panel {
    background: #fff;
    border: 1px solid rgba(229, 236, 243, 0.90);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(7, 27, 73, 0.05);
}
.guides-panel {
    padding: 28px 28px 10px;
}
.guides-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.guides-panel__head h2,
.help-panel h2 {
    margin: 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.guides-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}
.guides-panel__link i {
    font-size: 11px;
}
.guides-list {
    display: flex;
    flex-direction: column;
}
.guide-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #edf2f7;
    text-decoration: none;
}
.guide-item:first-child {
    border-top: 0;
}
.guide-item:hover .guide-item__arrow {
    color: var(--primary-dark);
    transform: translateX(3px);
}
.guide-item__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
}
.guide-item__icon--green { color: #00a96b; background: #e7f9f1; }
.guide-item__icon--purple { color: #7045df; background: #f0ecff; }
.guide-item__icon--orange { color: #ff7a00; background: #fff1e2; }
.guide-item__icon--blue { color: #2771df; background: #eaf2ff; }
.guide-item__icon--teal { color: #00a878; background: #e6f8f1; }
.guide-item__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.guide-item__copy strong {
    color: var(--navy);
    font-size: 14px;
    font-weight: 750;
}
.guide-item__copy span {
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}
.guide-item__arrow {
    color: #c5d0dc;
    font-size: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
}
.help-panel {
    position: relative;
    padding: 28px 24px 170px;
    /* overflow: hidden; */
}
.help-panel__content {
    position: relative;
    z-index: 2;
}
.help-panel__lead {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 14px;
}
.help-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.help-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}
.help-item__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}
.help-item__icon--purple { color: #7045df; background: #f0ecff; }
.help-item__icon--orange { color: #ff7a00; background: #fff1e2; }
.help-item__icon--green { color: #00a96b; background: #e7f9f1; }
.help-item__icon--blue { color: #2771df; background: #eaf2ff; }
.help-item__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.help-item__copy strong {
    color: var(--navy);
    font-size: 14px;
    font-weight: 750;
}
.help-item__copy span {
    color: var(--text);
    font-size: 12px;
    line-height: 1.45;
}
.help-panel__art {
    position: absolute;
    left: 50%;
    bottom: -34px;
    z-index: 1;
    width: min(45%, 215px);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    object-fit: contain;
    opacity: 0.96;
}
@media (max-width: 1100px) {
    .resources-learning__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .guides-panel__head {
        flex-direction: column;
    }
    .guides-panel__link {
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    .help-panel {
        padding-bottom: 150px;
    }
    .help-panel__art {
        width: min(88%, 260px);
        bottom: -24px;
    }
}
/* //////website logo /////////// */
.logo-mark {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.illustration-area {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.illustration-image {
    width: 100%;
    max-width: 620px;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 25px 18px rgba(0, 0, 0, 0.12));
}

@media (max-width: 768px) {
    .cta-banner--about {
        padding: 28px 24px;
        min-height: auto;
    }

    .cta-banner--about .cta-content h2 {
        font-size: 22px;
    }

    .cta-banner--about .cta-actions {
        flex-wrap: wrap;
    }
}

/* =====================================================
   FEATURE DETAIL
===================================================== */
.feature-detail-hero .features-title {
    max-width: 18ch;
}
.feature-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
}
.feature-detail-breadcrumb a {
    color: var(--primary-dark);
}
.feature-detail-breadcrumb i {
    font-size: 10px;
    color: #9AA7B8;
}
.feature-detail-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.feature-detail-hero-actions .btn-demo {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    gap: 8px;
}
.feature-detail-back {
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}
.feature-detail-back:hover {
    color: var(--primary);
}
.feature-detail-section {
    padding: 24px 0 64px;
}
.feature-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 28px;
    align-items: start;
    margin-top: -48px;
    position: relative;
    z-index: 5;
}
.feature-detail-main,
.feature-detail-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(7, 27, 73, .07);
}
.feature-detail-main {
    padding: 36px 38px;
}
.feature-detail-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.feature-detail-kicker-label {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.feature-detail-kicker h2 {
    margin: 0;
    color: var(--navy);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
}
.feature-detail-main p {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
}
.feature-detail-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 20px;
}
.feature-detail-icon--green {
    color: #19B779;
    background: #E8F8EF;
}
.feature-detail-icon--purple {
    color: #7757E8;
    background: #F1ECFF;
}
.feature-detail-icon--teal {
    color: #0BA6A6;
    background: #E6F7F7;
}
.feature-detail-icon--orange {
    color: #FF8A00;
    background: #FFF3E6;
}
.feature-detail-icon--pink {
    color: #E84393;
    background: #FDEAF3;
}
.feature-detail-icon--blue {
    color: #4D7CFE;
    background: #E8F1FF;
}
.feature-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.feature-detail-card {
    padding: 26px 24px;
}
.feature-detail-card h3 {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}
.feature-detail-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature-detail-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.feature-detail-card li i {
    margin-top: 3px;
    color: var(--primary);
    font-size: 12px;
}
.feature-detail-related {
    padding: 8px 0 72px;
}
.feature-detail-related-heading {
    margin-bottom: 24px;
}
.feature-detail-related-heading span {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}
.feature-detail-related-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
    font-weight: 800;
}
.feature-detail-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.feature-detail-related-card {
    display: block;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(7, 27, 73, .06);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-detail-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(7, 27, 73, .1);
}
.feature-detail-related-card h3 {
    margin: 16px 0 8px;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}
.feature-detail-related-card p {
    margin: 0 0 16px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.55;
}
.feature-detail-related-card span {
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
}
.feature-detail-related-card span i {
    margin-left: 6px;
    font-size: 11px;
}
a.lead-card,
a.business-operation-card,
a.analytics-insight-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
@media (max-width: 900px) {
    .feature-detail-layout,
    .feature-detail-related-grid {
        grid-template-columns: 1fr;
    }
    .feature-detail-layout {
        margin-top: 0;
    }
    .feature-detail-main {
        padding: 28px 22px;
    }
}

.demo-select select {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.demo-input input,
.demo-message textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    resize: none;
}
.demo-message textarea {
    min-height: 48px;
}
a.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}
.legal-page {
    padding: 56px 0 72px;
    background:
        linear-gradient(180deg, #f7fcfd 0%, #ffffff 28%);
}
.legal-page__inner {
    max-width: 860px;
}
.legal-page__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(11, 166, 166, .1);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.legal-page__title {
    margin: 0 0 12px;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    font-weight: 800;
}
.legal-page__title span {
    background: linear-gradient(90deg, #0BA6A6 0%, #16C6C8 55%, #19B779 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.legal-page__updated {
    margin: 0 0 22px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
}
.legal-page__intro {
    margin: 0 0 36px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}
.legal-page__body {
    display: grid;
    gap: 22px;
}
.legal-block {
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e8eef3;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(7, 27, 73, .04);
}
.legal-block h2 {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}
.legal-block__body,
.legal-block__body p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}
.legal-block__body p {
    margin: 0 0 12px;
}
.legal-block__body p:last-child {
    margin-bottom: 0;
}
@media (max-width: 650px) {
    .legal-page {
        padding: 36px 0 48px;
    }
    .legal-page__title {
        font-size: 32px;
    }
}
.resource-icon i,
.trust-icon i,
.trust-icon svg,
.module-icon i,
.why-icon i,
.stat-icon i,
.value-icon i,
.timeline-icon i,
.contact-banner__icon i,
.contact-detail-icon i,
.guide-item__icon i,
.help-item__icon i,
.demo-included-icon i,
.plan-icon i,
.lead-management-header-icon i,
.business-operations-header-icon i,
.analytics-insights-header-icon i {
    color: inherit;
}