/*==================================================
SMART HOME DETAIL
==================================================*/
.solution-detail{
    position:relative;
    padding:140px 0;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

/* background glow */
.solution-detail::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    left:-220px;
    top:-180px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.12),
            transparent 70%
        );
	overflow:visible;
}

.solution-detail::after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-220px;
    bottom:-200px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.08),
            transparent 70%
        );
}

/*==================================================
GRID
==================================================
}*/
.sh-grid{
    display:grid;
    grid-template-columns:
        minmax(320px,420px)
        1fr;
    gap:70px;
    align-items:start;
}

/*==================================================
LEFT
==================================================*/
.sh-visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:420px;
    border-radius:30px;
    overflow:hidden;
}

/*==================================================
IMAGE
==================================================*/
.sh-image{
    position:relative;
    z-index:2;
    max-width:90%;
    height:auto;
    transition:.5s;

}

.sh-image:hover{
    transform:
        translateY(-8px)
        scale(1.02);
}

/*==================================================
GLOW
==================================================*/
.sh-bg-glow{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(56,189,248,.22),
            transparent 70%
        );

    animation:
        shGlow
        6s ease-in-out infinite;
}

@keyframes shGlow{
    50%{
        transform:scale(1.08);
        opacity:.75;
    }
}

/*==================================================
DECORATION CIRCLE
==================================================*/
.sh-circle{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(56,189,248,.15);
}

.circle-1{
    width:260px;
    height:260px;
}

.circle-2{
    width:360px;
    height:360px;
    border-style:dashed;
    animation:
        rotateCircle
        20s linear infinite;
}

.circle-3{
    width:470px;
    height:470px;
    opacity:.55;
}

@keyframes rotateCircle{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/*==================================================
RIGHT CONTENT
==================================================*/
.sh-content{
    position:relative;
}

.detail-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 20px;
    border-radius:999px;
    background: rgba(14,165,233,.10);
    color:#0284c7;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:28px;
}

.detail-title{
    font-size:3.2rem;
    line-height:1.15;
    font-weight:900;
    color:#0f172a;
    margin-bottom:28px;
}

.detail-description{
    color:#64748b;
    line-height:2;
    font-size:1.02rem;
    margin-bottom:40px;
}

/*==================================================
HIGHLIGHT
==================================================*/

.sh-highlight{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:42px;
}

.highlight-box{
    background:#fff;
    border-radius:22px;
    padding:26px;
    text-align:center;
    border: 1px solid rgba(15,23,42,.05);
    box-shadow:0 15px 35px rgba(15,23,42,.05);
    transition:.35s;
}

.highlight-box:hover{
    transform:translateY(-8px);
    border-color:#38bdf8;
}

.highlight-box h3{
    font-size:1.6rem;
    color:#0284c7;
    font-weight:800;
}

.highlight-box span{
    color:#64748b;
    font-size:.82rem;
}

/*==================================================
FEATURE LIST
==================================================*/
.sh-feature-list{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:16px;
    margin-bottom:50px;
}

.sh-feature{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    background:#fff;
    border-radius:18px;
    border: 1px solid rgba(15,23,42,.05);
    transition:.35s;
}

.sh-feature:hover{
    transform:translateX(8px);
    border-color:#38bdf8;
}

.sh-feature i{
    color:#0ea5e9;
}
/*=========================================
SUMMARY PANEL
=========================================*/
.sh-summary{
    position:relative;
    display:block;
    width:100%;
    box-sizing:border-box;

    margin-top:0;
    padding:30px;

    border-radius:24px;

    background:rgba(15,23,42,.92);

    border:1px solid rgba(56,189,248,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    z-index:20;
}

.sh-summary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(14,165,233,.12);

}
.summary-title{

    color:#fff;

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:24px;

}

.summary-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.summary-item{

    display:flex;

    align-items:center;

    gap:14px;

    color:#dbeafe;

    font-weight:500;

}

.summary-item i{

    color:#38bdf8;

    font-size:18px;

}

.summary-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:30px;

    padding-top:25px;

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

}

.summary-stat h3{

    color:#38bdf8;

    font-size:1.5rem;

    margin-bottom:8px;

}

.summary-stat span{

    color:#94a3b8;

    font-size:.85rem;

}

/*==================================================
SMART HOME INTELLIGENCE
ENTERPRISE STYLE
==================================================*/

.sh-intelligence{

    margin-top:24px;

    padding:26px 28px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #dbeafe;

    box-shadow:
        0 12px 35px rgba(15,23,42,.07);

    /*font-family:'Plus Jakarta Sans', sans-serif;*/
	font-family: 'Montserrat', sans-serif !important;

    position:relative;

    overflow:hidden;
}


/* Accent */

.sh-intelligence::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #0284c7,
            #38bdf8,
            transparent
        );
}


/* HEADER */

.intelligence-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:24px;
}


.intelligence-label{

    display:block;

    margin-bottom:6px;

    color:#0284c7;

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;

}


.intelligence-header h5{

    margin:0;

    color:#0f172a !important;

    /*font-family:'Plus Jakarta Sans',sans-serif !important;*/
	font-family: 'Montserrat', sans-serif !important;

    font-size:17px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:-.02em;
}


/* STATUS */

.system-status{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 11px;

    border-radius:999px;

    background:#ecfdf5;

    color:#047857;

    font-size:9px;

    font-weight:800;

    letter-spacing:.06em;

    white-space:nowrap;
}


.system-status i{

    font-size:6px;

    color:#10b981;
}


/* STATS */

.intelligence-stats{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

    margin-bottom:22px;
}


.intelligence-stat{

    padding:16px 10px;

    border-radius:16px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    text-align:center;
}


.intelligence-stat strong{

    display:block;

    margin-bottom:5px;

    color:#0f172a !important;

    /*font-family:'Plus Jakarta Sans',sans-serif;*/
	font-family: 'Montserrat', sans-serif !important;
    font-size:20px;

    line-height:1;

    font-weight:800;

    letter-spacing:-.03em;
}


.intelligence-stat span{

    display:block;

    color:#64748b !important;

    font-size:9px;

    line-height:1.4;

    font-weight:600;
}


/* FOOTER */

.intelligence-footer{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:10px;

    padding-top:18px;

    border-top:1px solid #e2e8f0;
}


.intelligence-footer span{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    color:#334155 !important;

    font-size:9px;

    font-weight:700;
}


.intelligence-footer i{

    color:#0284c7;

    font-size:10px;
}
/*==================================================
BUTTON
==================================================*/
.detail-action{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.detail-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    border-radius:50px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
}

.detail-btn-primary:hover{
    transform:translateY(-5px);
    box-shadow: 0 20px 40px rgba(14,165,233,.28);
}

.detail-btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    border-radius:50px;
    background:#fff;
    color:#0f172a;
    border:1px solid rgba(15,23,42,.08);
    font-weight:700;
    text-decoration:none;
    transition:.35s;
}

.detail-btn-secondary:hover{
    background:#0ea5e9;
    color:#fff;
}

/*==================================================
SMART ECOSYSTEM
==================================================*/
.smart-ecosystem{
    position:relative;
    padding:140px 0;
    background:#ffffff;
}

.ecosystem-heading{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:90px;
}

