/* =========================================================
   RESOURCE HUB
========================================================= */

.sbx-resources{

    margin-top:16px;

    border-radius:28px;

    background:#fff;

    border:1px solid var(--sbx-border);

    box-shadow:
        0 18px 50px rgba(31,12,85,.07);
}


/* =========================================================
   HERO
========================================================= */
/* =========================================================
   1. LOCKED BACKGROUND CONTAINER
========================================================= */

.sbx-resources-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 28px;
    padding: 38px 42px;
    border-radius: 28px 28px 0px 0px;
    
    /* LOCKED: Deep Slate-Navy Professional Background */
    background: linear-gradient(135deg, #0a0f1d 0%, #111c38 100%);
    
    position: relative;
    overflow: hidden;
    isolation: isolate; 
}

/* =========================================================
   2. FAST ORBITING PLASMA (SLIGHTLY FADED)
========================================================= */

/* --- Orb 1: Blue Plasma --- */
.sbx-resources-intro::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 40px;
    width: 250px;
    height: 250px;
    
    /* Faded from 0.65 to 0.35 for a professional, subtle glow */
    background: rgba(59, 130, 246, 0.35); 
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
    
    -webkit-animation: fastOrbit 3s linear infinite !important;
    animation: fastOrbit 3s linear infinite !important;
}

/* --- Orb 2: Indigo Plasma --- */
.sbx-resources-intro::after {
    content: "";
    display: block;
    position: absolute;
    top: 60px;
    right: 80px;
    width: 200px;
    height: 200px;
    
    /* Faded from 0.65 to 0.35 for a professional, subtle glow */
    background: rgba(99, 102, 241, 0.35); 
    border-radius: 50%;
    filter: blur(35px);
    z-index: -1;
    
    -webkit-animation: fastOrbitReverse 2.5s linear infinite !important;
    animation: fastOrbitReverse 2.5s linear infinite !important;
}

/* --- Mobile Adjustment (Decreased height, elegant bottom glow) --- */
@media (max-width: 1023px) {
    .sbx-resources-intro::before {
        top: auto; right: auto;
        bottom: -30px; left: 0;
        /* Wide, but decreased height so it doesn't take up the whole background */
        width: 100%; 
        height: 120px; 
        border-radius: 100px;
    }
    .sbx-resources-intro::after {
        top: auto; right: auto;
        bottom: -20px; left: 10%;
        /* Wide, but decreased height */
        width: 80%; 
        height: 100px;
        border-radius: 100px;
    }
}

/* =========================================================
   3. FAST ORBIT KEYFRAMES
========================================================= */

