:root{
    --navy:#020817;
    --navy-2:#06142e;
    --ink:#071731;
    --muted:#64748b;
    --line:#dce7f5;

    --blue:#075cff;
    --blue-2:#1473ff;
    --cyan:#68c9ff;
    --soft-blue:#edf5ff;

    --white:#fff;
    --surface:#f8fbff;
    --surface-2:#f2f7fd;

    --shadow:
        0 28px 70px rgba(2,38,97,.12);

    --radius:26px;
}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:#fff;
    color:var(--ink);
    overflow-x:hidden;
}


body.menu-open{
    overflow:hidden;
}


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


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


button{
    font:inherit;
}


.container{
    width:min(1200px,calc(100% - 40px));
    margin-inline:auto;
}


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

.topbar{
    position:sticky;
    top:0;
    z-index:2000;
    background:rgba(2,8,23,.97);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
}


.nav-shell{
    width:min(1200px,calc(100% - 40px));
    min-height:88px;
    margin:auto;

    display:flex;
    align-items:center;
    gap:28px;
}


.brand{
    display:flex;
    align-items:center;
    margin-right:auto;
}


.brand-panel{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:12px;
    padding:7px 12px;
}


.brand-panel img{
    width:210px;
    height:46px;
    object-fit:contain;
}


.nav-links{
    display:flex;
    align-items:center;
    gap:30px;
}


.nav-links a{
    color:#fff;
    font-size:14px;
    font-weight:800;
    opacity:.9;
    transition:.2s ease;
}


.nav-links a:hover{
    color:var(--cyan);
}


.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
}


.menu-toggle{
    display:none;
}


.btn{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 20px;
    border-radius:13px;

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

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


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


.btn-primary{
    color:#fff;
    background:linear-gradient(
        135deg,
        var(--blue),
        #126cff
    );

    box-shadow:
        0 12px 26px rgba(7,92,255,.25);
}


.btn-primary:hover{
    box-shadow:
        0 16px 34px rgba(7,92,255,.32);
}


.btn-outline-dark{
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
}


.btn-secondary{
    background:#fff;
    border:1px solid var(--line);
    color:var(--ink);
    box-shadow:
        0 10px 26px rgba(7,23,49,.06);
}


.btn-large{
    min-height:56px;
    padding:0 27px;
    border-radius:15px;
    font-size:15px;
}


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

.hero{
    position:relative;
    overflow:hidden;
    padding:100px 0 110px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


.hero-glow{
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(20px);
}


.glow-one{
    width:500px;
    height:500px;
    right:-180px;
    top:-120px;

    background:
        radial-gradient(
            circle,
            rgba(7,92,255,.10),
            transparent 68%
        );
}


.glow-two{
    width:420px;
    height:420px;
    left:-250px;
    bottom:-200px;

    background:
        radial-gradient(
            circle,
            rgba(0,183,255,.08),
            transparent 70%
        );
}


.hero-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(520px,1.1fr);

    gap:70px;
    align-items:center;
}


.eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:34px;

    padding:0 13px;
    border-radius:999px;

    color:var(--blue);
    background:#eaf3ff;

    font-size:11px;
    font-weight:950;
    letter-spacing:.1em;
}


.hero h1{
    margin:22px 0 0;
    max-width:650px;

    font-size:clamp(48px,5.8vw,78px);
    line-height:.98;
    letter-spacing:-.052em;
}


.hero h1 span{
    color:var(--blue);
}


.hero-lead{
    margin:27px 0 0;
    max-width:610px;

    color:var(--muted);
    font-size:19px;
    line-height:1.7;
}


.hero-actions{
    margin-top:32px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


.hero-proof{
    margin-top:42px;
    display:flex;
    gap:30px;
}


.hero-proof div{
    display:flex;
    flex-direction:column;
    gap:3px;
}


.hero-proof strong{
    color:var(--ink);
    font-size:23px;
}


.hero-proof span{
    color:#8090a6;
    font-size:12px;
    font-weight:650;
}


/* HERO DASHBOARD */

.hero-product{
    position:relative;
}


.browser-window{
    border:1px solid #d9e5f5;
    border-radius:24px;
    overflow:hidden;

    background:#fff;

    box-shadow:
        0 38px 95px rgba(2,38,97,.17);
}


.browser-top{
    height:48px;

    display:flex;
    align-items:center;
    padding:0 15px;

    border-bottom:1px solid #e5edf8;
    background:#f8fbff;
}


.browser-dots{
    display:flex;
    gap:6px;
}


.browser-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#cbd7e7;
}