.ecosystem-heading h2{
    font-size:3rem;
    font-weight:900;
    color:#0f172a;
    margin:25px 0;
}

.ecosystem-heading p{
    color:#64748b;
    line-height:2;
}

.eco-network{
    position:relative;
    width:700px;
    height:700px;
    margin:auto;
}

.eco-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:190px;
    height:190px;
    border-radius:50%;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 25px 60px rgba(14,165,233,.15);
    z-index:10;
}

.eco-center img{
    width:90px;
}

.eco-center span{
    margin-top:15px;
    font-weight:700;
    color:#0f172a;
}

.eco-node{
    position:absolute;
    width:120px;
    text-align:center;
}

.eco-node img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.eco-node h4{
    margin-top:10px;
    font-size:.82rem;
    color:#334155;
}

.top{
    left:50%;
    top:0;
    transform:translateX(-50%);
}

.top-right{
    right:60px;
    top:80px;
}

.right{
    right:0;
    top:50%;
    transform:translateY(-50%);
}

.bottom-right{
    right:60px;
    bottom:80px;
}

.bottom{
    left:50%;
    bottom:0;
    transform:translateX(-50%);
}

.bottom-left{
    left:60px;
    bottom:80px;
}

.left{
    left:0;
    top:50%;
    transform:translateY(-50%);
}

.top-left{
    left:60px;
    top:80px;
}

/* Area diagram */
.eco-network{
    position:relative;
    width:700px;
    height:700px;
    margin:80px auto;
}

/* Node perangkat */
.eco-node{
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
        display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
}

/* Icon */
.eco-node img{
    width:75px;
    height:75px;
    object-fit:contain;
    margin-bottom:12px;
    filter:drop-shadow(0 10px 20px rgba(14,165,233,.35));
    transition:.35s ease;
}

/* Hover */
.eco-node:hover img{
    transform:scale(3.18);
}

/* Text */
.eco-node h4{
    font-size:14px;
    margin:0;
    text-align:center;
}

/* =========================================================
   SMART ECOSYSTEM
   MOBILE / TABLET ENTERPRISE
   Desktop CSS di atas TIDAK DIUBAH
   ========================================================= */

@media (max-width: 991px){

    .smart-ecosystem{

        padding:
            90px 0 100px;

        overflow:hidden;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f8fbfd 100%
            );

    }


    /* =====================================================
       HEADING
       ===================================================== */

    .ecosystem-heading{

        max-width:
            720px;

        margin:
            0 auto 55px;

        padding:
            0 28px;

        text-align:center;

    }


    .ecosystem-heading h2{

        margin:
            18px 0;

        font-size:
            clamp(
                30px,
                5vw,
                42px
            );

        line-height:
            1.12;

        letter-spacing:
            -1px;

        font-weight:
            800;

        color:
            #0f172a;

    }


    .ecosystem-heading p{

        max-width:
            620px;

        margin:
            auto;

        color:
            #64748b;

        font-size:
            14px;

        line-height:
            1.8;

    }


    /* =====================================================
       NETWORK AREA
       ===================================================== */

    .eco-network{

        position:
            relative;

        width:
            min(
                100%,
                680px
            );

        height:
            auto;

        min-height:
            620px;

        margin:
            40px auto 0;

        padding:
            20px;

        box-sizing:
            border-box;

    }


    /* =====================================================
       CENTER
       ===================================================== */

    .eco-center{

        position:absolute;

        left:50%;
        top:50%;

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

        width:
            155px;

        height:
            155px;

        border-radius:
            50%;

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

        border:
            1px solid
            #dce7ef;

        box-shadow:
            0 20px 55px
            rgba(15,42,65,.12),

            0 0 0 12px
            rgba(14,165,233,.035);

        z-index:
            10;

    }


    .eco-center::before{

        content:"";

        position:absolute;

        inset:
            -9px;

        border-radius:
            50%;

        border:
            1px solid
            rgba(14,165,233,.16);

        pointer-events:none;

    }


    .eco-center img{

        width:
            68px;

        max-width:
            68px;

        object-fit:
            contain;

    }


    .eco-center span{

        margin-top:
            10px;

        font-size:
            12px;

        font-weight:
            800;

        letter-spacing:
            .8px;

        color:
            #0f172a;

    }


    /* =====================================================
       NODES
       ===================================================== */

    .eco-node{

        position:absolute;

        width:
            118px;

        height:
            118px;

        min-width:
            118px;

        border-radius:
            20px;

        display:flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

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

        border:
            1px solid
            #dce7ef;

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);

        box-shadow:
            0 14px 35px
            rgba(15,42,65,.08);

        z-index:
            5;

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;

    }


    /* =====================================================
       ICON
       ===================================================== */

    .eco-node img{

        width:
            50px;

        height:
            50px;

        object-fit:
            contain;

        margin:
            0 0 9px;

        filter:
            drop-shadow(
                0 7px 15px
                rgba(14,165,233,.25)
            );

        transition:
            transform .25s ease;

    }


    /* =====================================================
       TEXT
       ===================================================== */

    .eco-node h4{

        margin:
            0;

        max-width:
            100px;

        font-size:
            11px;

        line-height:
            1.35;

        text-align:
            center;

        color:
            #334155;

        font-weight:
            700;

    }


    /* =====================================================
       REMOVE DESKTOP POSITIONS
       ===================================================== */

    .eco-network .top{

        left:
            50%;

        top:
            18px;

        right:
            auto;

        bottom:
            auto;

        transform:
            translateX(-50%);

    }


    .eco-network .top-right{

        right:
            22px;

        top:
            105px;

        left:
            auto;

        bottom:
            auto;

        transform:
            none;

    }


    .eco-network .right{

        right:
            5px;

        top:
            50%;

        left:
            auto;

        bottom:
            auto;

        transform:
            translateY(-50%);

    }


    .eco-network .bottom-right{

        right:
            22px;

        bottom:
            105px;

        left:
            auto;

        top:
            auto;

        transform:
            none;

    }


    .eco-network .bottom{

        left:
            50%;

        bottom:
            18px;

        top:
            auto;

        right:
            auto;

        transform:
            translateX(-50%);

    }


    .eco-network .bottom-left{

        left:
            22px;

        bottom:
            105px;

        right:
            auto;

        top:
            auto;

        transform:
            none;

    }


    .eco-network .left{

        left:
            5px;

        top:
            50%;

        right:
            auto;

        bottom:
            auto;

        transform:
            translateY(-50%);

    }


    .eco-network .top-left{

        left:
            22px;

        top:
            105px;

        right:
            auto;

        bottom:
            auto;

        transform:
            none;

    }


    /* =====================================================
       TOUCH / HOVER
       ===================================================== */

    .eco-node:hover{

        transform:
            translateY(-3px);

        border-color:
            rgba(14,165,233,.35);

        box-shadow:
            0 18px 40px
            rgba(15,42,65,.11);

    }


    .eco-node:hover img{

        transform:
            scale(1.08);

    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px){

    .smart-ecosystem{

        padding:
            70px 0 80px;

    }


    .ecosystem-heading{

        margin-bottom:
            25px;

        padding:
            0 22px;

    }


    .ecosystem-heading h2{

        font-size:
            clamp(
                28px,
                8vw,
                34px
            );

        line-height:
            1.12;

        letter-spacing:
            -.8px;

    }


    .ecosystem-heading p{

        font-size:
            13px;

        line-height:
            1.75;

    }


    /* =====================================================
       NETWORK
       ===================================================== */

    .eco-network{

        width:
            100%;

        min-height:
            530px;

        margin:
            20px auto 0;

        padding:
            10px;

    }


    /* =====================================================
       CENTER
       ===================================================== */

    .eco-center{

        width:
            125px;

        height:
            125px;

    }


    .eco-center img{

        width:
            52px;

    }


    .eco-center span{

        margin-top:
            8px;

        font-size:
            10px;

        letter-spacing:
            .6px;

    }


    /* =====================================================
       NODE
       ===================================================== */

    .eco-node{

        width:
            92px;

        height:
            92px;

        min-width:
            92px;

        border-radius:
            16px;

        box-shadow:
            0 10px 28px
            rgba(15,42,65,.075);

    }


    .eco-node img{

        width:
            38px;

        height:
            38px;

        margin-bottom:
            7px;

    }


    .eco-node h4{

        max-width:
            82px;

        font-size:
            9px;

        line-height:
            1.3;

    }


    /* =====================================================
       PHONE POSITIONS
       ===================================================== */

    .eco-network .top{

        top:
            10px;

    }


    .eco-network .top-right{

        right:
            8px;

        top:
            88px;

    }


    .eco-network .right{

        right:
            0;

    }


    .eco-network .bottom-right{

        right:
            8px;

        bottom:
            88px;

    }


    .eco-network .bottom{

        bottom:
            10px;

    }


    .eco-network .bottom-left{

        left:
            8px;

        bottom:
            88px;

    }


    .eco-network .left{

        left:
            0;

    }


    .eco-network .top-left{

        left:
            8px;

        top:
            88px;

    }


    /* =====================================================
       TOUCH DEVICE
       Hindari scale besar pada layar sentuh
       ===================================================== */

    .eco-node:hover img{

        transform:
            none;

    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width:380px){

    .eco-network{

        min-height:
            500px;

    }


    .eco-node{

        width:
            84px;

        height:
            84px;

        min-width:
            84px;

    }


    .eco-node img{

        width:
            34px;

        height:
            34px;

    }


    .eco-node h4{

        font-size:
            8.5px;

        max-width:
            74px;

    }


    .eco-center{

        width:
            112px;

        height:
            112px;

    }


    .eco-center img{

        width:
            46px;

    }

}

/*=========================================
SMART HOME PACKAGES
=========================================*/

.smart-packages{
    margin:100px 0 80px;
}

.smart-packages .section-heading{
    max-width:760px;
    margin:0 auto 60px;
    text-align:center;
}
.smart-packages .section-heading h2{
    font-size:clamp(2rem,4vw,3rem);
    color:#fff;
    margin-bottom:20px;
}
.smart-packages .section-label{
    display:inline-block;
    padding:8px 18px;
    border:1px solid rgba(14,165,233,.35);
    border-radius:50px;
    background:rgba(14,165,233,.08);
    color:#38bdf8;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.smart-packages .section-heading p{
    color:#94a3b8;
    line-height:1.8;
    font-size:1.05rem;
}

.package-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

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

    padding:38px;
    border-radius:26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.package-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    background:linear-gradient(
        90deg,
        #0ea5e9,
        #38bdf8,
        transparent
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:.45s;
    pointer-events:none;
}

.package-card::after{

    content:"";

    position:absolute;
    inset:-30%;

    background:
        radial-gradient(
            circle,
            rgba(14,165,233,.22) 0%,
            transparent 70%
        );

    opacity:0;

    transform:scale(.8);

    transition:
        opacity .45s ease,
        transform .45s ease;

    pointer-events:none;

}
.package-card:hover::after{

    opacity:1;

    transform:scale(1);

}

.package-card:hover{

    border-color:rgba(56,189,248,.45);

    box-shadow:
        0 25px 55px rgba(0,0,0,.45),
        0 0 35px rgba(14,165,233,.18),
        inset 0 0 0 1px rgba(255,255,255,.05);

}

.package-card:hover::before{
    transform:scaleX(1);
}

/*==================================================
SMART HOME PACKAGES - SECTION HEADING
==================================================*/

#smart-home-detail .smart-packages .section-heading{
    position:relative;
    z-index:10;
}

