*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;color:#172033;line-height:1.6;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1120px,92%);margin:auto}.header{position:absolute;top:0;left:0;width:100%;z-index:10;color:#fff}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:20px;font-weight:800;letter-spacing:-.7px}.logo span:first-child{display:inline-flex;background:#fff;color:#101828;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;font-size:13px;margin-right:8px}.logo span:last-child{font-weight:400;opacity:.72}.nav-links{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:600}.nav-links a{opacity:.9}.nav-links a:hover{opacity:1}.nav-cta{padding:11px 18px;border:1px solid rgba(255,255,255,.35);border-radius:9px}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:27px}.hero{position:relative;overflow:hidden;min-height:730px;color:#fff;background:#0c1630}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 25%,#254c91 0,transparent 30%),radial-gradient(circle at 20% 80%,#143b68 0,transparent 28%),linear-gradient(135deg,#0a1329,#12284b)}.hero-bg:after{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:60px 60px}.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:65px;align-items:center;padding-top:130px}.badge{display:inline-block;padding:7px 13px;border:1px solid rgba(255,255,255,.18);border-radius:30px;background:rgba(255,255,255,.07);font-size:12px;margin-bottom:20px}.badge:first-letter{color:#72e2bd}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.08;letter-spacing:-2.8px;margin-bottom:22px}.hero h1 span{display:block;color:#79e2bf}.hero-text>p{font-size:17px;color:#b7c2d5;max-width:650px}.hero-actions{display:flex;gap:12px;margin:30px 0 38px}.btn{display:inline-flex;padding:13px 21px;border-radius:9px;font-weight:700;font-size:14px;align-items:center;justify-content:center}.primary{background:#72dfbb;color:#09213b}.secondary{border:1px solid rgba(255,255,255,.3);color:#fff}.white{background:#fff;color:#12203b}.hero-stats{display:flex;gap:45px}.hero-stats strong{display:block;font-size:23px}.hero-stats small{display:block;color:#98a7bf;font-size:11px}.hero-card{background:#0a1224;border:1px solid rgba(255,255,255,.13);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:hidden;transform:rotate(2deg)}.window-top{height:43px;border-bottom:1px solid #1c2940;display:flex;align-items:center;padding:0 15px;gap:7px}.window-top i{width:8px;height:8px;border-radius:50%;background:#52627c}.code{padding:28px 25px 25px;font-family:monospace;font-size:13px;line-height:2.2;color:#c5d0e2}.code em{color:#5d6b82;font-style:normal;margin-right:18px}.code b{color:#9f91ff}.code span{color:#6be0b7}.success{margin-top:20px;background:#102d2a;color:#69dcb6;border:1px solid #1c5b4b;border-radius:7px;padding:8px 12px;font-family:Inter;font-size:11px}.section{padding:105px 0}.light{background:#f5f7fa}.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.section-label{font-size:11px;font-weight:800;letter-spacing:2px;color:#149b78;margin-bottom:13px}.section h2{font-size:clamp(31px,4vw,46px);line-height:1.15;letter-spacing:-1.6px}.lead{font-size:20px;font-weight:500;margin-bottom:20px}.two-col p:not(.lead){color:#657084;font-size:15px}.text-link{display:inline-block;color:#0e8b6c;font-weight:700;font-size:14px;margin-top:22px}.center-heading{text-align:center;max-width:700px;margin:0 auto 50px}.center-heading>p{color:#748095;margin-top:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{background:#fff;border:1px solid #e6eaf0;padding:27px;border-radius:14px;transition:.25s}.service-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(22,32,52,.08)}.icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;background:#e7f8f2;color:#0b9975;border-radius:10px;font-size:20px;margin-bottom:24px}.service-card h3{font-size:17px;margin-bottom:10px}.service-card p{color:#718096;font-size:13px;min-height:95px}.service-card a{color:#0b9472;font-size:12px;font-weight:700}.portfolio-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.project{min-height:300px;border-radius:16px;position:relative;overflow:hidden;color:#fff;background:#172b4d}.project:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,#406e9d,transparent 35%),linear-gradient(135deg,#142846,#263e62)}.p2{background:#243b34}.p2:before{background:radial-gradient(circle at 20% 20%,#4a9b83,transparent 35%),linear-gradient(135deg,#183a31,#244d42)}.p3{background:#303052}.p3:before{background:radial-gradient(circle at 75% 30%,#766cb0,transparent 35%),linear-gradient(135deg,#282742,#454269)}.p1{grid-row:span 2;min-height:618px}.project-content{position:absolute;left:30px;bottom:28px;z-index:1}.project-content span{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;opacity:.7}.project-content h3{font-size:23px;margin:4px 0}.project-content p{font-size:12px;opacity:.75}.why{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.why-copy p{color:#718096;margin-top:18px}.why-list{display:grid;gap:13px}.why-list>div{display:flex;gap:20px;padding:22px;border:1px solid #e1e7ed;background:#fff;border-radius:12px}.why-list b{color:#0d9b76}.why-list strong,.why-list small{display:block}.why-list strong{font-size:14px}.why-list small{color:#7a8598;font-size:12px;margin-top:4px}.cta{padding:85px 0;background:linear-gradient(115deg,#0c1931,#173b52);color:#fff}.cta-inner{display:flex;justify-content:space-between;gap:50px;align-items:center}.cta h2{max-width:700px}.cta p{color:#aab8ca;margin-top:12px}.footer{min-height:130px;display:flex;justify-content:space-between;align-items:center;gap:30px}.footer .logo{color:#152039}.footer .logo span:first-child{background:#152039;color:#fff}.footer p{color:#8490a3;font-size:11px;margin-top:8px}.footer-links{display:flex;gap:25px;font-size:12px;color:#637086}.footer-links a:hover{color:#0b9472}@media(max-width:850px){.nav-links{display:none;position:absolute;top:70px;left:4%;right:4%;padding:20px;background:#101d36;border-radius:12px;flex-direction:column;gap:18px}.nav-links.active{display:flex}.menu-toggle{display:block}.hero{min-height:auto;padding-bottom:80px}.hero-content{grid-template-columns:1fr;padding-top:130px}.hero-card{display:none}.cards{grid-template-columns:repeat(2,1fr)}.two-col,.why{grid-template-columns:1fr;gap:35px}.portfolio-grid{grid-template-columns:1fr}.p1{grid-row:auto;min-height:380px}.portfolio-head{align-items:start;flex-direction:column}.cta-inner{flex-direction:column;align-items:start}.footer{flex-direction:column;align-items:start;padding:35px 0}.footer-links{flex-wrap:wrap}}@media(max-width:520px){.hero h1{font-size:43px}.hero-actions{flex-direction:column}.hero-stats{gap:22px}.cards{grid-template-columns:1fr}.section{padding:75px 0}.portfolio-head h2{font-size:31px}.cta h2{font-size:32px}}
.nav-demo {
    background: #72dfbb;
    color: #09213b !important;
    padding: 11px 18px;
    border-radius: 9px;
    font-weight: 700;
}
.demo-app {
    padding: 100px 0;
    background: #0c1630;
    color: white;
}

