/* ==========================================================
   HOUSE SECTION
========================================================== */

.house-section{

    position:relative;

    overflow:hidden;

    padding:140px 0;

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

}

.house-summary{

    margin-top:220px;

    text-align:center;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

}

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

.house-header{

    max-width:820px;

    margin:0 auto 90px;

    text-align:center;

    position:relative;

    z-index:5;

}

.house-header .section-title{

    margin:22px 0;

}

.house-header .section-description{

    max-width:650px;

    margin:auto;

    line-height:1.9;

}

/* ==========================================================
   BLUEPRINT WRAPPER
========================================================== */

.house-blueprint-wrapper{

    position:relative;

    width:min(1100px,100%);

    margin:0 auto;

    padding:100px 20px 220px;

    min-height:1350px;

}

/* ==========================================================
   BLUEPRINT GRID
========================================================== */

.house-grid{

    position:absolute;

    inset:0;

    opacity:.18;

    pointer-events:none;

    background-image:

        linear-gradient(

            rgba(16,185,129,.15) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(16,185,129,.15) 1px,

            transparent 1px

        );

    background-size:36px 36px;
    
    z-index:2;
    
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000,
            rgba(0,0,0,.85),
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            rgba(0,0,0,.85),
            transparent
        );

}

.house-grid::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:

        rgba(148,163,184,.25);

}

.house-grid::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:1px;

    height:100%;

    background:

        rgba(148,163,184,.25);

}

/* ==========================================================
   GLOW
========================================================== */

.house-glow{

    position:absolute;

    width:560px;
    height:560px;

    opacity:.22;

    border-radius:50%;

    filter:blur(110px);

    pointer-events:none;
    
    z-index:1;

}

.house-block>*{

    position:relative;
    z-index:2;

}

.house-block:hover .corner{

    opacity:.7;

}

.glow-left{

    left:-220px;

    bottom:180px;

}

.glow-right{

    right:-220px;

    top:120px;

}


/* ==========================================================
   CONNECTOR STYLE
========================================================== */

.connector{

    position:absolute;

    background:linear-gradient(
        180deg,
        #10B981,
        #3B82F6
    );

    border-radius:999px;

    z-index:5;
    
    opacity:.55;
    
    transform-origin:top center;

}

.connector.active{

    opacity:1;
}

/* ===========================
   Vertical
=========================== */

.connector.vertical{

    width:3px;

}

/* ===========================
   Horizontal
=========================== */

.connector.horizontal{

    height:3px;

}

/* ==========================================================
   FUTURE DOWN
========================================================== */

.future-down{
    top:440px;
    height:170px;
    left: 50%;
}

/* ==========================================================
   TOP LINE
========================================================== */

.top-line{

    width:72%;

    left:50%;

    top:610px;

    transform:translateX(-50%);

}

/* ==========================================================
   FOUNDATION UP
========================================================== */

.foundation-up{

    top:-250px;

    height:325px;

    left:50%;

    transform:translateX(-50%);

}

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

.connector-node{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;
    
    z-index:6;
    
    width:24px;
    height:24px;

    background:#fff;

    border:3px solid #10B981;

    box-shadow:
        0 0 0 8px rgba(16,185,129,.08);
 
}

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

.node-top{
    top:595px;
    left: 50%;
}

.node-bottom{

    top:-260px;

    left:50%;

    transform:translateX(-50%);

}

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

.connector-node::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(16,185,129,.25);
    
    inset:-8px;

}

.connector-node:hover{

    transform:

        translateX(-50%)

        scale(1.15);

    box-shadow:

        0 0 0 12px rgba(16,185,129,.15);

}

/* ==========================================================
   GUIDE
========================================================== */

.house-blueprint-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        repeating-linear-gradient(

            90deg,

            transparent 0,

            transparent 14px,

            rgba(148,163,184,.08) 14px,

            rgba(148,163,184,.08) 16px

        );

    opacity:.35;

    pointer-events:none;

}

.house-blueprint-wrapper::after{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:

        rgba(148,163,184,.08);

}

/* ==========================================================
   HOUSE BLOCK
========================================================== */

/* ==========================================================
   HOUSE BLOCK
========================================================== */

.house-block{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    overflow:hidden;

    z-index:20;

    padding:34px;

    border-radius:28px;
    
    gap:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(248,250,252,.96)
        );

    border:1px solid rgba(226,232,240,.9);

    backdrop-filter:blur(18px);

    box-shadow:

        0 20px 50px rgba(15,23,42,.06),

        0 50px 100px rgba(15,23,42,.05);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;
        
    min-height:260px;
        

}

.house-side{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

/* ==========================================================
   TRUST CONNECTOR
========================================================== */

.trust-line{

    position:absolute;

    left:14%;

    top:610px;
    height:310px;

    width:3px;

    transform:translateX(-50%);

}

/* ==========================================================
   PARTNERSHIP CONNECTOR
========================================================== */

.partnership-line{

    position:absolute;

    left:86%;

    top:610px;
    height:110px;

    width:3px;

    transform:translateX(-50%);

}


/* ==========================================================
   BOTTOM CONNECTOR
========================================================== */

.bottom-line{

    width:44%;

    left:50%;

    top:-250px;

    transform:translateX(-50%);

}

/* Glow */

.house-block::before{

    content:"";

    position:absolute;

    border-radius:50%;

    width:180px;
    height:180px;

    right:-80px;
    top:-80px;

    background:

        radial-gradient(

            rgba(16,185,129,.22),

            transparent 70%

        );

    pointer-events:none;

}

/* Blueprint Line */

.house-block::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(

            90deg,

            #10B981,

            #3B82F6

        );

}

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