/* LABEL */
#smart-home-detail .smart-packages .section-label{
    display:inline-flex;

    color:#38bdf8 !important;
    -webkit-text-fill-color:#38bdf8 !important;

    background:rgba(14,165,233,.10);

    border:1px solid rgba(56,189,248,.18);

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

    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;

    margin-bottom:18px;
}

/*==================================================
SMART HOME PACKAGES - CLEAR TEXT
==================================================*/

#smart-home-detail .smart-packages .section-heading h2{
    display:block !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:none !important;
    background-image:none !important;

    opacity:1 !important;
    visibility:visible !important;

    font-size:clamp(2.2rem,4vw,3.2rem) !important;
    line-height:1.18 !important;
    font-weight:900 !important;

    letter-spacing:-.02em;

    margin:0 0 22px !important;
    padding:0 !important;

    text-align:center;

    text-shadow:
        0 2px 4px rgba(0,0,0,.65),
        0 6px 18px rgba(0,0,0,.35);

    position:relative;
    z-index:20;
}

#smart-home-detail .smart-packages .section-heading p{
    display:block !important;

    color:#334155 !important;
    -webkit-text-fill-color:#334155 !important;

    background:none !important;
    background-image:none !important;

    opacity:1 !important;
    visibility:visible !important;

    font-size:16px !important;
    font-weight:500 !important;
    line-height:1.85 !important;

    letter-spacing:.01em;

    max-width:720px;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center;

    text-shadow:none !important;
    filter:none !important;
    transform:none !important;

    position:relative;
    z-index:20;
}

/*=========================================
PACKAGE ICON
=========================================*/
.package-icon{
    width:110px;
    height:110px;
    margin:0 auto 24px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
}

.package-icon img{
    width:100%;
    height:100%;
    object-fit:contain;

    transition:
        transform .45s ease,
        filter .45s ease;

    filter:
        drop-shadow(0 10px 20px rgba(14,165,233,.20));
}

.package-card:hover .package-icon img{

    transform:scale(2.4) rotate(-3deg);

    filter: drop-shadow(0 18px 35px rgba(14,165,233,.45));

}