.browser-url{
    width:45%;
    height:25px;
    margin:auto;

    border-radius:7px;
    background:#eef4fb;

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

    color:#8797aa;
    font-size:10px;
}


.dashboard{
    min-height:405px;
    display:grid;
    grid-template-columns:62px 1fr;
}


.dash-sidebar{
    padding:17px 11px;
    background:#04132e;

    display:flex;
    align-items:center;
    flex-direction:column;
    gap:13px;
}


.dash-logo{
    width:33px;
    height:33px;
    margin-bottom:17px;

    border-radius:10px;

    color:#fff;
    background:linear-gradient(
        135deg,
        var(--blue),
        #00b7ff
    );

    display:grid;
    place-items:center;

    font-weight:900;
}


.dash-menu{
    width:29px;
    height:29px;

    border-radius:8px;
    background:rgba(255,255,255,.08);
}


.dash-menu.active{
    background:rgba(7,92,255,.75);
}


.dash-content{
    padding:26px;
    background:#f7faff;
}


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


.dash-head small{
    color:#8997aa;
    font-size:10px;
}


.dash-head h3{
    margin:2px 0 0;
    font-size:20px;
}


.avatar-stack{
    display:flex;
}


.avatar-stack span{
    width:27px;
    height:27px;

    margin-left:-8px;
    border:2px solid #fff;
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #9ddcff,
            #155fff
        );
}


.kpi-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:22px;
}


.kpi{
    padding:15px;

    border:1px solid #e0e9f4;
    border-radius:15px;

    background:#fff;

    display:flex;
    flex-direction:column;
}


.kpi-icon{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    border-radius:9px;
    margin-bottom:12px;

    font-size:14px;
    font-weight:900;
}


.kpi-icon.blue{
    color:#0f62ff;
    background:#e9f1ff;
}


.kpi-icon.violet{
    color:#6d28d9;
    background:#f1eaff;
}


.kpi-icon.cyan{
    color:#0891b2;
    background:#e5faff;
}


.kpi span{
    color:#8391a3;
    font-size:9px;
}


.kpi strong{
    margin:3px 0;
    font-size:22px;
}


.kpi small{
    color:#22a061;
    font-size:8px;
}


.dash-bottom{
    margin-top:15px;

    display:grid;
    grid-template-columns:1.6fr .85fr;
    gap:12px;
}


.chart-card,
.property-mini{
    border:1px solid #e0e9f4;
    border-radius:15px;
    background:#fff;
}


.chart-card{
    padding:15px;
}


.card-label{
    font-size:10px;
    font-weight:800;
}


.chart{
    height:110px;
    margin-top:17px;

    display:flex;
    align-items:flex-end;
    gap:8px;
}


.chart span{
    flex:1;

    border-radius:6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #5aa8ff,
            #075cff
        );
}


.property-mini{
    padding:11px;
}


.mini-photo{
    position:relative;
    height:85px;
    overflow:hidden;

    border-radius:10px;
    background:#dbeeff;
}


.mini-sky{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            #bfe8ff,
            #eaf6ff
        );
}


.mini-building{
    position:absolute;
    left:24%;
    right:16%;
    bottom:0;
    height:72%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #c8d5e4
        );

    clip-path:
        polygon(
            10% 20%,
            100% 0,
            100% 100%,
            0 100%,
            0 34%
        );
}


.mini-building i{
    display:block;
    width:55%;
    height:5px;
    margin:13px auto;

    background:#8fb2d3;
}


.property-mini strong{
    display:block;
    margin-top:9px;
    font-size:10px;
}


.property-mini > span{
    display:block;
    margin-top:2px;

    color:#8a98aa;
    font-size:8px;
}


.mini-price{
    margin-top:8px;
    color:#075cff;

    font-size:9px;
    font-weight:900;
}


