/* ===== Horizontal pin gallery ===== */
.s3_content{

    position:relative;

    width:340px;
    min-height:420px;

    padding:1.75rem;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border-radius:16px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        rgba(92,225,230,.14),
        rgba(140,82,255,.10)
    );

    backdrop-filter:blur(22px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

}

.s3_content::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #5ce1e6,
        #8c52ff,
        #5ce1e6,
        transparent
    );

    background-size:300%;

    animation:borderMove 5s linear infinite;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

@keyframes borderMove{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}

.s3_tag{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    width:max-content;

    padding:.55rem 1rem;

    border-radius:999px;

    font-size:var(--fs-sub-desc);

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#5ce1e6;

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

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

}

.s3_tag span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#5ce1e6;

    box-shadow:0 0 12px #5ce1e6;

}

.s3_content h2{

    font-size:var(--fs-h3);

    line-height:1.2;

    color:white;

    /* margin:2rem 0 1rem; */

}

.s3_content p{

    color:rgba(255,255,255,.72);

    font-size:var(--fs-sub-desc);

    line-height:1.8;

}

.s3_stats{

    display:flex;

    align-items:center;

    justify-content:space-between;

    /* margin-top:2rem; */

}

.divider{

    width:1px;

    height:45px;

    background:var(--muted);

}

.stat h3{

    font-size:2rem;

    color:#5ce1e6;

}

.stat span{

    color:rgba(255,255,255,.6);

    font-size:.8rem;

}

  .h-scroll-section {
    max-width: none;
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }

  .h-track {
    display: flex;
    height: 100vh;
    align-items: center;
    gap: 2rem;
    padding: 3rem clamp(1.5rem, 5vw, 4.5rem);
    width: max-content;
  }

.h-card{

    width:340px;
    height:420px;
    gap:0.5rem;

    padding:2rem;

    display:flex;
    flex-direction:column;

    position:relative;

    overflow:hidden;

    transition:.45s;

}

/* .h-card::before{

    content:"";

    position:absolute;

    inset:-40%;

    background:
    radial-gradient(
        circle,
        rgba(92,225,230,.18),
        transparent 70%
    );

    animation:rotateGlow 12s linear infinite;

} */

@keyframes rotateGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.num{

    font-size:.8rem;

    color:#7f8b96;

    letter-spacing:.2em;

}

.status{

    display:flex;

    align-items:center;

    gap:.45rem;

    font-size:.72rem;

    color:#5ce1e6;

}

.pulse{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#5ce1e6;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(92,225,230,.7);

    }

    100%{

        box-shadow:0 0 0 10px transparent;

    }

}

.eyebrow{

    font-size:.72rem;

    letter-spacing:.2em;

    color:#8c52ff;

    padding:0.25rem 0;

}

.service-icon{

    width:50px;

    height:50px;

    border-radius:10px;

    display:grid;

    place-items:center;

    color:#5ce1e6;

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

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

}

.service-icon svg{

    width:34px;

    height:34px;

    stroke-width:1.6;

}

.card-content{

    flex:1;
    padding:1rem 0;

}

.card-content h3{

    color:white;

    font-size:var(--fs-body);

    line-height:1.3;

    margin-bottom:1rem;

}

.card-content p{

    color:rgba(255,255,255,.68);
    font-size: var(--fs-sub-desc);

    line-height:1.7;

}

.card-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.link{

    color:#5ce1e6;

    font-size:.9rem;

    letter-spacing:.05em;

}

.card-arrow{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

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

}

.card-arrow:hover{
    background-color: #5ce1e6;
}