@-webkit-keyframes fastOrbit {
    0%   { -webkit-transform: rotate(0deg) translateX(90px) rotate(0deg); }
    100% { -webkit-transform: rotate(360deg) translateX(90px) rotate(-360deg); }
}
@keyframes fastOrbit {
    0%   { transform: rotate(0deg) translateX(90px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
}

@-webkit-keyframes fastOrbitReverse {
    0%   { -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
    100% { -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg); }
}
@keyframes fastOrbitReverse {
    0%   { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
    100% { transform: rotate(0deg) translateX(110px) rotate(0deg); }
}



.sbx-resources-intro-content{

    max-width:760px;

    position:relative;

    z-index:2;
}


/* =========================================================
   RESOURCE HUB BADGE (ABSOLUTE POSITIONING FIX)
========================================================= */

.sbx-resources-badge {
    position: relative; 
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
	padding: 10px 15px 10px 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: normal;
}

.sbx-badge-text {
    display: inline-block;
    /* Clean text block, no transforms needed */
}

.sbx-resource-text-icon {
    position: absolute;
    left: 12px; /* Pins it neatly to the left side */
    top: 50%; /* Pushes exactly halfway down the badge */
    transform: translateY(-50%); /* Pulls it up by half its height to perfect center */
    width: 14px;
    height: 14px;
    /* Custom animation designed specifically for absolutely positioned items */
    animation: absoluteHover 4s ease-in-out infinite;
}

/* --- Animated Layers --- */

.sbx-layer-top {
    animation: layerPulse 2s ease-in-out infinite;
}

.sbx-layer-mid {
    animation: layerPulse 2s ease-in-out infinite;
    animation-delay: 0.3s;
}

.sbx-layer-bot {
    animation: layerPulse 2s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* --- Keyframes --- */

@keyframes layerPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes absoluteHover {
    0%, 100% {
        transform: translateY(-50%);
    }
    50% {
        /* Gently floats up while staying centered */
        transform: translateY(calc(-50% - 1px)); 
    }
}



.sbx-resources-intro h2{

    margin:0 0 14px;

    color:#fff;

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

    font-weight:900;

    line-height:1.05;

    letter-spacing:-.05em;
}

.sbx-resources-intro p{

    margin:0;

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

    font-size:16px;

    line-height:1.8;
}

.sbx-resources-intro-btn{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

    height:58px;

    padding:0 26px;

    border-radius:999px;

    background:#fff;

    color:#111827;

    font-size:14px;

    font-weight:900;

    text-decoration:none;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

    transition:.25s ease;
}

.sbx-resources-intro-btn:hover{

    transform:translateY(-3px);
}



.sbx-resources-intro-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:12px;

    flex-shrink:0;

    position:relative;
    z-index:2;
}

.sbx-resources-intro-btn,
.sbx-resources-request-btn{

    width:250px;

    justify-content:center;
}

.sbx-resources-request-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:58px;

    padding:0 22px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

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

    color:#fff;

    font-size:14px;
    font-weight:900;

    text-decoration:none;

    transition:.25s ease;
}

.sbx-resources-request-btn:hover{

    color:#fff;

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

    transform:translateY(-2px);
}

.sbx-resources-request-btn span{

    width:14px;
    height:14px;

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

.sbx-resources-request-btn svg{

    width:14px;
    height:14px;
}



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

.sbx-resource-grid{

    display:grid;

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

    gap:16px;

    margin-top:18px;
	
	padding:0 20px 20px;
}

.sbx-resource-card{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:22px;

    border-radius:22px;

    text-decoration:none;

    overflow:hidden;

    border:1px solid rgba(109,40,217,.08);

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

/* ---------- CARD COLORS ---------- */

.sbx-resource-card:nth-child(1){
    background:
    linear-gradient(
        135deg,
        rgba(236,63,122,.08) 0%,
        rgba(236,63,122,.02) 100%
    );
}

.sbx-resource-card:nth-child(2){
    background:
    linear-gradient(
        135deg,
        rgba(109,40,217,.08) 0%,
        rgba(109,40,217,.02) 100%
    );
}

.sbx-resource-card:nth-child(3){
    background:
    linear-gradient(
        135deg,
        rgba(20,184,166,.10) 0%,
        rgba(20,184,166,.02) 100%
    );
}

.sbx-resource-card:nth-child(4){
    background:
    linear-gradient(
        135deg,
        rgba(14,165,233,.08) 0%,
        rgba(14,165,233,.02) 100%
    );
}

.sbx-resource-card:nth-child(5){
    background:
    linear-gradient(
        135deg,
        rgba(16,185,129,.08) 0%,
        rgba(16,185,129,.02) 100%
    );
}

.sbx-resource-card:nth-child(6){
    background:
    linear-gradient(
        135deg,
        rgba(249,115,22,.08) 0%,
        rgba(249,115,22,.02) 100%
    );
}

/* ---------- TOP COLOR BAR ---------- */

.sbx-resource-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;
}

.sbx-resource-card:nth-child(1)::before{
    background:#ec3f7a;
}

.sbx-resource-card:nth-child(2)::before{
    background:#6d28d9;
}

.sbx-resource-card:nth-child(3)::before{
    background:#14b8a6;
}

.sbx-resource-card:nth-child(4)::before{
    background:#0ea5e9;
}

.sbx-resource-card:nth-child(5)::before{
    background:#10b981;
}

.sbx-resource-card:nth-child(6)::before{
    background:#f97316;
}

/* ---------- HOVER ---------- */

.sbx-resource-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 60px rgba(17,24,39,.12);
}

/* ---------- ICON ---------- */

.sbx-resource-icon{

    width:56px;
    height:56px;

    border-radius:16px;

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

    margin-bottom:16px;
}

.sbx-resource-icon svg{

    width:24px;
    height:24px;
}

/* ---------- ICON COLORS ---------- */

.sbx-resource-card:nth-child(1) .sbx-resource-icon{
    background:rgba(236,63,122,.12);
    color:#ec3f7a;
}

.sbx-resource-card:nth-child(2) .sbx-resource-icon{
    background:rgba(109,40,217,.12);
    color:#6d28d9;
}

.sbx-resource-card:nth-child(3) .sbx-resource-icon{
    background:rgba(20,184,166,.12);
    color:#14b8a6;
}

.sbx-resource-card:nth-child(4) .sbx-resource-icon{
    background:rgba(14,165,233,.12);
    color:#0ea5e9;
}

.sbx-resource-card:nth-child(5) .sbx-resource-icon{
    background:rgba(16,185,129,.12);
    color:#10b981;
}

.sbx-resource-card:nth-child(6) .sbx-resource-icon{
    background:rgba(249,115,22,.12);
    color:#f97316;
}

/* ---------- TITLE ---------- */

.sbx-resource-card h3{

    margin:0 0 10px;

    color:#111827;

    font-size:22px;

    font-weight:900;

    line-height:1.15;
}

/* ---------- TEXT ---------- */

.sbx-resource-card p{

    margin:0;

    color:#6b7280;

    font-size:13px;

    line-height:1.7;
}

/* ---------- LINK ---------- */

.sbx-resource-link{

    margin-top:18px;

    font-size:13px;

    font-weight:800;

    display:flex;
    align-items:center;

    transition:.25s ease;
}

.sbx-resource-card:nth-child(1) .sbx-resource-link{
    color:#ec3f7a;
}

.sbx-resource-card:nth-child(2) .sbx-resource-link{
    color:#6d28d9;
}

.sbx-resource-card:nth-child(3) .sbx-resource-link{
    color:#14b8a6;
}

.sbx-resource-card:nth-child(4) .sbx-resource-link{
    color:#0ea5e9;
}

.sbx-resource-card:nth-child(5) .sbx-resource-link{
    color:#10b981;
}

.sbx-resource-card:nth-child(6) .sbx-resource-link{
    color:#f97316;
}

.sbx-resource-card:hover .sbx-resource-link{

    transform:translateX(6px);
}


/* =========================================================
   1366px - 1439px
========================================================= */

@media (min-width:1366px) and (max-width:1439px){

    .sbx-resource-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


/* =========================================================
   1200px - 1365px
========================================================= */

@media (min-width:1200px) and (max-width:1365px){

    .sbx-resource-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .sbx-resources-intro h2{
        font-size:46px;
    }

    .sbx-resource-card h3{
        font-size:21px;
    }
	
	.sbx-resources-intro-actions{

    flex-direction:column;

    align-items:flex-end;

    gap:12px;
}

.sbx-resources-intro-btn,
.sbx-resources-request-btn{

    width:250px;
}
}


/* =========================================================
   1024px - 1199px
========================================================= */

@media (min-width:1024px) and (max-width:1199px){

    .sbx-resource-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .sbx-resources-intro{
        padding:32px;
    }

    .sbx-resources-intro h2{
        font-size:40px;
    }

    .sbx-resource-card{
        padding:18px;
    }

    .sbx-resource-card h3{
        font-size:19px;
    }

    .sbx-resource-icon{
        width:50px;
        height:50px;
    }

    .sbx-resources-intro-actions{

    flex-direction:column;

    align-items:flex-end;

    gap:12px;
}

.sbx-resources-intro-btn,
.sbx-resources-request-btn{

    width:250px;
}
}


/* =========================================================
   768px - 1023px
========================================================= */

@media (min-width:768px) and (max-width:1023px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:24px;

        padding:28px;
    }

    .sbx-resources-intro h2{
        font-size:36px;
    }

    .sbx-resource-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        padding:0 18px 18px;
    }

    .sbx-resource-card{
        padding:18px;
    }

    .sbx-resource-card h3{
        font-size:19px;
    }

    .sbx-resource-icon{
        width:48px;
        height:48px;
    }

    .sbx-resources-intro-actions{

        display:flex;

        flex-direction:row;

        gap:10px;

        width:auto;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:auto;
    }
}


/* =========================================================
   601px - 767px
========================================================= */

@media (min-width:601px) and (max-width:767px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:24px;
    }

    .sbx-resources-intro h2{
        font-size:30px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        padding:0 18px 18px;
    }

    .sbx-resource-card{
        padding:18px;
    }
}