.floating-chip{
    position:absolute;

    display:flex;
    align-items:center;
    gap:10px;

    min-width:175px;
    padding:12px 14px;

    border:1px solid #e0e8f3;
    border-radius:14px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 18px 45px rgba(2,38,97,.14);
}


.chip-agents{
    left:-38px;
    bottom:48px;
}


.chip-properties{
    right:-22px;
    top:75px;
}


.chip-icon{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#075cff;
    background:#eaf3ff;

    font-weight:900;
}


.floating-chip div{
    display:flex;
    flex-direction:column;
}


.floating-chip small{
    color:#8390a1;
    font-size:8px;
}


.floating-chip strong{
    font-size:11px;
}


/* ==============================================================
   SECTIONS
============================================================== */

section{
    scroll-margin-top:100px;
}


.pain-section,
.platform-section,
.agents-section,
.properties-section,
.map-section,
.benefits-section,
.faq-section,
.contact-strip{
    padding:110px 0;
}


.pain-section{
    background:#fff;
}


.platform-section,
.properties-section,
.benefits-section{
    background:#f8fbff;
}


.section-heading{
    max-width:830px;
    margin:0 auto 48px;
    text-align:center;
}


.section-heading h2,
.agents-copy h2,
.map-copy h2,
.faq-heading h2,
.contact-inner h2{
    margin:17px 0 0;

    font-size:clamp(38px,4.4vw,62px);
    line-height:1.02;
    letter-spacing:-.045em;
}


.section-heading h2 span,
.agents-copy h2 span,
.map-copy h2 span,
.faq-heading h2 span{
    color:var(--blue);
}


.section-heading p{
    margin:20px auto 0;
    max-width:660px;

    color:var(--muted);
    line-height:1.7;
}


.soft{
    background:#eaf3ff;
}


/* PAIN */

.pain-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
}


.pain-card{
    min-height:250px;
    padding:27px;

    border:1px solid var(--line);
    border-radius:22px;

    background:#fff;

    transition:.25s ease;
}


.pain-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--shadow);
}


.line-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    margin-bottom:33px;

    border-radius:12px;

    color:var(--blue);
    background:#edf5ff;

    font-size:11px;
    font-weight:950;
}


.pain-card h3{
    margin:0;
    font-size:20px;
}


.pain-card p{
    margin:10px 0 0;

    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}


/* ADMIN */

.admin-showcase{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:60px;
    align-items:center;

    margin-top:55px;
}


.admin-copy{
    display:flex;
    flex-direction:column;
    gap:8px;
}


.feature-row{
    display:grid;
    grid-template-columns:45px 1fr;
    gap:13px;

    padding:18px 0;
    border-bottom:1px solid #e5edf6;
}


.feature-row > span{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:var(--blue);
    background:#e9f3ff;

    font-size:10px;
    font-weight:900;
}


.feature-row h3{
    margin:0;
    font-size:18px;
}


.feature-row p{
    margin:6px 0 0;

    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}


.admin-visual{
    position:relative;
}


.admin-window{
    min-height:470px;

    display:grid;
    grid-template-columns:70px 1fr;

    overflow:hidden;

    border:1px solid #dce7f4;
    border-radius:24px;

    background:#fff;

    box-shadow:
        0 32px 75px rgba(2,38,97,.13);
}


.admin-sidebar{
    padding:20px 14px;

    display:flex;
    align-items:center;
    flex-direction:column;
    gap:15px;

    background:#04132d;
}


.side-brand{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    margin-bottom:24px;

    border-radius:10px;

    color:#fff;
    background:linear-gradient(
        135deg,
        var(--blue),
        #00aaff
    );

    font-weight:950;
}


.admin-sidebar > span{
    width:31px;
    height:31px;

    border-radius:9px;
    background:rgba(255,255,255,.08);
}


.admin-sidebar > span.side-active{
    background:#075cff;
}


.admin-main{
    padding:30px;
    background:#f8fbff;
}


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


.admin-title div:first-child{
    display:flex;
    flex-direction:column;
}


.admin-title small{
    color:#8b99aa;
    font-size:10px;
}


.admin-title strong{
    margin-top:3px;
    font-size:22px;
}


.admin-profile{
    width:36px;
    height:36px;
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #83d4ff,
            #0d61ff
        );
}


.admin-cards{
    margin-top:24px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}