.package-category{

    display:block;

    color:#38bdf8;

    font-size:.82rem;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.package-card h3{

    transition:.35s;

}

.package-card:hover h3{

    color:#38bdf8;

}

.package-card h4{

    color:#0f172a;

    font-size:1rem;

    font-weight:500;

    margin-bottom:18px;
}

.package-card p{

    color:#94a3b8;

    line-height:1.8;

    margin-bottom:28px;
}

.package-link{

    position:relative;

    display:inline-flex;
    align-items:center;
    gap:12px;

    transition:.35s;

}
.package-link::after{

    content:"";

    width:0;
    height:2px;

    background:#38bdf8;

    transition:.35s;

}

.package-card:hover .package-link::after{

    width:30px;

}

.package-link:hover{

    gap:16px;

    color:#7dd3fc;

}

@media(max-width:992px){

    .package-grid{

        grid-template-columns:1fr;

    }

    .package-card{

        padding:30px;

    }

    .sh-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .sh-left-panel{

        position:relative;

        top:auto;

    }

}

.package-card{

    opacity:0;

    transform:
        translateY(40px);

}

.package-card.show{

    opacity:1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.package-card:nth-child(2){

    transition-delay:.15s;

}

.package-card:nth-child(3){

    transition-delay:.30s;

}

.package-card:nth-child(4){

    transition-delay:.45s;

}

.package-card{

    --x:50%;
    --y:50%;

}

.package-card::before{

    background:
        radial-gradient(
            500px circle at var(--x) var(--y),
            rgba(56,189,248,.18),
            transparent 45%
        );

}

/*==================================================
SMART HOME — STICKY LEFT PANEL
==================================================*/
.sh-left-panel{
    position:-webkit-sticky;
    position:sticky;
    top:110px;
    align-self:start;
    height:max-content;
    display:flex;
    flex-direction:column;
    gap:28px;
    animation:fadeLeft .8s ease;
    z-index:10;
}
@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
            translateX(-30px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}

.sh-feature{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}
.sh-feature-icon{

    width:44px;
    height:44px;

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

    border-radius:12px;

    background:rgba(56,189,248,.08);

    border:1px solid rgba(56,189,248,.20);

}

.sh-feature-icon img{

    width:24px;
    height:24px;

    object-fit:contain;

    transition:.35s;

}

.sh-feature:hover .sh-feature-icon img{

    transform:scale(1.18);

}

/*==================================================
SMART HOME SUMMARY
==================================================*/

#smart-home-detail .sh-summary{
    position:relative;
    display:block;

    width:100%;
    box-sizing:border-box;

    margin-top:35px;
    padding:30px;

    border-radius:24px;

    background:rgba(15,23,42,.94);

    border:1px solid rgba(56,189,248,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    z-index:20;
}


/* HEADER */

#smart-home-detail .sh-summary-header{
    position:relative;

    display:block;

    width:100%;

    z-index:30;
}


/* BADGE */

#smart-home-detail .sh-summary .summary-badge{
    display:inline-flex;

    color:#38bdf8 !important;
    -webkit-text-fill-color:#38bdf8 !important;

    background:rgba(14,165,233,.15) !important;

    margin-bottom:18px;
}


/* TITLE */

#smart-home-detail .sh-summary h4{
    display:block !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:none !important;
    background-image:none !important;

    font-size:25px !important;
    line-height:1.3 !important;
    font-weight:800 !important;

    opacity:1 !important;
    visibility:visible !important;

    margin:0 0 16px !important;
    padding:0 !important;

    position:relative !important;
    z-index:31 !important;

    text-shadow:0 2px 8px rgba(0,0,0,.45) !important;
}


/* DESCRIPTION */

#smart-home-detail .sh-summary .sh-summary-description{
    display:block !important;

    color:#e2e8f0 !important;
    -webkit-text-fill-color:#e2e8f0 !important;

    background:none !important;
    background-image:none !important;

    font-size:15.5px !important;
    line-height:1.9 !important;
    font-weight:400 !important;

    opacity:1 !important;
    visibility:visible !important;

    width:100% !important;

    margin:0 0 28px !important;
    padding:0 !important;

    position:relative !important;
    z-index:31 !important;

    text-shadow:0 1px 5px rgba(0,0,0,.5) !important;
}

/*==================================================
SMART HOME SUMMARY FEATURE GRID
==================================================*/

.summary-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
    margin-top:8px;
}

.summary-item{
    position:relative;

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

    min-height:125px;

    padding:16px 10px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    overflow:hidden;
}

.summary-item::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56,189,248,.12),
            transparent 65%
        );

    opacity:.7;

    pointer-events:none;
}

.summary-item img{
    position:relative;
    z-index:1;

    width:58px;
    height:58px;

    object-fit:contain;

    margin-bottom:10px;

    filter:
        drop-shadow(0 8px 14px rgba(14,165,233,.25));

    transition:
        transform .35s ease,
        filter .35s ease;
}

.summary-item span{
    position:relative;
    z-index:1;

    color:#e2e8f0;

    font-size:12px;
    font-weight:700;

    line-height:1.3;

    text-align:center;

    letter-spacing:.02em;

    transition:.35s ease;
}

/*=========================================
HOVER
=========================================*/

.summary-item:hover{
    transform:translateY(-5px);

    border-color:rgba(56,189,248,.35);

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,.12),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 14px 30px rgba(0,0,0,.20),
        0 0 25px rgba(14,165,233,.08);
}

.summary-item:hover img{
    transform:scale(1.10);

    filter:
        drop-shadow(0 10px 20px rgba(14,165,233,.42));
}

.summary-item:hover span{
    color:#7dd3fc;
}

/*=========================================
PACKAGE VALUE
=========================================*/

.smart-packages .package-value{
    margin:22px 0 26px;
}

/* intro */
.smart-packages .value-intro{
    color:#334155;

    font-size:14px;
    line-height:1.8;
    font-weight:500;

    margin-bottom:18px;
}

.smart-packages .value-intro strong{
    color:#0369a1;
    font-weight:800;
}

/* value item */
.smart-packages .value-item{
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:11px 0;

    border-top:1px solid rgba(15,23,42,.08);
}

.smart-packages .value-item i{
    flex:0 0 30px;

    width:30px;
    height:30px;

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

    border-radius:9px;

    background:rgba(14,165,233,.10);

    color:#0284c7;

    font-size:13px;

    margin-top:2px;
}

.smart-packages .value-item span{
    color:#475569;

    font-size:13.5px;
    line-height:1.75;
    font-weight:450;
}

/* hover */
.smart-packages .value-item{
    transition:.3s ease;
}

.smart-packages .value-item:hover i{
    background:#0284c7;
    color:#fff;

    transform:scale(1.08);
}

.smart-packages .value-item:hover span{
    color:#1e293b;
}

.smart-packages .package-card:nth-child(2) .value-item i{
    background:rgba(37,99,235,.10);
    color:#2563eb;
}

.smart-packages .package-card:nth-child(2) .value-intro strong{
    color:#1d4ed8;
}

.smart-packages .package-card:nth-child(2) .value-item:hover i{
    background:#2563eb;
    color:#fff;
}

/*=========================================
ECO SMART ENERGY ACCENT
=========================================*/

.smart-packages .package-card:nth-child(4) .value-item i{
    background:rgba(16,185,129,.10);
    color:#059669;
}

.smart-packages .package-card:nth-child(4) .value-intro strong{
    color:#047857;
}

.smart-packages .package-card:nth-child(4) .value-item:hover i{
    background:#059669;
    color:#fff;
}

.smart-packages .package-card:nth-child(4) .value-item:hover span{
    color:#065f46;
}

/* =========================================================
   SMART HOME DETAIL
   CTA — FULL WIDTH
   ========================================================= */

