.hero {

    min-height: 620px;

    padding: 88px 0 82px;

    position: relative;

    overflow: hidden;



    background:

        radial-gradient(circle at 78% 22%,

            rgba(59, 91, 219, 0.08),

            transparent 30%),

        radial-gradient(circle at 90% 75%,

            rgba(141, 150, 165, 0.06),

            transparent 27%),

        radial-gradient(circle at 8% 85%,

            rgba(141, 150, 165, 0.025),

            transparent 24%),

        linear-gradient(135deg,

            #080A0E 0%,

            #080A0E 52%,

            #080A0E 100%);

}



.hero::before {

    content: "";

    position: absolute;

    inset: 0;



    background-image:

        linear-gradient(rgba(255, 255, 255, 0.018) 1px,

            transparent 1px),

        linear-gradient(90deg,

            rgba(255, 255, 255, 0.018) 1px,

            transparent 1px);



    background-size: 52px 52px;



    mask-image:

        linear-gradient(to bottom,

            rgba(0, 0, 0, .8),

            transparent 92%);



    pointer-events: none;

}



.hero::after {

    content: "";



    position: absolute;



    width: 460px;

    height: 460px;



    right: -160px;

    top: -155px;



    border:

        1px solid rgba(59, 91, 219, 0.07);



    border-radius: 90px;



    transform: rotate(42deg);



    animation:

        heroShape 11s ease-in-out infinite alternate;



    pointer-events: none;

}



@keyframes heroShape {

    from {

        transform:

            rotate(42deg) translateY(0);

    }



    to {

        transform:

            rotate(46deg) translateY(18px);

    }

}



.hero-grid {

    display: grid;



    grid-template-columns:

        1.02fr 1fr;



    gap: 62px;



    align-items: center;



    position: relative;

    z-index: 2;

}



.hero-content,

.hero-features {

    transition:

        transform 0.18s ease-out;

}





/\*=========================================================HERO CONTENT \=========================================================\*/ .hero-badge {

    display: inline-flex;

    align-items: center;



    gap: 12px;



    padding: 9px 14px;



    border-radius: 100px;



    margin-bottom: 23px;



    color: #b7bfca;



    background:

        rgba(255, 255, 255, 0.025);



    border:

        1px solid rgba(255, 255, 255, 0.07);



    font-size: 10px;

    font-weight: 700;



    letter-spacing: 0.45px;



    box-shadow:

        inset 0 0 20px rgba(59, 91, 219, 0.022);

}



.hero-badge span {

    width: 1px;

    height: 17px;



    background:

        rgba(255, 255, 255, 0.16);

}



.hero h1 {

    margin: 0;



    font-size:

        clamp(50px, 5vw, 70px);



    line-height: 1;



    letter-spacing: -3px;



    font-weight: 780;

}



.hero h1 span {

    display: inline-block;



    margin-top: 8px;



    background:

        linear-gradient(90deg,

            #3B5BDB 0%,

            #5573E6 48%,

            #A7B0BE 100%);



    -webkit-background-clip: text;

    background-clip: text;



    color: transparent;

}



.hero-description {

    max-width: 590px;



    margin: 25px 0 0;



    color: #8D96A5;



    font-size: 15px;

    line-height: 1.75;

}





/* HERO BUTTONS */
.hero-actions {

    display: flex;



    gap: 15px;



    margin-top: 29px;

}



.btn {

    min-width: 165px;



    height: 53px;



    padding: 0 23px;



    border-radius: 11px;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    gap: 12px;



    font-size: 14px;

    font-weight: 700;



    position: relative;



    overflow: hidden;



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease,

        background 0.25s ease;

}



.btn::before {

    content: "";



    position: absolute;



    top: 0;

    left: -130%;



    width: 80%;

    height: 100%;



    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .18),

            transparent);



    transform: skewX(-20deg);



    transition:

        left .55s ease;

}



.btn:hover::before {

    left: 150%;

}



.btn-primary {

    color: #11100e;



    background:

        linear-gradient(135deg,

            #5573E6,

            #3B5BDB);



    box-shadow:

        0 14px 32px rgba(59, 91, 219, 0.16);

}



.btn-primary:hover {

    transform: translateY(-3px);



    box-shadow:

        0 18px 40px rgba(59, 91, 219, 0.22);

}



.btn-secondary {

    color: #F8FAFC;



    border:

        1px solid rgba(255, 255, 255, 0.105);



    background:

        rgba(255, 255, 255, 0.02);

}



.btn-secondary:hover {

    transform: translateY(-3px);



    background:

        rgba(141, 150, 165, 0.035);



    border-color:

        rgba(141, 150, 165, 0.16);

}





/\*=========================================================HERO FEATURES \=========================================================\*/ .hero-features {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 17px;

}



.feature-card {

    min-height: 138px;



    padding: 22px;



    border-radius: 16px;



    border:

        1px solid rgba(255, 255, 255, 0.075);



    background:

        linear-gradient(145deg,

            rgba(255, 255, 255, 0.036),

            rgba(255, 255, 255, 0.014));



    display: flex;

    align-items: center;



    gap: 18px;



    position: relative;



    overflow: hidden;



    box-shadow:

        0 18px 42px rgba(0, 0, 0, 0.13);



    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        background 0.3s ease,

        box-shadow 0.3s ease;

}



.feature-card::after {

    content: "";



    position: absolute;



    width: 130px;

    height: 130px;



    right: -70px;

    bottom: -75px;



    border-radius: 50%;



    filter: blur(25px);



    opacity: 0;



    transition:

        opacity 0.3s ease,

        transform 0.4s ease;

}



.feature-card:nth-child(1)::after {

    background:

        rgba(59, 91, 219, 0.24);

}



.feature-card:nth-child(2)::after {

    background:

        rgba(141, 150, 165, 0.28);

}



.feature-card:nth-child(3)::after {

    background:

        rgba(141, 150, 165, 0.24);

}



.feature-card:nth-child(4)::after {

    background:

        rgba(215, 180, 89, 0.20);

}



.feature-card:hover {

    background:

        rgba(255, 255, 255, 0.045);



    box-shadow:

        0 24px 50px rgba(0, 0, 0, 0.18);

}



.feature-card:hover::after {

    opacity: 1;



    transform: scale(1.2);

}



.feature-card:nth-child(1):hover {

    border-color:

        rgba(59, 91, 219, 0.24);

}



.feature-card:nth-child(2):hover {

    border-color:

        rgba(141, 150, 165, 0.24);

}



.feature-card:nth-child(3):hover {

    border-color:

        rgba(141, 150, 165, 0.24);

}



.feature-card:nth-child(4):hover {

    border-color:

        rgba(215, 180, 89, 0.22);

}



.feature-icon {

    min-width: 56px;



    width: 56px;

    height: 56px;



    display: grid;

    place-items: center;



    border-radius: 14px;



    font-size: 22px;



    position: relative;

    z-index: 2;



    color: #3B5BDB;



    background:

        linear-gradient(145deg,

            rgba(255, 255, 255, .055),

            rgba(59, 91, 219, .07));



    border:

        1px solid rgba(255, 255, 255, .045);



    transition:

        transform 0.3s ease,

        background 0.3s ease;

}



.feature-card:nth-child(2) .feature-icon,

.feature-card:nth-child(3) .feature-icon {

    color: #C1C8D2;



    background:

        rgba(141, 150, 165, 0.07);

}



.feature-card:nth-child(4) .feature-icon {

    color: #b6c0ca;



    background:

        rgba(255, 255, 255, 0.045);

}



.feature-card:hover .feature-icon {

    transform:

        translateY(-2px) scale(1.06);

}



.feature-card h3 {

    margin: 0 0 7px;



    font-size: 16px;



    position: relative;

    z-index: 2;

}



.feature-card p {

    margin: 0;



    color: var(--text-muted);



    font-size: 13px;

    line-height: 1.5;



    position: relative;

    z-index: 2;

}





/\*=========================================================VULTREX SVG ICON SYSTEM \=========================================================\*/ .v-icon {

    width: 24px;

    height: 24px;



    display: block;



    fill: none;

    stroke: currentColor;



    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;



    transition:

        transform 0.3s ease,

        stroke 0.3s ease;

}



.feature-icon .v-icon {

    width: 25px;

    height: 25px;

}



.step-icon .v-icon {

    width: 26px;

    height: 26px;

}



.why-icon .v-icon {

    width: 22px;

    height: 22px;

}



.service-icon .v-icon {

    width: 27px;

    height: 27px;

}



.stat-svg {

    width: 27px;

    height: 27px;

}



.feature-card:hover .v-icon,

.why-card:hover .v-icon,

.service-card:hover .v-icon,

.step-card:hover .v-icon {

    transform: scale(1.05);

}





/\*=========================================================STATS \=========================================================\*/ .stats-section {

    padding: 56px 0;



    background:

        #080A0E;



    border-top:

        1px solid rgba(255, 255, 255, 0.035);



    border-bottom:

        1px solid rgba(255, 255, 255, 0.035);

}



.stats-box {

    min-height: 118px;



    padding: 25px 31px;



    border-radius: 18px;



    border:

        1px solid rgba(255, 255, 255, 0.07);



    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, .028),

            rgba(59, 91, 219, .015));



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 24px;

}



.stat-item {

    display: flex;

    align-items: center;



    gap: 14px;



    flex-shrink: 0;

}



.stat-icon {

    font-size: 27px;



    filter:

        saturate(.72);

}



.stat-item:nth-child(1) .stat-icon {

    color: var(--purple-light);

}



.stat-item:nth-child(3) .stat-icon {

    color: var(--teal);

}



.stat-item:nth-child(5) .stat-icon {

    color: var(--orange-soft);

}



.stat-item strong {

    display: block;



    margin-bottom: 4px;



    font-size: 18px;

}



.stat-item span {

    color: #8D96A5;



    font-size: 13px;

}



.stat-divider {

    width: 1px;

    height: 45px;



    background:

        rgba(255, 255, 255, 0.07);

}





/\*=========================================================PAYMENT METHODS \=========================================================\*/ .payment-area {

    display: flex;

    align-items: center;



    gap: 21px;



    color: #8D96A5;



    font-size: 13px;

}



.payment-methods {

    display: flex;



    gap: 8px;

}



.payment-methods div {

    min-width: 64px;



    height: 42px;



    padding: 0 9px;



    border-radius: 9px;



    border:

        1px solid rgba(255, 255, 255, 0.075);



    display: grid;

    place-items: center;



    background:

        rgba(255, 255, 255, 0.02);



    color: #c4cad3;



    font-size: 12px;

    font-weight: 700;



    transition:

        transform 0.2s ease,

        border-color 0.2s ease,

        background 0.2s ease;

}



.payment-methods div:hover {

    transform: translateY(-2px);



    border-color:

        rgba(59, 91, 219, 0.17);



    background:

        rgba(59, 91, 219, 0.035);

}

















.section-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;



    gap: 25px;



    margin-bottom: 36px;



    position: relative;

    z-index: 2;

}



.section-label {

    color: var(--purple-light);



    font-size: 10px;

    font-weight: 800;



    letter-spacing: 3px;

}



.section-top h2 {

    margin: 11px 0 0;



    font-size: 33px;



    letter-spacing: -0.8px;

}



.section-top h2 span {

    color: var(--purple-light);

}



.section-top>p {

    margin: 0;



    color: #8D96A5;



    font-size: 13px;

}





/\*=========================================================STEPS \=========================================================\*/ .steps-grid {

    display: grid;



    grid-template-columns:

        1fr auto 1fr auto 1fr;



    gap: 18px;



    align-items: center;



    position: relative;

    z-index: 2;

}



.step-card {

    min-height: 148px;



    position: relative;



    padding: 25px;



    border-radius: 16px;



    border:

        1px solid rgba(255, 255, 255, 0.07);



    background:

        #111318;



    display: grid;



    grid-template-columns:

        auto 1fr;



    gap: 16px;



    align-items: center;



    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        background 0.3s ease;

}



.step-card:hover {

    transform: translateY(-5px);



    background:

        #171A21;

}



.step-card:nth-child(1):hover {

    border-color:

        rgba(59, 91, 219, 0.24);

}



.step-card:nth-child(3):hover,

.step-card:nth-child(5):hover {

    border-color:

        rgba(141, 150, 165, 0.24);

}