.admin-cards > div{
    padding:15px;

    border:1px solid #e1eaf5;
    border-radius:14px;

    background:#fff;

    display:flex;
    flex-direction:column;
}


.admin-cards small{
    color:#8c9aaa;
    font-size:8px;
}


.admin-cards strong{
    margin-top:6px;

    color:#091b38;
    font-size:22px;
}


.admin-cards span{
    margin-top:2px;

    color:#718094;
    font-size:8px;
}


.admin-table{
    margin-top:15px;
    overflow:hidden;

    border:1px solid #e0e9f4;
    border-radius:15px;

    background:#fff;
}


.table-head,
.table-row{
    display:grid;
    grid-template-columns:1.5fr .8fr .7fr;

    align-items:center;
    gap:12px;

    padding:13px 16px;
}


.table-head{
    border-bottom:1px solid #e6edf6;

    color:#8291a3;
    font-size:8px;
    font-weight:850;
}


.table-row{
    border-bottom:1px solid #edf2f7;
    font-size:9px;
}


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


.table-row > span:first-child{
    display:flex;
    align-items:center;
    gap:9px;
}


.table-row b{
    display:inline-flex;

    padding:5px 8px;
    border-radius:999px;

    color:#15955a;
    background:#eafaf2;

    font-size:7px;
}


.thumb{
    width:29px;
    height:29px;
    border-radius:7px;

    background:linear-gradient(
        135deg,
        #b9dfff,
        #2a78ff
    );
}


/* AGENTS */

.agents-section{
    background:#fff;
}


.agents-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}


.agents-visual{
    position:relative;
    min-height:520px;
}


.agent-card{
    position:absolute;

    border:1px solid var(--line);
    border-radius:22px;

    background:#fff;

    box-shadow:
        0 24px 60px rgba(2,38,97,.10);
}


.agent-main{
    width:330px;
    top:35px;
    left:70px;

    padding:28px;
    z-index:3;
}


.agent-avatar{
    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;
    font-weight:900;
}


.agent-main .agent-avatar{
    width:90px;
    height:90px;

    margin-bottom:25px;

    font-size:24px;
}


.av1{
    background:
        linear-gradient(
            135deg,
            #69caff,
            #075cff
        );
}


.av2{
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #4f46e5
        );
}


.av3{
    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #075cff
        );
}


.agent-badge{
    display:inline-flex;

    padding:7px 9px;
    border-radius:999px;

    color:#075cff;
    background:#eaf3ff;

    font-size:8px;
    font-weight:900;
}


.agent-main h3{
    margin:13px 0 0;
    font-size:26px;
}


.agent-main p{
    margin:5px 0 0;

    color:#7c8a9b;
    font-size:13px;
}


.agent-stats{
    display:grid;
    grid-template-columns:1fr 1fr;

    margin-top:25px;
    padding:17px 0;

    border-top:1px solid #e5edf6;
    border-bottom:1px solid #e5edf6;
}


.agent-stats div{
    display:flex;
    flex-direction:column;
}


.agent-stats strong{
    font-size:21px;
}


.agent-stats span{
    color:#8290a1;
    font-size:9px;
}


.agent-main button{
    width:100%;
    height:42px;
    margin-top:19px;

    border:0;
    border-radius:11px;

    color:#fff;
    background:#075cff;

    font-weight:850;
}


.agent-second,
.agent-third{
    width:235px;
    padding:16px;

    display:grid;
    grid-template-columns:46px 1fr;
    column-gap:11px;

    z-index:2;
}


.agent-second{
    right:0;
    top:90px;
}


.agent-third{
    left:0;
    bottom:30px;
}


.agent-second .agent-avatar,
.agent-third .agent-avatar{
    width:46px;
    height:46px;
    grid-row:1/3;
}


.agent-second strong,
.agent-third strong{
    align-self:end;
    font-size:12px;
}


.agent-second > span:last-child,
.agent-third > span:last-child{
    align-self:start;

    color:#8190a1;
    font-size:9px;
}


.agents-copy > p,
.map-copy > p{
    margin-top:21px;

    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}


.check-list{
    margin:27px 0 0;
    padding:0;

    list-style:none;

    display:flex;
    flex-direction:column;
    gap:13px;
}