#smart-home-detail .shd-cta {

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    box-sizing: border-box;

    margin-left: 0;
    margin-right: 0;

    padding:
        90px 30px;

    overflow: hidden;

    text-align: center;

    color: #102a43;

    background:
        linear-gradient(
            135deg,
            #f7fafc 0%,
            #eef5f9 48%,
            #e7f0f5 100%
        );

    border-top:
        1px solid #dce7ee;

    border-bottom:
        1px solid #dce7ee;
}


/* =========================================================
   AMBIENT MESH
   ========================================================= */

#smart-home-detail .shd-cta::before {

    content: "";

    position: absolute;

    width: 720px;
    height: 720px;

    right: -240px;
    top: -300px;

    z-index: -2;

    background:

        radial-gradient(
            circle at center,
            rgba(25,118,180,.12) 0 2px,
            transparent 3px
        );

    background-size:
        34px 34px;

    opacity: .75;

    transform:
        rotate(12deg);

    mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            transparent 72%
        );
}


/* =========================================================
   SOFT TECHNOLOGY GLOW
   ========================================================= */

#smart-home-detail .shd-cta::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -250px;
    bottom: -330px;

    z-index: -1;

    background:
        radial-gradient(
            circle,
            rgba(17,112,178,.15) 0%,
            rgba(17,112,178,.07) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

#smart-home-detail .shd-cta > * {

    position: relative;

    z-index: 2;
}


/* =========================================================
   LABEL
   ========================================================= */

#smart-home-detail .shd-cta .shd-section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #1267a3;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.1px;

    text-transform: uppercase;
}


#smart-home-detail .shd-cta .shd-section-label::before {

    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #1685c4;

    box-shadow:
        0 0 0 4px rgba(22,133,196,.10),
        0 0 14px rgba(22,133,196,.25);
}


/* =========================================================
   HEADING
   ========================================================= */

#smart-home-detail .shd-cta h3 {

    margin: 0;

    color: #102a43;

    font-size:
        clamp(34px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 700;
}


#smart-home-detail .shd-cta h3 strong {

    display: block;

    color: #075d9f;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#smart-home-detail .shd-cta p {

    max-width: 700px;

    margin:
        22px auto 30px;

    color: #526779;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   BUTTON
   ========================================================= */

#smart-home-detail .shd-cta .shd-btn-primary {

    display: inline-flex;

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

    gap: 13px;

    min-width: 195px;

    padding:
        13px 23px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #075d9f,
            #0878bd
        );

    border:
        1px solid #075d9f;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .15px;

    text-decoration: none;

    box-shadow:
        0 8px 22px
        rgba(7,93,159,.18);

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


#smart-home-detail .shd-cta .shd-btn-primary span {

    font-size: 19px;

    line-height: 1;

    transition:
        transform .25s ease;
}


#smart-home-detail .shd-cta .shd-btn-primary:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #064f89,
            #066ca9
        );

    box-shadow:
        0 14px 30px
        rgba(7,93,159,.25);
}


#smart-home-detail .shd-cta .shd-btn-primary:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   SUBTLE MESH MOTION
   ========================================================= */

@keyframes shdAmbientMove {

    0% {
        transform:
            rotate(12deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(14deg)
            translate3d(-18px, 12px, 0);
    }

    100% {
        transform:
            rotate(12deg)
            translate3d(0, 0, 0);
    }
}


#smart-home-detail .shd-cta::before {

    animation:
        shdAmbientMove 14s ease-in-out infinite;
}


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

@media (max-width: 768px) {

    #smart-home-detail .shd-cta {

        padding:
            70px 25px;
    }

    #smart-home-detail .shd-cta h3 {

        font-size:
            clamp(32px, 8vw, 44px);
    }

    #smart-home-detail .shd-cta p {

        font-size: 14px;
    }

}

/* ============================================================
   RESPONSIVE — SMART HOME DETAIL
   Desktop rules above remain unchanged.
   Consolidated: tablet / mobile / iPhone only.
============================================================ */

/* CTA MOBILE */
@media (max-width:768px){
    #smart-home-detail .shd-cta{
        padding:70px 20px;
    }

    #smart-home-detail .shd-cta h3{
        font-size:clamp(32px,8vw,44px);
    }

    #smart-home-detail .shd-cta p{
        font-size:14px;
    }
}

