/* ======================================
HOREKA SOCIAL WALL
====================================== */

.horeka-wall{

    position:relative;

    background:
    radial-gradient(
        circle at top left,
        rgba(201,170,113,0.05),
        transparent 35%),

    linear-gradient(
        180deg,
        #111111 0%,
        #171717 100%
    );

    padding:100px 20px;

    overflow:hidden;

}


/* ======================================
INNER
====================================== */

.horeka-wall-inner{

    width:100%;
    max-width:1200px;

    margin:0 auto;

}


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

.horeka-wall-header{

    margin-bottom:60px;

}

.hw-label{

    display:inline-block;

    color:#c8b28a;

    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:14px;

}

.horeka-wall-header h2{

    color:#f3eee6 !important;

    font-size:42px;
    line-height:1.2;
    font-weight:700;

    max-width:720px;

    margin:0 0 20px;

}

.horeka-wall-header p{

    color:rgba(255,255,255,0.7);

    font-size:17px;
    line-height:1.7;

    max-width:620px;

}


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

.horeka-wall-grid{

    display:grid;

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

    gap:28px;

}


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

.hw-card{

    position:relative;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.045),
        rgba(255,255,255,0.025));

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:32px;

    backdrop-filter:blur(8px);

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

    overflow:hidden;

    isolation:isolate;

    opacity:0;

    transform:translateY(26px);

    animation:hwFadeUp .75s ease forwards;
}


/* subtil glow */

.hw-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(199,174,123,0.08),
        transparent 42%);

    opacity:.8;

    transition:opacity .35s ease;

    pointer-events:none;
}


/* hover */

.hw-card:hover{

    transform:
    translateY(-6px)
    scale(1.015);

    border-color:
    rgba(199,174,123,0.24);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.03));

    box-shadow:
    0 18px 40px rgba(0,0,0,0.28);
}

.hw-card:hover::before{

    opacity:1;
}


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

.hw-icon{

    width:54px;
    height:54px;

    border-radius:16px;

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

    background:
    rgba(255,255,255,0.06);

    font-size:24px;

    margin-bottom:22px;

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


/* ikon hover */

.hw-card:hover .hw-icon{

    transform:
    translateY(-2px)
    scale(1.05);

    background:
    rgba(199,174,123,0.12);
}


/* ======================================
TYPE
====================================== */

.hw-type{

    display:inline-block;

    color:#c8b28a;

    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:12px;

}


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

.hw-content h3{

    color:#f3eee6 !important;

    font-size:26px;
    line-height:1.4;

    font-weight:700;

    margin:0 0 16px;

}

.hw-content p{

    color:rgba(255,255,255,0.72);

    line-height:1.7;

    margin:0 0 24px;

}

.hw-meta{

    color:rgba(255,255,255,0.35);

    font-size:13px;

}


/* ======================================
ANIMATION
====================================== */

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

    animation-delay:.10s;
}

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

    animation-delay:.20s;
}

@keyframes hwFadeUp{

    to{

        opacity:1;

        transform:translateY(0);
    }
}


/* ======================================
RESPONSIVE
====================================== */

@media(max-width:980px){

    .horeka-wall-grid{

        grid-template-columns:1fr;

    }

    .horeka-wall-header h2{

        font-size:34px;

    }

}