.check-list li{
    position:relative;
    padding-left:30px;

    color:#34445a;
    font-size:14px;
    font-weight:650;
}


.check-list li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:-2px;

    width:21px;
    height:21px;

    display:grid;
    place-items:center;

    border-radius:7px;

    color:#075cff;
    background:#eaf3ff;

    font-size:11px;
    font-weight:950;
}


.text-link{
    display:inline-flex;
    margin-top:28px;

    color:#075cff;
    font-weight:900;
}


/* PROPERTIES */

.properties-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}


.property-card{
    overflow:hidden;

    border:1px solid #dfe8f4;
    border-radius:23px;

    background:#fff;

    box-shadow:
        0 15px 40px rgba(2,38,97,.07);

    transition:.25s ease;
}


.property-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 25px 55px rgba(2,38,97,.13);
}


.property-image{
    position:relative;
    height:260px;
    overflow:hidden;
}


.property-image > span{
    position:absolute;
    z-index:3;
    left:16px;
    top:16px;

    padding:7px 10px;

    border-radius:999px;

    color:#fff;
    background:rgba(2,8,23,.78);

    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}


.p1{
    background:
        linear-gradient(
            180deg,
            #c9eaff,
            #eaf5fb
        );
}


.p2{
    background:
        linear-gradient(
            180deg,
            #dbe5f0,
            #f6f8fb
        );
}


.p3{
    background:
        linear-gradient(
            180deg,
            #b8e1ff,
            #eef8ff
        );
}


.property-building{
    position:absolute;
    bottom:-6%;
    left:15%;
    right:10%;

    height:80%;

    filter:
        drop-shadow(
            0 18px 18px rgba(5,32,70,.15)
        );
}


.b1{
    background:
        linear-gradient(
            115deg,
            #eef4fa 0 30%,
            #b9c8d5 30% 35%,
            #fefefe 35% 63%,
            #8fa9be 63% 68%,
            #dce6ee 68%
        );

    clip-path:
        polygon(
            12% 18%,
            68% 0,
            100% 20%,
            96% 100%,
            0 100%,
            0 28%
        );
}


.b2{
    left:28%;
    right:24%;
    height:90%;

    background:
        repeating-linear-gradient(
            90deg,
            #dce6ef 0 18px,
            #7697b3 18px 25px,
            #f2f6f9 25px 44px
        );

    clip-path:
        polygon(
            12% 8%,
            90% 0,
            100% 100%,
            0 100%
        );
}


.b3{
    background:
        linear-gradient(
            135deg,
            #f8fafc 0 25%,
            #91abc2 25% 30%,
            #ffffff 30% 55%,
            #7897b2 55% 60%,
            #e5edf4 60%
        );

    clip-path:
        polygon(
            0 26%,
            55% 0,
            100% 19%,
            100% 100%,
            0 100%
        );
}


.property-info{
    padding:22px;
}


.property-info small{
    color:#8290a1;
}


.property-info h3{
    margin:7px 0 0;
    font-size:21px;
}


.property-info p{
    margin:9px 0 0;

    color:#6e7e91;
    font-size:12px;
}


.property-bottom{
    margin-top:22px;
    padding-top:17px;

    border-top:1px solid #e5edf5;

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


.property-bottom strong{
    color:#075cff;
    font-size:14px;
}


.property-bottom span{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#075cff;
    background:#eaf3ff;
}


/* MAP */

.map-section{
    background:#fff;
}


.map-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:70px;
    align-items:center;
}


.pill-list{
    margin-top:28px;

    display:flex;
    flex-wrap:wrap;
    gap:9px;
}


.pill-list span{
    padding:9px 13px;

    border:1px solid #dce7f4;
    border-radius:999px;

    background:#fff;

    color:#526378;
    font-size:11px;
    font-weight:750;
}