/* ============================================================
   TABLET + MOBILE
   <=1024px
============================================================ */
@media screen and (max-width:1024px){

    .sh-grid{
        grid-template-columns:1fr;
        gap:42px;
        width:100%;
    }

    .sh-left-panel{
        position:relative;
        top:auto;
        width:100%;
        max-width:760px;
        min-width:0;
        margin:0 auto;
        padding:0 20px;
        box-sizing:border-box;
        gap:24px;
    }

    .sh-visual{
        width:100%;
        height:340px;
        margin:0 auto 20px;
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .sh-image{
        width:250px;
        max-width:55%;
        height:auto;
        object-fit:contain;
        position:relative;
        z-index:5;
    }

    .sh-bg-glow{
        transform:scale(.85) !important;
    }

    .sh-circle.circle-1{
        transform:scale(.85) !important;
    }

    .sh-circle.circle-2{
        transform:scale(.80) !important;
    }

    .sh-circle.circle-3{
        transform:scale(.75) !important;
    }

    .sh-summary{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:22px 18px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .sh-summary-header{
        width:100%;
        max-width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    .summary-badge{
        font-size:10px;
        padding:6px 11px;
    }

    .sh-summary h4{
        width:100%;
        max-width:100%;
        font-size:24px !important;
        line-height:1.2 !important;
        margin:10px 0 14px !important;
        overflow-wrap:break-word;
    }

    .sh-summary-description{
        width:100% !important;
        max-width:620px !important;
        margin:0 auto 22px !important;
        font-size:13px !important;
        line-height:1.65 !important;
        overflow-wrap:break-word;
    }

    .summary-feature-grid{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:10px;
        box-sizing:border-box;
    }

    .summary-item{
        width:100%;
        min-width:0 !important;
        max-width:100%;
        min-height:105px;
        padding:12px 6px;
        box-sizing:border-box;
    }

    .summary-item img{
        width:52px;
        height:52px;
        max-width:100%;
        object-fit:contain;
    }

    .summary-item span{
        display:block;
        width:100%;
        max-width:100%;
        margin-top:6px;
        font-size:10px;
        line-height:1.3;
        text-align:center;
        overflow-wrap:anywhere;
    }

    .sh-intelligence{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0;
        padding:20px 18px;
        box-sizing:border-box;
        border-radius:18px;
    }

    .intelligence-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    .intelligence-label{
        font-size:8px;
        letter-spacing:1px;
    }

    .intelligence-header h5{
        font-size:17px;
        line-height:1.25;
        margin:4px 0 0;
    }

    .system-status{
        flex:0 0 auto;
        white-space:nowrap;
        font-size:8px;
        padding:5px 8px;
    }

    .intelligence-stats{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        margin-top:17px;
        margin-bottom:18px;
    }

    .intelligence-stat{
        min-width:0;
        padding:11px 4px;
    }

    .intelligence-stat strong{
        font-size:20px;
    }

    .intelligence-stat span{
        font-size:8px;
        line-height:1.25;
    }

    .intelligence-footer{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
        margin-top:0;
        padding-top:12px;
    }

    .intelligence-footer span{
        min-width:0;
        font-size:8px;
        text-align:center;
        white-space:nowrap;
    }
}

/* ============================================================
   MOBILE
   <=768px
============================================================ */
@media screen and (max-width:768px){

    .solution-detail{
        padding:85px 0;
    }

    .sh-left-panel{
        width:100%;
        max-width:100%;
        padding:0 14px;
        margin:0 auto;
    }

    .sh-visual{
        height:285px;
        margin-bottom:14px;
    }

    .sh-image{
        width:210px;
        max-width:62%;
    }

    .sh-bg-glow{
        transform:scale(.78) !important;
    }

    .sh-circle.circle-1{
        transform:scale(.78) !important;
    }

    .sh-circle.circle-2{
        transform:scale(.73) !important;
    }

    .sh-circle.circle-3{
        transform:scale(.68) !important;
    }

    .sh-summary{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:18px 14px !important;
        border-radius:18px !important;
    }

    .summary-badge{
        font-size:9px;
        padding:6px 10px;
    }

    .sh-summary h4{
        font-size:21px !important;
        margin:9px 0 12px !important;
    }

    .sh-summary-description{
        max-width:100% !important;
        font-size:11.5px !important;
        line-height:1.6 !important;
        margin-bottom:18px !important;
    }

    .summary-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px;
    }

    .summary-item{
        min-height:100px;
        padding:10px 5px;
        border-radius:15px;
    }

    .summary-item img{
        width:46px;
        height:46px;
    }

    .summary-item span{
        font-size:9px;
    }

    .sh-intelligence{
        padding:17px 13px;
        border-radius:17px;
    }

    .intelligence-header{
        align-items:flex-start;
    }

    .intelligence-label{
        font-size:7.5px;
        letter-spacing:.8px;
    }

    .intelligence-header h5{
        font-size:15px;
    }

    .system-status{
        font-size:7px;
        padding:4px 7px;
    }

    .intelligence-stats{
        gap:6px;
        margin-top:15px;
    }

    .intelligence-stat{
        padding:10px 2px;
    }

    .intelligence-stat strong{
        font-size:18px;
    }

    .intelligence-stat span{
        font-size:7.5px;
    }

    .intelligence-footer{
        gap:4px;
        padding-top:11px;
    }

    .intelligence-footer span{
        font-size:7.5px;
    }

    .intelligence-footer i{
        margin-right:2px;
        font-size:9px;
    }
}

/* ============================================================
   IPHONE
   <=480px
============================================================ */
@media screen and (max-width:480px){

    .solution-detail{
        padding:70px 0;
    }

    .sh-left-panel{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding:0 10px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .sh-visual{
        width:100%;
        height:235px;
        margin-bottom:12px;
    }

    .sh-image{
        width:175px;
        max-width:65%;
    }

    .sh-bg-glow{ transform:scale(.55); }
    .sh-circle.circle-1{ transform:scale(.55); }
    .sh-circle.circle-2{ transform:scale(.50); }
    .sh-circle.circle-3{ transform:scale(.46); }

    .sh-summary{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:16px 11px !important;
        border-radius:16px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .sh-summary-header,
    .sh-summary-description,
    .summary-feature-grid{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .summary-badge{
        max-width:100%;
        font-size:8px;
        padding:5px 8px;
    }

    .sh-summary h4{
        width:100% !important;
        max-width:100% !important;
        font-size:19px !important;
        line-height:1.2 !important;
        margin:8px 0 10px !important;
        overflow-wrap:anywhere;
    }

    .sh-summary-description{
        font-size:10.5px !important;
        line-height:1.55 !important;
        margin-bottom:15px !important;
        overflow-wrap:anywhere;
    }

    .summary-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:6px;
    }

    .summary-item{
        min-height:91px;
        padding:9px 3px;
        border-radius:13px;
    }

    .summary-item img{
        width:40px;
        height:40px;
        margin-bottom:6px;
    }

    .summary-item span{
        font-size:8.5px;
        line-height:1.25;
    }

    .sh-intelligence{
        width:100% !important;
        max-width:100% !important;
        padding:14px 10px;
        border-radius:15px;
    }

    .intelligence-label{
        font-size:6.5px;
        letter-spacing:.7px;
    }

    .intelligence-header h5{
        font-size:13.5px;
    }

    .system-status{
        font-size:6.5px;
        padding:4px 6px;
    }

    .intelligence-stats{
        gap:5px;
        margin-top:13px;
        margin-bottom:14px;
    }

    .intelligence-stat{
        padding:8px 2px;
        border-radius:12px;
    }

    .intelligence-stat strong{
        font-size:16px;
    }

    .intelligence-stat span{
        font-size:6.5px;
    }

    .intelligence-footer{
        gap:2px;
        padding-top:9px;
    }

    .intelligence-footer span{
        font-size:6.5px;
        white-space:normal;
        line-height:1.25;
    }

    .intelligence-footer i{
        font-size:8px;
    }
}

/* =========================================================
   SMART HOME — MOBILE WIDTH & VISUAL FINAL FIX
   DESKTOP TIDAK DISENTUH
   ========================================================= */

@media (max-width: 768px){

    /* =====================================================
       1. CEGAH SELURUH SMART HOME PANEL MELEBAR
       ===================================================== */

    .sh-left-panel,
    .sh-left-panel *,
    .sh-summary,
    .sh-summary *{
        box-sizing:border-box;
    }

    .sh-left-panel{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;

        overflow:hidden !important;
    }


    /* =====================================================
       2. VISUAL
       ===================================================== */

    .sh-visual{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        height:300px !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        position:relative !important;

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

        overflow:hidden !important;
    }

    .sh-image{
        position:relative !important;

        width:auto !important;
        height:auto !important;

        max-width:78% !important;
        max-height:230px !important;

        object-fit:contain !important;

        margin:0 auto !important;

        display:block !important;
    }


    /* =====================================================
       3. SUMMARY
       ===================================================== */

    .sh-summary{
        position:relative !important;

        display:block !important;

        width:calc(100% - 30px) !important;
        max-width:calc(100% - 30px) !important;
        min-width:0 !important;

        margin:20px 15px 0 !important;

        padding:18px 14px !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /* =====================================================
       4. HEADER SUMMARY
       ===================================================== */

    .sh-summary-header{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        text-align:center !important;

        overflow:hidden !important;
    }

    .summary-badge{
        display:inline-flex !important;

        max-width:100% !important;

        box-sizing:border-box !important;
    }

    .sh-summary-header h4{
        width:100% !important;
        max-width:100% !important;

        margin:14px 0 10px !important;

        font-size:27px !important;
        line-height:1.15 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .sh-summary-description{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 auto !important;

        font-size:14px !important;
        line-height:1.65 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }


    /* =====================================================
       5. FEATURE GRID
       ===================================================== */

    .summary-feature-grid{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        gap:10px !important;

        margin:18px 0 0 !important;
        padding:0 !important;

        box-sizing:border-box !important;
    }

    .summary-item{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        padding:12px 6px !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

    .summary-item img{
        display:block !important;

        width:auto !important;
        height:auto !important;

        max-width:55px !important;
        max-height:55px !important;

        object-fit:contain !important;

        margin:0 auto 8px !important;
    }

    .summary-item span{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        text-align:center !important;

        font-size:10px !important;
        line-height:1.3 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }
}


/* =========================================================
   IPHONE
   ========================================================= */

@media (max-width:480px){

    .sh-visual{
        height:270px !important;
    }

    .sh-image{
        max-width:82% !important;
        max-height:210px !important;
    }

    .sh-summary{
        width:calc(100% - 24px) !important;
        max-width:calc(100% - 24px) !important;

        margin-left:12px !important;
        margin-right:12px !important;

        padding:16px 10px !important;
    }

    .sh-summary-header h4{
        font-size:24px !important;
    }

    .sh-summary-description{
        font-size:13px !important;
        line-height:1.6 !important;
    }

    .summary-feature-grid{
        gap:8px !important;
    }

    .summary-item{
        padding:10px 4px !important;
    }

    .summary-item img{
        max-width:48px !important;
        max-height:48px !important;
    }

    .summary-item span{
        font-size:9px !important;
    }
}


/* =========================================================
   IPHONE KECIL
   ========================================================= */

@media (max-width:360px){

    .sh-visual{
        height:250px !important;
    }

    .sh-image{
        max-width:84% !important;
        max-height:195px !important;
    }

    .sh-summary{
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;

        margin-left:10px !important;
        margin-right:10px !important;

        padding-left:9px !important;
        padding-right:9px !important;
    }

    .sh-summary-header h4{
        font-size:22px !important;
    }
}

/* =========================================================
   SMART HOME VISUAL — MOBILE / TABLET
   DESKTOP TIDAK DIUBAH
   ========================================================= */

@media (max-width: 768px){

    .sh-visual{
        position:relative !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        height:300px !important;
        min-height:300px !important;

        margin:0 !important;
        padding:0 !important;

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

        overflow:hidden !important;

        box-sizing:border-box !important;
    }

    /* IMAGE UTAMA */
    .sh-visual .sh-image{
        position:relative !important;

        display:block !important;

        width:auto !important;
        height:auto !important;

        max-width:75% !important;
        max-height:220px !important;

        margin:0 auto !important;

        object-fit:contain !important;

        transform:none !important;

        z-index:5 !important;
    }

    /* GLOW */
    .sh-visual .sh-bg-glow{
        position:absolute !important;

        width:220px !important;
        height:220px !important;

        top:50% !important;
        left:50% !important;

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

        z-index:1 !important;

        pointer-events:none !important;
    }

    /* ORBIT */
    .sh-visual .sh-circle{
        position:absolute !important;

        top:50% !important;
        left:50% !important;

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

        pointer-events:none !important;

        z-index:2 !important;
    }
}


/* =========================================================
   IPHONE
   ========================================================= */

@media (max-width:480px){

    .sh-visual{
        height:270px !important;
        min-height:270px !important;
    }

    .sh-visual .sh-image{
        max-width:82% !important;
        max-height:205px !important;
    }

    .sh-visual .sh-bg-glow{
        width:200px !important;
        height:200px !important;
    }
}


/* =========================================================
   IPHONE KECIL
   ========================================================= */

@media (max-width:360px){

    .sh-visual{
        height:250px !important;
        min-height:250px !important;
    }

    .sh-visual .sh-image{
        max-width:84% !important;
        max-height:190px !important;
    }

    .sh-visual .sh-bg-glow{
        width:180px !important;
        height:180px !important;
    }
}

/* =========================================================
   SMART HOME IMAGE - MOBILE / TABLET
   Hanya menggeser posisi, ukuran TETAP
========================================================= */

@media (max-width: 1024px){

    .sh-visual{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
        position:relative !important;
        box-sizing:border-box !important;
    }

    .sh-image{
        position:relative !important;

        /* ukuran jangan diubah */
        width:auto !important;
        max-width:none !important;
        height:auto !important;

        /* geser sedikit ke kiri */
        left:-45px !important;
    }

}

/* =========================================================
   SMART HOME DETAIL
   ENTERPRISE RESPONSIVE FINAL
   TABLET / MOBILE / IPHONE
   ========================================================= */

@media (max-width:1024px){

    #smart-home-detail{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    #smart-home-detail > .container{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        padding-left:24px;
        padding-right:24px;
        box-sizing:border-box;
    }

    #smart-home-detail .sh-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:50px;
        margin:0;
    }

    /* LEFT */

    #smart-home-detail .sh-left-panel{
        width:100%;
        max-width:760px;
        min-width:0;
        margin:0 auto;
        padding:0;
        box-sizing:border-box;
    }

    #smart-home-detail .sh-visual{
        width:100%;
        max-width:100%;
        height:320px;
        min-height:320px;
        margin:0 0 20px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        box-sizing:border-box;
    }

    #smart-home-detail .sh-image{
        position:relative;
        left:0 !important;
        right:auto;
        width:auto;
        max-width:70%;
        max-height:240px;
        height:auto;
        margin:0 auto;
        object-fit:contain;
        transform:none !important;
    }

    #smart-home-detail .sh-bg-glow{
        width:300px;
        height:300px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%) !important;
    }

    #smart-home-detail .sh-circle{
        left:50%;
        top:50%;
    }

    /* SUMMARY */

    #smart-home-detail .sh-summary{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0;
        padding:26px 22px;
        box-sizing:border-box;
        overflow:hidden;
    }

    #smart-home-detail .sh-summary-header{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    #smart-home-detail .sh-summary h4{
        font-size:24px !important;
        line-height:1.25 !important;
    }

    #smart-home-detail .sh-summary-description{
        max-width:650px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        font-size:13.5px !important;
        line-height:1.7 !important;
    }

    #smart-home-detail .summary-feature-grid{
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:10px;
    }

    #smart-home-detail .summary-item{
        min-width:0;
        width:100%;
        box-sizing:border-box;
    }

    /* INTELLIGENCE */

    #smart-home-detail .sh-intelligence{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:22px 0 0;
        box-sizing:border-box;
    }

    /* RIGHT CONTENT */

    #smart-home-detail .sh-content{
        width:100%;
        max-width:760px;
        min-width:0;
        margin:0 auto;
        box-sizing:border-box;
    }

    #smart-home-detail .detail-title{
        font-size:clamp(2.3rem,5vw,3.2rem);
        line-height:1.15;
    }

    #smart-home-detail .detail-description{
        max-width:700px;
    }

    #smart-home-detail .sh-highlight{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    #smart-home-detail .sh-feature-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    /* PACKAGES */

    #smart-home-detail .smart-packages{
        width:100%;
        max-width:100%;
        margin:80px 0 60px;
    }

    #smart-home-detail .package-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    #smart-home-detail .package-card{
        min-width:0;
        padding:28px;
        box-sizing:border-box;
    }
}


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