/* =========================================================
   431px - 600px
========================================================= */

@media (min-width:431px) and (max-width:600px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:24px;
    }

    .sbx-resources-intro h2{
        font-size:30px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:1fr;

        padding:0 18px 18px;

        gap:12px;
    }

    .sbx-resource-card{
        padding:18px;
    }
}




/* =========================================================
   391px - 430px
========================================================= */

@media (min-width:391px) and (max-width:430px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:22px;
    }

    .sbx-resources-intro h2{
        font-size:28px;
    }

    .sbx-resources-intro p{
        font-size:14px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:1fr;

        gap:12px;

        padding:0 16px 16px;
    }

    .sbx-resource-card h3{
        font-size:18px;
    }
}


/* =========================================================
   375px - 390px
========================================================= */

@media (min-width:375px) and (max-width:390px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

        padding:20px;
    }

    .sbx-resources-intro h2{
        font-size:26px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:1fr;

        gap:12px;

        padding:0 14px 14px;
    }

    .sbx-resource-card{
        padding:16px;
    }

    .sbx-resource-card h3{
        font-size:18px;
    }

    .sbx-resource-icon{
        width:46px;
        height:46px;
    }
}


/* =========================================================
   360px - 374px
========================================================= */

@media (min-width:360px) and (max-width:374px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

        padding:18px;
    }

    .sbx-resources-intro h2{
        font-size:24px;
    }

    .sbx-resources-intro p{
        font-size:13px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:1fr;

        gap:12px;

        padding:0 12px 12px;
    }

    .sbx-resource-card{
        padding:15px;
    }

    .sbx-resource-card h3{
        font-size:17px;
    }

    .sbx-resource-icon{
        width:44px;
        height:44px;
    }

    .sbx-resource-icon svg{
        width:20px;
        height:20px;
    }
}


/* =========================================================
   320px - 359px
========================================================= */

@media (max-width:359px){

    .sbx-resources-intro{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        padding:16px;
    }

    .sbx-resources-intro h2{
        font-size:22px;
    }

    .sbx-resources-intro p{
        font-size:12px;
    }

    .sbx-resources-intro-actions{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:10px;
    }

    .sbx-resources-intro-btn,
    .sbx-resources-request-btn{

        width:100%;

        justify-content:center;
    }

    .sbx-resource-grid{

        grid-template-columns:1fr;

        gap:10px;

        padding:0 10px 10px;
    }

    .sbx-resource-card{
        padding:14px;
    }

    .sbx-resource-card h3{
        font-size:16px;
    }

    .sbx-resource-icon{
        width:42px;
        height:42px;
    }

    .sbx-resource-icon svg{
        width:18px;
        height:18px;
    }

    .sbx-resource-link{
        font-size:12px;
    }
}