.fake-map{
    position:relative;
    height:500px;
    overflow:hidden;

    border:1px solid #dce7f4;
    border-radius:26px;

    background:
        linear-gradient(
            30deg,
            #e8edf3 12%,
            transparent 12.5%,
            transparent 87%,
            #e8edf3 87.5%
        ),
        linear-gradient(
            150deg,
            #e8edf3 12%,
            transparent 12.5%,
            transparent 87%,
            #e8edf3 87.5%
        ),
        #f7f5ef;

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


.street{
    position:absolute;
    background:#fff;
    box-shadow:
        0 0 0 1px #e3e8ed;
}


.s1{
    width:150%;
    height:26px;
    left:-25%;
    top:28%;
    transform:rotate(14deg);
}


.s2{
    width:150%;
    height:22px;
    left:-20%;
    top:65%;
    transform:rotate(-9deg);
}


.s3{
    width:24px;
    height:150%;
    left:33%;
    top:-25%;
    transform:rotate(6deg);
}


.s4{
    width:22px;
    height:150%;
    right:25%;
    top:-25%;
    transform:rotate(-14deg);
}


.s5{
    width:18px;
    height:130%;
    right:8%;
    top:-15%;
    transform:rotate(8deg);
}


.park{
    position:absolute;
    width:27%;
    height:26%;

    right:9%;
    bottom:14%;

    border-radius:50% 30% 42% 32%;

    background:#d7edda;
}


.pin{
    position:absolute;
    z-index:10;

    display:flex;
    align-items:center;
    gap:5px;

    padding:8px 11px;

    border-radius:11px;

    color:#fff;
    background:#075cff;

    box-shadow:
        0 10px 20px rgba(7,92,255,.28);

    font-size:9px;
    font-weight:900;
}


.pin i{
    width:7px;
    height:7px;

    border:2px solid #fff;
    border-radius:50%;
}


.pin1{
    left:19%;
    top:20%;
}


.pin2{
    left:52%;
    top:35%;
}


.pin3{
    left:38%;
    bottom:22%;
}


.pin4{
    right:14%;
    top:17%;
}


.map-search{
    position:absolute;
    left:50%;
    top:22px;
    transform:translateX(-50%);

    min-width:180px;
    padding:12px 17px;

    border:1px solid #dbe6f3;
    border-radius:12px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 10px 25px rgba(2,38,97,.12);

    font-size:10px;
    font-weight:850;
}


/* BENEFITS */

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
}


.benefits-grid article{
    min-height:200px;
    padding:27px;

    border:1px solid #dfe8f4;
    border-radius:21px;

    background:#fff;
}


.benefits-grid article > span{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:#075cff;
    background:#eaf3ff;

    font-size:19px;
    font-weight:900;
}


.benefits-grid h3{
    margin:23px 0 0;
}


.benefits-grid p{
    margin:8px 0 0;

    color:#708094;
    font-size:13px;
    line-height:1.65;
}


/* DEMO */

.demo-section{
    padding:70px 0 110px;
    background:#f8fbff;
}


.demo-card{
    position:relative;
    overflow:hidden;

    min-height:510px;
    padding:65px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:50px;
    align-items:center;

    border-radius:34px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            #020817,
            #061a3a
        );
}


.demo-glow{
    position:absolute;
    right:-130px;
    top:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(7,92,255,.5),
            transparent 68%
        );
}


.demo-content{
    position:relative;
    z-index:2;
}


.dark-eyebrow{
    color:#b9ddff;
    background:rgba(255,255,255,.08);
}


.demo-content h2{
    margin:19px 0 0;

    font-size:clamp(40px,4.4vw,62px);
    line-height:1;
    letter-spacing:-.045em;
}


.demo-content h2 span{
    color:#6acbff;
}


.demo-content p{
    margin:21px 0 0;
    max-width:510px;

    color:#a9bad3;
    line-height:1.7;
}


.demo-button{
    margin-top:28px;

    color:#031329;
    background:#fff;
}


.demo-device{
    position:relative;
    z-index:2;

    margin-right:-120px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.18);
    border-radius:22px 0 0 22px;

    background:#fff;

    box-shadow:
        0 30px 70px rgba(0,0,0,.28);
}


.device-bar{
    height:36px;

    display:flex;
    align-items:center;
    gap:6px;

    padding:0 14px;

    background:#f1f5f9;
}


.device-bar i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#bcc8d5;
}


.device-content{
    padding:20px;
    background:#f8fbff;
}


.device-nav{
    width:100%;
    height:33px;

    border-radius:8px;
    background:#071831;
}


.device-hero{
    height:170px;
    margin-top:13px;
    padding:23px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #e5f2ff,
            #b9defd
        );
}


