:root{
    --primary:#1B4FBB;
    --primary-hover:#123a91;
    --accent:#f58220;
    --bg:#f8fafc;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;
    --border-light:#f1f5f9;
    --radius:22px;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:Inter,sans-serif;
    background:#f4f7fb;
    color:#0f172a;
}
main{
    position:relative;
    z-index:2;
}
.section-light{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:28px;
    padding:5rem 3rem;
    margin-top:5rem;
}
.section-white{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:28px;
    padding:5rem 3rem;
    margin-top:5rem;
}
.section-heading{
    text-align:center;
    max-width:700px;
    margin:0 auto;
}
.section-heading h2{
    font-size:2rem;
    font-weight:800;
    color:var(--primary);
    margin-top:14px;
}
.section-heading p{
    margin-top:14px;
    color:var(--muted);
    line-height:1.8;
}
.section-badge{
    display:inline-flex;
    align-items:center;
    padding:.45rem 1rem;
    border-radius:999px;
    background:#eef2ff;
    color:var(--primary);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
}
/* ---------- Hero ---------- */
/* ===========================
   HERO
=========================== */
.hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#ffffff;
    /* border:1px solid var(--border); */
    border-radius:32px;
    padding:100px 70px;
    text-align:center!important;
    box-shadow:
        0 25px 70px rgba(15,23,42,.06);
}
/* content */
.hero-content{
    position:relative;
    z-index:10;
    max-width:1200px;
    margin:auto;
}
/* badge */
.hero-tag{
    display:inline-flex;
    align-items:center; 
}
.hero-tag i{
    font-size:.9rem;
}
/* title */
.hero-title{
    margin-top:30px;
    font-size:4.3rem;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.05em;
    color:#0f172a;
}
.hero-title span{
    color:var(--primary);
}
/* description */
.hero-description{
    margin:28px auto 40px;
    max-width:650px;
    font-size:1.18rem;
    line-height:1.8;
    color:var(--muted);
}
/* buttons */
.hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
/* ===========================
   HERO BACKGROUND
=========================== */
.hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
/* floating circles */
.blob{
    position:absolute;
    border-radius:999px;
    filter:blur(40px);
    animation:float 16s ease-in-out infinite;
}
.blob-1{
    width:420px;
    height:420px;
    background:#dbeafe;
    top:-170px;
    right:-120px;
}
.blob-2{
    width:260px;
    height:260px;
    background:#eff6ff;
    bottom:-90px;
    left:-80px;
    animation-delay:4s;
}
.blob-3{
    width:180px;
    height:180px;
    background:#f1f5f9;
    left:45%;
    top:10%;
    animation-delay:8s;
}
/* grid */
.grid-pattern{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
    background-size:42px 42px;
    opacity:.35;
    mask-image:radial-gradient(circle at center,#000 35%,transparent 90%);
}
/* rings */
.ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.12);
}
.ring-1{
    width:520px;
    height:520px;
    top:-230px;
    right:-180px;
}
.ring-2{
    width:300px;
    height:300px;
    left:-120px;
    bottom:-100px;
}
/* dotted accent */
.dot-pattern{
    position:absolute;
    width:180px;
    height:180px;
    right:90px;
    bottom:60px;
    background-image:radial-gradient(#cbd5e1 1px,transparent 1px);
    background-size:16px 16px;
    opacity:.45;
}
/* light glow */
.glow{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.55;
}
.glow-1{
    width:260px;
    height:260px;
    background:#bfdbfe;
    top:-60px;
    right:20%;
}
.glow-2{
    width:180px;
    height:180px;
    background:#dbeafe;
    left:18%;
    bottom:-50px;
}
/* animated line */
.hero-line{
    position:absolute;
    width:220px;
    height:220px;
    border:1px dashed rgba(37,99,235,.12);
    border-radius:50%;
    top:45px;
    left:90px;
    animation:rotateSlow 30s linear infinite;
}
/* animation */
@keyframes float{
    0%{
        transform:translate3d(0,0,0);
    }
    25%{
        transform:translate3d(12px,-12px,0);
    }
    50%{
        transform:translate3d(-8px,10px,0);
    }
    75%{
        transform:translate3d(10px,-6px,0);
    }
    100%{
        transform:translate3d(0,0,0);
    }
}
@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
/* responsive */
@media(max-width:768px){
.hero{
    padding:70px 28px;
    border-radius:24px;
}
.hero-title{
    font-size:2.8rem;
}
.hero-description{
    font-size:1rem;
}
.hero-actions{
    flex-direction:column;
}
.hero-actions a{
    width:100%;
}
.dot-pattern,
.hero-line,
.ring-2{
    display:none;
}
}
/* ---------- Buttons ---------- */
.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 34px;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.2s;
}
.btn-primary:hover{
    background:var(--primary-hover);
}
.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 34px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}
.btn-outline:hover{
    border-color:var(--primary);
    color:var(--primary);
}
/* ---------- Stats ---------- */
.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:28px;
    text-align:center;
}
.stat-value{
    font-size:2rem;
    font-weight:800;
    color:var(--primary);
}
.stat-label{
    margin-top:6px;
    color:var(--muted);
    font-size:.9rem;
}
/* ---------- Property ---------- */
.property-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
    transition:.25s;
}
.property-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.property-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px;
    border-bottom:1px solid var(--border);
    font-weight:700;
    color:var(--primary);
}
.property-header i{
    font-size:1.1rem;
}
.property-body{
    padding:12px 22px;
}
.property-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid var(--border-light);
}
.property-row:last-child{
    border-bottom:none;
}
.property-type{
    font-weight:600;
}
.property-units{
    font-size:.8rem;
    color:var(--muted);
    margin-top:3px;
}
.property-price{
    font-size:1.1rem;
    font-weight:800;
    color:var(--primary);
}
/* ---------- Feature Cards ---------- */
.feature-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
}
.feature-icon{
    font-size:2rem;
    color:var(--primary);
    margin-bottom:24px;
}
.feature-card h4{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:12px;
}
.feature-card p{
    color:var(--muted);
    line-height:1.8;
}
/* ---------- Terms ---------- */
.terms-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
}
.terms-header{
    padding:28px 34px;
    border-bottom:1px solid var(--border);
}
.terms-header h3{
    font-size:1.4rem;
    font-weight:700;
    color:var(--primary);
}
.terms-body{
    padding:34px;
}
.terms-body ul{
    display:grid;
    gap:16px;
}
.terms-body li{
    color:var(--muted);
    line-height:1.7;
}
/* ---------- Promo ---------- */
.promo-period{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:30px;
    border-radius:22px;
    background:#fff7ed;
    border:1px solid #fed7aa;
}
.promo-period i{
    font-size:2rem;
    color:var(--accent);
}
.promo-period span{
    display:block;
    color:#92400e;
    font-size:.9rem;
}
.promo-period strong{
    font-size:1.2rem;
    color:#78350f;
}
/* ---------- CTA ---------- */
.cta-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:70px 40px;
    text-align:center;
}
.cta-box h2{
    font-size:2.2rem;
    font-weight:800;
    color:var(--primary);
}
.cta-box p{
    margin:20px auto 36px;
    color:var(--muted);
    max-width:620px;
}
/* ---------- Contact ---------- */
.contact-box{
    text-align:center;
}
.contact-box h3{
    font-size:1.8rem;
    color:var(--primary);
    font-weight:800;
}
.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:36px;
}
.contact-grid div{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    font-weight:600;
}
.contact-grid i{
    display:block;
    margin-bottom:14px;
    font-size:1.4rem;
    color:var(--primary);
}
/* ---------- Responsive ---------- */
@media(max-width:768px){
.btn-primary,
.btn-outline{
width:100%;
}
.section-heading h2{
font-size:1.7rem;
}
.cta-box{
padding:50px 24px;
}
.cta-box h2{
font-size:1.8rem;
}
}
/* ==========================================================
   TERMS & CONDITIONS
========================================================== */
.terms-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:20px;
    margin-top:48px;
}
.term-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:24px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:20px;
    transition:.25s ease;
}
.term-item:hover{
    border-color:#0B2A6F;
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.term-item i{
    width:54px;
    height:54px;
    min-width:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#eff6ff;
    color:#0B2A6F;
    font-size:20px;
}
.term-item h4{
    font-size:1rem;
    font-weight:700;
    color:#0f172a;
    margin-bottom:8px;
}
.term-item p{
    font-size:.94rem;
    line-height:1.7;
    color:#64748b;
}
.term-item strong{
    color:#0B2A6F;
    font-weight:600;
}
/* Featured last card */
.term-item:last-child{
    background:#0B2A6F;
    color:#fff;
    border:none;
}
.term-item:last-child h4,
.term-item:last-child p,
.term-item:last-child strong{
    color:#fff;
}
.term-item:last-child i{
    background:rgba(255,255,255,.15);
    color:#fff;
}
/* ==========================================================
   SECTION HEADING
========================================================== */
.section-heading{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}
.section-heading h2{
    font-size:2rem;
    font-weight:800;
    color:#0B2A6F;
    margin-top:12px;
}
.section-heading p{
    margin-top:12px;
    color:#64748b;
    line-height:1.8;
}
.section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#0B2A6F;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:999px;
}
/* ==========================================================
   Responsive
========================================================== */
@media (max-width:768px){
    .terms-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .term-item{
        padding:20px;
    }
    .term-item i{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:17px;
        border-radius:14px;
    }
    .section-heading h2{
        font-size:1.65rem;
    }
}
.property-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:20px;
    margin-top:50px;
}
.property-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    overflow:hidden;
    transition:.25s;
    box-shadow:0 10px 30px rgba(15,23,42,.04);
    max-height:fit-content
}
.property-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(15,23,42,.08);
}
.property-card-header{
    padding:28px;
    border-bottom:1px solid #eef2f7;
}
.property-badge{
    display:inline-block;
    padding:5px 12px;
    background:#eff6ff;
    color:#0B2A6F;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    margin-bottom:12px;
}
.property-card-header h3{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:28px;
    font-weight:700;
    color:#0f172a;
}
.property-card-header i{
    color:#0B2A6F;
}
.property-card-body{
    padding:10px 28px;
}
.unit-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #f1f5f9;
}
.unit-row:last-child{
    border-bottom:none;
}
.unit-type{
    font-weight:600;
    font-size:16px;
    color:#0f172a;
}
.unit-row small{
    display:block;
    margin-top:4px;
    color:#64748b;
}
.unit-price{
    text-align:right;
}
.unit-price span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    color:#94a3b8;
    letter-spacing:.08em;
}
.unit-price strong{
    display:block;
    margin-top:4px;
    font-size:20px;
    color:#0B2A6F;
    font-weight:700;
}
.property-card-footer{
    padding:24px 28px;
    border-top:1px solid #eef2f7;
    background:#fafafa;
}
.property-card-footer .btn-primary{
    width:100%;
    justify-content:center;
}
@media(max-width:768px){
    .property-grid{
        grid-template-columns:1fr;
    }
    .property-card-header h3{
        font-size:24px;
    }
}