@media (max-width:768px){

    #smart-home-detail > .container{
        padding-left:16px;
        padding-right:16px;
    }

    #smart-home-detail .sh-grid{
        gap:38px;
    }

    #smart-home-detail .sh-left-panel,
    #smart-home-detail .sh-content{
        max-width:100%;
    }

    /* VISUAL */

    #smart-home-detail .sh-visual{
        height:280px;
        min-height:280px;
    }

    #smart-home-detail .sh-image{
        max-width:78%;
        max-height:215px;
        left:0 !important;
    }

    /* SUMMARY */

    #smart-home-detail .sh-summary{
        padding:22px 16px !important;
        border-radius:20px !important;
    }

    #smart-home-detail .sh-summary h4{
        font-size:22px !important;
    }

    #smart-home-detail .sh-summary-description{
        font-size:13px !important;
    }

    #smart-home-detail .summary-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px;
    }

    #smart-home-detail .summary-item{
        min-height:105px;
        padding:12px 6px !important;
    }

    #smart-home-detail .summary-item img{
        width:48px;
        height:48px;
    }

    #smart-home-detail .summary-item span{
        font-size:10px;
    }

    /* INTELLIGENCE */

    #smart-home-detail .sh-intelligence{
        padding:20px 16px;
        border-radius:18px;
    }

    #smart-home-detail .intelligence-header{
        align-items:flex-start;
    }

    #smart-home-detail .intelligence-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    /* CONTENT */

    #smart-home-detail .detail-badge{
        font-size:10px;
        padding:8px 13px;
        margin-bottom:18px;
    }

    #smart-home-detail .detail-title{
        font-size:clamp(2rem,8vw,2.7rem);
        line-height:1.12;
        margin-bottom:20px;
    }

    #smart-home-detail .detail-description{
        font-size:14px;
        line-height:1.75;
        margin-bottom:28px;
    }

    /* HIGHLIGHT */

    #smart-home-detail .sh-highlight{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:9px;
        margin-bottom:32px;
    }

    #smart-home-detail .highlight-box{
        padding:18px 8px;
        border-radius:16px;
    }

    #smart-home-detail .highlight-box h3{
        font-size:1.25rem;
        margin-bottom:5px;
    }

    #smart-home-detail .highlight-box span{
        font-size:9px;
        line-height:1.3;
    }

    /* FEATURES */

    #smart-home-detail .sh-feature-list{
        grid-template-columns:1fr;
        gap:9px;
        margin-bottom:35px;
    }

    #smart-home-detail .sh-feature{
        width:100%;
        min-width:0;
        padding:13px 14px;
        border-radius:14px;
        font-size:13px;
        box-sizing:border-box;
    }

    #smart-home-detail .sh-feature:hover{
        transform:none;
    }

    /* PACKAGES */

    #smart-home-detail .smart-packages{
        margin:65px 0 45px;
    }

    #smart-home-detail .smart-packages .section-heading{
        margin-bottom:38px;
        padding:0 5px;
    }

    #smart-home-detail .smart-packages .section-heading h2{
        font-size:clamp(1.9rem,7vw,2.5rem) !important;
        line-height:1.18 !important;
    }

    #smart-home-detail .smart-packages .section-heading p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    #smart-home-detail .package-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    #smart-home-detail .package-card{
        width:100%;
        max-width:100%;
        padding:24px 20px;
        border-radius:20px;
        box-sizing:border-box;
    }

    #smart-home-detail .package-icon{
        width:85px;
        height:85px;
        margin-bottom:18px;
    }

    #smart-home-detail .package-card:hover .package-icon img{
        transform:scale(1.25) rotate(-2deg);
    }

    #smart-home-detail .package-category{
        font-size:10px;
        line-height:1.4;
    }

    #smart-home-detail .package-card h3{
        font-size:22px;
        line-height:1.2;
    }

    #smart-home-detail .package-card h4{
        font-size:14px;
        line-height:1.4;
    }

    #smart-home-detail .smart-packages .value-intro{
        font-size:13px;
        line-height:1.7;
    }

    #smart-home-detail .smart-packages .value-item{
        gap:10px;
        padding:10px 0;
    }

    #smart-home-detail .smart-packages .value-item i{
        flex:0 0 28px;
        width:28px;
        height:28px;
        font-size:12px;
    }

    #smart-home-detail .smart-packages .value-item span{
        min-width:0;
        font-size:12.5px;
        line-height:1.65;
    }
}