.device-hero span{
    display:block;

    width:75px;
    height:9px;

    border-radius:6px;

    background:#075cff;
}


.device-hero strong{
    display:block;

    width:58%;
    height:15px;

    margin-top:13px;
    border-radius:5px;

    background:#122747;
}


.device-hero strong:last-child{
    width:44%;
}


.device-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;

    margin-top:13px;
}


.device-cards i{
    display:block;
    height:120px;

    border-radius:12px;
    border:1px solid #dae4ef;

    background:#fff;
}


/* FAQ */

.faq-section{
    background:#fff;
}


.faq-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
}


.faq-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}


.faq-list details{
    border:1px solid #dfe7f2;
    border-radius:16px;
    background:#fff;
}


.faq-list summary{
    min-height:70px;
    padding:0 20px;

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

    cursor:pointer;

    list-style:none;

    font-size:15px;
    font-weight:850;
}


.faq-list summary::-webkit-details-marker{
    display:none;
}


.faq-list summary span{
    color:#075cff;
    font-size:22px;
}


.faq-list details p{
    margin:0;
    padding:0 20px 20px;

    color:#68788b;
    font-size:13px;
    line-height:1.7;
}


/* CONTACT */

.contact-strip{
    border-top:1px solid #e4ecf5;
    background:#f8fbff;
}


.contact-inner{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
}


.contact-inner h2{
    max-width:680px;
}


.contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}


/* FOOTER */

.footer{
    position:relative;
    overflow:hidden;

    padding:75px 0 27px;

    color:#fff;
    background:#020817;
}


.footer-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;

    filter:blur(20px);
}


.footer-glow-one{
    width:380px;
    height:380px;
    left:-180px;
    top:-210px;

    background:
        radial-gradient(
            circle,
            rgba(7,92,255,.3),
            transparent 70%
        );
}


.footer-glow-two{
    width:420px;
    height:420px;
    right:-230px;
    bottom:-250px;

    background:
        radial-gradient(
            circle,
            rgba(0,183,255,.18),
            transparent 70%
        );
}


.footer-main{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px;
}


.footer-logo-panel{
    display:inline-flex;

    padding:9px 14px;

    border-radius:12px;

    background:#fff;
}


.footer-logo-panel img{
    width:225px;
    height:50px;
    object-fit:contain;
}


.footer-brand p{
    max-width:350px;
    margin:23px 0 0;

    color:#9eb1cc;
    font-size:14px;
    line-height:1.7;
}


.footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px;
}


.footer-links > div{
    display:flex;
    flex-direction:column;
    gap:12px;
}


.footer-links strong{
    margin-bottom:7px;
    font-size:13px;
}


.footer-links a{
    color:#9eb1cc;
    font-size:12px;
    transition:.2s ease;
}


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


.footer-bottom{
    position:relative;
    z-index:2;

    margin-top:55px;
    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.09);

    display:flex;
    justify-content:space-between;
    gap:25px;

    color:#7587a3;
    font-size:10px;
}


/* ==============================================================
   REVEAL
============================================================== */