.demo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.demo-text h2 {
    font-size: 45px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.demo-text > p {
    color: #b7c2d5;
    margin-bottom: 25px;
    max-width: 550px;
}

.demo-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 30px;
    color: #72dfbb;
}

.demo-button {
    background: #72dfbb;
    color: #09213b;
}

.demo-preview {
    background: #101f3d;
    padding: 15px;
    border-radius: 18px;
}

.browser {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    color: #172033;
}

.browser-header {
    height: 45px;
    background: #edf1f5;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
}

.browser-header span {
    width: 10px;
    height: 10px;
    background: #c4cad3;
    border-radius: 50%;
}

.browser-header small {
    margin-left: 10px;
    color: #6b7280;
}

.dashboard-preview {
    display: flex;
    min-height: 280px;
}

.sidebar-preview {
    width: 130px;
    background: #172033;
    color: white;
    padding: 20px;
}

.sidebar-preview b {
    display: block;
    margin-bottom: 30px;
    font-size: 22px;
}

.sidebar-preview p {
    font-size: 10px;
    color: #aab5c5;
}

.content-preview {
    flex: 1;
    padding: 25px;
}

.content-preview h3 {
    margin-bottom: 25px;
}

.stat-boxes {
    display: grid;
    gap: 12px;
}

.stat-boxes div {
    padding: 15px;
    background: #f5f7fa;
    border-radius: 8px;
}

.stat-boxes small {
    display: block;
    color: #7b8798;
}

.stat-boxes strong {
    display: block;
    margin-top: 5px;
    color: #0b9472;
}

@media (max-width: 768px) {

    .demo-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .demo-text h2 {
        font-size: 34px;
    }

}


/* =========================================
   UPDATE PREVIEW DEMO SIA SELUSIN
   ========================================= */

.nav-demo{background:#72dfbb;color:#09213b !important;padding:11px 18px;border-radius:9px;font-weight:700;opacity:1 !important}
.nav-demo:hover{transform:translateY(-1px)}

.demo-app{
    padding:105px 0;
    background:
        radial-gradient(circle at 85% 20%,rgba(37,76,145,.35),transparent 30%),
        radial-gradient(circle at 10% 80%,rgba(20,59,104,.35),transparent 30%),
        #0c1630;
    color:#fff;
}

.demo-content{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center}

.demo-text h2{font-size:clamp(34px,4vw,48px);line-height:1.15;margin-bottom:20px;letter-spacing:-1.5px}
.demo-text > p{color:#b7c2d5;margin-bottom:25px;max-width:520px;font-size:16px}

.demo-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 20px;
    margin-bottom:30px;
    color:#d8e5ef;
    font-size:14px;
}

.demo-button{background:#72dfbb;color:#09213b;box-shadow:0 12px 30px rgba(114,223,187,.18)}

.demo-note{
    margin-top:18px !important;
    margin-bottom:0 !important;
    font-size:12px !important;
    color:#9fb0c7 !important;
}

.demo-preview{
    padding:0;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 70px rgba(0,0,0,.35);
    background:#101f3d;
}

.demo-screenshot{width:100%;display:block;height:auto}

@media(max-width:850px){
    .demo-content{grid-template-columns:1fr;gap:40px}
    .demo-preview{max-width:720px;width:100%}
}

@media(max-width:520px){
    .demo-app{padding:75px 0}
    .demo-features{grid-template-columns:1fr}
}