/* =========================================================
   IPHONE
   ========================================================= */

@media (max-width:480px){

    #smart-home-detail > .container{
        padding-left:12px;
        padding-right:12px;
    }

    #smart-home-detail .sh-visual{
        height:245px;
        min-height:245px;
    }

    #smart-home-detail .sh-image{
        max-width:82%;
        max-height:190px;
        left:0 !important;
    }

    #smart-home-detail .sh-summary{
        padding:18px 12px !important;
        border-radius:17px !important;
    }

    #smart-home-detail .sh-summary h4{
        font-size:20px !important;
    }

    #smart-home-detail .sh-summary-description{
        font-size:12px !important;
        line-height:1.6 !important;
    }

    #smart-home-detail .summary-item{
        min-height:92px;
        padding:10px 4px !important;
    }

    #smart-home-detail .summary-item img{
        width:42px;
        height:42px;
    }

    #smart-home-detail .summary-item span{
        font-size:9px;
    }

    #smart-home-detail .sh-intelligence{
        padding:16px 11px;
    }

    #smart-home-detail .intelligence-header h5{
        font-size:14px;
    }

    #smart-home-detail .intelligence-stat strong{
        font-size:17px;
    }

    #smart-home-detail .intelligence-stat span{
        font-size:7px;
    }

    #smart-home-detail .intelligence-footer span{
        font-size:7px;
    }

    #smart-home-detail .detail-title{
        font-size:clamp(1.9rem,9vw,2.3rem);
    }

    #smart-home-detail .detail-description{
        font-size:13.5px;
    }

    #smart-home-detail .sh-highlight{
        gap:7px;
    }

    #smart-home-detail .highlight-box{
        padding:15px 5px;
        border-radius:14px;
    }

    #smart-home-detail .highlight-box h3{
        font-size:1.1rem;
    }

    #smart-home-detail .highlight-box span{
        font-size:8px;
    }

    #smart-home-detail .package-card{
        padding:22px 16px;
        border-radius:18px;
    }

    #smart-home-detail .package-icon{
        width:75px;
        height:75px;
    }

    #smart-home-detail .package-card h3{
        font-size:20px;
    }

    #smart-home-detail .package-card h4{
        font-size:13px;
    }

    #smart-home-detail .smart-packages .value-intro{
        font-size:12.5px;
    }

    #smart-home-detail .smart-packages .value-item span{
        font-size:12px;
    }
}


/* =========================================================
   VERY SMALL IPHONE
   ========================================================= */

@media (max-width:360px){

    #smart-home-detail > .container{
        padding-left:10px;
        padding-right:10px;
    }

    #smart-home-detail .sh-visual{
        height:225px;
        min-height:225px;
    }

    #smart-home-detail .sh-image{
        max-width:84%;
        max-height:175px;
    }

    #smart-home-detail .sh-summary{
        padding:16px 10px !important;
    }

    #smart-home-detail .sh-summary h4{
        font-size:19px !important;
    }

    #smart-home-detail .sh-summary-description{
        font-size:11.5px !important;
    }

    #smart-home-detail .summary-item{
        min-height:87px;
    }

    #smart-home-detail .summary-item span{
        font-size:8.5px;
    }

    #smart-home-detail .sh-highlight{
        grid-template-columns:1fr;
        gap:8px;
    }

    #smart-home-detail .highlight-box{
        padding:14px;
    }

    #smart-home-detail .package-card{
        padding:20px 14px;
    }
}