.step-number {

    position: absolute;



    top: 13px;

    left: 13px;



    width: 28px;

    height: 28px;



    border-radius: 50%;



    display: grid;

    place-items: center;



    color: #11100e;



    background:

        linear-gradient(135deg,

            #5573E6,

            #3B5BDB);



    font-size: 11px;

    font-weight: 800;

}



.step-card:nth-child(3) .step-number {

    color: #ffffff;



    background:

        linear-gradient(135deg,

            #8D96A5,

            #727C8D);

}



.step-card:nth-child(5) .step-number {

    color: #11100e;



    background:

        linear-gradient(135deg,

            #C1C8D2,

            #8D96A5);

}



.step-icon {

    width: 64px;

    height: 64px;



    margin-left: 12px;



    border-radius: 50%;



    display: grid;

    place-items: center;



    background:

        rgba(59, 91, 219, 0.07);



    font-size: 22px;



    transition:

        transform 0.3s ease;

}



.step-card:nth-child(3) .step-icon,

.step-card:nth-child(5) .step-icon {

    background:

        rgba(141, 150, 165, 0.07);

}



.step-card:hover .step-icon {

    transform: scale(1.07);

}



.step-card h3 {

    margin: 0 0 8px;



    font-size: 15px;

}



.step-card p {

    margin: 0;



    color: #8D96A5;



    font-size: 13px;

    line-height: 1.6;

}



.step-arrow {

    color: #aaa399;



    font-size: 26px;



    animation:

        arrowPulse 1.8s ease-in-out infinite;

}



@keyframes arrowPulse {

    0%,

    100% {

        transform: translateX(0);

        opacity: .55;

    }



    50% {

        transform: translateX(4px);

        opacity: 1;

    }

}





/\*=========================================================GENERAL SECTION HEADINGS \=========================================================\*/ .section-heading {

    max-width: 680px;



    margin-bottom: 43px;

}



.section-heading.center {

    margin-left: auto;

    margin-right: auto;



    text-align: center;

}



.section-heading h2 {

    margin: 11px 0 13px;



    font-size: 35px;



    line-height: 1.15;



    letter-spacing: -1px;

}



.section-heading h2 span {

    color: var(--purple-light);

}



.section-heading p {

    margin: 0;



    color: #8D96A5;



    font-size: 14px;

    line-height: 1.75;

}





/\*=========================================================WHY VULTREX \=========================================================\*/ .why-vultrex {

    padding: 96px 0;



    background:

        #080A0E;

}



.why-grid {

    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 18px;

}



.why-card {

    min-height: 232px;



    padding: 26px;



    border-radius: 17px;



    border:

        1px solid rgba(255, 255, 255, 0.07);



    background:

        #111318;



    box-shadow:

        0 18px 40px rgba(0, 0, 0, 0.10);



    position: relative;

    overflow: hidden;



    transition:

        transform 0.3s ease,

        border-color 0.3s ease,

        background 0.3s ease;

}



.why-card::after {

    content: "";



    position: absolute;



    width: 120px;

    height: 120px;



    right: -70px;

    bottom: -70px;



    border-radius: 50%;



    opacity: 0;



    filter: blur(24px);



    transition:

        opacity .3s ease,

        transform .4s ease;

}



.why-card:nth-child(1)::after {

    background:

        rgba(59, 91, 219, 0.20);

}



.why-card:nth-child(2)::after,

.why-card:nth-child(3)::after {

    background:

        rgba(141, 150, 165, 0.20);

}



.why-card:nth-child(4)::after {

    background:

        rgba(255, 255, 255, 0.10);

}



.why-card:hover {

    transform: translateY(-6px);



    background:

        #171A21;

}



.why-card:hover::after {

    opacity: 1;



    transform: scale(1.2);

}



.why-card:nth-child(1):hover {

    border-color:

        rgba(59, 91, 219, 0.22);

}



.why-card:nth-child(2):hover,

.why-card:nth-child(3):hover {

    border-color:

        rgba(141, 150, 165, 0.22);

}



.why-card:nth-child(4):hover {

    border-color:

        rgba(255, 255, 255, 0.12);

}



.why-icon {

    width: 48px;

    height: 48px;



    margin-bottom: 22px;



    border-radius: 13px;



    display: grid;

    place-items: center;



    color: var(--purple-light);



    background:

        rgba(59, 91, 219, 0.07);



    border:

        1px solid rgba(255, 255, 255, 0.035);



    font-size: 19px;

    font-weight: 700;



    position: relative;

    z-index: 2;



    transition:

        transform 0.3s ease;

}



.why-card:nth-child(2) .why-icon {

    color: var(--orange-soft);



    background:

        rgba(141, 150, 165, 0.07);

}



.why-card:nth-child(3) .why-icon {

    color: var(--teal-soft);



    background:

        rgba(141, 150, 165, 0.07);

}



.why-card:nth-child(4) .why-icon {

    color: #b9c4cc;



    background:

        rgba(255, 255, 255, 0.045);

}



.why-card:hover .why-icon {

    transform:

        scale(1.08) rotate(-2deg);

}



.why-card h3 {

    margin: 0 0 11px;



    font-size: 16px;



    position: relative;

    z-index: 2;

}



.why-card p {

    margin: 0;



    color: #8D96A5;



    font-size: 13px;

    line-height: 1.7;



    position: relative;

    z-index: 2;

}





/\*=========================================================SERVICES \=========================================================\*/ .services-section {

    padding: 96px 0;



    background:

        #000000;

}



.services-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 22px;

}



.service-card {

    min-height: 345px;



    position: relative;



    padding: 33px;



    border-radius: 20px;



    border:

        1px solid rgba(255, 255, 255, 0.07);



    overflow: hidden;



    box-shadow:

        0 22px 48px rgba(0, 0, 0, 0.14);



    transition:

        transform 0.35s ease,

        border-color 0.35s ease,

        box-shadow 0.35s ease;

}



.service-card::before {

    content: "";



    position: absolute;



    width: 250px;

    height: 250px;



    right: -100px;

    bottom: -120px;



    border-radius: 50%;



    filter: blur(28px);



    opacity: 0.28;



    transition:

        transform 0.5s ease,

        opacity 0.4s ease;

}



.service-card::after {

    content: "";



    position: absolute;



    top: 0;

    left: -130%;



    width: 55%;

    height: 100%;



    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .045),

            transparent);



    transform: skewX(-18deg);



    transition:

        left .75s ease;

}



.service-card:hover::after {

    left: 150%;

}



.service-card:hover::before {

    transform: scale(1.22);



    opacity: .45;

}



.service-card:hover {

    box-shadow:

        0 30px 65px rgba(0, 0, 0, 0.20);

}



.service-buy,