.reveal{
    opacity:0;
    transform:translateY(28px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.visible{
    opacity:1;
    transform:none;
}


.reveal-delay{
    transition-delay:.12s;
}


/* ==============================================================
   RESPONSIVE
============================================================== */

@media(max-width:1080px){

    .nav-links{
        gap:18px;
    }

    .nav-links a{
        font-size:12px;
    }

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

    .hero-copy{
        max-width:760px;
    }

    .hero-product{
        max-width:850px;
        margin:auto;
    }

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

    .admin-copy{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 30px;
    }

    .agents-grid,
    .map-grid{
        grid-template-columns:1fr;
    }

    .agents-copy,
    .map-copy{
        max-width:760px;
    }

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

}


@media(max-width:850px){

    .nav-shell{
        min-height:76px;
    }

    .brand-panel img{
        width:165px;
        height:38px;
    }

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

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;

        border:1px solid rgba(255,255,255,.18);
        border-radius:12px;

        background:transparent;
    }

    .menu-toggle span{
        width:19px;
        height:2px;
        border-radius:3px;
        background:#fff;
    }

    .nav-links{
        position:fixed;
        z-index:2100;

        left:0;
        right:0;
        top:76px;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;

        padding:10px 20px 25px;

        background:#020817;

        transform:translateY(-130%);
        opacity:0;

        pointer-events:none;

        transition:.25s ease;
    }

    .nav-links.open{
        transform:none;
        opacity:1;
        pointer-events:auto;
    }

    .nav-links a{
        padding:16px 4px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-actions{
        display:none;
    }

    .hero{
        padding-top:70px;
    }

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

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

    .demo-card{
        grid-template-columns:1fr;
    }

    .demo-device{
        margin-right:-65px;
    }

    .faq-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .contact-inner{
        align-items:flex-start;
        flex-direction:column;
    }

}


@media(max-width:640px){

    .container,
    .nav-shell{
        width:min(100% - 28px,1200px);
    }

    .topbar{
        position:sticky;
    }

    .brand-panel{
        padding:5px 9px;
    }

    .brand-panel img{
        width:145px;
        height:34px;
    }

    .hero{
        padding:55px 0 75px;
    }

    .hero h1{
        font-size:47px;
    }

    .hero-lead{
        font-size:16px;
    }

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

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

    .hero-proof{
        gap:17px;
    }

    .hero-proof strong{
        font-size:20px;
    }

    .hero-proof span{
        font-size:9px;
    }

    .browser-window{
        border-radius:18px;
    }

    .browser-top{
        height:38px;
    }

    .browser-url{
        width:58%;
    }

    .dashboard{
        min-height:310px;
        grid-template-columns:46px 1fr;
    }

    .dash-sidebar{
        padding:12px 7px;
    }

    .dash-logo{
        width:28px;
        height:28px;
    }

    .dash-menu{
        width:24px;
        height:24px;
    }

    .dash-content{
        padding:14px;
    }

    .dash-head h3{
        font-size:15px;
    }

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

    .kpi-grid .kpi:last-child{
        display:none;
    }

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

    .property-mini{
        display:none;
    }

    .floating-chip{
        display:none;
    }

    .pain-section,
    .platform-section,
    .agents-section,
    .properties-section,
    .map-section,
    .benefits-section,
    .faq-section,
    .contact-strip{
        padding:78px 0;
    }

    .section-heading{
        margin-bottom:35px;
        text-align:left;
    }

    .section-heading h2,
    .agents-copy h2,
    .map-copy h2,
    .faq-heading h2,
    .contact-inner h2{
        font-size:40px;
    }

    .section-heading p{
        margin-left:0;
    }

    .pain-grid,
    .properties-grid,
    .benefits-grid{
        grid-template-columns:1fr;
    }

    .admin-copy{
        grid-template-columns:1fr;
    }

    .admin-window{
        min-height:auto;
        grid-template-columns:48px 1fr;
    }

    .admin-sidebar{
        padding:15px 8px;
    }

    .side-brand{
        width:30px;
        height:30px;
    }

    .admin-sidebar > span{
        width:27px;
        height:27px;
    }

    .admin-main{
        padding:16px;
    }

    .admin-title strong{
        font-size:16px;
    }

    .admin-cards{
        grid-template-columns:1fr 1fr;
    }

    .admin-table{
        overflow-x:auto;
    }

    .table-head,
    .table-row{
        min-width:430px;
    }

    .agents-grid{
        gap:45px;
    }

    .agents-visual{
        min-height:480px;
    }

    .agent-main{
        left:50%;
        transform:translateX(-50%);
        width:min(300px,90%);
    }

    .agent-second{
        right:-5px;
        top:75px;
        width:190px;
    }

    .agent-third{
        left:-5px;
        bottom:10px;
        width:190px;
    }

    .property-image{
        height:230px;
    }

    .fake-map{
        height:390px;
    }

    .demo-section{
        padding:50px 0 80px;
    }

    .demo-card{
        padding:36px 24px;
        border-radius:25px;
    }

    .demo-content h2{
        font-size:40px;
    }

    .demo-device{
        margin-right:-24px;
    }

    .contact-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }

    .footer{
        padding-top:55px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:45px;
    }

    .footer-links{
        gap:25px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:8px;
    }

    .footer-logo-panel img{
        width:190px;
    }

}


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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }

}