.ssfh-hub{
    --ssfh-bg:#080b13;
    --ssfh-panel:rgba(15,23,42,.72);
    --ssfh-panel-strong:rgba(17,24,39,.92);
    --ssfh-line:rgba(255,255,255,.13);
    --ssfh-line-hot:rgba(245,199,107,.42);
    --ssfh-text:#f8fafc;
    --ssfh-muted:#a7b0c0;
    --ssfh-soft:#d8dee9;
    --ssfh-gold:#f5c76b;
    --ssfh-violet:#9f7aea;
    --ssfh-blue:#60a5fa;
    position:relative;
    isolation:isolate;
    background:
        radial-gradient(circle at 18% 0%,rgba(159,122,234,.23),transparent 35%),
        radial-gradient(circle at 88% 8%,rgba(245,199,107,.17),transparent 32%),
        linear-gradient(145deg,#050711,#0b1020 44%,#171022 100%);
    border:1px solid var(--ssfh-line);
    border-radius:34px;
    color:var(--ssfh-text);
    padding:clamp(20px,4vw,46px);
    box-shadow:0 34px 110px rgba(2,6,23,.46);
    overflow:hidden;
}
.ssfh-hub *{box-sizing:border-box}
.ssfh-bg-orb{position:absolute;z-index:-1;filter:blur(18px);opacity:.55;border-radius:999px;pointer-events:none}
.ssfh-bg-orb-one{width:320px;height:320px;left:-120px;top:130px;background:radial-gradient(circle,rgba(96,165,250,.18),transparent 68%)}
.ssfh-bg-orb-two{width:360px;height:360px;right:-130px;bottom:-120px;background:radial-gradient(circle,rgba(245,199,107,.13),transparent 68%)}
.ssfh-hub:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 78%);
}
.ssfh-hub-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,380px);
    gap:24px;
    align-items:stretch;
    margin-bottom:24px;
}
.ssfh-hero-copy{
    min-height:270px;
    padding:clamp(22px,4vw,36px);
    border:1px solid var(--ssfh-line);
    border-radius:30px;
    background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.032));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 70px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ssfh-kicker,.ssfh-card-category{
    color:var(--ssfh-gold);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:12px;
    font-weight:900;
}
.ssfh-hero-copy h2{
    font-size:clamp(36px,5.8vw,72px);
    line-height:.9;
    margin:10px 0 16px;
    color:#fff;
    letter-spacing:-.06em;
}
.ssfh-hero-copy p{
    font-size:clamp(15px,2vw,18px);
    line-height:1.65;
    color:var(--ssfh-muted);
    max-width:800px;
    margin:0;
}
.ssfh-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ssfh-hero-actions span{
    border:1px solid var(--ssfh-line);
    background:rgba(255,255,255,.06);
    border-radius:999px;
    padding:8px 12px;
    color:#f8fafc;
    font-weight:900;
    font-size:12px;
}
.ssfh-spotlight{
    position:relative;
    min-height:270px;
    border:1px solid var(--ssfh-line);
    border-radius:30px;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(245,199,107,.12),rgba(159,122,234,.1)),rgba(255,255,255,.04);
    box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.ssfh-spotlight-image{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#111827,#33224a);
    background-size:cover;
    background-position:center;
    transform:scale(1.02);
    opacity:.76;
}
.ssfh-spotlight:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(5,7,17,.94),rgba(5,7,17,.22) 62%,rgba(5,7,17,.08));
}
.ssfh-spotlight-copy{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    z-index:2;
}
.ssfh-spotlight-copy span{
    display:inline-flex;
    margin-bottom:10px;
    background:rgba(245,199,107,.93);
    color:#111827;
    border-radius:999px;
    padding:7px 10px;
    font-size:11px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.12em;
}
.ssfh-spotlight-copy strong{display:block;color:#fff;font-size:26px;line-height:1.02;letter-spacing:-.03em}
.ssfh-spotlight-copy small{display:block;color:var(--ssfh-muted);margin-top:6px;font-weight:800}
.ssfh-controls{
    position:relative;
    z-index:2;
    border:1px solid var(--ssfh-line);
    border-radius:24px;
    padding:14px;
    margin:0 0 24px;
    background:rgba(7,10,19,.52);
    backdrop-filter:blur(16px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ssfh-search-wrap{display:block;margin:0 0 12px}
.ssfh-search-wrap span{
    display:block;
    color:var(--ssfh-gold);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:11px;
    font-weight:900;
    margin:0 0 8px;
}
.ssfh-search{
    width:100%;
    border:1px solid var(--ssfh-line)!important;
    outline:none!important;
    background:rgba(255,255,255,.075)!important;
    color:#fff!important;
    border-radius:18px!important;
    padding:14px 16px!important;
    font-size:15px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ssfh-search::placeholder{color:rgba(226,232,240,.55)}
.ssfh-filter-row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.ssfh-filter{
    border:1px solid var(--ssfh-line);
    background:rgba(255,255,255,.06);
    color:#e5e7eb;
    border-radius:999px;
    padding:10px 15px;
    cursor:pointer;
    font-weight:900;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ssfh-filter.active,.ssfh-filter:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,rgba(245,199,107,.95),rgba(159,122,234,.85));
    color:#111827;
    border-color:transparent;
    box-shadow:0 12px 28px rgba(245,199,107,.13);
}
.ssfh-empty{
    border:1px dashed rgba(245,199,107,.34);
    color:var(--ssfh-muted);
    border-radius:22px;
    padding:22px;
    text-align:center;
    background:rgba(255,255,255,.045);
    margin-bottom:18px;
    font-weight:800;
}
.ssfh-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    align-items:stretch;
}
.ssfh-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    background:linear-gradient(180deg,rgba(255,255,255,.086),rgba(255,255,255,.034));
    border:1px solid var(--ssfh-line);
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 20px 54px rgba(0,0,0,.26);
    transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,filter .24s ease;
    will-change:transform;
}
.ssfh-card:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(245,199,107,.16),transparent 34%,rgba(159,122,234,.16));
    opacity:0;
    transition:opacity .24s ease;
}
.ssfh-card:hover{
    transform:translateY(-7px);
    border-color:var(--ssfh-line-hot);
    box-shadow:0 28px 78px rgba(0,0,0,.34),0 0 0 1px rgba(245,199,107,.12),0 0 34px rgba(159,122,234,.12);
}
.ssfh-card:hover:before{opacity:1}
.ssfh-card[hidden]{display:none!important}
.ssfh-card.is-featured{
    border-color:rgba(245,199,107,.34);
    box-shadow:0 24px 70px rgba(245,199,107,.10),0 20px 54px rgba(0,0,0,.27);
}
.ssfh-card-image{
    aspect-ratio:16/10;
    min-height:0;
    background:linear-gradient(135deg,#111827,#311f4d);
    background-size:cover;
    background-position:center;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
}
.ssfh-card-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(7,10,19,.82),transparent 56%);
    opacity:.92;
}
.ssfh-placeholder{
    position:relative;
    z-index:1;
    font-size:28px;
    letter-spacing:.22em;
    font-weight:1000;
    color:rgba(255,255,255,.28);
}
.ssfh-card-badges{
    position:absolute;
    z-index:2;
    left:14px;
    right:14px;
    top:14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.ssfh-card-badges span,.ssfh-tier{
    background:rgba(7,10,19,.72);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:1000;
    color:#fff;
}
.ssfh-card-badges .ssfh-updated-ribbon{
    background:linear-gradient(135deg,rgba(245,199,107,.94),rgba(96,165,250,.78));
    color:#08111f;
    border-color:transparent;
}
.ssfh-card-body{
    position:relative;
    z-index:1;
    padding:21px;
    display:flex;
    flex:1;
    flex-direction:column;
}
.ssfh-card-category{margin:0 0 8px!important}
.ssfh-card-body h3{
    font-size:24px;
    line-height:1.05;
    margin:0 0 11px;
    color:#fff;
    letter-spacing:-.035em;
}
.ssfh-card-body p:not(.ssfh-card-category){
    color:var(--ssfh-muted);
    line-height:1.58;
    margin:0 0 20px;
}
.ssfh-card-footer{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.ssfh-launch{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--ssfh-gold),var(--ssfh-violet));
    color:#111827!important;
    text-decoration:none!important;
    border-radius:999px;
    padding:11px 15px;
    font-weight:1000;
    white-space:nowrap;
    box-shadow:0 12px 30px rgba(159,122,234,.17);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.ssfh-launch:after{
    content:"";
    position:absolute;
    inset:-40% -70%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:translateX(-60%) rotate(12deg);
    transition:transform .5s ease;
}
.ssfh-launch:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 16px 40px rgba(245,199,107,.22)}
.ssfh-launch:hover:after{transform:translateX(60%) rotate(12deg)}
.ssfh-disabled{opacity:.58;cursor:not-allowed;filter:grayscale(.35)}
.ssfh-tier{color:#f8fafc}
.ssfh-hub.is-loading .ssfh-card{
    min-height:390px;
}
.ssfh-hub.is-loading .ssfh-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    transform:translateX(-100%);
    animation:ssfh-skeleton 1.15s infinite;
}
.ssfh-hub.is-ready .ssfh-card{
    animation:ssfh-rise .48s ease both;
}
.ssfh-hub.is-ready .ssfh-card:nth-child(2){animation-delay:.04s}
.ssfh-hub.is-ready .ssfh-card:nth-child(3){animation-delay:.08s}
.ssfh-hub.is-ready .ssfh-card:nth-child(4){animation-delay:.12s}
@keyframes ssfh-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ssfh-skeleton{to{transform:translateX(100%)}}
@media(max-width:980px){
    .ssfh-hub-hero{grid-template-columns:1fr}
    .ssfh-hero-copy,.ssfh-spotlight{min-height:220px}
}
@media(max-width:640px){
    .ssfh-hub{border-radius:22px;padding:18px}
    .ssfh-hero-copy{border-radius:24px}
    .ssfh-hero-copy h2{font-size:38px}
    .ssfh-card-footer{align-items:flex-start;flex-direction:column}
    .ssfh-launch{width:100%;text-align:center}
    .ssfh-filter{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
    .ssfh-card,.ssfh-filter,.ssfh-launch{transition:none}
    .ssfh-hub.is-ready .ssfh-card{animation:none}
    .ssfh-hub.is-loading .ssfh-card:after{animation:none}
}