.service-sell {

    background:

        linear-gradient(135deg,

            #111318,

            #080A0E);

}



.service-buy::before {

    background:

        rgba(59, 91, 219, 0.25);

}



.service-sell::before {

    background:

        rgba(141, 150, 165, 0.26);

}



.service-buy:hover {

    border-color:

        rgba(59, 91, 219, 0.24);

}



.service-sell:hover {

    border-color:

        rgba(141, 150, 165, 0.24);

}



.service-top {

    display: flex;

    align-items: center;

    justify-content: space-between;



    position: relative;

    z-index: 2;

}



.service-tag {

    padding: 7px 12px;



    border-radius: 100px;



    color: #e9e2d3;



    background:

        rgba(59, 91, 219, 0.09);



    font-size: 10px;

    font-weight: 800;



    letter-spacing: 1.4px;

}



.service-sell .service-tag {

    color: #C1C8D2;



    background:

        rgba(141, 150, 165, 0.08);

}



.service-arrow {

    width: 38px;

    height: 38px;



    border-radius: 50%;



    display: grid;

    place-items: center;



    border:

        1px solid rgba(255, 255, 255, 0.09);



    color: #aeb6c2;



    font-size: 17px;



    transition:

        transform .25s ease,

        background .25s ease;

}



.service-card:hover .service-arrow {

    transform:

        rotate(10deg) translateY(-2px);



    background:

        rgba(255, 255, 255, 0.04);

}



.service-icon {

    width: 62px;

    height: 62px;



    margin-top: 42px;

    margin-bottom: 21px;



    border-radius: 16px;



    display: grid;

    place-items: center;



    color: #e9e2d3;



    background:

        rgba(59, 91, 219, 0.08);



    font-size: 25px;

    font-weight: 700;



    position: relative;

    z-index: 2;



    transition:

        transform .3s ease;

}



.service-sell .service-icon {

    color: #C1C8D2;



    background:

        rgba(141, 150, 165, 0.08);

}



.service-card:hover .service-icon {

    transform:

        scale(1.08) translateY(-2px);

}



.service-card h3 {

    margin: 0 0 12px;



    font-size: 23px;



    position: relative;

    z-index: 2;

}



.service-card p {

    max-width: 500px;



    margin: 0;



    color: #8D96A5;



    font-size: 14px;

    line-height: 1.75;



    position: relative;

    z-index: 2;

}



.service-link {

    margin-top: 27px;



    display: flex;

    align-items: center;



    gap: 11px;



    color: #F8FAFC;



    font-size: 14px;

    font-weight: 700;



    position: relative;

    z-index: 2;

}



.service-buy .service-link span {

    color: var(--purple-light);

}



.service-sell .service-link span {

    color: var(--teal-soft);

}



.service-link span {

    transition:

        transform 0.2s ease;

}



.service-card:hover .service-link span {

    transform: translateX(5px);

}





/\*=========================================================FAQ \=========================================================\*/ .faq-section {

    padding: 96px 0;



    background:

        #080A0E;

}



.faq-layout {

    display: grid;



    grid-template-columns:

        0.85fr 1.15fr;



    gap: 68px;



    align-items: start;

}



.faq-intro {

    position: sticky;



    top: 110px;

}



.faq-intro h2 {

    margin: 11px 0 15px;



    font-size: 36px;



    line-height: 1.12;



    letter-spacing: -1px;

}



.faq-intro h2 span {

    display: block;



    color: var(--purple-light);

}



.faq-intro p {

    max-width: 450px;



    margin: 0;



    color: #8D96A5;



    font-size: 14px;

    line-height: 1.75;

}



.faq-support-link {

    display: inline-flex;

    align-items: center;



    gap: 10px;



    margin-top: 25px;



    color: #F8FAFC;



    font-size: 14px;

    font-weight: 700;

}



.faq-support-link span {

    color: var(--teal);



    transition:

        transform 0.2s ease;

}



.faq-support-link:hover span {

    transform: translateX(4px);

}



.faq-list {

    display: flex;

    flex-direction: column;



    gap: 12px;

}



.faq-item {

    border:

        1px solid rgba(255, 255, 255, 0.07);



    border-radius: 14px;



    background:

        #111318;



    overflow: hidden;



    transition:

        background 0.3s ease,

        border-color 0.3s ease,

        transform 0.25s ease;

}



.faq-item:hover {

    transform: translateX(2px);



    border-color:

        rgba(59, 91, 219, 0.18);

}



.faq-item.active {

    background:

        linear-gradient(135deg,

            #171A21,

            #111318);



    border-color:

        rgba(59, 91, 219, 0.22);

}



.faq-question {

    width: 100%;



    padding: 20px 22px;



    border: 0;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 18px;



    cursor: pointer;



    color: #F8FAFC;



    background: transparent;



    font-size: 15px;

    font-weight: 700;



    text-align: left;

}



.faq-plus {

    width: 32px;

    height: 32px;



    flex-shrink: 0;



    display: grid;

    place-items: center;



    border-radius: 50%;



    color: var(--purple-light);



    background:

        rgba(59, 91, 219, 0.075);



    font-size: 17px;



    transition:

        transform 0.3s ease,

        background 0.3s ease;

}



.faq-item.active .faq-plus {

    transform: rotate(180deg);



    background:

        rgba(59, 91, 219, 0.12);

}



.faq-answer {

    max-height: 0;



    overflow: hidden;



    opacity: 0;



    transition:

        max-height 0.35s ease,

        opacity 0.25s ease;

}



.faq-item.active .faq-answer {

    max-height: 220px;



    opacity: 1;

}



.faq-answer p {

    margin: 0;



    padding:

        0 60px 22px 22px;



    color: #8D96A5;



    font-size: 13px;

    line-height: 1.75;

}





/\*=========================================================HOME RESPONSIVE - TABLET \=========================================================\*/ @media (max-width: 1100px) {



    .hero-grid {

        grid-template-columns:

            1fr;



        gap: 42px;

    }



    .stats-box {

        flex-wrap: wrap;

    }



    .stat-divider {

        display: none;

    }



    .payment-area {

        width: 100%;



        justify-content:

            space-between;

    }



    .steps-grid {

        grid-template-columns:

            1fr;

    }



    .step-arrow {

        display: none;

    }



    .why-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }



    .faq-layout {

        grid-template-columns:

            1fr;



        gap: 42px;

    }



    .faq-intro {

        position: static;

    }

}





/\*=========================================================HOME RESPONSIVE - MOBILE \=========================================================\*/ @media (max-width: 700px) {



    .hero {

        min-height: auto;



        padding: 58px 0 62px;

    }



    .hero h1 {

        font-size: 45px;



        letter-spacing: -2px;

    }



    .hero-description {

        font-size: 14px;

    }



    .hero-actions {

        flex-direction: column;

    }



    .btn {

        width: 100%;



        min-width: 0;

    }



    .hero-features {

        grid-template-columns:

            1fr;

    }



    .stats-section,

    .how-it-works,

    .why-vultrex,

    .services-section,

    .faq-section {

        padding: 64px 0;

    }



    .stats-box {

        flex-direction: column;



        align-items: flex-start;

    }



    .payment-area {

        flex-direction: column;



        align-items: flex-start;

    }



    .payment-methods {

        flex-wrap: wrap;

    }



    .how-it-works .container {

        padding: 27px 20px;

    }



    .section-top {

        flex-direction: column;



        align-items: flex-start;

    }



    .section-top h2 {

        font-size: 27px;

    }



    .section-heading h2 {

        font-size: 29px;

    }



    .why-grid {

        grid-template-columns:

            1fr;

    }



    .services-grid {

        grid-template-columns:

            1fr;

    }



    .service-card {

        min-height: 315px;



        padding: 27px;

    }



    .service-card h3 {

        font-size: 22px;

    }



    .faq-intro h2 {

        font-size: 29px;

    }



    .faq-question {

        padding: 18px;



        font-size: 14px;

    }



    .faq-answer p {

        padding:

            0 18px 20px;

    }

}





/\*=========================================================HOME RESPONSIVE - VERY SMALL MOBILE \=========================================================\*/ @media (max-width: 430px) {



    .hero h1 {

        font-size: 40px;

    }



    .hero-badge {

        font-size: 9px;



        padding:

            8px 10px;



        gap: 7px;

    }



    .feature-card {

        padding: 19px;

    }

}





/\*=========================================================LIGHT THEME - HOME \=========================================================\*/ html[data-theme="light"] .hero {

    background:

        radial-gradient(circle at 78% 22%,

            rgba(59, 91, 219, .12),

            transparent 30%),

        radial-gradient(circle at 90% 75%,

            rgba(141, 150, 165, .07),

            transparent 27%),

        linear-gradient(135deg,

            #ffffff,

            #f3f8f9);

}



html[data-theme="light"] .hero::before {

    background-image:

        linear-gradient(rgba(20, 19, 16, .035) 1px,

            transparent 1px),

        linear-gradient(90deg,

            rgba(20, 19, 16, .035) 1px,

            transparent 1px);

}



html[data-theme="light"] .hero h1 {

    color:

        #11100e;

}



html[data-theme="light"] .hero-description {

    color:

        #aaa399;

}



html[data-theme="light"] .hero-badge {

    color:

        #aaa399;



    border-color:

        rgba(20, 19, 16, .08);



    background:

        rgba(255, 255, 255, .70);

}



html[data-theme="light"] .feature-card {

    border-color:

        rgba(20, 19, 16, .08);



    background:

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



    box-shadow:

        0 18px 38px rgba(20, 19, 16, .06);

}



html[data-theme="light"] .feature-card h3 {

    color:

        #11100e;

}



html[data-theme="light"] .feature-card p {

    color:

        #6d7982;

}



html[data-theme="light"] .stats-section {

    background:

        #edf4f5;

}







html[data-theme="light"] .why-vultrex {

    background:

        #eef4f5;

}



html[data-theme="light"] .services-section {

    background:

        #f8fafb;

}



html[data-theme="light"] .faq-section {

    background:

        #eef3f4;

}



html[data-theme="light"] .stats-box {

    border-color:

        rgba(20, 19, 16, .08);



    background:

        #ffffff;



    box-shadow:

        0 16px 35px rgba(20, 19, 16, .05);

}



html[data-theme="light"] .stat-item strong {

    color:

        #11100e;

}







html[data-theme="light"] .section-top h2,

html[data-theme="light"] .section-heading h2 {

    color:

        #11100e;

}



html[data-theme="light"] .step-card {

    border-color:

        rgba(20, 19, 16, .08);



    background:

        #f4f7f8;

}



html[data-theme="light"] .step-card h3 {

    color:

        #11100e;

}



html[data-theme="light"] .why-card {

    border-color:

        rgba(20, 19, 16, .08);



    background:

        #ffffff;



    box-shadow:

        0 18px 38px rgba(20, 19, 16, .055);

}



html[data-theme="light"] .why-card h3 {

    color:

        #11100e;

}



html[data-theme="light"] .service-buy {

    background:

        linear-gradient(135deg,

            #ffffff,

            #eef8fa);

}



html[data-theme="light"] .service-sell {

    background:

        linear-gradient(135deg,

            #ffffff,

            #eef8f5);

}



html[data-theme="light"] .service-card {

    border-color:

        rgba(20, 19, 16, .08);



    box-shadow:

        0 20px 45px rgba(20, 19, 16, .065);

}



html[data-theme="light"] .service-card h3,

html[data-theme="light"] .service-link {

    color:

        #11100e;

}



html[data-theme="light"] .faq-item {

    border-color:

        rgba(20, 19, 16, .08);



    background:

        #ffffff;

}



html[data-theme="light"] .faq-question {

    color:

        #11100e;

}



html[data-theme="light"] .faq-item.active {

    background:

        #f5f9fa;

}





/\*=========================================================FINAL HOME NORMALIZATION Preserves final overrides from original style.css \=========================================================\*/ .faq-item {

    background:

        var(--surface);



    border:

        1px solid var(--border);

}



.faq-item:hover {

    border-color:

        rgba(59, 91, 219, 0.22);

}



.faq-question {

    color:

        var(--text);

}



.faq-answer {

    color:

        var(--text-muted);

}





/\*=========================================================FINAL DARK HOME THEME \=========================================================\*/ html:not([data-theme="light"]) .stats-section,

html:not([data-theme="light"]) .why-vultrex,

html:not([data-theme="light"]) .faq-section {

    background-color:

        var(--bg-soft);

}



html:not([data-theme="light"]) .how-it-works,

html:not([data-theme="light"]) .services-section {

    background-color:

        var(--bg);

}



html:not([data-theme="light"]) .hero {

    background:

        radial-gradient(circle at 18% 18%,

            rgba(59, 91, 219, 0.11),

            transparent 29%),

        radial-gradient(circle at 82% 22%,

            rgba(215, 180, 89, 0.08),

            transparent 27%),

        radial-gradient(circle at 56% 86%,

            rgba(255, 122, 0, 0.045),

            transparent 28%),

        #000000;

}



html:not([data-theme="light"]) .hero h1 span {

    background:

        linear-gradient(90deg,

            #3B5BDB 0%,

            #e7c65b 55%,

            #FFD166 100%);



    -webkit-background-clip: text;

    background-clip: text;



    color: transparent;

}



html:not([data-theme="light"]) .feature-card,

html:not([data-theme="light"]) .step-card,

html:not([data-theme="light"]) .why-card,

html:not([data-theme="light"]) .faq-item {

    background:

        #111318;



    border-color:

        #252936;

}



html:not([data-theme="light"]) .how-it-works .container,

html:not([data-theme="light"]) .service-buy,

html:not([data-theme="light"]) .service-sell {

    background:

        linear-gradient(135deg,

            var(--surface),

            var(--surface-alt));



    border-color:

        var(--border);

}





/\*=========================================================FINAL FEATURE ACCENTS \=========================================================\*/ html:not([data-theme="light"]) .feature-card:nth-child(4n
    /**/
    +1) .feature-icon {

    color: #e7c65b;



    background:

        rgba(215, 180, 89, 0.10);



    border-color:

        rgba(215, 180, 89, 0.18);

}



html:not([data-theme="light"]) .feature-card:nth-child(4n

    /**/
    +2) .feature-icon {

    color: #6E8CFF;



    background:

        rgba(59, 91, 219, 0.11);



    border-color:

        rgba(59, 91, 219, 0.20);

}



html:not([data-theme="light"]) .feature-card:nth-child(4n

    /**/
    +3) .feature-icon {

    color: #FFD166;



    background:

        rgba(255, 209, 102, 0.09);



    border-color:

        rgba(255, 209, 102, 0.18);

}



html:not([data-theme="light"]) .feature-card:nth-child(4n

    /**/
    +4) .feature-icon {

    color: #FF963D;



    background:

        rgba(255, 122, 0, 0.09);



    border-color:

        rgba(255, 122, 0, 0.18);

}





/\*=========================================================FINAL WHY CARD ACCENTS \=========================================================\*/ html:not([data-theme="light"]) .why-card:nth-child(3n
    /**/
    +1) .why-icon {

    color: #3B5BDB;



    background:

        rgba(59, 91, 219, 0.10);

}



html:not([data-theme="light"]) .why-card:nth-child(3n

    /**/
    +2) .why-icon {

    color: #e7c65b;



    background:

        rgba(215, 180, 89, 0.10);

}



html:not([data-theme="light"]) .why-card:nth-child(3n

    /**/
    +3) .why-icon {

    color: #FFD166;



    background:

        rgba(255, 209, 102, 0.09);

}





/\*=========================================================FINAL PRIMARY HOME BUTTON \=========================================================\*/ html:not([data-theme="light"]) .btn-primary {

    background:

        linear-gradient(135deg,

            #3B5BDB,

            #e7c65b);



    color:

        #FFFFFF;



    border-color:

        transparent;



    box-shadow:

        0 12px 28px rgba(215, 180, 89, 0.13);

}



html:not([data-theme="light"]) .btn-primary:hover {

    background:

        linear-gradient(135deg,

            #5573E6,

            #e7c65b);



    box-shadow:

        0 16px 34px rgba(215, 180, 89, 0.20);

}





/\*=========================================================FINAL SERVICES COLORS \=========================================================\*/ html:not([data-theme="light"]) .service-buy .service-icon,

html:not([data-theme="light"]) .service-buy .service-tag {

    color:

        #e7c65b;



    background:

        rgba(215, 180, 89, 0.09);

}



html:not([data-theme="light"]) .service-sell .service-icon,

html:not([data-theme="light"]) .service-sell .service-tag {

    color:

        #FF963D;



    background:

        rgba(255, 122, 0, 0.09);

}



html:not([data-theme="light"]) .service-buy::before {

    background:

        rgba(215, 180, 89, 0.18);

}



html:not([data-theme="light"]) .service-sell::before {

    background:

        rgba(255, 122, 0, 0.16);

}





/\*=========================================================FINAL SECTION ACCENTS \=========================================================\*/ html:not([data-theme="light"]) .section-label {

    color:

        #e7c65b;

}



html:not([data-theme="light"]) .section-top h2 span,

html:not([data-theme="light"]) .section-heading h2 span {

    background:

        linear-gradient(90deg,

            #3B5BDB,

            #e7c65b);



    -webkit-background-clip: text;

    background-clip: text;



    color:

        transparent;

}



html:not([data-theme="light"]) .faq-intro h2 span {

    color:

        #FFD166;

}





/\*=========================================================FINAL CARD HOVER COLORS \=========================================================\*/ html:not([data-theme="light"]) .feature-card:hover:nth-child(4n
    /**/
    +1),

html:not([data-theme="light"]) .why-card:hover:nth-child(3n

    /**/
    +2) {

    border-color:

        rgba(215, 180, 89, 0.26);



    box-shadow:

        0 16px 34px rgba(215, 180, 89, 0.055);

}



html:not([data-theme="light"]) .feature-card:hover:nth-child(4n
    /**/
    +2),

html:not([data-theme="light"]) .why-card:hover:nth-child(3n

    /**/
    +1) {

    border-color:

        rgba(59, 91, 219, 0.28);



    box-shadow:

        0 16px 34px rgba(59, 91, 219, 0.06);

}



html:not([data-theme="light"]) .feature-card:hover:nth-child(4n
    /**/
    +3),

html:not([data-theme="light"]) .why-card:hover:nth-child(3n

    /**/
    +3) {

    border-color:

        rgba(255, 209, 102, 0.24);



    box-shadow:

        0 16px 34px rgba(255, 209, 102, 0.045);

}



html:not([data-theme="light"]) .feature-card:hover:nth-child(4n

    /**/
    +4) {

    border-color:

        rgba(255, 122, 0, 0.25);



    box-shadow:

        0 16px 34px rgba(255, 122, 0, 0.045);

}

/* =========================================================
   VULTREX 2026 — HOME HERO UI REDESIGN
   UI ONLY — preserves existing markup / links / functionality
========================================================= */

.hero {
    min-height: 650px;
    padding: 82px 0 88px;
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /*
       IMPORTANT:
       The background asset is:
       /public_html/assets/images/vultrexBackground.png
       home.css is inside /public_html/assets/css/
    */
    background-image:
        linear-gradient(90deg,
            rgba(20, 19, 16, .93) 0%,
            rgba(20, 19, 16, .84) 28%,
            rgba(20, 19, 16, .54) 52%,
            rgba(20, 19, 16, .20) 76%,
            rgba(20, 19, 16, .05) 100%),
        url("../images/vultrexBackground.png") !important;

    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 76% 48%,
            rgba(215, 180, 89, .08),
            transparent 31%),
        linear-gradient(rgba(255, 255, 255, .012) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px);

    background-size:
        auto,
        58px 58px,
        58px 58px;

    mask-image:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .68),
            transparent 96%);
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 560px;
    height: 560px;

    right: -230px;
    top: -235px;

    border:
        1px solid rgba(215, 180, 89, .08);

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(215, 180, 89, .025),
            transparent 70%);

    box-shadow:
        0 0 110px rgba(215, 180, 89, .025);

    animation: none;
    pointer-events: none;
}


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

.hero-grid {
    min-height: 480px;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr) minmax(500px, 1.05fr);

    gap:
        clamp(52px, 6vw, 96px);

    align-items: center;

    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 640px;
}


/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 24px;
    padding: 9px 13px;

    border:
        1px solid rgba(215, 180, 89, .18);

    border-radius: 10px;

    background:
        rgba(20, 19, 16, .72);

    color:
        #C3D6CE;

    box-shadow:
        inset 0 0 22px rgba(215, 180, 89, .025);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-badge span {
    background:
        rgba(215, 180, 89, .25);
}

.hero-badge span:last-child {
    color:
        #D9E9E2;
}


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

.hero h1 {
    max-width: 620px;

    margin: 0;

    color:
        #F5FBF8 !important;

    font-size:
        clamp(58px, 5.25vw, 82px);

    line-height:
        .98;

    letter-spacing:
        -4.4px;

    font-weight:
        800;
}

/*
   Kill the old blue / cyan / yellow gradient.
   Both title lines now follow the new Vultrex gold system.
*/
html:not([data-theme="light"]) .hero h1 span,
html:not([data-theme="light"]) .hero h1 span:last-child {
    display: inline-block;

    margin-top: 5px;

    background:
        linear-gradient(92deg,
            #F5FBF8 0%,
            #D9EEE4 38%,
            #e7c65b 68%,
            #e7c65b 100%) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent !important;
}


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

.hero-description {
    max-width: 575px;

    margin:
        27px 0 0;

    color:
        #9FB5AC;

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
    display: flex;

    gap: 13px;

    margin-top: 31px;
}

.hero .btn {
    min-width: 166px;

    height: 52px;

    padding:
        0 23px;

    border-radius:
        10px;
}

html:not([data-theme="light"]) .hero .btn-primary {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .btn-primary:hover {
    background: #F0D578 !important;
    background-image: none !important;
    border: 1px solid #F0D578 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .btn-secondary {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .btn-secondary:hover {
    background: #201C12 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}


/* =========================================================
   HERO FEATURE CARDS
========================================================= */

.hero-features {
    display: grid;

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

    gap: 16px;

    align-self: center;
}

html:not([data-theme="light"]) .hero .feature-card {
    min-height: 142px;

    padding: 23px;

    gap: 18px;

    border:
        1px solid rgba(63, 54, 35, .22);

    border-radius:
        15px;

    background:
        linear-gradient(145deg,
            rgba(20, 19, 16, .80),
            rgba(20, 19, 16, .72)) !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .018);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}

html:not([data-theme="light"]) .hero .feature-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(215, 180, 89, .38);

    background:
        linear-gradient(145deg,
            rgba(20, 19, 16, .88),
            rgba(20, 19, 16, .82)) !important;

    box-shadow:
        0 22px 48px rgba(0, 0, 0, .29),
        0 0 30px rgba(215, 180, 89, .045);
}

.hero .feature-card::after {
    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -90px;

    background:
        rgba(215, 180, 89, .17) !important;
}

html:not([data-theme="light"]) .hero .feature-icon,
html:not([data-theme="light"]) .hero .feature-card:nth-child(4n
    /**/
    +1) .feature-icon,
html:not([data-theme="light"]) .hero .feature-card:nth-child(4n
    /**/
    +2) .feature-icon,
html:not([data-theme="light"]) .hero .feature-card:nth-child(4n
    /**/
    +3) .feature-icon,
html:not([data-theme="light"]) .hero .feature-card:nth-child(4n

    /**/
    +4) .feature-icon {
    width: 56px;
    min-width: 56px;
    height: 56px;

    color:
        #e7c65b !important;

    border:
        1px solid rgba(215, 180, 89, .19);

    background:
        rgba(215, 180, 89, .09) !important;

    box-shadow:
        inset 0 0 18px rgba(215, 180, 89, .025);
}

.hero .feature-card h3 {
    margin-bottom:
        7px;

    color:
        #F3F7F5;

    font-size:
        16px;
}

.hero .feature-card p {
    color:
        #aaa399;
}


/* =========================================================
   LIGHT THEME HERO
========================================================= */

html[data-theme="light"] .hero {
    background-image:
        linear-gradient(90deg,
            rgba(248, 252, 250, .96) 0%,
            rgba(248, 252, 250, .90) 35%,
            rgba(248, 252, 250, .60) 65%,
            rgba(248, 252, 250, .26) 100%),
        url("../images/vultrexBackground.png") !important;

    background-size:
        cover !important;

    background-position:
        center right !important;

    background-repeat:
        no-repeat !important;
}

html[data-theme="light"] .hero h1 {
    color:
        #11100e !important;
}

html[data-theme="light"] .hero h1 span,
html[data-theme="light"] .hero h1 span:last-child {
    background:
        linear-gradient(92deg,
            #11100e 0%,
            #bda15d 55%,
            #e7c65b 100%) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent !important;
}

html[data-theme="light"] .hero-description {
    color:
        #aaa399;
}

html[data-theme="light"] .hero-badge {
    color:
        #282319;

    border-color:
        rgba(215, 180, 89, .16);

    background:
        rgba(255, 255, 255, .82);
}

html[data-theme="light"] .hero .feature-card {
    border-color:
        rgba(215, 180, 89, .14);

    background:
        rgba(255, 255, 255, .83) !important;

    box-shadow:
        0 18px 38px rgba(20, 19, 16, .07);
}

html[data-theme="light"] .hero .feature-card h3 {
    color:
        #11100e;
}

html[data-theme="light"] .hero .feature-card p {
    color:
        #aaa399;
}


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

@media (max-width: 1200px) {

    .hero-grid {
        grid-template-columns:
            minmax(0, .92fr) minmax(450px, 1.08fr);

        gap:
            42px;
    }

    .hero h1 {
        font-size:
            clamp(54px, 5.4vw, 72px);
    }

}


@media (max-width: 1100px) {

    .hero {
        padding:
            68px 0 74px;

        background-position:
            64% center !important;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap:
            46px;

        min-height:
            0;
    }

    .hero-content {
        max-width:
            720px;
    }

    .hero-features {
        width:
            100%;

        max-width:
            820px;
    }

}


@media (max-width: 700px) {

    .hero {
        min-height:
            auto;

        padding:
            58px 0 64px;

        background-image:
            linear-gradient(180deg,
                rgba(20, 19, 16, .82) 0%,
                rgba(20, 19, 16, .78) 42%,
                rgba(20, 19, 16, .94) 72%,
                rgba(20, 19, 16, .99) 100%),
            url("../images/vultrexBackground.png") !important;

        background-position:
            68% center !important;

        background-size:
            cover !important;
    }

    .hero-grid {
        min-height:
            0;

        gap:
            38px;
    }

    .hero h1 {
        font-size:
            clamp(48px, 14vw, 64px);

        letter-spacing:
            -3px;
    }

    .hero-features {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 480px) {

    .hero {
        padding:
            48px 0 54px;

        background-position:
            64% center !important;
    }

    .hero-badge {
        max-width:
            100%;

        flex-wrap:
            wrap;

        border-radius:
            12px;
    }

    .hero h1 {
        font-size:
            clamp(44px, 14vw, 56px);

        letter-spacing:
            -2.5px;
    }

    .hero-actions {
        flex-direction:
            column;
    }

    .hero .btn {
        width:
            100%;
    }

    html:not([data-theme="light"]) .hero .feature-card {
        min-height:
            124px;

        padding:
            19px;
    }

}

/* =========================================================
   VULTREX HERO — FINAL SAFE POLISH
   HERO ONLY
========================================================= */


/* HERO BADGE */

.hero .hero-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;

    gap: 11px;

    margin: 0 0 25px;
    padding: 9px 13px;

    border: 1px solid rgba(215, 180, 89, 0.22);
    border-radius: 9px;

    background:
        linear-gradient(135deg,
            rgba(20, 19, 16, 0.86),
            rgba(20, 19, 16, 0.74));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 8px 24px rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    white-space: nowrap;
}

.hero .hero-badge-main,
.hero .hero-badge-accent {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.65px;
}

.hero .hero-badge-main {
    color: #F3F7F5;
}

.hero .hero-badge-accent {
    color: #e7c65b;
}

.hero .hero-badge-divider {
    display: block;
    width: 1px;
    height: 15px;
    flex: 0 0 1px;
    background: rgba(215, 180, 89, 0.30);
}


/* HERO BUTTONS */

.hero .hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 31px;
}

.hero .hero-actions .btn {
    min-width: 174px;
    height: 52px;
    padding: 0 24px;

    border-radius: 10px;

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

    font-size: 14px;
    font-weight: 750;
    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

html:not([data-theme="light"]) .hero .hero-actions .btn-primary {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .hero-actions .btn-primary:hover {
    background: #F0D578 !important;
    background-image: none !important;
    border: 1px solid #F0D578 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .hero-actions .btn-secondary {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .hero .hero-actions .btn-secondary:hover {
    background: #201C12 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}


/* HERO ICONS */

html:not([data-theme="light"]) .hero .feature-icon {
    width: 56px;
    min-width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(215, 180, 89, 0.20);
    border-radius: 13px;

    color: #e7c65b !important;

    background:
        linear-gradient(145deg,
            rgba(215, 180, 89, 0.11),
            rgba(20, 19, 16, 0.14)) !important;

    box-shadow:
        inset 0 0 18px rgba(215, 180, 89, 0.035);
}

.hero .feature-icon svg {
    width: 25px;
    height: 25px;

    display: block;

    color: #e7c65b !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero .feature-icon svg path,
.hero .feature-icon svg circle,
.hero .feature-icon svg rect,
.hero .feature-icon svg line,
.hero .feature-icon svg polyline,
.hero .feature-icon svg polygon {
    fill: none !important;
    stroke: currentColor !important;
}

.hero .feature-icon .v-icon {
    color: #e7c65b !important;
    fill: none !important;
    stroke: currentColor !important;
}


/* HERO FEATURE CARDS */

html:not([data-theme="light"]) .hero .feature-card {
    min-height: 142px;

    padding: 23px 24px;

    gap: 18px;

    border: 1px solid rgba(215, 180, 89, 0.16);
    border-radius: 15px;

    background:
        linear-gradient(145deg,
            rgba(20, 19, 16, 0.84),
            rgba(20, 19, 16, 0.78)) !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

html:not([data-theme="light"]) .hero .feature-card:hover {
    transform: translateY(-3px);

    border-color: rgba(215, 180, 89, 0.34);

    background:
        linear-gradient(145deg,
            rgba(20, 19, 16, 0.90),
            rgba(20, 19, 16, 0.86)) !important;

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(215, 180, 89, 0.04);
}

.hero .feature-card h3 {
    margin: 0 0 7px;

    color: #F4F8F6 !important;

    font-size: 16px;
    font-weight: 750;
}

.hero .feature-card p {
    margin: 0;

    color: #aaa399 !important;

    font-size: 13px;
    line-height: 1.55;
}


/* LIGHT MODE */

html[data-theme="light"] .hero .hero-badge {
    border-color: rgba(215, 180, 89, 0.17);
    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 8px 24px rgba(20, 19, 16, 0.06);
}

html[data-theme="light"] .hero .hero-badge-main {
    color: #11100e;
}

html[data-theme="light"] .hero .hero-badge-accent {
    color: #e7c65b;
}

html[data-theme="light"] .hero .hero-badge-divider {
    background: rgba(215, 180, 89, 0.24);
}

html[data-theme="light"] .hero .feature-icon {
    color: #e7c65b !important;

    border-color: rgba(215, 180, 89, 0.17);

    background:
        rgba(215, 180, 89, 0.08) !important;
}

html[data-theme="light"] .hero .feature-icon svg,
html[data-theme="light"] .hero .feature-icon .v-icon {
    color: #e7c65b !important;
    fill: none !important;
    stroke: currentColor !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .hero .hero-badge {
        white-space: normal;
        flex-wrap: wrap;
        gap: 7px 9px;
        padding: 9px 11px;
    }

    .hero .hero-badge-main,
    .hero .hero-badge-accent {
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .hero .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 430px) {

    .hero .hero-badge-divider {
        height: 13px;
    }

    html:not([data-theme="light"]) .hero .feature-card {
        padding: 19px;
    }

    html:not([data-theme="light"]) .hero .feature-icon {
        width: 52px;
        min-width: 52px;
        height: 52px;
    }

    .hero .feature-icon svg {
        width: 23px;
        height: 23px;
    }
}

/* =========================================================
   HERO BADGE — FINAL CLEAN VERSION
========================================================= */

.hero .hero-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    gap: 14px;

    margin: 0 0 24px;
    padding: 10px 15px;

    border: 1px solid rgba(215, 180, 89, 0.18);
    border-radius: 9px;

    background: rgba(20, 19, 16, 0.72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 8px 24px rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    white-space: nowrap;
}


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

.hero .hero-badge span,
.hero .hero-badge-main,
.hero .hero-badge-accent {

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 0.65px !important;

    text-transform: uppercase;

    -webkit-text-fill-color: currentColor !important;
}


/* BUY & SELL GAME CURRENCY */

.hero .hero-badge .hero-badge-main {
    color: #F3F7F5 !important;
}


/* FAST. SAFE. RELIABLE. */

.hero .hero-badge .hero-badge-accent {
    color: #e7c65b !important;
}


/* REMOVE OLD DIVIDER COMPLETELY */

.hero .hero-badge .hero-badge-divider {
    display: none !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] .hero .hero-badge {
    border-color: rgba(215, 180, 89, 0.16);

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

    box-shadow:
        0 8px 24px rgba(20, 19, 16, 0.06);
}

html[data-theme="light"] .hero .hero-badge .hero-badge-main {
    color: #11100e !important;
}

html[data-theme="light"] .hero .hero-badge .hero-badge-accent {
    color: #e7c65b !important;
}


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

@media (max-width: 480px) {

    .hero .hero-badge {
        gap: 9px;

        padding: 8px 11px;

        white-space: normal;
        flex-wrap: wrap;
    }

    .hero .hero-badge span,
    .hero .hero-badge-main,
    .hero .hero-badge-accent {
        font-size: 9px !important;

        letter-spacing: 0.45px !important;
    }
}

/* =========================================================
   HERO BADGE — PREMIUM FINAL
========================================================= */

.hero .hero-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 12px;

    margin: 0 0 28px;
    padding: 9px 14px;

    border: 1px solid rgba(215, 180, 89, 0.18);
    border-radius: 9px;

    background: rgba(20, 19, 16, 0.72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 8px 24px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    white-space: nowrap;
}


/* RESET OLD BADGE STYLING */

.hero .hero-badge span {
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: none !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

    -webkit-text-fill-color: currentColor !important;
}


/* FIRST TEXT */

.hero .hero-badge .hero-badge-main {
    color: #F1F7F4 !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: 0.55px !important;
}


/* SMALL SEPARATOR */

.hero .hero-badge .hero-badge-separator {
    display: block !important;

    width: 3px !important;
    height: 3px !important;

    flex: 0 0 3px;

    border-radius: 50% !important;

    background: #e7c65b !important;

    opacity: 0.75;
}


/* SECOND TEXT */

.hero .hero-badge .hero-badge-accent {
    color: #e7c65b !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: 0.55px !important;
}


/* MOBILE */

@media (max-width: 520px) {

    .hero .hero-badge {
        gap: 8px;

        padding: 8px 11px;

        white-space: normal;
        flex-wrap: wrap;
    }

    .hero .hero-badge .hero-badge-main,
    .hero .hero-badge .hero-badge-accent {
        font-size: 9px !important;
        letter-spacing: 0.4px !important;
    }
}

/* =========================================================
   VULTREX — STATS + HOW IT WORKS — FINAL APPROVED DESIGN
   UI ONLY — keeps existing HTML / translations / functionality
========================================================= */

/* =========================================================
   STATS
========================================================= */

/* Stats — charcoal / off-white with restrained gold details */
.stats-section {
    position: relative;
    padding: 34px 0 42px !important;
    overflow: hidden;
    background: #090909 !important;
    border-top: 1px solid rgba(245, 241, 232, .07) !important;
    border-bottom: 1px solid rgba(245, 241, 232, .07) !important;
}

.stats-section .stats-box {
    min-height: 108px;
    padding: 20px 26px;
    gap: 22px;
    border: 1px solid rgba(242, 237, 225, .13) !important;
    border-radius: 16px;
    background: #121212 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.stats-section .stat-item {
    gap: 13px;
}

.stats-section .stat-icon,
.stats-section .stat-item:nth-child(1) .stat-icon,
.stats-section .stat-item:nth-child(3) .stat-icon,
.stats-section .stat-item:nth-child(5) .stat-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #F1EDE4 !important;
    border: 1px solid rgba(242, 237, 225, .16) !important;
    border-radius: 12px;
    background: #1B1B1B !important;
    box-shadow: none !important;
    filter: none !important;
}

.stats-section .stat-svg {
    width: 23px;
    height: 23px;
    color: #F1EDE4 !important;
}

.stats-section .stat-item strong {
    display: block;
    margin-bottom: 3px;
    color: #F6F3ED !important;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.25px;
}

.stats-section .stat-item span {
    color: #ABA8A1 !important;
    font-size: 12px;
}

.stats-section .stat-divider {
    width: 1px;
    height: 42px;
    flex: 0 0 1px;
    background: rgba(242, 237, 225, .11) !important;
}

.stats-section .payment-area {
    gap: 15px;
    color: #AAA69F !important;
    font-size: 12px;
}

.stats-section .payment-methods {
    display: flex;
    align-items: center;
    gap: 7px;
}

.stats-section .payment-methods div {
    min-width: 59px;
    height: 38px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 237, 225, .13) !important;
    border-radius: 8px;
    background: #191919 !important;
    color: #F1EDE4 !important;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.stats-section .payment-methods div:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, .45) !important;
    background: #24211A !important;
}

/* =========================================================
   HOW IT WORKS — SECTION
========================================================= */



/* No large outer card — matches the approved sample */





/* =========================================================
   HOW IT WORKS — HEADING
========================================================= */














/* =========================================================
   HOW IT WORKS — 3 HORIZONTAL CARDS
========================================================= */










/* =========================================================
   STEP NUMBERS — 01 / 02 / 03
========================================================= */












/* =========================================================
   STEP ICONS
========================================================= */








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






/* =========================================================
   ARROWS BETWEEN CARDS
========================================================= */




/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] .stats-section {
    background:
        radial-gradient(circle at 50% -20%, rgba(215, 180, 89, .06), transparent 42%),
        #EDF5F1 !important;
}

html[data-theme="light"] .stats-section .stats-box {
    border-color: rgba(215, 180, 89, .14) !important;

    background: rgba(255, 255, 255, .94) !important;

    box-shadow:
        0 16px 38px rgba(20, 19, 16, .055) !important;
}

html[data-theme="light"] .stats-section .stat-item strong {
    color: #11100e !important;
}

html[data-theme="light"] .stats-section .stat-item span,
html[data-theme="light"] .stats-section .payment-area {
    color: #aaa399 !important;
}

html[data-theme="light"] .stats-section .stat-icon,
html[data-theme="light"] .stats-section .stat-item:nth-child(1) .stat-icon,
html[data-theme="light"] .stats-section .stat-item:nth-child(3) .stat-icon,
html[data-theme="light"] .stats-section .stat-item:nth-child(5) .stat-icon {
    color: #e7c65b !important;
    border-color: rgba(215, 180, 89, .14);
    background: rgba(215, 180, 89, .07) !important;
}

html[data-theme="light"] .stats-section .payment-methods div {
    color: #282319 !important;
    border-color: rgba(215, 180, 89, .12) !important;
    background: rgba(215, 180, 89, .035) !important;
}




























/* =========================================================
   RESPONSIVE
   IMPORTANT: Keep the 3 cards horizontal on desktop/tablet.
   Stack only on small screens.
========================================================= */






/* Stack only when the screen is actually narrow */
@media (max-width: 760px) {

    .stats-section {
        padding: 28px 0 34px !important;
    }

    .stats-section .stats-box {
        padding: 22px;
        align-items: stretch;
        gap: 18px;
    }

    .stats-section .stat-divider {
        width: 100%;
        height: 1px;
    }

    .stats-section .payment-area {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .stats-section .payment-methods {
        flex-wrap: wrap;
    }


















}

@media (max-width: 480px) {









    .stats-section .stat-icon,
    .stats-section .stat-item:nth-child(1) .stat-icon,
    .stats-section .stat-item:nth-child(3) .stat-icon,
    .stats-section .stat-item:nth-child(5) .stat-icon {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}


/* =========================================================
   VULTREX — ICON + PAYMENT POLISH
   Matches approved gold reference
========================================================= */

/* Keep stats SVG artwork off-white, including nested paths */
.stats-section .stat-icon svg,
.stats-section .stat-icon svg *,
.stats-section .stat-svg,
.stats-section .stat-svg * {
    color: #F1EDE4 !important;
    stroke: #F1EDE4 !important;
}

.stats-section .stat-icon svg [fill]:not([fill="none"]),
.stats-section .stat-svg [fill]:not([fill="none"]) {
    fill: #F1EDE4 !important;
}

/* Payment method cards */
.stats-section .payment-methods div {
    position: relative;
    min-width: 68px;
    height: 42px;
    padding: 0 12px;
    overflow: hidden;
}

/* VISA */
.stats-section .payment-methods div:nth-child(1) {
    font-size: 0 !important;
}

.stats-section .payment-methods div:nth-child(1)::after {
    content: "VISA";
    color: #F7F9F8;
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.5px;
}

/* Mastercard — create the familiar two-circle visual without external assets */
.stats-section .payment-methods div:nth-child(2) {
    font-size: 0 !important;
}

.stats-section .payment-methods div:nth-child(2)::before,
.stats-section .payment-methods div:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.stats-section .payment-methods div:nth-child(2)::before {
    left: calc(50% - 17px);
    background: #EB001B;
}

.stats-section .payment-methods div:nth-child(2)::after {
    left: calc(50% - 5px);
    background: #F79E1B;
    opacity: .96;
}

/* PayPal */
.stats-section .payment-methods div:nth-child(3) {
    font-size: 0 !important;
}

.stats-section .payment-methods div:nth-child(3)::after {
    content: "PayPal";
    color: #e7c65b;
    font-size: 13px;
    font-weight: 850;
    font-style: italic;
    letter-spacing: -.4px;
}

/* Bank */
.stats-section .payment-methods div:nth-child(4) {
    font-size: 0 !important;
}

.stats-section .payment-methods div:nth-child(4)::before {
    content: "▥";
    margin-right: 5px;
    color: #F3F7F5;
    font-size: 15px;
    line-height: 1;
}

.stats-section .payment-methods div:nth-child(4)::after {
    content: "Bank";
    color: #F3F7F5;
    font-size: 11px;
    font-weight: 750;
}

/* + More */
.stats-section .payment-methods div:nth-child(5) {
    color: #F3F7F5 !important;
    font-weight: 750;
}

/* Stronger, cleaner icon boxes in the 3 process cards */




/* Turn the existing third checkmark icon into a lightning icon visually,
   without touching index.php or translation/functionality hooks. */




/* Reference-like heading: white first part + gold accent */




/* More visible circular connectors */


/* Slightly stronger card edge, still calm rather than neon-heavy */


/* Light-mode compatibility for the new payment/icon treatment */
html[data-theme="light"] .stats-section .stat-icon svg,
html[data-theme="light"] .stats-section .stat-icon svg *,
html[data-theme="light"] .stats-section .stat-svg,
html[data-theme="light"] .stats-section .stat-svg * {
    color: #e7c65b !important;
    stroke: #e7c65b !important;
}






/* =========================================================
   VULTREX — WHY VULTREX 2x2 REDESIGN
   UI ONLY — approved vertical sample direction
========================================================= */

.why-vultrex {
    position: relative;
    padding: 86px 0 96px !important;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 50% 8%, rgba(215, 180, 89, .075), transparent 34%),
        linear-gradient(135deg, transparent 0 18%, rgba(215, 180, 89, .035) 18.08%, transparent 18.16%),
        linear-gradient(45deg, transparent 0 82%, rgba(215, 180, 89, .028) 82.08%, transparent 82.16%),
        #11100e !important;
}

.why-vultrex::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 10% 50%, rgba(215, 180, 89, .045), transparent 25%),
        radial-gradient(circle at 90% 55%, rgba(215, 180, 89, .04), transparent 24%);
}

.why-vultrex .container {
    max-width: 1320px;
    position: relative;
    z-index: 1;
}


/* ---------- HEADING ---------- */

.why-vultrex .section-heading,
.why-vultrex .section-heading.center {
    max-width: 900px !important;
    margin: 0 auto 42px !important;
    text-align: center !important;
}

.why-vultrex .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 0 26px;

    border: 1px solid rgba(215, 180, 89, .13);
    border-radius: 999px;

    background: rgba(215, 180, 89, .045);

    color: #e7c65b !important;

    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 3px;

    box-shadow:
        inset 0 0 18px rgba(215, 180, 89, .025);
}

.why-vultrex .section-heading h2 {
    margin: 18px 0 14px !important;

    color: #F3F7F5 !important;

    font-size: clamp(34px, 3.3vw, 48px) !important;
    font-weight: 790;
    line-height: 1.08;
    letter-spacing: -1.45px;
}

.why-vultrex .section-heading h2 span:first-child {
    color: #F3F7F5 !important;
    -webkit-text-fill-color: #F3F7F5 !important;
}

.why-vultrex .section-heading h2 span:last-child {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}

.why-vultrex .section-heading p {
    max-width: 680px;
    margin: 0 auto !important;

    color: #aaa399 !important;

    font-size: 14px;
    line-height: 1.7;
}


/* ---------- 2 x 2 GRID ---------- */

.why-vultrex .why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;

    max-width: 1080px;
    margin: 0 auto;
}


/* ---------- CARDS ---------- */

.why-vultrex .why-card,
.why-vultrex .why-card:nth-child(1),
.why-vultrex .why-card:nth-child(2),
.why-vultrex .why-card:nth-child(3),
.why-vultrex .why-card:nth-child(4) {
    min-height: 245px !important;
    padding: 30px 34px !important;

    position: relative;
    overflow: hidden;

    border: 1px solid rgba(215, 180, 89, .20) !important;
    border-radius: 20px !important;

    background:
        radial-gradient(circle at 18% 10%, rgba(215, 180, 89, .06), transparent 35%),
        linear-gradient(145deg,
            rgba(20, 19, 16, .91),
            rgba(20, 19, 16, .91)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .022),
        0 18px 45px rgba(0, 0, 0, .18) !important;

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

.why-vultrex .why-card::after {
    content: "";
    position: absolute;

    width: 170px;
    height: 170px;

    right: -115px;
    bottom: -115px;

    border-radius: 50%;

    background: rgba(215, 180, 89, .08);
    filter: blur(35px);

    pointer-events: none;
}

html:not([data-theme="light"]) .why-vultrex .why-card:hover,
html:not([data-theme="light"]) .why-vultrex .why-card:hover:nth-child(3n
    /**/
    +1),
html:not([data-theme="light"]) .why-vultrex .why-card:hover:nth-child(3n
    /**/
    +2),
html:not([data-theme="light"]) .why-vultrex .why-card:hover:nth-child(3n

    /**/
    +3) {
    transform: translateY(-5px) !important;

    border-color: rgba(215, 180, 89, .38) !important;

    background:
        radial-gradient(circle at 18% 10%, rgba(215, 180, 89, .085), transparent 37%),
        linear-gradient(145deg,
            rgba(20, 19, 16, .95),
            rgba(20, 19, 16, .95)) !important;

    box-shadow:
        0 24px 50px rgba(0, 0, 0, .23),
        0 0 28px rgba(215, 180, 89, .035) !important;
}


/* ---------- ICONS ---------- */

.why-vultrex .why-icon,
.why-vultrex .why-card:nth-child(1) .why-icon,
.why-vultrex .why-card:nth-child(2) .why-icon,
.why-vultrex .why-card:nth-child(3) .why-icon,
.why-vultrex .why-card:nth-child(4) .why-icon {
    width: 68px !important;
    height: 68px !important;

    margin: 0 0 22px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(215, 180, 89, .30) !important;
    border-radius: 16px !important;

    color: #e7c65b !important;

    background:
        radial-gradient(circle at 50% 30%, rgba(215, 180, 89, .13), transparent 65%),
        linear-gradient(145deg,
            rgba(63, 54, 35, .82),
            rgba(20, 19, 16, .82)) !important;

    box-shadow:
        inset 0 0 22px rgba(215, 180, 89, .055),
        0 0 22px rgba(215, 180, 89, .035) !important;

    transition:
        transform .28s ease,
        border-color .28s ease;
}

.why-vultrex .why-card:hover .why-icon {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(215, 180, 89, .50) !important;
}

.why-vultrex .why-icon svg,
.why-vultrex .why-icon svg *,
.why-vultrex .why-icon .v-icon,
.why-vultrex .why-icon .v-icon * {
    width: 29px !important;
    height: 29px !important;

    color: #e7c65b !important;
    stroke: #e7c65b !important;
}

.why-vultrex .why-icon svg [fill]:not([fill="none"]) {
    fill: #e7c65b !important;
}


/* ---------- CARD COPY ---------- */

.why-vultrex .why-card h3 {
    margin: 0 0 11px !important;

    color: #F3F7F5 !important;

    font-size: 19px !important;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.why-vultrex .why-card p {
    max-width: 470px;
    margin: 0 !important;

    color: #9AAEA5 !important;

    font-size: 14px !important;
    line-height: 1.7;
}


/* ---------- LIGHT MODE ---------- */

html[data-theme="light"] .why-vultrex {
    background:
        radial-gradient(circle at 50% 8%, rgba(215, 180, 89, .055), transparent 34%),
        #F7FAF8 !important;
}

html[data-theme="light"] .why-vultrex .section-label {
    color: #e7c65b !important;
    border-color: rgba(215, 180, 89, .13);
    background: rgba(215, 180, 89, .045);
}

html[data-theme="light"] .why-vultrex .section-heading h2,
html[data-theme="light"] .why-vultrex .section-heading h2 span:first-child {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .why-vultrex .section-heading h2 span:last-child {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}

html[data-theme="light"] .why-vultrex .section-heading p,
html[data-theme="light"] .why-vultrex .why-card p {
    color: #aaa399 !important;
}

html[data-theme="light"] .why-vultrex .why-card,
html[data-theme="light"] .why-vultrex .why-card:nth-child(1),
html[data-theme="light"] .why-vultrex .why-card:nth-child(2),
html[data-theme="light"] .why-vultrex .why-card:nth-child(3),
html[data-theme="light"] .why-vultrex .why-card:nth-child(4) {
    border-color: rgba(215, 180, 89, .14) !important;

    background:
        linear-gradient(145deg,
            #FFFFFF,
            #F2F8F5) !important;

    box-shadow:
        0 18px 38px rgba(20, 19, 16, .055) !important;
}

html[data-theme="light"] .why-vultrex .why-card h3 {
    color: #11100e !important;
}

html[data-theme="light"] .why-vultrex .why-icon,
html[data-theme="light"] .why-vultrex .why-card:nth-child(1) .why-icon,
html[data-theme="light"] .why-vultrex .why-card:nth-child(2) .why-icon,
html[data-theme="light"] .why-vultrex .why-card:nth-child(3) .why-icon,
html[data-theme="light"] .why-vultrex .why-card:nth-child(4) .why-icon {
    color: #e7c65b !important;
    border-color: rgba(215, 180, 89, .17) !important;
    background: rgba(215, 180, 89, .07) !important;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 800px) {
    .why-vultrex {
        padding: 68px 0 76px !important;
    }

    .why-vultrex .section-heading,
    .why-vultrex .section-heading.center {
        margin-bottom: 34px !important;
    }

    .why-vultrex .section-heading h2 {
        font-size: 32px !important;
    }

    .why-vultrex .why-grid {
        grid-template-columns: 1fr !important;
        max-width: 620px;
        gap: 16px !important;
    }

    .why-vultrex .why-card,
    .why-vultrex .why-card:nth-child(1),
    .why-vultrex .why-card:nth-child(2),
    .why-vultrex .why-card:nth-child(3),
    .why-vultrex .why-card:nth-child(4) {
        min-height: 220px !important;
    }
}

@media (max-width: 520px) {
    .why-vultrex {
        padding: 58px 0 64px !important;
    }

    .why-vultrex .section-label {
        min-height: 32px;
        padding: 0 20px;
        font-size: 9px;
    }

    .why-vultrex .section-heading h2 {
        font-size: 28px !important;
        letter-spacing: -.8px;
    }

    .why-vultrex .why-card,
    .why-vultrex .why-card:nth-child(1),
    .why-vultrex .why-card:nth-child(2),
    .why-vultrex .why-card:nth-child(3),
    .why-vultrex .why-card:nth-child(4) {
        min-height: 205px !important;
        padding: 26px !important;
    }

    .why-vultrex .why-icon,
    .why-vultrex .why-card:nth-child(1) .why-icon,
    .why-vultrex .why-card:nth-child(2) .why-icon,
    .why-vultrex .why-card:nth-child(3) .why-icon,
    .why-vultrex .why-card:nth-child(4) .why-icon {
        width: 62px !important;
        height: 62px !important;
    }
}


/* =========================================================
   VULTREX — WHY VULTREX COMPACT CARD POLISH
   Smaller cards + stronger icons
========================================================= */

.why-vultrex {
    padding: 72px 0 82px !important;
}

.why-vultrex .section-heading,
.why-vultrex .section-heading.center {
    margin-bottom: 34px !important;
}

.why-vultrex .section-heading h2 {
    margin: 15px 0 11px !important;
    font-size: clamp(32px, 3vw, 44px) !important;
}

.why-vultrex .why-grid {
    max-width: 1060px !important;
    gap: 18px !important;
}

.why-vultrex .why-card,
.why-vultrex .why-card:nth-child(1),
.why-vultrex .why-card:nth-child(2),
.why-vultrex .why-card:nth-child(3),
.why-vultrex .why-card:nth-child(4) {
    min-height: 178px !important;
    padding: 26px 28px !important;

    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 24px !important;
    row-gap: 7px !important;
    align-content: center !important;

    border-radius: 18px !important;
}

/* icon sits on the left and spans both text rows */
.why-vultrex .why-icon,
.why-vultrex .why-card:nth-child(1) .why-icon,
.why-vultrex .why-card:nth-child(2) .why-icon,
.why-vultrex .why-card:nth-child(3) .why-icon,
.why-vultrex .why-card:nth-child(4) .why-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;

    border-radius: 17px !important;

    border-color: rgba(215, 180, 89, .42) !important;

    background:
        radial-gradient(circle at 50% 32%, rgba(215, 180, 89, .16), transparent 62%),
        linear-gradient(145deg,
            rgba(63, 54, 35, .90),
            rgba(20, 19, 16, .92)) !important;

    box-shadow:
        inset 0 0 24px rgba(215, 180, 89, .065),
        0 0 18px rgba(215, 180, 89, .045) !important;
}

.why-vultrex .why-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: end !important;

    margin: 0 !important;

    font-size: 18px !important;
}

.why-vultrex .why-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    max-width: 400px !important;
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.62 !important;
}

/* Make existing line SVGs feel more like the sample icons */
.why-vultrex .why-icon svg,
.why-vultrex .why-icon .v-icon {
    width: 31px !important;
    height: 31px !important;

    overflow: visible;

    filter: drop-shadow(0 0 5px rgba(215, 180, 89, .20));
}

.why-vultrex .why-icon svg *,
.why-vultrex .why-icon .v-icon * {
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Slight visual emphasis per icon without changing HTML */
.why-vultrex .why-card:nth-child(1) .why-icon {
    transform: rotate(-2deg);
}

.why-vultrex .why-card:nth-child(2) .why-icon svg,
.why-vultrex .why-card:nth-child(2) .why-icon .v-icon {
    transform: scale(1.08);
}

.why-vultrex .why-card:nth-child(3) .why-icon svg,
.why-vultrex .why-card:nth-child(3) .why-icon .v-icon {
    transform: scale(1.05);
}

.why-vultrex .why-card:nth-child(4) .why-icon svg,
.why-vultrex .why-card:nth-child(4) .why-icon .v-icon {
    transform: scale(1.06);
}

.why-vultrex .why-card:hover .why-icon {
    transform: translateY(-2px) scale(1.035) !important;
}

/* keep first card's tiny angle while hovering */
.why-vultrex .why-card:nth-child(1):hover .why-icon {
    transform: translateY(-2px) scale(1.035) rotate(-2deg) !important;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 800px) {
    .why-vultrex {
        padding: 62px 0 70px !important;
    }

    .why-vultrex .why-grid {
        max-width: 620px !important;
    }

    .why-vultrex .why-card,
    .why-vultrex .why-card:nth-child(1),
    .why-vultrex .why-card:nth-child(2),
    .why-vultrex .why-card:nth-child(3),
    .why-vultrex .why-card:nth-child(4) {
        min-height: 168px !important;
    }
}

@media (max-width: 520px) {

    .why-vultrex .why-card,
    .why-vultrex .why-card:nth-child(1),
    .why-vultrex .why-card:nth-child(2),
    .why-vultrex .why-card:nth-child(3),
    .why-vultrex .why-card:nth-child(4) {
        min-height: 0 !important;
        padding: 24px 22px !important;

        grid-template-columns: 58px minmax(0, 1fr) !important;
        column-gap: 17px !important;
    }

    .why-vultrex .why-icon,
    .why-vultrex .why-card:nth-child(1) .why-icon,
    .why-vultrex .why-card:nth-child(2) .why-icon,
    .why-vultrex .why-card:nth-child(3) .why-icon,
    .why-vultrex .why-card:nth-child(4) .why-icon {
        width: 58px !important;
        height: 58px !important;
        border-radius: 14px !important;
    }

    .why-vultrex .why-icon svg,
    .why-vultrex .why-icon .v-icon {
        width: 27px !important;
        height: 27px !important;
    }

    .why-vultrex .why-card h3 {
        font-size: 16px !important;
    }

    .why-vultrex .why-card p {
        font-size: 12px !important;
    }
}


/* =========================================================
   VULTREX SERVICES — BLACK / GOLD / OFF-WHITE
   Consolidated single section, based on existing index.php markup.
========================================================= */
.services-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 86px 0 100px !important;
    background: radial-gradient(ellipse at 6% 88%, rgba(177, 120, 25, .12), transparent 40%), #090909 !important;
}

.services-section .container {
    position: relative;
    z-index: 1;
    max-width: 1360px;
}

.services-section .section-heading {
    max-width: 1100px !important;
    margin: 0 0 42px !important;
}

.services-section .section-label {
    color: #e8c86e !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
}

.services-section .section-heading h2 {
    margin: 14px 0 !important;
    color: #f8f5ee !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: 1.12 !important;
    letter-spacing: -1.6px !important;
    font-weight: 800 !important;
}

.services-section .section-heading h2 span:first-child {
    color: #f8f5ee !important;
    -webkit-text-fill-color: #f8f5ee !important;
}

.services-section .section-heading h2 span:last-child {
    color: #eac65f !important;
    -webkit-text-fill-color: #eac65f !important;
}

.services-section .section-heading p {
    color: #c6c2b9 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.services-section .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.services-section .service-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    min-height: 430px !important;
    padding: 34px 36px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.services-section .service-buy {
    background: radial-gradient(ellipse at 83% 78%, rgba(223, 153, 36, .20), transparent 50%), linear-gradient(120deg, #39250e 0%, #25190e 42%, #130f0b 100%) !important;
    border: 1px solid rgba(239, 187, 76, .83) !important;
    box-shadow: inset 0 1px rgba(255, 239, 187, .22), 0 12px 46px rgba(169, 108, 20, .12) !important;
}

.services-section .service-sell {
    background: radial-gradient(ellipse at 90% 78%, rgba(135, 109, 65, .13), transparent 48%), linear-gradient(120deg, #1b1b1b, #0d0d0d 70%) !important;
    border: 1px solid rgba(211, 205, 194, .35) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 14px 35px rgba(0, 0, 0, .28) !important;
}

.services-section .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(133deg, rgba(255, 255, 255, .07), transparent 32% 76%, rgba(255, 255, 255, .02));
}

.services-section .service-card::after {
    display: none !important;
    content: none !important;
}

.services-section .service-card:hover {
    transform: translateY(-5px) !important;
}

.services-section .service-buy:hover {
    box-shadow: 0 18px 56px rgba(197, 133, 30, .22) !important;
}

.services-section .service-sell:hover {
    border-color: rgba(243, 237, 224, .6) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .4) !important;
}

.services-section .service-top,
.services-section .service-icon,
.services-section .service-card>h3,
.services-section .service-card>p,
.services-section .service-card>.service-link {
    position: relative !important;
    z-index: 5 !important;
}

.services-section .service-top {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.services-section .service-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 17px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.services-section .service-buy .service-tag {
    background: rgba(238, 179, 62, .23) !important;
    color: #ffe08b !important;
    border: 1px solid rgba(242, 190, 80, .48) !important;
}

.services-section .service-sell .service-tag {
    background: rgba(255, 255, 255, .06) !important;
    color: #f4f0e8 !important;
    border: 1px solid rgba(255, 255, 255, .19) !important;
}

.services-section .service-arrow {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #f8f5ee !important;
    font-size: 20px !important;
}

.services-section .service-icon {
    display: grid !important;
    place-items: center !important;
    width: 72px !important;
    height: 72px !important;
    margin: 24px 0 20px !important;
    border-radius: 19px !important;
}

.services-section .service-icon::before {
    display: none !important;
    content: none !important;
}

.services-section .service-buy .service-icon {
    color: #f8d66e !important;
    background: rgba(232, 171, 47, .17) !important;
    border: 1px solid rgba(246, 198, 81, .46) !important;
}

.services-section .service-sell .service-icon {
    color: #f7f4ed !important;
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
}

.services-section .service-icon svg {
    display: block !important;
    width: 33px !important;
    height: 33px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.services-section .service-icon svg * {
    stroke: currentColor !important;
    fill: none !important;
}

.services-section .service-card>h3 {
    max-width: 53% !important;
    margin: 0 0 12px !important;
    color: #faf7f0 !important;
    font-size: clamp(23px, 2.05vw, 30px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
}

.services-section .service-card>p {
    max-width: 53% !important;
    margin: 0 0 25px !important;
    color: #c7c3bb !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.services-section .service-art {
    position: absolute !important;
    z-index: 2 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 56% !important;
    height: 83% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.services-section .service-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.services-section .service-buy .service-art::before {
    background: linear-gradient(90deg, #25190e 0%, rgba(37, 25, 14, .62) 17%, transparent 46%), linear-gradient(0deg, rgba(26, 17, 10, .20), transparent 48%);
}

.services-section .service-sell .service-art::before {
    background: linear-gradient(90deg, #141414 0%, rgba(20, 20, 20, .68) 17%, transparent 47%), linear-gradient(0deg, rgba(10, 10, 10, .23), transparent 45%);
}

.services-section .service-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    opacity: .96 !important;
    transform: none !important;
    filter: saturate(.80) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 18%, #000 40%);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 18%, #000 40%);
}

.services-section .service-buy .service-art img {
    filter: sepia(.17) saturate(.9) hue-rotate(-12deg) !important;
}

.services-section .service-sell .service-art img {
    filter: saturate(.55) contrast(1.05) !important;
}

.services-section .service-card>.service-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    min-width: 180px !important;
    min-height: 51px !important;
    margin-top: auto !important;
    padding: 0 23px !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform .2s ease !important;
}

.services-section .service-buy>.service-link {
    color: #18130a !important;
    -webkit-text-fill-color: #18130a !important;
    background: linear-gradient(100deg, #f1c34e, #ffe28a) !important;
    box-shadow: 0 10px 26px rgba(211, 157, 46, .19) !important;
}

.services-section .service-sell>.service-link {
    color: #181818 !important;
    -webkit-text-fill-color: #181818 !important;
    background: #f8f5ee !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .20) !important;
}

.services-section .service-card>.service-link span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.services-section .service-card:hover>.service-link {
    transform: translateY(-2px) !important;
}

@media(max-width:900px) {
    .services-section .services-grid {
        grid-template-columns: 1fr !important;
    }

    .services-section .service-card {
        min-height: 400px !important;
    }
}

@media(max-width:600px) {
    .services-section {
        padding: 64px 0 72px !important;
    }

    .services-section .section-heading h2 {
        font-size: clamp(30px, 8vw, 40px) !important;
    }

    .services-section .service-card {
        min-height: 425px !important;
        padding: 26px 23px !important;
    }

    .services-section .service-card>h3,
    .services-section .service-card>p {
        max-width: 75% !important;
    }

    .services-section .service-art {
        width: 56% !important;
        height: 58% !important;
        opacity: .72 !important;
    }

    .services-section .service-card>h3 {
        font-size: 23px !important;
    }

    .services-section .service-card>p {
        font-size: 13px !important;
    }
}

@media(prefers-reduced-motion:reduce) {

    .services-section .service-card,
    .services-section .service-card>.service-link {
        transition: none !important;
    }
}

/* =========================================================
   FAQ — VULTREX PREMIUM REDESIGN
========================================================= */

.faq-section {
    position: relative !important;
    padding: 90px 0 100px !important;
    overflow: hidden !important;

    background:
        linear-gradient(90deg,
            rgba(20, 19, 16, .28),
            rgba(20, 19, 16, .08)),
        url("../images/vultrexGoldBackground.png") center / cover no-repeat !important;
}


/* subtle dark overlay */
.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 45%,
            rgba(215, 180, 89, .08),
            transparent 34%),
        linear-gradient(180deg,
            rgba(20, 19, 16, .12),
            rgba(20, 19, 16, .28));

    pointer-events: none;
}


.faq-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FAQ LAYOUT
========================================================= */

.faq-layout {
    display: grid !important;

    grid-template-columns:
        minmax(320px, .82fr) minmax(520px, 1.35fr) !important;

    gap: 82px !important;
    align-items: start !important;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.faq-intro {
    padding-top: 12px;
}


.faq-intro .section-label {
    display: inline-block;

    margin-bottom: 20px;

    color: #e7c65b !important;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .24em;

    text-transform: uppercase;
}


.faq-intro h2 {
    max-width: 570px;

    margin: 0 0 22px !important;

    color: #F3F7F5 !important;

    font-size: clamp(42px, 4vw, 62px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;

    font-weight: 800 !important;

    -webkit-text-fill-color: #F3F7F5 !important;
}


/* second line gold */
.faq-intro h2 span {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}


.faq-intro>p {
    max-width: 520px;

    margin: 0 0 30px !important;

    color: #A8BAB3 !important;

    font-size: 16px !important;
    line-height: 1.75 !important;
}


/* =========================================================
   CHAT CTA
========================================================= */

.faq-chat-link {
    display: inline-flex !important;

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

    min-width: 210px;
    height: 54px;

    padding: 0 28px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
            #e7c65b,
            #e7c65b) !important;

    color: #11100e !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    box-shadow:
        0 12px 35px rgba(215, 180, 89, .18);

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


.faq-chat-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 42px rgba(215, 180, 89, .28);
}


/* kill old blue/gradient text */
.faq-chat-link,
.faq-chat-link span {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}


/* =========================================================
   ACCORDION
========================================================= */

.faq-list {
    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;
}


.faq-item {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(215, 180, 89, .25) !important;

    border-radius: 18px !important;

    background:
        linear-gradient(135deg,
            rgba(20, 19, 16, .82),
            rgba(20, 19, 16, .78)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02);

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


.faq-item:hover {
    border-color:
        rgba(215, 180, 89, .48) !important;

    transform: translateY(-1px);
}


/* ACTIVE FAQ */

.faq-item.active,
.faq-item.open {
    border-color:
        rgba(215, 180, 89, .78) !important;

    background:
        linear-gradient(135deg,
            rgba(20, 19, 16, .92),
            rgba(20, 19, 16, .88)) !important;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, .18),
        inset 0 0 35px rgba(215, 180, 89, .035);
}


/* =========================================================
   QUESTION BUTTON
========================================================= */

.faq-question {
    width: 100% !important;

    min-height: 78px !important;

    padding:
        0 76px 0 26px !important;

    display: flex !important;

    align-items: center !important;

    border: 0 !important;
    background: transparent !important;

    color: #F3F7F5 !important;

    text-align: left;

    font-size: 16px !important;
    font-weight: 750 !important;

    cursor: pointer;
}


.faq-question,
.faq-question span {
    color: #F3F7F5 !important;
    -webkit-text-fill-color: #F3F7F5 !important;
}


/* =========================================================
   + / -
========================================================= */

.faq-toggle {
    position: absolute !important;

    top: 20px !important;
    right: 22px !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid rgba(215, 180, 89, .32) !important;

    border-radius: 50% !important;

    background:
        rgba(63, 54, 35, .28) !important;

    color: #e7c65b !important;

    font-size: 20px !important;
    font-weight: 500 !important;

    -webkit-text-fill-color: #e7c65b !important;
}


.faq-item.active .faq-toggle,
.faq-item.open .faq-toggle {
    border-color: #e7c65b !important;

    background:
        rgba(215, 180, 89, .18) !important;

    box-shadow:
        0 0 22px rgba(215, 180, 89, .16);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
    padding:
        0 76px 26px 26px !important;
}


.faq-answer p {
    max-width: 760px;

    margin: 0 !important;

    color: #A8BAB3 !important;

    font-size: 14px !important;
    line-height: 1.75 !important;
}


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

@media (max-width: 1000px) {

    .faq-layout {
        grid-template-columns: 1fr !important;

        gap: 48px !important;
    }


    .faq-intro {
        max-width: 650px;
    }

}


@media (max-width: 600px) {

    .faq-section {
        padding: 65px 0 75px !important;
    }


    .faq-layout {
        gap: 36px !important;
    }


    .faq-intro h2 {
        font-size: 38px !important;
    }


    .faq-question {
        min-height: 72px !important;

        padding:
            0 68px 0 20px !important;

        font-size: 15px !important;
    }


    .faq-toggle {
        right: 16px !important;

        width: 36px !important;
        height: 36px !important;
    }


    .faq-answer {
        padding:
            0 20px 22px !important;
    }

}

/* =========================================================
   VULTREX HOME — LIGHT MODE FINAL
   Dark mode remains untouched.
========================================================= */

html[data-theme="light"] body {
    background: #f4f8f6 !important;
    color: #11100e !important;
}

/* HERO: preserve artwork, remove old blue CTA */
html[data-theme="light"] .hero .hero-btn-primary,
html[data-theme="light"] .hero .btn-primary,
html[data-theme="light"] .hero-actions a:first-child {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .hero .hero-btn-secondary,
html[data-theme="light"] .hero .btn-secondary,
html[data-theme="light"] .hero-actions a:nth-child(2) {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

/* STATS */
html[data-theme="light"] .stats-section,
html[data-theme="light"] .stats-strip,
html[data-theme="light"] .home-stats {
    background: #edf6f2 !important;
}

html[data-theme="light"] .stats-bar,
html[data-theme="light"] .stats-panel,
html[data-theme="light"] .stats-section .stats-inner {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(215, 180, 89, .14) !important;
    box-shadow: 0 18px 42px rgba(63, 54, 35, .07) !important;
}

/* HOW IT WORKS */










/* WHY VULTREX */
html[data-theme="light"] .why-vultrex {
    background:
        radial-gradient(circle at 50% 5%, rgba(215, 180, 89, .055), transparent 30%),
        #f3f8f5 !important;
}

html[data-theme="light"] .why-vultrex .why-card {
    background: rgba(255, 255, 255, .86) !important;
    border-color: rgba(215, 180, 89, .15) !important;
    box-shadow: 0 16px 38px rgba(63, 54, 35, .055) !important;
}

html[data-theme="light"] .why-vultrex .why-card h3 {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .why-vultrex .why-card p {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

/* SERVICES */
html[data-theme="light"] .services-section {
    background:
        radial-gradient(circle at 15% 12%, rgba(215, 180, 89, .07), transparent 30%),
        linear-gradient(180deg, #f8fbf9 0%, #eef6f2 100%) !important;
    border-top: 1px solid rgba(215, 180, 89, .08) !important;
}

html[data-theme="light"] .services-section .section-label {
    color: #bda15d !important;
    -webkit-text-fill-color: #bda15d !important;
}

html[data-theme="light"] .services-section .section-heading h2>span:first-child {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .services-section .section-heading h2>span:last-child {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}

html[data-theme="light"] .services-section .section-heading p {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

/* Keep the artwork premium but make the cards genuinely light */
html[data-theme="light"] .services-section .service-buy {
    background:
        linear-gradient(90deg, #f4fffa 0%, #ecfaf4 48%, #dff6ec 100%) !important;
    border-color: rgba(215, 180, 89, .28) !important;
    box-shadow: 0 18px 42px rgba(63, 54, 35, .08) !important;
}

html[data-theme="light"] .services-section .service-sell {
    background:
        linear-gradient(90deg, #fffdf7 0%, #fff8e9 48%, #f9eed0 100%) !important;
    border-color: rgba(183, 132, 27, .27) !important;
    box-shadow: 0 18px 42px rgba(118, 84, 20, .075) !important;
}

html[data-theme="light"] .services-section .service-card>h3 {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .services-section .service-card>p {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

html[data-theme="light"] .services-section .service-buy .service-art::before {
    background:
        linear-gradient(90deg, #ecfaf4 0%, rgba(236, 250, 244, .78) 14%, transparent 44%),
        linear-gradient(0deg, rgba(236, 250, 244, .12), transparent 40%) !important;
}

html[data-theme="light"] .services-section .service-sell .service-art::before {
    background:
        linear-gradient(90deg, #fff8e9 0%, rgba(255, 248, 233, .78) 14%, transparent 44%),
        linear-gradient(0deg, rgba(255, 248, 233, .12), transparent 40%) !important;
}

html[data-theme="light"] .services-section .service-arrow {
    background: rgba(255, 255, 255, .72) !important;
    border-color: rgba(63, 54, 35, .16) !important;
    color: #282319 !important;
}

/* FAQ */
html[data-theme="light"] .faq-section {
    background:
        linear-gradient(90deg, rgba(247, 251, 249, .92), rgba(240, 248, 244, .88)),
        url("../images/vultrexGoldBackground.png") center / cover no-repeat !important;
    border-top: 1px solid rgba(215, 180, 89, .09) !important;
}

html[data-theme="light"] .faq-section::before {
    background:
        radial-gradient(circle at 18% 45%, rgba(215, 180, 89, .08), transparent 34%),
        linear-gradient(180deg, rgba(248, 252, 250, .16), rgba(238, 247, 243, .22)) !important;
}

html[data-theme="light"] .faq-section .section-label {
    color: #bda15d !important;
    -webkit-text-fill-color: #bda15d !important;
}

html[data-theme="light"] .faq-intro h2,
html[data-theme="light"] .faq-intro h2 span {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .faq-intro h2 strong,
html[data-theme="light"] .faq-intro h2 em {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}

html[data-theme="light"] .faq-intro>p {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

html[data-theme="light"] .faq-item {
    background: rgba(255, 255, 255, .82) !important;
    border-color: rgba(215, 180, 89, .18) !important;
    box-shadow: 0 12px 32px rgba(63, 54, 35, .045) !important;
}

html[data-theme="light"] .faq-item.active,
html[data-theme="light"] .faq-item.open {
    background: rgba(250, 255, 252, .96) !important;
    border-color: rgba(215, 180, 89, .50) !important;
    box-shadow: 0 16px 38px rgba(63, 54, 35, .08) !important;
}

html[data-theme="light"] .faq-question {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .faq-answer,
html[data-theme="light"] .faq-answer p {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

html[data-theme="light"] .faq-toggle {
    background: #e8f6f0 !important;
    color: #bda15d !important;
    border-color: rgba(215, 180, 89, .12) !important;
}

html[data-theme="light"] .faq-chat-link {
    color: #bda15d !important;
    -webkit-text-fill-color: #bda15d !important;
}

/* General home text cleanup */
html[data-theme="light"] .section-label {
    color: #bda15d !important;
    -webkit-text-fill-color: #bda15d !important;
}

/* =========================================================
   LIGHT MODE — FAQ TEXT VISIBILITY FIX
========================================================= */

html[data-theme="light"] .faq-section .faq-question,
html[data-theme="light"] .faq-section .faq-question span,
html[data-theme="light"] .faq-section .faq-question strong {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

html[data-theme="light"] .faq-section .faq-answer,
html[data-theme="light"] .faq-section .faq-answer p,
html[data-theme="light"] .faq-section .faq-answer span {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

html[data-theme="light"] .faq-section .faq-toggle,
html[data-theme="light"] .faq-section .faq-toggle span {
    color: #bda15d !important;
    -webkit-text-fill-color: #bda15d !important;
}

/* =========================================================
   LIGHT MODE — HERO CARDS + PAYMENT TEXT FIX
========================================================= */

/* Hero feature card titles */
html[data-theme="light"] .hero .feature-card h3,
html[data-theme="light"] .hero .feature-card h4,
html[data-theme="light"] .hero .feature-card strong,
html[data-theme="light"] .hero .feature-card-title {
    color: #11100e !important;
    -webkit-text-fill-color: #11100e !important;
}

/* Hero feature card descriptions */
html[data-theme="light"] .hero .feature-card p,
html[data-theme="light"] .hero .feature-card-text {
    color: #aaa399 !important;
    -webkit-text-fill-color: #aaa399 !important;
}

/* Payment method text */
html[data-theme="light"] .payment-method,
html[data-theme="light"] .payment-method span,
html[data-theme="light"] .payment-badge,
html[data-theme="light"] .payment-badge span {
    color: #282319 !important;
    -webkit-text-fill-color: #282319 !important;
}

/* Bank specifically */
html[data-theme="light"] .payment-method.bank,
html[data-theme="light"] .payment-bank {
    color: #282319 !important;
    -webkit-text-fill-color: #282319 !important;
    opacity: 1 !important;
}

/* =========================================================
   WHY VULTREX — BACKGROUND2
========================================================= */

html:not([data-theme="light"]) .why-vultrex {
    position: relative !important;

    background:
        linear-gradient(90deg,
            rgba(20, 19, 16, 0.72) 0%,
            rgba(20, 19, 16, 0.48) 50%,
            rgba(20, 19, 16, 0.72) 100%),
        url("../images/vultrexGoldBackground.png") center center / cover no-repeat !important;

    border-top: 1px solid rgba(215, 180, 89, 0.10);
    border-bottom: 1px solid rgba(215, 180, 89, 0.10);
}

/* =========================================================
   VULTREX BLACK & GOLD — HOME HERO (2026)
   Hero-only visual refresh; original layout, links, and other
   sections remain untouched. Append after legacy declarations.
========================================================= */
:root {
    --vx-hero-gold: #D4AF37;
    --vx-hero-gold-light: #E7C65B;
    --vx-hero-gold-dark: #A67C00;
}

html .hero {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    background: url("../images/vultrex-hero-gold.png") center / cover no-repeat !important;
    border-bottom: 1px solid rgba(212, 175, 55, .12);
}

html .hero::before {
    content: none !important;
    display: none !important;
}

html .hero::after {
    display: none !important;
}

html .hero .hero-badge {
    border: 1px solid rgba(212, 175, 55, .30) !important;
    background: rgba(18, 17, 13, .84) !important;
    box-shadow: none !important;
    color: #F5F5F5 !important;
}

html .hero .hero-badge-main,
html .hero .hero-badge .hero-badge-main {
    color: #F5F5F5 !important;
    -webkit-text-fill-color: #F5F5F5 !important;
}

html .hero .hero-badge-accent,
html .hero .hero-badge .hero-badge-accent {
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
}

html .hero .hero-badge-separator,
html .hero .hero-badge-divider {
    background: rgba(212, 175, 55, .48) !important;
}

html .hero h1,
html .hero h1 span:first-child {
    color: #F5F5F5 !important;
    -webkit-text-fill-color: #F5F5F5 !important;
}

html .hero h1 span:last-child,
html .hero h1 [data-i18n="home.heroAccent"] {
    color: #D4AF37 !important;
    -webkit-text-fill-color: #D4AF37 !important;
    background: none !important;
    text-shadow: none !important;
}

html .hero .hero-description {
    color: #B7B7B7 !important;
    -webkit-text-fill-color: #B7B7B7 !important;
}

html .hero .hero-actions .btn {
    min-height: 56px;
    border-radius: 10px;
    box-shadow: none !important;
}

html .hero .hero-actions .btn-primary {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html .hero .hero-actions .btn-primary:hover {
    background: #F0D578 !important;
    background-image: none !important;
    border: 1px solid #F0D578 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html .hero .hero-actions .btn-secondary {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html .hero .hero-actions .btn-secondary:hover {
    background: #201C12 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html .hero .feature-card {
    background: rgba(19, 19, 19, .94) !important;
    border: 1px solid rgba(212, 175, 55, .20) !important;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html .hero .feature-card:hover {
    background: rgba(25, 24, 21, .94) !important;
    border-color: rgba(212, 175, 55, .44) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .28) !important;
    transform: translateY(-2px);
}

html .hero .feature-card::before,
html .hero .feature-card::after {
    box-shadow: none !important;
}

html .hero .feature-icon {
    background: rgba(212, 175, 55, .10) !important;
    border: 1px solid rgba(212, 175, 55, .24) !important;
    color: #D4AF37 !important;
    box-shadow: none !important;
}

html .hero .feature-icon svg,
html .hero .feature-icon .v-icon,
html .hero .feature-icon svg * {
    color: #D4AF37 !important;
    stroke: #D4AF37 !important;
}

html .hero .feature-card h3,
html .hero .feature-card h4,
html .hero .feature-card strong {
    color: #F5F5F5 !important;
    -webkit-text-fill-color: #F5F5F5 !important;
}

html .hero .feature-card p {
    color: #A3A3A3 !important;
    -webkit-text-fill-color: #A3A3A3 !important;
}

@media (max-width: 700px) {
    html .hero {
        min-height: auto;
        background: url("../images/vultrex-hero-gold.png") center / cover no-repeat !important;
    }

    html .hero .feature-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    html .hero .feature-card,
    html .hero .hero-actions .btn {
        transition: none !important;
    }
}

/* =========================================================
   VULTREX — HERO BLACK & GOLD FINAL CASCADE FIX
   Scope: homepage hero only; do not affect global buttons.
   Required image: /assets/images/vultrex-hero-gold.png
========================================================= */
html body .hero,
html body section.hero,
html body #hero {
    background-color: #080808 !important;
    background-image: url("/assets/images/vultrex-hero-gold.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

html body .hero::before,
html body .hero::after {
    content: none !important;
    display: none !important;
}

html body .hero .hero-actions>a:first-child,
html body .hero .hero-actions>button:first-child,
html body .hero .hero-actions .btn-primary,
html body .hero .hero-actions a.btn-primary,
html body .hero .hero-actions button.btn-primary {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html body .hero .hero-actions>a:first-child *,
html body .hero .hero-actions>button:first-child *,
html body .hero .hero-actions .btn-primary * {
    background: #D4AF37 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html body .hero .hero-actions>a:last-child,
html body .hero .hero-actions>button:last-child,
html body .hero .hero-actions .btn-secondary {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html body .hero .hero-actions>a:last-child *,
html body .hero .hero-actions>button:last-child *,
html body .hero .hero-actions .btn-secondary * {
    background: #101010 !important;
    background-image: none !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html body .hero .hero-actions>a:first-child:hover,
html body .hero .hero-actions>button:first-child:hover,
html body .hero .hero-actions .btn-primary:hover {
    background: #F0D578 !important;
    background-image: none !important;
    border: 1px solid #F0D578 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

html body .hero .hero-actions>a:last-child:hover,
html body .hero .hero-actions>button:last-child:hover,
html body .hero .hero-actions .btn-secondary:hover {
    background: #201C12 !important;
    background-image: none !important;
    border: 1px solid #D4AF37 !important;
    color: #E7C65B !important;
    -webkit-text-fill-color: #E7C65B !important;
    box-shadow: none !important;
}

html body .hero .hero-features .feature-card,
html body .hero .feature-card {
    background: rgba(23, 23, 23, .93) !important;
    background-color: #171717 !important;
    border-color: rgba(212, 175, 55, .22) !important;
    box-shadow: none !important;
}

html body .hero .feature-card .feature-icon {
    background: rgba(212, 175, 55, .09) !important;
    border-color: rgba(212, 175, 55, .25) !important;
}

@media (max-width: 700px) {

    html body .hero,
    html body section.hero,
    html body #hero {
        background-position: 58% center !important;
    }
}

/* ==========================================================
   HOW IT WORKS — CANONICAL BLACK / GOLD / WHITE COMPONENT
   ========================================================== */
/* VULTREX How It Works - standalone component */
/* HOW IT WORKS — Black / Gold / White design (scoped to .how-gold) */
html body .how-it-works.how-gold {
    background: #080808 !important;
    padding: 90px 0 !important;
    color: #fff !important;
}

html body .how-it-works.how-gold>.container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 20px !important;
    overflow: visible !important;
    max-width: 1500px;
}

html body .how-it-works.how-gold>.container::before,
html body .how-it-works.how-gold>.container::after {
    content: none !important;
    display: none !important;
}

html body .how-it-works.how-gold .section-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    margin-bottom: 42px !important;
}

html body .how-it-works.how-gold .section-label {
    display: inline-block !important;
    color: #e7c65b !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    margin-bottom: 23px !important;
}

html body .how-it-works.how-gold .section-top h2 {
    font-size: clamp(29px, 3.5vw, 54px) !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
    margin: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
}

html body .how-it-works.how-gold .section-top h2 span {
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

html body .how-it-works.how-gold .section-top h2 .gold-accent {
    color: #e7c65b !important;
    -webkit-text-fill-color: #e7c65b !important;
}

html body .how-it-works.how-gold .section-top>p {
    font-size: 17px !important;
    color: #c9c9c9 !important;
    margin: 16px 0 0 !important;
}

html body .how-it-works.how-gold .steps-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
}

html body .how-it-works.how-gold .step-card {
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    position: relative !important;
    padding: 55px 25px 34px !important;
    border: 1px solid #d4af37 !important;
    border-radius: 20px !important;
    background: #101010 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

html body .how-it-works.how-gold .step-card::before,
html body .how-it-works.how-gold .step-card::after {
    content: none !important;
    display: none !important;
}

html body .how-it-works.how-gold .step-card:hover {
    transform: translateY(-5px) !important;
    border-color: #f1d475 !important;
    box-shadow: 0 12px 28px rgba(212, 175, 55, .10) !important;
}

html body .how-it-works.how-gold .step-number {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 9px 12px !important;
    background: #322811 !important;
    border: 1px solid #80672a !important;
    border-radius: 10px !important;
    color: #f3d374 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

html body .how-it-works.how-gold .step-icon {
    display: grid !important;
    place-items: center !important;
    flex: none !important;
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 25px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #ffe481, #d4a52c) !important;
    color: #090909 !important;
    box-shadow: 0 5px 24px rgba(212, 175, 55, .16) !important;
}

html body .how-it-works.how-gold .step-icon svg {
    width: 42px !important;
    height: 42px !important;
    stroke: #090909 !important;
    fill: none !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body .how-it-works.how-gold .step-card h3 {
    color: #fff !important;
    font-size: 23px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    margin: 0 0 14px !important;
}

html body .how-it-works.how-gold .step-card p {
    color: #c9c9c9 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 310px !important;
    margin: 0 auto !important;
}

html body .how-it-works.how-gold .step-arrow {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    border: 1px solid #d4af37 !important;
    border-radius: 50% !important;
    background: #0c0c0c !important;
    color: #f4d36c !important;
    font-size: 27px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

html body .how-it-works.how-gold .how-gold-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 62px;
}

html body .how-it-works.how-gold .how-gold-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}

html body .how-it-works.how-gold .benefit-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: grid;
    place-items: center;
    border: 1px solid #c6a23c;
    border-radius: 13px;
    color: #f2d26a;
    font-size: 30px;
    line-height: 1;
}

html body .how-it-works.how-gold .how-gold-benefit strong {
    display: block;
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
}

html body .how-it-works.how-gold .how-gold-benefit small {
    display: block;
    color: #aaa;
    font-size: 12px;
    margin-top: 5px;
}

@media(max-width:1000px) {
    html body .how-it-works.how-gold .steps-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    html body .how-it-works.how-gold .step-arrow {
        transform: rotate(90deg);
        margin: auto !important;
    }

    html body .how-it-works.how-gold .step-card {
        min-height: 270px !important;
    }

    html body .how-it-works.how-gold .how-gold-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:550px) {
    html body .how-it-works.how-gold {
        padding: 60px 0 !important;
    }

    html body .how-it-works.how-gold .section-top h2 {
        font-size: 30px !important;
        letter-spacing: -.5px !important;
    }

    html body .how-it-works.how-gold .step-card {
        min-height: 250px !important;
    }

    html body .how-it-works.how-gold .how-gold-benefits {
        gap: 20px 10px;
    }

    html body .how-it-works.how-gold .how-gold-benefit {
        justify-content: flex-start;
        gap: 9px;
    }

    html body .how-it-works.how-gold .benefit-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 23px;
    }

    html body .how-it-works.how-gold .how-gold-benefit strong {
        font-size: 12px;
    }

    html body .how-it-works.how-gold .how-gold-benefit small {
        font-size: 11px;
    }
}


/* Single source of truth: no generated numbers or gold SVG strokes. */
html body .how-it-works.how-gold .step-number::before,
html body .how-it-works.how-gold .step-number::after {
    content: none !important;
    display: none !important;
}

html body .how-it-works.how-gold .step-card:nth-child(1) .step-icon,
html body .how-it-works.how-gold .step-card:nth-child(3) .step-icon,
html body .how-it-works.how-gold .step-card:nth-child(5) .step-icon {
    background: linear-gradient(145deg, #ffe481, #d4a52c) !important;
    color: #090909 !important;
    border-color: #d4af37 !important;
}

html body .how-it-works.how-gold .step-icon .v-icon,
html body .how-it-works.how-gold .step-icon svg,
html body .how-it-works.how-gold .step-icon svg * {
    color: #090909 !important;
    stroke: #090909 !important;
}

html body .how-it-works.how-gold .step-card:nth-child(1) .step-number,
html body .how-it-works.how-gold .step-card:nth-child(3) .step-number,
html body .how-it-works.how-gold .step-card:nth-child(5) .step-number {
    font-size: 16px !important;
    color: #f3d374 !important;
    background: #322811 !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================
   WHY VULTREX — BLACK / SOFT GOLD / OFF-WHITE
   Matches the approved minimalist reference; isolated to this section.
   ============================================================ */
html body .why-vultrex {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    padding: 92px 0 100px !important;
    background-color: #080808 !important;
    background-image: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .48)), url('../images/vultrexGoldBackground.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    color: #f7f5ef !important;
}

html body .why-vultrex::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: none !important;
    opacity: 0;
}

html body .why-vultrex::after {
    content: none !important;
    display: none !important;
}

html body .why-vultrex .container {
    position: relative;
    max-width: 1320px;
}

html body .why-vultrex .section-heading,
html body .why-vultrex .section-heading.center {
    text-align: center !important;
    margin: 0 auto 42px !important;
    max-width: 1150px !important;
}

html body .why-vultrex .section-label {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    min-height: 42px !important;
    padding: 8px 28px !important;
    margin: 0 auto 19px !important;
    border: 1px solid rgba(212, 175, 55, .62) !important;
    border-radius: 999px !important;
    background: rgba(212, 175, 55, .035) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #e6c466 !important;
    -webkit-text-fill-color: #e6c466 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
}

html body .why-vultrex .section-heading h2 {
    margin: 0 0 14px !important;
    color: #f8f7f3 !important;
    font-size: clamp(30px, 3.2vw, 49px) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -1.4px !important;
}

html body .why-vultrex .section-heading h2 span:first-child {
    color: #f8f7f3 !important;
    -webkit-text-fill-color: #f8f7f3 !important;
    background: none !important;
}

html body .why-vultrex .section-heading h2 span:last-child {
    color: #e6c466 !important;
    -webkit-text-fill-color: #e6c466 !important;
    background: none !important;
}

html body .why-vultrex .section-heading p {
    color: #bbb8b0 !important;
    font-size: clamp(14px, 1.15vw, 17px) !important;
    line-height: 1.6 !important;
    margin: 0 auto !important;
}

html body .why-vultrex .why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

html body .why-vultrex .why-grid .why-card,
html body .why-vultrex .why-grid .why-card:nth-child(n) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 26px !important;
    row-gap: 8px !important;
    min-height: 190px !important;
    padding: 30px 38px !important;
    border: 1px solid rgba(212, 175, 55, .68) !important;
    border-radius: 20px !important;
    background: #101010 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #f7f5ef !important;
    text-align: left !important;
    transform: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}

html body .why-vultrex .why-grid .why-card::before,
html body .why-vultrex .why-grid .why-card::after {
    content: none !important;
    display: none !important;
}

html body .why-vultrex .why-grid .why-card:hover {
    border-color: #e6c466 !important;
    background: #14120e !important;
    transform: translateY(-3px) !important;
}

html body .why-vultrex .why-grid .why-card .why-icon,
html body .why-vultrex .why-grid .why-card:nth-child(n) .why-icon {
    display: grid !important;
    place-items: center !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    border: 1px solid rgba(212, 175, 55, .65) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #332811, #17130d) !important;
    box-shadow: inset 0 0 22px rgba(212, 175, 55, .055) !important;
    color: #eac967 !important;
    transform: none !important;
}

html body .why-vultrex .why-grid .why-card .why-icon svg,
html body .why-vultrex .why-grid .why-card .why-icon .v-icon,
html body .why-vultrex .why-grid .why-card:nth-child(n) .why-icon svg {
    width: 39px !important;
    height: 39px !important;
    color: #eac967 !important;
    stroke: #eac967 !important;
    fill: none !important;
    filter: none !important;
    transform: none !important;
}

html body .why-vultrex .why-grid .why-card .why-icon svg * {
    stroke: #eac967 !important;
    stroke-width: 2.1 !important;
    fill: none !important;
}

html body .why-vultrex .why-grid .why-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 !important;
    color: #f7f5ef !important;
    font-size: clamp(17px, 1.45vw, 21px) !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
}

html body .why-vultrex .why-grid .why-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin: 0 !important;
    max-width: 430px !important;
    color: #bbb8b0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

@media (max-width: 800px) {
    html body .why-vultrex {
        padding: 66px 0 76px !important;
    }

    html body .why-vultrex .why-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 640px !important;
    }

    html body .why-vultrex .why-grid .why-card,
    html body .why-vultrex .why-grid .why-card:nth-child(n) {
        min-height: 160px !important;
    }
}

@media (max-width: 520px) {
    html body .why-vultrex {
        padding: 56px 0 65px !important;
    }

    html body .why-vultrex .section-heading h2 {
        font-size: 29px !important;
        letter-spacing: -.8px !important;
    }

    html body .why-vultrex .why-grid .why-card,
    html body .why-vultrex .why-grid .why-card:nth-child(n) {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        column-gap: 17px !important;
        min-height: 145px !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    html body .why-vultrex .why-grid .why-card .why-icon,
    html body .why-vultrex .why-grid .why-card:nth-child(n) .why-icon {
        width: 60px !important;
        height: 60px !important;
        border-radius: 14px !important;
    }

    html body .why-vultrex .why-grid .why-card .why-icon svg,
    html body .why-vultrex .why-grid .why-card .why-icon .v-icon {
        width: 29px !important;
        height: 29px !important;
    }

    html body .why-vultrex .why-grid .why-card h3 {
        font-size: 16px !important;
    }

    html body .why-vultrex .why-grid .why-card p {
        font-size: 12px !important;
    }
}

/* VULTREX SERVICES: use new uploaded Buy / Sell art without modifying index.php */
.services-section .service-buy .service-art img {
    content: url("../images/buyCoinsGold.png") !important;
}

.services-section .service-sell .service-art img {
    content: url("../images/sellCoinsBlack.png") !important;
}