.block-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 12px;

    border-radius:22px;

    background:

        linear-gradient(

            135deg,

            #10B981,

            #0EA5E9

        );

    box-shadow:

        0 20px 45px rgba(16,185,129,.20);

    transition:.45s;

}

.block-icon svg{

    width:34px;

    height:34px;

    color:#fff;

}

/* ==========================================================
   TITLE
========================================================== */

.house-block h3{

    margin-bottom:10px;

    font-size:24px;

    font-weight:700;

    line-height:1.2;

    color:#0F172A;

}

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

.house-block p{

    margin:0;

    font-size:15px;

    line-height:1.9;

    color:#64748B;
    
    max-width:260px;

}

/* ==========================================================
   FUTURE
========================================================== */

.house-block.future{

    width:clamp(300px,32vw,360px);

    margin:0 auto;

    text-align:center;

    position:relative;

    z-index:5;

}

.house-middle{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:60px;

    margin-top:220px;
    gap:60px;

    position:relative;

}

.house-block.trust,
.house-block.partnership{

    flex:1;

    max-width:420px;

    min-height:300px;

}

/* ==========================================================
   FOUNDATION WRAPPER
========================================================== */

.house-foundation-wrapper{

    position:relative;

    width:100%;

    margin-top:40px;

}

/* ==========================================================
   FOUNDATION
========================================================== */

.house-block.foundation{

    width:clamp(460px,52vw,560px);

    margin:120px auto 0;

    min-height:240px;

}

.house-block span{

    position:relative;

    z-index:2;

}

.house-block:hover h3{

    color:#10B981;

}

.house-block:hover p{

    color:#475569;

}

.house-block .corner{

    position:absolute;

    width:20px;

    height:20px;

    opacity:.30;

    border-color:#10B981;

}

.house-block .corner.top-left{

    top:14px;

    left:14px;

    border-top:2px solid;

    border-left:2px solid;

}

.house-block .corner.top-right{

    top:14px;

    right:14px;

    border-top:2px solid;

    border-right:2px solid;

}

.house-block .corner.bottom-left{

    bottom:14px;

    left:14px;

    border-left:2px solid;

    border-bottom:2px solid;

}

.house-block .corner.bottom-right{

    bottom:14px;

    right:14px;

    border-right:2px solid;

    border-bottom:2px solid;

}

.house-block:hover{

    transform:

        translateY(-12px);

    border-color:#10B981;

    box-shadow:

        0 35px 90px rgba(16,185,129,.16);

}

.house-block:hover .block-icon{

    transform:

        rotate(-8deg)

        scale(1.06);

}

.reveal-future,
.reveal-left,
.reveal-right,
.reveal-foundation,
.reveal-footer{

    opacity:1;
    visibility:visible;
    transform:none;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .house-section{
        padding:100px 0;
    }

    .house-header{
        margin-bottom:70px;
        padding:0 24px;
    }

    .house-header .section-title{
        font-size:52px;
        line-height:1.15;
    }

    .house-header .section-description{
        font-size:18px;
    }

    .house-blueprint-wrapper{

        width:100%;
        min-height:1180px;
        padding:70px 20px 180px;

    }

    .house-block.future{

        width:340px;

    }

    .house-middle{

        margin-top:180px;
        gap:40px;

    }

    .house-block.trust,
    .house-block.partnership{

        max-width:360px;
        min-height:280px;

    }

    .house-block.foundation{

        width:85%;
        max-width:520px;
        margin-top:90px;

    }

    .top-line{

        width:68%;
        top:590px;

    }

    .future-down{

        top:420px;
        height:170px;

    }

    .trust-line{

        left:14%;
        top:590px;
        height:105px;

    }

    .partnership-line{

        left:86%;
        top:590px;
        height:105px;

    }

    .foundation-up{

        top:-220px;
        height:250px;

    }

    .bottom-line{

        width:48%;
        top:-220px;

    }

    .node-top{

        top:575px;

    }

    .node-bottom{

        top:-230px;

    }

}

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

@media (max-width:767px){

    .house-section{

        padding:80px 0;

    }

    .house-header{

        padding:0 20px;
        margin-bottom:60px;

    }

    .house-header .section-title{

        font-size:40px;
        line-height:1.15;

    }

    .house-header .section-description{

        font-size:16px;
        line-height:1.8;

    }

    .house-blueprint-wrapper{

        min-height:auto;
        padding:20px 16px 60px;

    }

    .house-block{

        width:100%;
        max-width:360px;
        margin:auto;

    }

    .house-block.future{

        width:100%;

    }

    .house-middle{

        flex-direction:column;
        align-items:center;
        gap:80px;
        margin-top:80px;

    }

    .house-foundation-wrapper{

        margin-top:80px;

    }

    .house-block.foundation{

        width:100%;
        margin-top:0;

    }

    .house-summary{

        margin-top:90px;
        padding:0 20px;

    }

    .house-summary h2{

        font-size:34px;

    }

    .house-summary p{

        font-size:17px;

    }

    /*
    ======================================
    SEMBUNYIKAN CONNECTOR DESKTOP
    ======================================
    */

    .top-line,
    .bottom-line,
    .trust-line,
    .partnership-line,
    .future-down,
    .foundation-up,
    .node-top,
    .node-bottom{

        display:none;

    }

}