*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:#0b1118;

    color:white;

    overflow-x:hidden;

    padding-top:85px;

}

.custom-navbar{

    background:#0b1118;

    height:80px;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.3s;

}

.logo-circle{

    width:36px;

    height:36px;

    border-radius:50%;

    border:2px solid #00E5A8;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#00E5A8;

}

.logo-title{

    font-weight:800;

    color:#ffffff;

    font-size:20px;

}

.logo-title span{

    color:#00E5A8;

}

.navbar-brand small{

    color:#7d8793;

    font-size:10px;

    letter-spacing:2px;

}

.navbar-nav{

    gap:22px;

}

.nav-link{

    color:#8d96a2 !important;

    text-align:center;

    font-size:11px;

    transition:.3s;

    letter-spacing:.8px;

}

.nav-link i{

    display:block;

    margin-bottom:6px;

    font-size:16px;

}

.nav-link:hover{

    color:#00E5A8 !important;

}

.nav-link.active{

    color:#00E5A8 !important;

}

.quote-btn{

    color:#00E5A8;

    border:1px solid #00E5A8;

    padding:10px 24px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

}

.quote-btn:hover{

    background:#00E5A8;

    color:#111;

}

/* =========================
   BACKGROUND
========================= */

body{
    font-family: 'Inter', sans-serif;
    background:#0b1118;
    color:#fff;
    overflow-x:hidden;
    padding-top:80px;
}

/* Grid Background */

.hero{

    min-height:calc(100vh - 80px);

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    opacity:.35;

}


.hero .container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.hero h1{

    font-size:68px;

    font-weight:800;

    line-height:1.1;

    margin-top:20px;

    margin-bottom:30px;

}

.hero h1 span{

    display:block;

    color:#00E5A8;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border:1px solid rgba(0,229,168,.4);

    background:rgba(0,229,168,.08);

    color:#00E5A8;

    border-radius:40px;

    font-size:14px;

}

.hero-button{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

.hero-button .btn{

    min-width:220px;

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;

}

.btn-success{

    background:#00E5A8;

    border:none;

    color:#111;

}

.btn-success:hover{

    background:#15f0b8;

}

.btn-dark{

    background:#202b37;

    border:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:#00E5A8;

    filter:blur(220px);

    opacity:.08;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

}

.client-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    width:100%;

    margin-bottom:35px;

}

.btn-primary-custom{
    background:#00E5A8 !important;
    color:#0B1118 !important;
    border:none;
    padding:15px 34px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
}

.btn-primary-custom:hover{
    background:#1cf0b7 !important;
    color:#0B1118 !important;
}

.btn-secondary-custom{
    background:#2A3442 !important;
    color:#FFFFFF !important;
    border:none;
    padding:15px 34px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
}

.btn-secondary-custom:hover{
    background:#394454 !important;
    color:#FFFFFF !important;
}

.client-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    margin-top:100px;
    margin-bottom:40px;
    flex-wrap:wrap;
}

.client-logo img{
    max-height:48px;
    max-width:90px;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:0.3s;
}

.client-logo img:hover{
    transform:scale(1.08);
}

/*=========================
 TELEMETRY
=========================*/

.telemetry{

    padding:120px 0 80px;

}

.telemetry-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.telemetry h2{

    font-size:34px;

    font-weight:700;

}

.telemetry p{

    color:#94a3b8;

}

.status-online{

    color:#00E5A8;

    font-size:14px;

}

.dot{

    width:8px;

    height:8px;

    background:#00E5A8;

    display:inline-block;

    border-radius:50%;

    margin-right:8px;

}

.gauge-card{

    background:#111922;

    border:1px solid rgba(255,255,255,.05);

    border-radius:16px;

    padding:25px;

    height:320px;

}

.chart-card{

    background:#111922;

    border-radius:16px;

    padding:30px;

}


.gauge-card{

    background:#101822;

    border-radius:18px;

    padding:30px;

    height:320px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ===================================================
   MOBILE POWER
=================================================== */

.telemetry{
    padding:120px 0 80px;
}

.telemetry-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
}

.telemetry-header h2{
    font-size:36px;
    font-weight:700;
    color:#ffffff;
}

.telemetry-header p{
    color:#94A3B8;
    margin-top:10px;
}

.status-online{
    display:flex;
    align-items:center;
    gap:10px;
    color:#00E5A8;
    font-weight:600;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#00E5A8;
    box-shadow:0 0 12px #00E5A8;
}

/* ================= CARD ================= */

.gauge-card{

    background:#111A24;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:25px;

    transition:.3s;

    height:100%;

}

.gauge-card:hover{

    transform:translateY(-8px);

    border-color:#00E5A8;

    box-shadow:0 15px 35px rgba(0,229,168,.15);

}

.gauge-card h5{

    text-align:center;

    color:white;

    font-size:20px;

    margin-bottom:20px;

    font-weight:600;

}

/* ================= GAUGE ================= */

.gauge{

    position:relative;

    width:180px;

    margin:0 auto;

}

.gauge svg{

    width:100%;

    height:auto;

}

.gauge-bg{

    fill:none;

    stroke:#2E3946;

    stroke-width:14;

}

.gauge-value{

    fill:none;

    stroke-width:14;

    stroke-linecap:round;

}

/* Warna Gauge */

.green{

    stroke:#00E5A8;

}

.yellow{

    stroke:#FFD43B;

}

.blue{

    stroke:#4EA8FF;

}

.purple{

    stroke:#C77DFF;

}

/* ================= TULISAN TENGAH ================= */

.gauge-text{

    position:absolute;

    top:48px;

    left:0;

    width:100%;

    text-align:center;

}

.gauge-text h2{

    color:#ffffff;

    font-size:34px;

    font-weight:700;

    margin:0;

}

.gauge-text span{

    color:#94A3B8;

    font-size:13px;

}

/* ================= DATA ================= */

.gauge-info{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    padding-top:18px;

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

}

.gauge-info div{

    text-align:center;

    flex:1;

}

.gauge-info small{

    display:block;

    color:#94A3B8;

    font-size:12px;

    margin-bottom:6px;

}

.gauge-info strong{

    color:white;

    font-size:15px;

}

/* ================= CHART ================= */

.chart-card{

    background:#111A24;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:30px;

}

.chart-card h4{

    color:white;

    margin-bottom:25px;

}