/*-------------------------- Index Page ----------------------*/
:root {
    --bg: #05070d;
    --bg-soft: #0a0e1a;
    --panel: #0e1424;
    --panel-2: #121a30;
    --line: rgba(255, 255, 255, .08);
    --line-soft: rgba(255, 255, 255, .05);
    --text: #e9ecf7;
    --text-dim: #a6adc9;
    --text-faint: #6a7295;
    --violet: #7c5cfc;
    --violet-2: #9d7bff;
    --cyan: #26d9e8;
    --green: #3ddc97;
    --amber: #ffb648;
    --red: #ff6b6b;
    --grad: linear-gradient(120deg, var(--violet) 0%, var(--cyan) 100%);
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-glow: 0 0 0 1px rgba(124, 92, 252, .15), 0 20px 60px -20px rgba(124, 92, 252, .35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-head {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}

p {
    color: var(--text-dim);
}

a {
    text-decoration: none;
    color: inherit;
}

::selection {
    background: rgba(124, 92, 252, .35);
    color: #fff;
}


.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 160px;
    height: 45px;
    object-fit: contain;
    object-position: left center;
    max-width: 100%;
}

@media (max-width: 576px) {
    .brand-logo {
        width: 135px;
        height: 40px;
    }
}


/* background texture */
.bg-noise {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 500px at 85% -5%, rgba(124, 92, 252, .18), transparent 60%),
        radial-gradient(700px 500px at 5% 20%, rgba(38, 217, 232, .10), transparent 60%),
        var(--bg);
}

.grid-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 80%);
}

.container-xl-custom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 110px 0;
    position: relative;
}

@media(max-width:768px) {
    .section {
        padding: 70px 0;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    color: var(--violet-2);
    margin-bottom: 14px;
}

.eyebrow i {
    width: 14px;
    height: 14px;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--violet-2);
    opacity: .6;
}

.sec-title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.15;
    margin-bottom: 18px;
}

.sec-sub {
    color: var(--text-dim);
    font-size: 1.05rem;
    max-width: 620px;
    line-height: 1.7;
}

.text-grad {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-grad {
    background: var(--grad);
    border: none;
    color: #05070d;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    padding: 13px 28px;
    border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .6);
}

.btn-grad:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -10px rgba(124, 92, 252, .75);
    color: #05070d;
}

.btn-ghost {
    border: 1px solid var(--line);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    padding: 12px 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    transition: .25s ease;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

/* ===== NAVBAR ===== */
.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: .3s ease;
    border-bottom: 1px solid transparent;
}

.navbar-custom.scrolled {
    background: rgba(5, 7, 13, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 0;
}

.brand {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
}

.brand .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 14px var(--violet);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-links .nav-link {
    color: var(--text-dim) !important;
    font-size: .93rem;
    font-weight: 500;
    padding: 9px 15px !important;
    border-radius: 8px;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nav-links .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .05);
}

.nav-links .nav-link .caret {
    width: 13px;
    height: 13px;
    transition: transform .25s ease;
    opacity: .6;
}

.nav-item-mega {
    position: relative;
}

.nav-item-mega.open .nav-link .caret {
    transform: rotate(180deg);
}

.nav-item-mega.open .nav-link {
    color: #fff !important;
    background: rgba(255, 255, 255, .05);
}

.nav-item-mega.open .nav-link::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
}

/* mega menu panel */
.mega-panel {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 10px);
    width: min(1160px, 92vw);
    background: linear-gradient(165deg, #0c1120 0%, #080b15 100%);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(124, 92, 252, .06);
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1050;
}

.navbar-custom.scrolled .mega-panel {
    top: 62px;
}

.nav-item-mega.open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mega-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--text-faint);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 22px;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 12px;
    transition: .2s;
}

.mega-item:hover {
    background: rgba(255, 255, 255, .045);
}

.mega-item .mi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-item .mi-icon i {
    width: 18px;
    height: 18px;
}

.mega-item .mi-text b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    font-weight: 500;
}

.mega-item .mi-text span {
    font-size: .75rem;
    color: var(--text-faint);
}

.mega-side {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mega-side .badge-top-mini {
    align-self: flex-start;
    font-size: .68rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .14);
    border: 1px solid rgba(124, 92, 252, .3);
    padding: 5px 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
}

.mega-side .badge-top-mini i {
    width: 12px;
    height: 12px;
}

.mega-side h5 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.mega-side p {
    font-size: .82rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.mega-side .mini-stats {
    display: flex;
    gap: 22px;
    margin-top: auto;
    margin-bottom: 18px;
}

.mega-side .mini-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.mega-side .mini-stats span {
    font-size: .68rem;
    color: var(--text-faint);
}

@media(max-width:1199px) {
    .mega-panel {
        width: 94vw;
    }

    .mega-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: .2s;
    background: rgba(255, 255, 255, .02);
}

.icon-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

.icon-btn i {
    width: 18px;
    height: 18px;
}

/* offcanvas */
.offcanvas-custom {
    width: 88% !important;
    max-width: 400px;
    background: linear-gradient(180deg, #080b14 0%, #05070d 100%);
    color: var(--text);
    border: none;
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .7);
}

.offcanvas-custom .offcanvas-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.offcanvas-custom .btn-close {
    filter: invert(1);
    opacity: .8;
}

.mob-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    color: #fff;
}

.mob-nav-link i {
    width: 17px;
    height: 17px;
    color: var(--text-faint);
}

.mob-submenu {
    display: none;
    padding: 6px 0 12px;
}

.mob-submenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    color: var(--text-dim);
    border-radius: 10px;
    transition: .2s;
}

.mob-submenu a:active,
.mob-submenu a:hover {
    background: rgba(255, 255, 255, .045);
}

.mob-submenu a .mi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mob-submenu a .mi-icon i {
    width: 16px;
    height: 16px;
}

.mob-submenu a .mi-text {
    display: flex;
    flex-direction: column;
}

.mob-submenu a .mi-text b {
    font-family: 'Outfit', sans-serif;
    font-size: .87rem;
    font-weight: 500;
    color: #fff;
}

.mob-submenu a span.small-desc {
    font-size: .72rem;
    color: var(--text-faint);
    font-weight: 300;
    margin-top: 1px;
}

.mob-nav-link.open i.chev {
    transform: rotate(180deg);
}

.mob-nav-link i.chev {
    transition: .25s;
}

.offcanvas-cta {
    padding: 20px;
    border-top: 1px solid var(--line-soft);
    margin-top: 6px;
}

@media(max-width:400px) {
    .offcanvas-custom {
        width: 92% !important;
        max-width: none;
    }
}

/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

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

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

.footer-logo {
    width: 180px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ff6b6b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}


/* =========================================================
   GIFT DONATION HERO
========================================================= */

.gift-hero-section {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    color: #fff;

    background:
        radial-gradient(circle at 82% 45%,
            rgba(236, 42, 126, .09),
            transparent 29%),
        radial-gradient(circle at 18% 70%,
            rgba(124, 92, 252, .045),
            transparent 30%),
        #090711;
}


/* ================= BREADCRUMB ================= */

.gift-breadcrumb-bar {
    height: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: rgba(10, 7, 17, .88);
}

.gift-breadcrumb {
    min-height: 34px;

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 13px;
    color: #62657a;
}

.gift-breadcrumb a {
    color: #70758d;
    text-decoration: none;
    transition: .2s ease;
}

.gift-breadcrumb a:hover {
    color: #f15ba1;
}

.gift-breadcrumb span {
    color: #373342;
    font-size: 9px;
}

.gift-breadcrumb strong {
    color: #eeeeef;
    font-weight: 700;
}


/* ================= HERO ROW ================= */

.gift-hero-row {
    padding-top: 78px;
    padding-bottom: 64px;
}

.gift-hero-left {
    padding-right: 42px;
}


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

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

    gap: 9px;

    min-height: 37px;

    padding: 0 16px;

    border: 1px solid rgba(236, 42, 126, .45);
    border-radius: 30px;

    background: rgba(236, 42, 126, .055);

    color: #f15ba1;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .15px;

    margin-bottom: 23px;
}

.gift-rank-badge i {
    font-size: 13px;
}


/* ================= HEADING ================= */

.gift-hero-left h1 {
    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 46px;
    line-height: 1.16;

    letter-spacing: -1.8px;

    font-weight: 800;
}

.gift-pink-text {
    color: #f15aa0;
}

.gift-heading-dash {
    color: #fff;
}

.gift-white-text {
    color: #fff;
}


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

.gift-hero-description {
    max-width: 590px;

    margin: 22px 0 0;

    color: #9ca0b8;

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

    font-weight: 400;
}

.gift-hero-description strong {
    color: #f1f1f3;
    font-weight: 700;
}


/* ================= BUTTONS ================= */

.gift-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-top: 30px;
}

.gift-demo-btn,
.gift-pricing-btn,
.gift-learn-btn {

    height: 61px;

    padding: 0 29px;

    display: inline-flex;

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

    gap: 9px;

    border-radius: 32px;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    font-weight: 700;

    transition: all .25s ease;
}


.gift-demo-btn {

    min-width: 218px;

    color: #fff;

    background: #ce1767;

    border: 1px solid #ce1767;

    box-shadow:
        0 12px 30px rgba(206, 23, 103, .18);
}

.gift-demo-btn:hover {

    color: #fff;

    background: #e51b73;

    transform: translateY(-2px);
}


.gift-pricing-btn {

    min-width: 178px;

    color: #f1f1f3;

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

    border: 2px solid rgba(255, 255, 255, .32);
}

.gift-pricing-btn:hover {

    color: #fff;

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

    border-color: rgba(255, 255, 255, .5);

    transform: translateY(-2px);
}


.gift-learn-btn {

    min-width: 177px;

    height: 61px;

    color: #e91d76;

    background: transparent;

    border: 2px solid #e91d76;
}

.gift-learn-btn:hover {

    color: #fff;

    background: #e91d76;

    transform: translateY(-2px);
}


/* ================= COUNTERS ================= */

.gift-hero-stats {

    display: flex;

    align-items: flex-start;

    gap: 52px;

    margin-top: 39px;
}

.gift-stat-item {
    min-width: 95px;
}

.gift-stat-number {

    color: #d82a78;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -.5px;

    min-width: 80px;
}

.gift-stat-label {

    margin-top: 10px;

    color: #6f748c;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: .35px;
}


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

.gift-compensation-card {

    position: relative;

    width: 100%;

    max-width: 568px;

    min-height: 515px;

    margin-left: auto;

    padding: 29px 18px 28px;

    border: 1px solid rgba(229, 31, 117, .19);

    border-radius: 27px;

    background:
        radial-gradient(circle at 50% 20%,
            rgba(236, 42, 126, .035),
            transparent 35%),
        rgba(19, 11, 25, .72);

    box-shadow:
        0 0 45px rgba(231, 31, 117, .055),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


/* SLA */

.gift-sla-badge {

    position: absolute;

    right: 15px;
    top: 16px;

    min-width: 95px;

    height: 30px;

    padding: 0 11px;

    display: flex;

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

    gap: 4px;

    border: 1px solid rgba(0, 205, 155, .38);

    border-radius: 20px;

    color: #00c99a;

    background: rgba(0, 205, 155, .055);

    font-size: 11px;

    font-weight: 600;
}


/* CARD TITLE */

.gift-card-title {

    text-align: center;

    color: #f5f4f6;

    font-size: 16px;

    font-weight: 800;
}

.gift-card-subtitle {

    margin-top: 8px;

    text-align: center;

    color: #e75199;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .35px;
}


/* ================= FLOW ================= */

.gift-member-flow {

    position: relative;

    padding-top: 22px;

    text-align: center;
}


.gift-member-node {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.gift-node-circle {

    width: 51px;
    height: 51px;

    display: flex;

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

    border-radius: 50%;

    border: 2px solid #7c5000;

    background: rgba(119, 72, 0, .09);

    color: #e89a00;

    font-size: 15px;
}


.gift-member-node>span {

    margin-top: 6px;

    color: #687089;

    font-size: 10px;

    font-weight: 600;
}


.gift-member-node strong {

    margin-top: 4px;

    padding: 3px 8px;

    border-radius: 8px;

    background: rgba(0, 195, 143, .09);

    color: #00c79b;

    font-size: 10px;

    font-weight: 700;
}


.gift-down-arrow {

    margin-top: 5px;

    color: #a53576;

    font-size: 19px;

    line-height: 1;
}


.gift-direct-label {

    margin-top: -1px;

    color: #60677d;

    font-size: 9px;
}


/* ================= LEVELS ================= */

.gift-level-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 10px;
}


.gift-level-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 76px;
}


.gift-level-circle {

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    font-size: 14px;
}


.sponsor-box .gift-level-circle {

    color: #fff;

    background: #e8327b;

    border: 2px solid #f15b99;

    box-shadow:
        0 0 16px rgba(232, 50, 123, .25);
}


.receiver-box .gift-level-circle {

    color: #fff;

    background: #00a9b0;

    border: 2px solid #13d0d4;
}


.level-three-box .gift-level-circle {

    color: #b675ff;

    background: rgba(107, 43, 178, .12);

    border: 2px solid #5b2b99;
}


.gift-level-box>span {

    margin-top: 6px;

    color: #687089;

    font-size: 10px;
}


.gift-level-box strong {

    margin-top: 3px;

    padding: 3px 8px;

    border-radius: 8px;

    background: rgba(0, 195, 143, .09);

    color: #00c79b;

    font-size: 10px;
}


.gift-horizontal-arrow {

    color: #a12b68;

    font-size: 13px;
}


/* ================= ADMIN ================= */

.gift-platform-arrow {

    margin-top: 7px;

    color: #b37800;

    font-size: 18px;

    line-height: 1;
}


.gift-platform-label {

    margin-top: 0;

    color: #626a80;

    font-size: 9px;
}


.gift-admin-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 4px;
}


.gift-admin-circle {

    width: 49px;
    height: 49px;

    display: flex;

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

    border-radius: 50%;

    border: 2px solid #754900;

    background: rgba(117, 73, 0, .09);

    color: #e59b00;

    font-size: 14px;
}


.gift-admin-box>span {

    margin-top: 5px;

    color: #697087;

    font-size: 10px;
}


.gift-admin-box strong {

    margin-top: 3px;

    padding: 3px 8px;

    border-radius: 8px;

    background: rgba(0, 195, 143, .09);

    color: #00c79b;

    font-size: 10px;
}


/* ================= LEGEND ================= */

.gift-card-legend {

    height: 39px;

    margin-top: 18px;

    padding: 0 13px;

    display: flex;

    align-items: center;

    gap: 26px;

    border: 1px solid rgba(225, 32, 116, .13);

    border-radius: 12px;

    background: rgba(225, 32, 116, .045);

    color: #8b8da0;

    font-size: 10px;

    font-weight: 600;
}


.gift-card-legend>div {

    display: flex;

    align-items: center;

    gap: 5px;
}


.gift-card-legend>strong {

    margin-left: auto;

    color: #d82978;

    font-size: 11px;

    letter-spacing: .2px;
}


.legend-dot {

    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;
}


.legend-pink {
    background: #dc2675;
}

.legend-cyan {
    background: #00aeb6;
}

.legend-yellow {
    background: #f2a000;
}


/* ================= PERCENTAGE ================= */

.gift-percentage-row {

    display: grid;

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

    gap: 8px;

    margin-top: 14px;
}


.gift-percentage-box {

    min-height: 73px;

    padding: 11px 5px;

    display: flex;

    flex-direction: column;

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

    border: 1px solid rgba(225, 32, 116, .13);

    border-radius: 12px;

    background: rgba(225, 32, 116, .045);
}


.gift-percentage-box strong {

    color: #ef579e;

    font-size: 17px;

    font-weight: 800;
}


.gift-percentage-box span {

    margin-top: 7px;

    color: #777b90;

    font-size: 9px;

    font-weight: 500;
}


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

@media (max-width: 1199px) {

    .gift-hero-left h1 {
        font-size: 42px;
    }

    .gift-hero-description {
        font-size: 16px;
    }

    .gift-compensation-card {
        max-width: 530px;
    }

    .gift-hero-stats {
        gap: 35px;
    }
}


@media (max-width: 991px) {

    .gift-hero-row {
        padding-top: 55px;
    }

    .gift-hero-left {

        padding-right: 0;

        margin-bottom: 45px;
    }

    .gift-hero-left h1 {
        font-size: 43px;
    }

    .gift-hero-description {
        max-width: 700px;
    }

    .gift-compensation-card {
        margin: 0 auto;
    }
}


@media (max-width: 767px) {

    .gift-breadcrumb-bar {
        height: auto;
        min-height: 38px;
    }

    .gift-breadcrumb {

        min-height: 38px;

        flex-wrap: wrap;

        padding: 7px 0;

        font-size: 11px;
    }

    .gift-hero-row {

        padding-top: 40px;

        padding-bottom: 45px;
    }

    .gift-rank-badge {

        font-size: 10px;

        padding: 0 11px;

        margin-bottom: 20px;
    }

    .gift-hero-left h1 {

        font-size: 34px;

        line-height: 1.17;

        letter-spacing: -1px;
    }

    .gift-hero-description {

        font-size: 14px;

        line-height: 1.7;
    }

    .gift-hero-buttons {

        gap: 10px;
    }

    .gift-demo-btn,
    .gift-pricing-btn,
    .gift-learn-btn {

        width: 100%;

        height: 54px;

        min-width: 0;

        font-size: 14px;
    }

    .gift-hero-stats {

        gap: 20px;

        justify-content: space-between;

        margin-top: 32px;
    }

    .gift-stat-number {
        font-size: 22px;
    }

    .gift-stat-label {
        font-size: 9px;
    }

    .gift-compensation-card {

        min-height: auto;

        padding: 27px 12px 20px;

        border-radius: 21px;
    }

    .gift-card-title {

        font-size: 14px;

        padding-right: 65px;
    }

    .gift-card-subtitle {
        font-size: 9px;
    }

    .gift-level-row {
        gap: 4px;
    }

    .gift-horizontal-arrow {
        font-size: 10px;
    }

    .gift-level-box {
        min-width: 65px;
    }

    .gift-card-legend {

        gap: 10px;

        padding: 0 8px;
    }

    .gift-card-legend>strong {
        font-size: 9px;
    }
}


@media (max-width: 480px) {

    .gift-hero-left h1 {
        font-size: 30px;
    }

    .gift-rank-badge {

        max-width: 100%;

        white-space: normal;

        line-height: 1.3;

        padding: 8px 11px;
    }

    .gift-hero-stats {
        gap: 10px;
    }

    .gift-stat-item {
        min-width: 0;
    }

    .gift-stat-number {
        font-size: 20px;
    }

    .gift-stat-label {
        font-size: 8px;
    }

    .gift-sla-badge {

        right: 10px;
        top: 11px;

        font-size: 9px;

        min-width: 82px;

        height: 27px;
    }

    .gift-level-box {
        min-width: 58px;
    }

    .gift-level-circle,
    .gift-node-circle,
    .gift-admin-circle {

        width: 43px;
        height: 43px;
    }

    .gift-level-box>span,
    .gift-member-node>span,
    .gift-admin-box>span {
        font-size: 8px;
    }

    .gift-level-box strong,
    .gift-member-node strong,
    .gift-admin-box strong {

        font-size: 8px;

        padding: 2px 6px;
    }

    .gift-card-legend {

        font-size: 8px;

        gap: 7px;
    }

    .gift-card-legend>strong {
        font-size: 8px;
    }

    .gift-percentage-box {
        min-height: 65px;
    }

    .gift-percentage-box strong {
        font-size: 15px;
    }

    .gift-percentage-box span {
        font-size: 8px;
    }
}

/* =========================================================
   GIFT DONATION MAIN STATS
========================================================= */

.gift-stats-section {
    position: relative;

    width: 100%;

    background: #0b0811;

    border-top: 1px solid rgba(255, 255, 255, .025);
    border-bottom: 1px solid rgba(255, 255, 255, .025);

    padding: 39px 0 42px;
}


.gift-main-stats {

    width: 100%;

    display: grid;

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

    align-items: center;

    text-align: center;
}


.gift-main-stat {

    position: relative;

    min-width: 0;
}


/* NUMBER */

.gift-main-counter {

    color: #d82a78;

    font-family: 'Poppins', sans-serif;

    font-size: 34px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.7px;

    min-height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* LABEL */

.gift-main-stat-label {

    margin-top: 13px;

    color: #73788e;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: .25px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .gift-stats-section {
        padding: 34px 0 37px;
    }

    .gift-main-stats {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 32px;
    }

    .gift-main-counter {
        font-size: 30px;
    }

}


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

@media (max-width: 575px) {

    .gift-stats-section {
        padding: 30px 0 34px;
    }

    .gift-main-stats {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 27px;
    }

    .gift-main-counter {
        font-size: 26px;
    }

    .gift-main-stat-label {
        margin-top: 9px;

        font-size: 10px;
    }

    .gift-main-stat:last-child {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 380px) {

    .gift-main-counter {
        font-size: 23px;
    }

    .gift-main-stat-label {
        font-size: 9px;
    }

}

/* =========================================================
   GIFT DONATION - DEFINITION SECTION
========================================================= */

.gift-definition-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 70px 0 88px;

    background: #030711;

    color: #fff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.gift-definition-heading {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.gift-definition-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 32px;

    padding: 0 15px;

    border: 1px solid rgba(226, 31, 117, .32);

    border-radius: 20px;

    background: rgba(226, 31, 117, .055);

    color: #ed5a9f;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .6px;
}


.gift-definition-badge-icon {

    width: 12px;

    height: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e84c96;

    color: #fff;

    font-size: 7px;
}


.gift-definition-heading h2 {

    margin: 27px 0 0;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 40px;

    line-height: 1.25;

    letter-spacing: -1.2px;

    font-weight: 800;
}


.gift-definition-heading h2 span {

    color: #ef5aa1;
}


.gift-definition-heading>p {

    max-width: 680px;

    margin: 17px auto 0;

    color: #929cb3;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   CONTENT
========================================================= */

.gift-definition-content {

    margin-top: 52px;
}


.gift-definition-column {

    padding: 0 10px;
}


.gift-definition-column h3 {

    margin: 0 0 17px;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 26px;

    line-height: 1.3;

    letter-spacing: -.7px;

    font-weight: 800;
}


.gift-definition-column p {

    margin: 0 0 21px;

    color: #93a0b8;

    font-size: 16px;

    line-height: 1.78;

    font-weight: 400;
}


.gift-definition-column p strong {

    color: #f3f3f5;

    font-weight: 700;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.gift-important-disclaimer {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 25px;

    padding: 17px 20px;

    border: 1px solid rgba(224, 31, 116, .34);

    border-left: 3px solid #d7196c;

    border-radius: 11px;

    background: rgba(224, 31, 116, .045);

    box-shadow:
        inset 0 0 25px rgba(224, 31, 116, .018);
}


.gift-disclaimer-icon {

    flex: 0 0 auto;

    width: 15px;

    height: 15px;

    margin-top: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d51b6c;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;
}


.gift-disclaimer-text {

    color: #99a4ba;

    font-size: 15px;

    line-height: 1.65;
}


.gift-disclaimer-text strong {

    color: #f0f0f3;

    font-weight: 800;
}


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

.gift-plan-comparison-grid {

    display: grid;

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

    gap: 14px;

    margin-top: 25px;
}


.gift-plan-comparison-card {

    min-height: 145px;

    padding: 16px 16px 15px;

    border: 1px solid rgba(221, 32, 116, .13);

    border-radius: 12px;

    background:
        linear-gradient(135deg,
            rgba(224, 31, 116, .065),
            rgba(224, 31, 116, .025));

    transition: all .25s ease;
}


.gift-plan-comparison-card:hover {

    transform: translateY(-3px);

    border-color: rgba(224, 31, 116, .3);

    background:
        linear-gradient(135deg,
            rgba(224, 31, 116, .09),
            rgba(224, 31, 116, .035));
}


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

.gift-plan-icon {

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    font-size: 15px;

    margin-bottom: 10px;
}


.gift-plan-icon-pink {

    color: #ef579e;

    border: 1px solid rgba(239, 87, 158, .28);

    background: rgba(239, 87, 158, .08);
}


.gift-plan-icon-purple {

    color: #a576ff;

    border: 1px solid rgba(165, 118, 255, .27);

    background: rgba(165, 118, 255, .08);
}


.gift-plan-icon-blue {

    color: #5b9bff;

    border: 1px solid rgba(91, 155, 255, .27);

    background: rgba(91, 155, 255, .08);
}


.gift-plan-icon-cyan {

    color: #18d1c4;

    border: 1px solid rgba(24, 209, 196, .27);

    background: rgba(24, 209, 196, .08);
}


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

.gift-plan-comparison-card h4 {

    margin: 0;

    color: #f4f4f5;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 800;
}


.gift-plan-comparison-card p {

    margin: 7px 0 0;

    color: #727b94;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE - 1199
========================================================= */

@media (max-width: 1199px) {

    .gift-definition-heading h2 {
        font-size: 36px;
    }

    .gift-definition-column h3 {
        font-size: 24px;
    }

    .gift-definition-column p {
        font-size: 15px;
    }

}


/* =========================================================
   RESPONSIVE - 991
========================================================= */

@media (max-width: 991px) {

    .gift-definition-section {
        padding: 60px 0 70px;
    }

    .gift-definition-content {
        margin-top: 42px;
    }

    .gift-definition-column {
        padding: 0;
    }

    .gift-beginner-column {
        margin-bottom: 50px;
    }

}


/* =========================================================
   RESPONSIVE - 767
========================================================= */

@media (max-width: 767px) {

    .gift-definition-section {
        padding: 50px 0 60px;
    }

    .gift-definition-heading h2 {

        margin-top: 22px;

        font-size: 29px;

        line-height: 1.3;

        letter-spacing: -.7px;
    }

    .gift-definition-heading>p {

        margin-top: 14px;

        font-size: 14px;

        line-height: 1.65;
    }

    .gift-definition-content {

        margin-top: 38px;
    }

    .gift-definition-column h3 {

        font-size: 22px;

        margin-bottom: 14px;
    }

    .gift-definition-column p {

        font-size: 14px;

        line-height: 1.75;

        margin-bottom: 18px;
    }

    .gift-important-disclaimer {

        padding: 15px;

        gap: 9px;
    }

    .gift-disclaimer-text {

        font-size: 13px;

        line-height: 1.65;
    }

    .gift-plan-comparison-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .gift-plan-comparison-card {

        min-height: auto;

        padding: 15px;
    }

}


/* =========================================================
   RESPONSIVE - 480
========================================================= */

@media (max-width: 480px) {

    .gift-definition-heading h2 {
        font-size: 25px;
    }

    .gift-definition-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-definition-column h3 {
        font-size: 20px;
    }

    .gift-definition-column p {
        font-size: 13px;
    }

    .gift-plan-comparison-card p {
        font-size: 12px;
    }

}

/* =========================================================
   GIFT DONATION - STEP BY STEP FLOW
========================================================= */

.gift-flow-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 70px 0 82px;

    background: #0b0811;

    color: #fff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.gift-flow-heading {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.gift-flow-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 32px;

    padding: 0 15px;

    border: 1px solid rgba(226, 31, 117, .32);

    border-radius: 20px;

    background: rgba(226, 31, 117, .055);

    color: #ed5a9f;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .6px;
}


.gift-flow-badge-icon {

    color: #ef5aa0;

    font-size: 14px;

    line-height: 1;
}


.gift-flow-heading h2 {

    margin: 27px 0 0;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 40px;

    line-height: 1.25;

    letter-spacing: -1.2px;

    font-weight: 800;
}


.gift-flow-heading h2 span {

    color: #ef5aa1;
}


.gift-flow-heading p {

    max-width: 670px;

    margin: 17px auto 0;

    color: #929cb3;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;
}


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

.gift-flow-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 57px;
}


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

.gift-flow-card {

    position: relative;

    min-height: 0;

    padding: 28px 28px 29px;

    border: 1px solid rgba(225, 32, 116, .14);

    border-radius: 17px;

    background:
        linear-gradient(135deg,
            rgba(224, 31, 116, .055),
            rgba(224, 31, 116, .025));

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

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


.gift-flow-card:hover {

    transform: translateY(-4px);

    border-color: rgba(225, 32, 116, .29);

    background:
        linear-gradient(135deg,
            rgba(224, 31, 116, .075),
            rgba(224, 31, 116, .035));
}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.gift-flow-number {

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #d72777,
            #ee579e);

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 7px 20px rgba(215, 39, 119, .18);
}


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

.gift-flow-card h3 {

    margin: 0 0 9px;

    color: #f5f4f6;

    font-family: 'Poppins', sans-serif;

    font-size: 18px;

    line-height: 1.25;

    letter-spacing: -.35px;

    font-weight: 800;
}


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

.gift-flow-card p {

    margin: 0;

    color: #929db5;

    font-size: 15px;

    line-height: 1.72;

    font-weight: 400;
}


.gift-flow-card p strong {

    color: #f1f1f3;

    font-weight: 700;
}


/* =========================================================
   BOTTOM META
========================================================= */

.gift-flow-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: #727b94;

    font-size: 12px;

    line-height: 1.3;
}


.gift-flow-meta i {

    color: #e64d98;

    font-size: 12px;
}


/* =========================================================
   FLOATING TOP BUTTON
========================================================= */

.gift-flow-top-btn {

    position: absolute;

    right: 22px;

    bottom: 23px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #d82777,
            #ed579d);

    color: #fff;

    text-decoration: none;

    font-size: 17px;

    box-shadow:
        0 8px 25px rgba(216, 39, 119, .24);

    transition: all .25s ease;

    z-index: 5;
}


.gift-flow-top-btn:hover {

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(216, 39, 119, .35);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .gift-flow-heading h2 {
        font-size: 36px;
    }

    .gift-flow-card {
        padding: 25px 23px 26px;
    }

    .gift-flow-card h3 {
        font-size: 17px;
    }

    .gift-flow-card p {
        font-size: 14px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .gift-flow-section {
        padding: 60px 0 70px;
    }

    .gift-flow-grid {

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

        gap: 18px;

        margin-top: 45px;
    }

    .gift-flow-card {
        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .gift-flow-section {
        padding: 50px 0 65px;
    }

    .gift-flow-heading h2 {

        margin-top: 22px;

        font-size: 29px;

        line-height: 1.3;

        letter-spacing: -.7px;
    }

    .gift-flow-heading p {

        margin-top: 14px;

        font-size: 14px;

        line-height: 1.65;
    }

    .gift-flow-grid {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 38px;
    }

    .gift-flow-card {

        padding: 23px;

        border-radius: 15px;
    }

    .gift-flow-number {

        width: 38px;

        height: 38px;

        margin-bottom: 15px;
    }

    .gift-flow-card h3 {

        font-size: 17px;

        line-height: 1.35;
    }

    .gift-flow-card p {

        font-size: 13px;

        line-height: 1.72;
    }

    .gift-flow-meta {

        margin-top: 18px;

        font-size: 11px;
    }

    .gift-flow-top-btn {

        right: 15px;

        bottom: 18px;

        width: 42px;

        height: 42px;

        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .gift-flow-heading h2 {
        font-size: 25px;
    }

    .gift-flow-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-flow-card {
        padding: 20px;
    }

    .gift-flow-card h3 {
        font-size: 16px;
    }

    .gift-flow-card p {
        font-size: 13px;
    }

}

/* =========================================================
   GIFT DONATION - EARNINGS SCENARIO
========================================================= */

.gift-earnings-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 70px 0 82px;

    background: #030711;

    color: #fff;
}


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

.gift-earnings-heading {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.gift-earnings-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 32px;

    padding: 0 15px;

    border: 1px solid rgba(226, 31, 117, .32);

    border-radius: 20px;

    background: rgba(226, 31, 117, .055);

    color: #ed5a9f;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .55px;
}


.gift-earnings-badge i {
    font-size: 11px;
}


.gift-earnings-heading h2 {

    margin: 27px 0 0;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 40px;

    line-height: 1.25;

    letter-spacing: -1.2px;

    font-weight: 800;
}


.gift-earnings-heading h2 span {
    color: #ef5aa1;
}


.gift-earnings-heading p {

    max-width: 700px;

    margin: 17px auto 0;

    color: #929cb3;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   TABLE OUTER BOX
========================================================= */

.gift-earnings-table-wrap {

    margin-top: 57px;

    overflow: hidden;

    border: 1px solid rgba(225, 32, 116, .13);

    border-radius: 17px;

    background: #020610;
}


/* TABLE TITLE */

.gift-earnings-table-title {

    height: 43px;

    display: flex;

    align-items: center;

    padding: 0 18px;

    color: #f5f4f6;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    font-weight: 800;

    background: #020610;
}


/* =========================================================
   TABLE SCROLL
========================================================= */

.gift-earnings-table-scroll {
    width: 100%;
    overflow-x: auto;
}


/* =========================================================
   TABLE
========================================================= */

.gift-earnings-table {

    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

    border-spacing: 0;

    table-layout: fixed;

    font-family: 'Poppins', sans-serif;
}


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

.gift-earnings-table thead th {

    height: 51px;

    padding: 0 18px;

    color: #ed5a9f;

    background: rgba(225, 32, 116, .075);

    border-bottom: 1px solid rgba(225, 32, 116, .12);

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    text-align: left;

    white-space: nowrap;
}


.gift-earnings-table thead th:nth-child(1) {
    width: 23%;
}

.gift-earnings-table thead th:nth-child(2) {
    width: 31%;
}

.gift-earnings-table thead th:nth-child(3) {
    width: 10%;
}

.gift-earnings-table thead th:nth-child(4) {
    width: 17%;
}

.gift-earnings-table thead th:nth-child(5) {
    width: 19%;
}


/* =========================================================
   TABLE BODY
========================================================= */

.gift-earnings-table tbody tr {

    border-bottom: 1px solid rgba(255, 255, 255, .055);

    transition: background .2s ease;
}


.gift-earnings-table tbody tr:hover {

    background: rgba(225, 32, 116, .025);
}


.gift-earnings-table tbody td {

    height: 52px;

    padding: 0 18px;

    color: #929db5;

    font-size: 15px;

    font-weight: 400;

    vertical-align: middle;

    white-space: nowrap;
}


.gift-earnings-table tbody td:nth-child(3) {
    color: #9ca7bc;
}


.gift-earnings-table tbody td:nth-child(4) {
    color: #aeb8ca;
}


/* =========================================================
   AMOUNT
========================================================= */

.gift-amount {

    color: #aeb8ca !important;

    font-weight: 700 !important;
}


/* =========================================================
   INCOME TYPE BADGES
========================================================= */

.gift-income-badge {

    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 0 11px;

    border-radius: 15px;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}


/* PINK */

.gift-badge-pink {

    color: #ed67a8;

    background: rgba(216, 39, 119, .13);
}


/* PURPLE */

.gift-badge-purple {

    color: #d39aff;

    background: rgba(126, 73, 203, .16);
}


/* VIOLET */

.gift-badge-violet {

    color: #aa8aff;

    background: rgba(91, 48, 184, .18);
}


/* BLUE */

.gift-badge-blue {

    color: #5ea7ff;

    background: rgba(40, 104, 195, .18);
}


/* CYAN */

.gift-badge-cyan {

    color: #1bd8d0;

    background: rgba(0, 172, 173, .17);
}


/* YELLOW */

.gift-badge-yellow {

    color: #f2bc00;

    background: rgba(216, 154, 0, .16);
}


/* ORANGE */

.gift-badge-orange {

    color: #ff9d45;

    background: rgba(198, 83, 22, .16);
}


/* =========================================================
   PROCESSING BADGES
========================================================= */

.gift-processing-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding: 0 11px;

    border-radius: 15px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}


/* GREEN */

.gift-processing-green {

    color: #00d19e;

    background: rgba(0, 190, 145, .13);
}


/* YELLOW */

.gift-processing-yellow {

    color: #f4b400;

    background: rgba(215, 151, 0, .16);
}


/* BLUE */

.gift-processing-blue {

    color: #4d9dff;

    background: rgba(40, 101, 190, .19);
}


/* =========================================================
   TOTAL ROW
========================================================= */

.gift-earnings-table tfoot tr {

    background: rgba(225, 32, 116, .055);

    border-top: 1px solid rgba(225, 32, 116, .12);
}


.gift-earnings-table tfoot td {

    height: 55px;

    padding: 0 18px;

    color: #f5f4f6;

    font-size: 15px;

    font-weight: 800;

    vertical-align: middle;

    white-space: nowrap;
}


.gift-total-amount {

    color: #9fa9bb !important;

    font-size: 16px !important;

    font-weight: 800 !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.gift-earnings-table-scroll::-webkit-scrollbar {
    height: 6px;
}

.gift-earnings-table-scroll::-webkit-scrollbar-track {
    background: #090711;
}

.gift-earnings-table-scroll::-webkit-scrollbar-thumb {

    background: rgba(225, 32, 116, .35);

    border-radius: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .gift-earnings-section {
        padding: 60px 0 70px;
    }

    .gift-earnings-heading h2 {
        font-size: 36px;
    }

    .gift-earnings-table-wrap {
        margin-top: 45px;
    }

}


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

@media (max-width: 767px) {

    .gift-earnings-section {
        padding: 50px 0 60px;
    }

    .gift-earnings-heading h2 {

        margin-top: 22px;

        font-size: 29px;

        line-height: 1.3;

        letter-spacing: -.7px;
    }

    .gift-earnings-heading p {

        margin-top: 14px;

        font-size: 14px;

        line-height: 1.65;
    }

    .gift-earnings-table-wrap {

        margin-top: 38px;

        border-radius: 13px;
    }

    .gift-earnings-table-title {

        height: 42px;

        padding: 0 15px;

        font-size: 14px;
    }

    .gift-earnings-table {
        min-width: 850px;
    }

    .gift-earnings-table thead th {

        height: 48px;

        padding: 0 15px;

        font-size: 11px;
    }

    .gift-earnings-table tbody td {

        height: 50px;

        padding: 0 15px;

        font-size: 13px;
    }

    .gift-earnings-table tfoot td {

        height: 52px;

        padding: 0 15px;

        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .gift-earnings-heading h2 {
        font-size: 25px;
    }

    .gift-earnings-badge {

        height: 30px;

        padding: 0 11px;

        font-size: 9px;
    }

    .gift-earnings-heading p {
        font-size: 13px;
    }

}

/* Network Growth Earnings Projection */

.gift-network-section {
    padding: 0 0 70px;
    background: #030711;
    color: #fff;
}

.gift-network-box {
    overflow: hidden;
    border: 1px solid rgba(225, 32, 116, .14);
    border-radius: 16px;
    background: #020610;
}

.gift-network-box h3 {
    margin: 0;
    padding: 0 0 0;
    color: #f5f4f6;
    font-size: 18px;
    font-weight: 800;
}

.gift-network-box {
    padding-top: 0;
}

.gift-network-box h3,
.gift-network-scenario {
    margin-left: 0;
    margin-right: 0;
}

.gift-network-box h3 {
    padding: 0;
    margin: 0;
    height: 47px;
    display: flex;
    align-items: center;
    padding-left: 0;
}

.gift-network-scenario {
    margin: 0;
    padding: 0 0 21px;
    color: #929db5;
    font-size: 14px;
    line-height: 1.6;
}

.gift-network-table-wrap {
    overflow-x: auto;
}

.gift-network-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    table-layout: fixed;
}

.gift-network-table th {
    height: 51px;
    padding: 0 18px;
    background: rgba(225, 32, 116, .075);
    border-bottom: 1px solid rgba(225, 32, 116, .12);
    color: #ed5a9f;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.gift-network-table th:nth-child(1) {
    width: 22%;
}

.gift-network-table th:nth-child(2) {
    width: 25%;
}

.gift-network-table th:nth-child(3) {
    width: 25%;
}

.gift-network-table th:nth-child(4) {
    width: 12%;
}

.gift-network-table th:nth-child(5) {
    width: 16%;
}

.gift-network-table td {
    height: 51px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    color: #93a0b8;
    font-size: 15px;
    white-space: nowrap;
}

.network-earning {
    color: #aeb8ca !important;
    font-weight: 700;
}

.gift-network-table tfoot td {
    height: 55px;
    background: rgba(225, 32, 116, .055);
    border-bottom: 0;
    color: #f5f4f6;
    font-size: 15px;
    font-weight: 800;
}

.gift-network-table tfoot .network-total {
    color: #aeb8ca;
    font-size: 16px;
}

/* Disclaimer */

.gift-income-disclaimer {
    margin-top: 25px;
    padding: 15px 22px 17px;
    border: 1px solid rgba(255, 174, 0, .3);
    border-left: 3px solid #f5a900;
    border-radius: 12px;
    background: rgba(128, 76, 0, .09);
}

.gift-income-disclaimer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f5a900;
    font-size: 15px;
    font-weight: 800;
}

.gift-income-disclaimer-title span {
    font-size: 16px;
}

.gift-income-disclaimer p {
    margin: 7px 0 0;
    color: #9aa5bb;
    font-size: 14px;
    line-height: 1.8;
}

/* Responsive */

@media (max-width: 991px) {

    .gift-network-section {
        padding-bottom: 60px;
    }

    .gift-network-box h3 {
        font-size: 17px;
    }

}

@media (max-width: 767px) {

    .gift-network-section {
        padding-bottom: 50px;
    }

    .gift-network-box {
        border-radius: 13px;
    }

    .gift-network-box h3 {
        height: auto;
        padding: 16px 15px 8px;
        font-size: 15px;
    }

    .gift-network-scenario {
        padding: 0 15px 16px;
        font-size: 13px;
    }

    .gift-network-table {
        min-width: 820px;
    }

    .gift-network-table th {
        height: 47px;
        padding: 0 14px;
        font-size: 11px;
    }

    .gift-network-table td {
        height: 49px;
        padding: 0 14px;
        font-size: 13px;
    }

    .gift-income-disclaimer {
        margin-top: 20px;
        padding: 14px 15px;
    }

    .gift-income-disclaimer-title {
        font-size: 14px;
    }

    .gift-income-disclaimer p {
        font-size: 12px;
        line-height: 1.7;
    }

}

/* Live Earnings Simulator */

.gift-simulator-section {
    padding: 0 0 75px;
    background: #030711;
    color: #fff;
}

.gift-simulator-box {
    position: relative;
    padding: 28px 32px 31px;
    border: 1px solid rgba(225, 32, 116, .25);
    border-radius: 25px;
    background: rgba(35, 17, 35, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

.gift-simulator-header h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #f5f4f6;
    font-size: 20px;
    font-weight: 800;
}

.gift-simulator-icon {
    color: #ef579e;
    font-size: 20px;
    line-height: 1;
}

.gift-simulator-header p {
    margin: 5px 0 0;
    color: #929db5;
    font-size: 14px;
    line-height: 1.5;
}

.gift-simulator-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 26px;
}

.gift-simulator-control label {
    display: block;
    margin-bottom: 8px;
    color: #929db5;
    font-size: 13px;
    font-weight: 600;
}

.gift-simulator-control input[type="range"] {
    width: 100%;
    height: 21px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border-radius: 20px;
    background: rgba(225, 32, 116, .11);
    outline: none;
}

.gift-simulator-control input[type="range"]::-webkit-slider-runnable-track {
    height: 21px;
    border-radius: 20px;
    background: rgba(225, 32, 116, .11);
}

.gift-simulator-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 1.5px;
    border: 0;
    border-radius: 50%;
    background: #e83d88;
    box-shadow: 0 0 12px rgba(232, 61, 136, .3);
    cursor: pointer;
}

.gift-simulator-control input[type="range"]::-moz-range-track {
    height: 21px;
    border: 0;
    border-radius: 20px;
    background: rgba(225, 32, 116, .11);
}

.gift-simulator-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #e83d88;
    box-shadow: 0 0 12px rgba(232, 61, 136, .3);
    cursor: pointer;
}

.gift-slider-value {
    margin-top: 13px;
    color: #ed579e;
    font-size: 15px;
    font-weight: 800;
}

.gift-simulator-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.gift-simulator-result {
    min-height: 89px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(225, 32, 116, .12);
    border-radius: 17px;
    background: rgba(225, 32, 116, .045);
    text-align: center;
}

.gift-simulator-result strong {
    color: #d82a78;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.gift-simulator-result span {
    margin-top: 11px;
    color: #727b94;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .2px;
}

.gift-simulator-total {
    border-color: rgba(225, 32, 116, .3);
}

.gift-simulator-total strong {
    color: #e34a92;
}

.gift-simulator-note {
    margin-top: 15px;
    color: #687189;
    font-size: 12px;
    font-style: italic;
}

/* Responsive */

@media (max-width: 991px) {

    .gift-simulator-results {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {

    .gift-simulator-section {
        padding-bottom: 55px;
    }

    .gift-simulator-box {
        padding: 22px 18px 24px;
        border-radius: 19px;
    }

    .gift-simulator-header h3 {
        font-size: 17px;
    }

    .gift-simulator-header p {
        font-size: 13px;
    }

    .gift-simulator-controls {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 23px;
    }

    .gift-simulator-results {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gift-simulator-result {
        min-height: 82px;
    }

    .gift-simulator-result strong {
        font-size: 18px;
    }

    .gift-simulator-result span {
        font-size: 9px;
    }

}

@media (max-width: 400px) {

    .gift-simulator-results {
        grid-template-columns: 1fr;
    }

}

/* Income Types */

.gift-income-types-section {
    position: relative;
    padding: 70px 0 95px;
    background: #0b0811;
    color: #fff;
}

.gift-income-types-heading {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.gift-income-types-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 15px;
    border: 1px solid rgba(225, 32, 116, .3);
    border-radius: 20px;
    background: rgba(225, 32, 116, .055);
    color: #ed5a9f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .55px;
}

.gift-income-types-badge span {
    font-size: 13px;
}

.gift-income-types-heading h2 {
    margin: 27px 0 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.gift-income-types-heading h2 span {
    color: #ef5aa1;
}

.gift-income-types-heading p {
    max-width: 690px;
    margin: 17px auto 0;
    color: #929cb3;
    font-size: 17px;
    line-height: 1.7;
}

.gift-income-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 57px;
}

.gift-income-type-card {
    min-height: 0;
    padding: 27px 27px 28px;
    border: 1px solid rgba(225, 32, 116, .13);
    border-radius: 17px;
    background: rgba(35, 17, 35, .72);
    transition: .25s ease;
}

.gift-income-type-card:hover {
    transform: translateY(-4px);
    border-color: rgba(225, 32, 116, .28);
    background: rgba(40, 18, 39, .8);
}

.gift-income-type-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: #dc2a78;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .7px;
}

.gift-income-type-label span {
    color: #e33b88;
    font-size: 13px;
}

.gift-income-type-card h3 {
    margin: 0 0 8px;
    color: #f5f4f6;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.3px;
}

.gift-income-type-card p {
    margin: 0;
    color: #929db5;
    font-size: 15px;
    line-height: 1.72;
}

.gift-income-type-card p strong {
    color: #f1f1f3;
    font-weight: 700;
}

.gift-income-type-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-top: 17px;
    padding: 0 12px;
    border: 1px solid rgba(225, 32, 116, .28);
    border-radius: 18px;
    background: rgba(225, 32, 116, .07);
    color: #ed5a9f;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

@media (max-width: 1199px) {

    .gift-income-types-heading h2 {
        font-size: 36px;
    }

    .gift-income-type-card {
        padding: 24px;
    }

    .gift-income-type-card p {
        font-size: 14px;
    }

}

@media (max-width: 991px) {

    .gift-income-types-section {
        padding: 60px 0 75px;
    }

    .gift-income-types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 45px;
    }

}

@media (max-width: 767px) {

    .gift-income-types-section {
        padding: 50px 0 60px;
    }

    .gift-income-types-heading h2 {
        margin-top: 22px;
        font-size: 29px;
        line-height: 1.3;
        letter-spacing: -.7px;
    }

    .gift-income-types-heading p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-income-types-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 38px;
    }

    .gift-income-type-card {
        padding: 23px;
        border-radius: 15px;
    }

    .gift-income-type-card h3 {
        font-size: 17px;
    }

    .gift-income-type-card p {
        font-size: 13px;
        line-height: 1.72;
    }

}

@media (max-width: 480px) {

    .gift-income-types-heading h2 {
        font-size: 25px;
    }

    .gift-income-types-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-income-type-card {
        padding: 20px;
    }

}

/* Benefits */

.gift-benefits-section {
    padding: 72px 0 95px;
    background: #030711;
    color: #fff;
}

.gift-benefits-heading {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.gift-benefits-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 15px;
    border: 1px solid rgba(225, 32, 116, .3);
    border-radius: 20px;
    background: rgba(225, 32, 116, .055);
    color: #ed5a9f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
}

.gift-benefits-badge span {
    font-size: 10px;
}

.gift-benefits-heading h2 {
    margin: 27px 0 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.gift-benefits-heading h2 span {
    color: #ef5aa1;
}

.gift-benefits-heading p {
    max-width: 700px;
    margin: 17px auto 0;
    color: #929cb3;
    font-size: 17px;
    line-height: 1.7;
}

.gift-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 58px;
}

.gift-benefit-card {
    padding: 28px 28px 25px;
    border: 1px solid rgba(225, 32, 116, .14);
    border-radius: 17px;
    background: rgba(35, 17, 35, .72);
    transition: .25s ease;
}

.gift-benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(225, 32, 116, .3);
}

.gift-benefit-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 11px;
    font-size: 22px;
}

.gift-benefit-pink {
    color: #f05aa2;
    border: 1px solid rgba(240, 90, 162, .3);
    background: rgba(225, 32, 116, .1);
}

.gift-benefit-green {
    color: #25d99c;
    border: 1px solid rgba(37, 217, 156, .25);
    background: rgba(37, 217, 156, .08);
}

.gift-benefit-yellow {
    color: #ffd66b;
    border: 1px solid rgba(255, 214, 107, .25);
    background: rgba(255, 180, 40, .1);
}

.gift-benefit-purple {
    color: #a984ff;
    border: 1px solid rgba(169, 132, 255, .25);
    background: rgba(126, 82, 220, .1);
}

.gift-benefit-cyan {
    color: #28d8ca;
    border: 1px solid rgba(40, 216, 202, .25);
    background: rgba(40, 216, 202, .08);
}

.gift-benefit-red {
    color: #ff6688;
    border: 1px solid rgba(255, 102, 136, .25);
    background: rgba(255, 70, 110, .08);
}

.gift-benefit-card h3 {
    margin: 0 0 8px;
    color: #f5f4f6;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.3px;
}

.gift-benefit-card p {
    margin: 0;
    color: #929db5;
    font-size: 15px;
    line-height: 1.7;
}

.gift-benefit-card p strong {
    color: #f2f2f4;
    font-weight: 700;
}

.gift-benefit-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    margin-bottom: 7px;
    color: #707991;
    font-size: 11px;
    font-weight: 600;
}

.gift-benefit-progress-head strong {
    color: #707991;
    font-weight: 600;
}

.gift-benefit-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(225, 32, 116, .16);
}

.gift-benefit-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #c91969, #ee61a8);
}

@media (max-width: 1199px) {

    .gift-benefits-heading h2 {
        font-size: 36px;
    }

    .gift-benefit-card {
        padding: 24px;
    }

    .gift-benefit-card p {
        font-size: 14px;
    }

}

@media (max-width: 991px) {

    .gift-benefits-section {
        padding: 60px 0 75px;
    }

    .gift-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 45px;
    }

}

@media (max-width: 767px) {

    .gift-benefits-section {
        padding: 50px 0 60px;
    }

    .gift-benefits-heading h2 {
        margin-top: 22px;
        font-size: 29px;
        line-height: 1.3;
    }

    .gift-benefits-heading p {
        margin-top: 14px;
        font-size: 14px;
    }

    .gift-benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 38px;
    }

    .gift-benefit-card {
        padding: 23px;
        border-radius: 15px;
    }

    .gift-benefit-card h3 {
        font-size: 17px;
    }

    .gift-benefit-card p {
        font-size: 13px;
        line-height: 1.72;
    }

}

@media (max-width: 480px) {

    .gift-benefits-heading h2 {
        font-size: 25px;
    }

    .gift-benefits-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-benefit-card {
        padding: 20px;
    }

}

/* Platform Features */

.gift-platform-section {
    padding: 80px 0 95px;
    background: #0b0811;
    color: #fff;
}

.gift-platform-heading {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.gift-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 15px;
    border: 1px solid rgba(225, 32, 116, .30);
    border-radius: 20px;
    background: rgba(225, 32, 116, .055);
    color: #ed5a9f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
}

.gift-platform-heading h2 {
    margin: 27px 0 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.gift-platform-heading h2 span {
    color: #ef5aa1;
}

.gift-platform-heading p {
    max-width: 680px;
    margin: 17px auto 0;
    color: #929cb3;
    font-size: 17px;
    line-height: 1.7;
}


/* Main box */

.gift-platform-box {
    margin-top: 57px;
    overflow: hidden;
    border: 1px solid rgba(225, 32, 116, .14);
    border-radius: 23px;
    background: rgba(35, 17, 35, .72);
}


/* Tabs */

.gift-platform-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    padding: 0 14px;
    background: rgba(225, 32, 116, .045);
    border-bottom: 1px solid rgba(225, 32, 116, .12);
    scrollbar-width: none;
}

.gift-platform-tabs::-webkit-scrollbar {
    display: none;
}

.gift-platform-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #8f9ab0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: .2s ease;
}

.gift-platform-tab i {
    margin-right: 4px;
}

.gift-platform-tab:hover {
    color: #ef5aa1;
    background: rgba(225, 32, 116, .025);
}

.gift-platform-tab.active {
    color: #ef5aa1;
    border-bottom-color: #d82a78;
    background: rgba(225, 32, 116, .055);
}


/* Content */

.gift-platform-content {
    display: none;
    padding: 60px 40px 30px;
}

.gift-platform-content.active {
    display: block;
    animation: giftFeatureFade .22s ease;
}

@keyframes giftFeatureFade {

    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.gift-platform-content h3 {
    margin: 0 0 20px;
    color: #f5f4f6;
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}


/* Feature row */

.gift-platform-feature {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.gift-platform-feature-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(225, 32, 116, .30);
    border-radius: 10px;
    background: rgba(225, 32, 116, .08);
    color: #ed579e;
    font-size: 16px;
}

.gift-platform-feature h4 {
    margin: 0 0 4px;
    color: #f4f3f5;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.gift-platform-feature p {
    margin: 0;
    color: #929db5;
    font-size: 14px;
    line-height: 1.7;
}

.gift-platform-feature p strong {
    color: #f2f2f4;
    font-weight: 700;
}


/* Tags */

.gift-platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.gift-platform-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    border: 1px solid rgba(225, 32, 116, .22);
    border-radius: 18px;
    background: rgba(225, 32, 116, .045);
    color: #8f99ae;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}


/* Code block */

.gift-code-box {
    width: 100%;
    margin: 28px 0 0;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 13px;
    background: #020711;
    scrollbar-width: thin;
}

.gift-code-box pre {
    min-width: 700px;
    margin: 0;
    padding: 20px 22px;
    color: #b7a6bc;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.75;
    white-space: pre;
}

.gift-code-box code {
    font-family: inherit;
}

.code-comment {
    color: #70677c;
}

.code-keyword {
    color: #db62a3;
}

.code-number {
    color: #f1a75d;
}


/* Bottom badges */

.gift-platform-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.gift-platform-badges span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 29px;
    padding: 0 11px;
    border: 1px solid rgba(225, 32, 116, .25);
    border-radius: 18px;
    background: rgba(225, 32, 116, .035);
    color: #8f99ae;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.gift-platform-badges i {
    color: #00dca5;
    font-size: 11px;
}


/* Responsive */

@media (max-width: 1199px) {

    .gift-platform-heading h2 {
        font-size: 36px;
    }

    .gift-platform-content {
        padding: 50px 32px 28px;
    }

}


@media (max-width: 991px) {

    .gift-platform-section {
        padding: 60px 0 75px;
    }

    .gift-platform-heading h2 {
        font-size: 34px;
    }

    .gift-platform-box {
        margin-top: 45px;
    }

}


@media (max-width: 767px) {

    .gift-platform-section {
        padding: 50px 0 60px;
    }

    .gift-platform-heading h2 {
        margin-top: 22px;
        font-size: 29px;
        line-height: 1.3;
        letter-spacing: -.7px;
    }

    .gift-platform-heading p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-platform-box {
        margin-top: 38px;
        border-radius: 15px;
    }

    .gift-platform-tabs {
        padding: 0 5px;
    }

    .gift-platform-tab {
        min-height: 42px;
        padding: 0 12px;
        font-size: 11px;
    }

    .gift-platform-content {
        padding: 30px 18px 22px;
    }

    .gift-platform-content h3 {
        margin-bottom: 18px;
        font-size: 17px;
    }

    .gift-platform-feature {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        margin-bottom: 20px;
    }

    .gift-platform-feature-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .gift-platform-feature h4 {
        font-size: 14px;
    }

    .gift-platform-feature p {
        font-size: 13px;
        line-height: 1.7;
    }

    .gift-code-box {
        margin-top: 20px;
    }

    .gift-code-box pre {
        padding: 16px;
        font-size: 10px;
    }

}


@media (max-width: 480px) {

    .gift-platform-heading h2 {
        font-size: 25px;
    }

    .gift-platform-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-platform-content {
        padding: 25px 15px 20px;
    }

    .gift-platform-tags {
        gap: 6px;
    }

    .gift-platform-tags span,
    .gift-platform-badges span {
        font-size: 9px;
    }

}

/* Developer Detail */

.gift-developer-section {
    padding: 85px 0 100px;
    background: #020711;
    color: #fff;
}

.gift-developer-heading {
    max-width: 1000px;
    margin: 0 auto 55px;
    text-align: center;
}

.gift-developer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 15px;
    border: 1px solid rgba(225, 32, 116, .30);
    border-radius: 20px;
    background: rgba(225, 32, 116, .055);
    color: #ed5a9f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
}

.gift-developer-heading h2 {
    margin: 27px 0 15px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.gift-developer-heading h2 span {
    color: #ef5aa1;
}

.gift-developer-heading p {
    max-width: 690px;
    margin: 0 auto;
    color: #929db5;
    font-size: 17px;
    line-height: 1.7;
}


/* Cards */

.gift-developer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.gift-developer-card {
    padding: 28px 27px 32px;
    border: 1px solid rgba(225, 32, 116, .13);
    border-radius: 17px;
    background: #1b0e1c;
}

.gift-developer-card h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: #ed5aa0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.gift-developer-card h3 i {
    font-size: 16px;
}

.gift-developer-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gift-developer-card li {
    position: relative;
    margin: 0 0 18px;
    padding-left: 21px;
    color: #929db5;
    font-size: 14px;
    line-height: 1.7;
}

.gift-developer-card li:last-child {
    margin-bottom: 0;
}

.gift-developer-card li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d7196d;
}

.gift-developer-card li strong {
    color: #f3f1f4;
    font-weight: 800;
}


/* Responsive */

@media (max-width: 991px) {

    .gift-developer-section {
        padding: 65px 0 80px;
    }

    .gift-developer-heading h2 {
        font-size: 34px;
    }

    .gift-developer-grid {
        gap: 22px;
    }

}


@media (max-width: 767px) {

    .gift-developer-section {
        padding: 55px 0 65px;
    }

    .gift-developer-heading {
        margin-bottom: 38px;
    }

    .gift-developer-heading h2 {
        margin-top: 20px;
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: -.6px;
    }

    .gift-developer-heading p {
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-developer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gift-developer-card {
        padding: 23px 20px 27px;
        border-radius: 15px;
    }

    .gift-developer-card h3 {
        font-size: 15px;
    }

    .gift-developer-card li {
        font-size: 13px;
        line-height: 1.7;
    }

}


@media (max-width: 480px) {

    .gift-developer-heading h2 {
        font-size: 24px;
    }

    .gift-developer-badge {
        font-size: 9px;
        padding: 0 11px;
    }

    .gift-developer-card {
        padding: 20px 17px 24px;
    }

    .gift-developer-card h3 {
        font-size: 14px;
    }

    .gift-developer-card li {
        padding-left: 18px;
        font-size: 13px;
    }

}

/* =========================================
   WHY MLM MIND SECTION
========================================= */

.gift-why-section {
    position: relative;
    padding: 105px 0 100px;
    background: #0d0912;
    overflow: hidden;
}

.gift-why-heading {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 58px;
}

.gift-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 27px;
    border: 1px solid rgba(216, 45, 125, .35);
    border-radius: 30px;
    background: rgba(216, 45, 125, .06);
    color: #ef63ad;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .8px;
}

.gift-why-badge i {
    font-size: 12px;
}

.gift-why-heading h2 {
    margin: 0;
    color: #f8f8fb;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.gift-why-heading h2 span {
    color: #ef63ad;
}

.gift-why-heading p {
    max-width: 650px;
    margin: 20px auto 0;
    color: #99a5bc;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}


/* =========================================
   BENEFIT CARDS
========================================= */

.gift-why-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gift-why-card {
    position: relative;
    min-height: 335px;
    padding: 27px 27px 30px;
    background: #1b101d;
    border: 1px solid rgba(216, 45, 125, .18);
    border-radius: 20px;
    overflow: hidden;
}

.gift-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(216, 45, 125, .45),
            transparent);
}

.gift-why-icon {
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 12px;
    background: linear-gradient(145deg,
            #e94c99,
            #d72d7d);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 8px 22px rgba(216, 45, 125, .18);
}

.gift-why-card h3 {
    margin: 0 0 9px;
    color: #f5f4f8;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.gift-why-card p {
    margin: 0;
    color: #9ca7bc;
    font-size: 14px;
    line-height: 1.72;
    font-weight: 400;
}

.gift-why-card strong {
    color: #f4f2f7;
    font-weight: 700;
}


/* =========================================
   STATISTICS
========================================= */

.gift-why-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 58px;
    padding: 0 15px;
}

.gift-why-stat {
    position: relative;
    text-align: center;
}


.gift-counter {
    min-height: 40px;
    color: #d92f80;
    font-family: 'Poppins', sans-serif;
    font-size: 31px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.5px;
}

.gift-counter::after {
    content: "+";
}

.gift-why-stat span {
    display: block;
    margin-top: 9px;
    color: #748097;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .35px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .gift-why-section {
        padding: 85px 0 80px;
    }

    .gift-why-heading h2 {
        font-size: 34px;
    }

    .gift-why-cards {
        grid-template-columns: 1fr;
        max-width: 650px;
        margin: 0 auto;
    }

    .gift-why-card {
        min-height: auto;
    }

}


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

@media (max-width: 767px) {

    .gift-why-section {
        padding: 70px 0 65px;
    }

    .gift-why-heading {
        margin-bottom: 40px;
    }

    .gift-why-heading h2 {
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: -.5px;
    }

    .gift-why-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .gift-why-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 0;
        margin-top: 45px;
        padding: 0;
    }

    .gift-why-stat:nth-child(3)::before {
        display: none;
    }

    .gift-counter {
        font-size: 28px;
    }

}


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

@media (max-width: 480px) {

    .gift-why-section {
        padding: 60px 0 55px;
    }

    .gift-why-heading h2 {
        font-size: 24px;
    }

    .gift-why-heading p {
        font-size: 13px;
    }

    .gift-why-card {
        padding: 23px;
        border-radius: 17px;
    }

    .gift-why-card h3 {
        font-size: 17px;
    }

    .gift-why-card p {
        font-size: 13px;
        line-height: 1.7;
    }

    .gift-counter {
        font-size: 25px;
    }

    .gift-why-stat span {
        font-size: 10px;
    }

}

/* =========================================
   CLIENT SUCCESS / CASE STUDY
========================================= */

.gift-case-section {
    position: relative;
    padding: 105px 0 95px;
    background: #020711;
    overflow: hidden;
}

.gift-case-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.gift-case-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 26px;
    border: 1px solid rgba(216, 45, 125, .35);
    border-radius: 30px;
    background: rgba(216, 45, 125, .06);
    color: #ef63ad;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
}

.gift-case-heading h2 {
    margin: 0;
    color: #f7f7fa;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -1px;
}

.gift-case-heading h2 span {
    color: #ef63ad;
}

.gift-case-heading p {
    max-width: 700px;
    margin: 20px auto 0;
    color: #98a5bc;
    font-size: 16px;
    line-height: 1.75;
}


/* Main Box */

.gift-case-box {
    padding: 32px;
    border: 1px solid rgba(216, 45, 125, .18);
    border-radius: 24px;
    background: #1b101d;
}

.gift-case-columns {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 30px;
}

.gift-case-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gift-case-card,
.gift-results-card {
    border: 1px solid rgba(216, 45, 125, .16);
    border-radius: 18px;
    background: #241526;
}

.gift-case-card {
    padding: 24px;
}

.gift-case-card-title,
.gift-results-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.gift-case-card-title h3,
.gift-results-title h3 {
    margin: 0;
    color: #f6f4f8;
    font-size: 18px;
    font-weight: 700;
}

.gift-case-card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 18px;
}

.challenge-icon {
    color: #ff636d;
    background: rgba(255, 76, 91, .10);
    border: 1px solid rgba(255, 76, 91, .25);
}

.implementation-icon {
    color: #32d9a0;
    background: rgba(50, 217, 160, .09);
    border: 1px solid rgba(50, 217, 160, .25);
}

.gift-case-card p {
    margin: 0 0 16px;
    color: #9ba7bc;
    font-size: 14px;
    line-height: 1.75;
}

.gift-case-card strong {
    color: #f5f3f7;
}

.gift-case-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.gift-case-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 11px;
    color: #9ca8bc;
    font-size: 14px;
    line-height: 1.5;
}

.challenge-list li i {
    color: #ff5362;
    font-size: 16px;
}

.success-list li i {
    color: #36d89e;
    font-size: 16px;
}


/* Results */

.gift-results-card {
    height: 100%;
    padding: 24px;
}

.gift-results-title i {
    color: #35dba2;
    font-size: 20px;
}

.gift-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gift-result-item {
    min-height: 115px;
    padding: 18px 12px;
    border-radius: 13px;
    background: #160c18;
    text-align: center;
}

.gift-result-item strong {
    display: block;
    margin-bottom: 8px;
    color: #df3b89;
    font-size: 22px;
    font-weight: 800;
}

.gift-result-item span {
    display: block;
    color: #98a4b9;
    font-size: 11px;
    font-weight: 600;
}

.gift-result-item small {
    display: block;
    margin-top: 7px;
    color: #18c997;
    font-size: 10px;
    font-weight: 600;
}


/* Quote */

.gift-case-quote {
    margin-top: 24px;
    padding: 20px 22px;
    border-left: 2px solid #df257b;
    border-radius: 12px;
    background: #21101f;
}

.gift-case-quote p {
    margin: 0 0 10px;
    color: #a5aec0;
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
}

.gift-case-quote strong {
    color: #e858a3;
    font-size: 12px;
}


/* =========================================
   TESTIMONIALS
========================================= */

.gift-testimonial-section {
    padding: 80px 10px 0;
    text-align: center;
}

.gift-testimonial-section>h2 {
    margin: 0 0 32px;
    color: #f6f6f9;
    font-size: 30px;
    font-weight: 800;
}

.gift-testimonial-slider {
    position: relative;
    max-width: 1190px;
    min-height: 210px;
    margin: 0 auto;
    overflow: hidden;
}

.gift-testimonial-slide {
    display: none;
    padding: 38px 34px;
    border: 1px solid rgba(216, 45, 125, .28);
    border-radius: 24px 0 0 24px;
    background: #1b101d;
    text-align: left;
}

.gift-testimonial-slide.active {
    display: block;
    animation: giftTestimonialFade .35s ease;
}

@keyframes giftTestimonialFade {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.gift-stars {
    margin-bottom: 20px;
    color: #ffad00;
    font-size: 17px;
    letter-spacing: 2px;
}

.gift-testimonial-slide>p {
    margin: 0 0 25px;
    color: #f0edf3;
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
    font-weight: 500;
}

.gift-client {
    display: flex;
    align-items: center;
    gap: 13px;
}

.gift-client-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ed4e9b, #d82c7d);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.gift-client strong {
    display: block;
    color: #f5f2f6;
    font-size: 14px;
}

.gift-client span {
    display: block;
    margin-top: 4px;
    color: #748199;
    font-size: 12px;
}


/* Controls */

.gift-testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.gift-testimonial-controls button {
    border: 0;
    cursor: pointer;
}

.gift-testimonial-prev,
.gift-testimonial-next {
    width: 39px;
    height: 39px;
    border: 1px solid rgba(216, 45, 125, .18) !important;
    border-radius: 50%;
    background: #1b101d;
    color: #aeb5c7;
    transition: .25s ease;
}

.gift-testimonial-prev:hover,
.gift-testimonial-next:hover {
    background: #d82d7d;
    color: #fff;
}

.gift-testimonial-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gift-testimonial-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    background: #30152d;
}

.gift-testimonial-dots button.active {
    width: 22px;
    border-radius: 10px;
    background: #ed4b9a;
}


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

@media (max-width: 991px) {

    .gift-case-section {
        padding: 80px 0;
    }

    .gift-case-heading h2 {
        font-size: 34px;
    }

    .gift-case-columns {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 767px) {

    .gift-case-section {
        padding: 65px 0;
    }

    .gift-case-heading {
        margin-bottom: 40px;
    }

    .gift-case-heading h2 {
        font-size: 28px;
    }

    .gift-case-heading p {
        font-size: 14px;
    }

    .gift-case-box {
        padding: 15px;
        border-radius: 18px;
    }

    .gift-case-card,
    .gift-results-card {
        padding: 20px;
    }

    .gift-results-grid {
        gap: 10px;
    }

    .gift-result-item {
        min-height: 105px;
        padding: 15px 8px;
    }

    .gift-testimonial-section {
        padding-top: 60px;
    }

    .gift-testimonial-section>h2 {
        font-size: 25px;
    }

}

@media (max-width: 480px) {

    .gift-case-heading h2 {
        font-size: 24px;
    }

    .gift-case-card p,
    .gift-case-list li,
    .gift-case-quote p {
        font-size: 13px;
    }

    .gift-result-item strong {
        font-size: 19px;
    }

    .gift-testimonial-slide {
        padding: 27px 22px;
    }

    .gift-testimonial-slide>p {
        font-size: 13px;
    }

}

/* =========================================================
   GIFT PLAN COMPARISON SECTION
   ========================================================= */

.gift-comparison-section {
    position: relative;
    padding: 110px 0 120px;
    background: var(--bg-soft);
    overflow: hidden;
}

.gift-comparison-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 58px;
}

.gift-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    margin-bottom: 28px;

    border: 1px solid rgba(232, 42, 139, .35);
    border-radius: 999px;

    background: rgba(232, 42, 139, .06);

    color: #ee63ad;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.gift-section-badge i {
    font-size: 12px;
}

.gift-comparison-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: clamp(38px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.gift-comparison-heading h2 span {
    color: #ee63ad;
}

.gift-comparison-heading p {
    max-width: 650px;
    margin: 22px auto 0;

    color: #9aa6bd;

    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}


/* TABLE WRAPPER */

.gift-comparison-table-wrap {
    width: 100%;

    border: 1px solid rgba(232, 42, 139, .16);
    border-radius: 20px;

    overflow: hidden;

    background: rgba(8, 7, 16, .72);
}


/* TABLE */

.gift-comparison-table {
    width: 100%;
    min-width: 950px;

    border-collapse: separate;
    border-spacing: 0;

    margin: 0;

    color: #9ba7bd;

    font-family: Poppins, sans-serif;
    font-size: 15px;
}


/* HEADER */

.gift-comparison-table thead th {
    height: 58px;

    padding: 0 18px;

    background: #26091d;

    border-bottom: 1px solid rgba(232, 42, 139, .18);

    color: #ee63ad;

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

    text-align: left;
    white-space: nowrap;
}

.gift-comparison-table thead th:first-child {
    width: 195px;
}

.gift-comparison-table thead th:nth-child(2) {
    background: #4a0d2d;
}

.gift-comparison-table thead th i {
    margin-right: 5px;
    font-size: 13px;
}


/* BODY */

.gift-comparison-table tbody td {
    height: 52px;

    padding: 0 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .055);

    color: #9ba7bd;

    font-size: 15px;
    font-weight: 400;

    vertical-align: middle;
}

.gift-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.gift-comparison-table tbody tr {
    transition: background .2s ease;
}

.gift-comparison-table tbody tr:hover {
    background: rgba(232, 42, 139, .035);
}


/* FIRST COLUMN */

.gift-comparison-table tbody td:first-child {
    color: #9ba7bd;
    font-weight: 500;
    white-space: nowrap;
}


/* GIFT DONATION COLUMN */

.gift-comparison-table tbody td:nth-child(2) {
    color: #9ba7bd;
}

.gift-comparison-table .gift-highlight {
    color: #ee63ad !important;
    font-weight: 600;
}


/* STATUS BADGES */

.gift-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* GREEN */

.gift-status-green {
    color: #25d89b;

    background: rgba(25, 203, 145, .13);
}


/* YELLOW */

.gift-status-yellow {
    color: #f6b900;

    background: rgba(246, 168, 0, .14);
}


/* RED */

.gift-status-red {
    color: #ed5c79;

    background: rgba(220, 38, 80, .13);
}


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

@media (max-width: 991px) {

    .gift-comparison-section {
        padding: 90px 0 100px;
    }

    .gift-comparison-heading {
        margin-bottom: 45px;
    }

    .gift-comparison-heading h2 {
        font-size: 38px;
    }

    .gift-comparison-heading p {
        font-size: 16px;
    }

    .gift-comparison-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .gift-comparison-table {
        min-width: 950px;
    }

}


@media (max-width: 768px) {

    .gift-comparison-section {
        padding: 75px 0 85px;
    }

    .gift-comparison-heading {
        margin-bottom: 35px;
    }

    .gift-section-badge {
        margin-bottom: 20px;
        padding: 7px 13px;
        font-size: 12px;
    }

    .gift-comparison-heading h2 {
        font-size: 32px;
        letter-spacing: -.8px;
    }

    .gift-comparison-heading p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-comparison-table-wrap {
        border-radius: 16px;
    }

}


@media (max-width: 480px) {

    .gift-comparison-section {
        padding: 65px 0 75px;
    }

    .gift-comparison-heading h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .gift-comparison-heading p {
        font-size: 13px;
    }

    .gift-comparison-table {
        min-width: 900px;
        font-size: 13px;
    }

    .gift-comparison-table thead th {
        height: 54px;
        padding: 0 14px;
        font-size: 12px;
    }

    .gift-comparison-table tbody td {
        height: 50px;
        padding: 0 14px;
        font-size: 13px;
    }

    .gift-status {
        padding: 5px 10px;
        font-size: 11px;
    }

}

/* =========================================================
   TRANSPARENCY / ETHICS / COMPLIANCE
   ========================================================= */

.gift-transparency-section {
    position: relative;
    padding: 105px 0 110px;
    background: var(--bg);
    overflow: hidden;
}

.gift-transparency-heading {
    max-width: 900px;
    margin: 0 auto 58px;
    text-align: center;
}

.gift-transparency-heading .gift-section-badge {
    margin-bottom: 28px;
}

.gift-transparency-heading h2 {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: clamp(38px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.2px;
}

.gift-transparency-heading h2 span {
    color: #ee63ad;
}

.gift-transparency-heading p {
    max-width: 650px;
    margin: 22px auto 0;
    color: #9ba7bd;
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}


/* MAIN GRID */

.gift-transparency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: start;
}


/* LEFT */

.gift-ethics-content {
    padding-top: 2px;
}

.gift-ethics-content h3,
.gift-legal-content h3 {
    margin: 0 0 20px;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
}

.gift-ethics-content p {
    margin: 0 0 22px;
    color: #9ba7bd;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.gift-ethics-content p strong {
    color: #fff;
    font-weight: 700;
}


/* CHECKLIST */

.gift-compliance-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
}

.gift-compliance-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #9ba7bd;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.gift-compliance-item i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #18d19b;
    font-size: 14px;
}


/* RIGHT */

.gift-legal-content h3 {
    margin-bottom: 20px;
}

.gift-country-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 17px 17px;

    margin-bottom: 14px;

    border: 1px solid rgba(232, 42, 139, .12);
    border-radius: 12px;

    background: #1a0e1b;

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

.gift-country-card:hover {
    border-color: rgba(232, 42, 139, .30);
    background: #201120;
    transform: translateY(-2px);
}


/* COUNTRY CODE */

.gift-country-code {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 39px;
    width: 39px;
    height: 39px;

    border-radius: 11px;

    background: linear-gradient(135deg,
            #d92b7b,
            #ef63ad);

    color: #fff;

    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 800;

    box-shadow: 0 7px 18px rgba(217, 43, 123, .18);
}


/* COUNTRY CONTENT */

.gift-country-info {
    min-width: 0;
}

.gift-country-info h4 {
    margin: 1px 0 5px;

    color: #fff;

    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.gift-country-info p {
    margin: 0;

    color: #7f8ba4;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}


/* IMPORTANT DISCLAIMER */

.gift-important-disclaimer {
    margin-top: 62px;

    padding: 18px 22px;

    border: 1px solid rgba(255, 178, 0, .55);
    border-left: 3px solid #ffb400;
    border-radius: 12px;

    background: rgba(35, 28, 19, .58);
}

.gift-disclaimer-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #ffb400;

    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.gift-disclaimer-title i {
    font-size: 14px;
}

.gift-important-disclaimer p {
    margin: 0;

    color: #9ba7bd;

    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}

.gift-important-disclaimer p strong {
    color: #fff;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .gift-transparency-section {
        padding: 85px 0 90px;
    }

    .gift-transparency-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .gift-legal-content {
        max-width: 100%;
    }

    .gift-transparency-heading {
        margin-bottom: 48px;
    }

}


@media (max-width: 768px) {

    .gift-transparency-section {
        padding: 75px 0 80px;
    }

    .gift-transparency-heading {
        margin-bottom: 40px;
    }

    .gift-transparency-heading h2 {
        font-size: 32px;
        letter-spacing: -.7px;
    }

    .gift-transparency-heading p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-ethics-content h3,
    .gift-legal-content h3 {
        font-size: 24px;
    }

    .gift-ethics-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .gift-compliance-item {
        font-size: 14px;
    }

    .gift-important-disclaimer {
        margin-top: 45px;
        padding: 17px 18px;
    }

}


@media (max-width: 480px) {

    .gift-transparency-section {
        padding: 65px 0 70px;
    }

    .gift-transparency-heading h2 {
        font-size: 28px;
    }

    .gift-transparency-heading p {
        font-size: 13px;
    }

    .gift-ethics-content h3,
    .gift-legal-content h3 {
        font-size: 22px;
    }

    .gift-country-card {
        padding: 14px;
        gap: 11px;
    }

    .gift-country-code {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 11px;
    }

    .gift-country-info h4 {
        font-size: 13px;
    }

    .gift-country-info p {
        font-size: 12px;
    }

    .gift-important-disclaimer p {
        font-size: 12px;
        line-height: 1.65;
    }

}

/* =========================================================
   GIFT DONATION FAQ SECTION
   ========================================================= */

.gift-faq-section {
    position: relative;
    padding: 105px 0 95px;
    background: var(--bg);
    overflow: hidden;
}


/* HEADING */

.gift-faq-heading {
    max-width: 930px;
    margin: 0 auto 58px;
    text-align: center;
}

.gift-faq-heading .gift-section-badge {
    margin-bottom: 28px;
}

.gift-faq-heading h2 {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: clamp(38px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.2px;
}

.gift-faq-heading h2 span {
    color: #ee63ad;
}

.gift-faq-heading p {
    max-width: 670px;
    margin: 22px auto 0;
    color: #9ba7bd;
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}


/* FAQ LIST */

.gift-faq-list {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
}


/* FAQ ITEM */

.gift-faq-item {
    margin-bottom: 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #190e1c;
    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.gift-faq-item.active {
    border-color: rgba(220, 43, 130, .45);
    background: #160d19;
}


/* QUESTION */

.gift-faq-question {
    width: 100%;
    min-height: 56px;

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

    gap: 20px;

    padding: 0 22px;

    border: 0;
    outline: none;

    background: #1c101f;
    color: #f5f3f7;

    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    text-align: left;
    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}

.gift-faq-question:hover {
    background: #211223;
}

.gift-faq-question span {
    display: block;
    flex: 1;
}

.gift-faq-question i {
    flex: 0 0 auto;

    color: #ee63ad;
    font-size: 12px;

    transition: transform .3s ease;
}


/* ACTIVE QUESTION */

.gift-faq-item.active .gift-faq-question {
    background: #251226;
    color: #ee63ad;
}

.gift-faq-item.active .gift-faq-question i {
    transform: rotate(180deg);
}


/* ANSWER */

.gift-faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;
}

.gift-faq-answer>p {
    min-height: 0;
    overflow: hidden;

    margin: 0;

    padding: 0 22px;

    color: #9ba7bd;

    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;

    opacity: 0;

    transition:
        opacity .25s ease,
        padding .35s ease;
}

.gift-faq-item.active .gift-faq-answer {
    grid-template-rows: 1fr;
}

.gift-faq-item.active .gift-faq-answer>p {
    padding: 17px 22px 20px;
    opacity: 1;
}

.gift-faq-answer strong {
    color: #fff;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .gift-faq-section {
        padding: 85px 0 80px;
    }

    .gift-faq-heading {
        margin-bottom: 45px;
    }

    .gift-faq-list {
        max-width: 100%;
    }

}


@media (max-width: 768px) {

    .gift-faq-section {
        padding: 75px 0 70px;
    }

    .gift-faq-heading {
        margin-bottom: 38px;
    }

    .gift-faq-heading h2 {
        font-size: 32px;
        letter-spacing: -.7px;
    }

    .gift-faq-heading p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-faq-question {
        min-height: 54px;
        padding: 0 17px;
        font-size: 14px;
    }

    .gift-faq-answer>p {
        padding-left: 17px;
        padding-right: 17px;

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

    .gift-faq-item.active .gift-faq-answer>p {
        padding: 15px 17px 18px;
    }

}


@media (max-width: 480px) {

    .gift-faq-section {
        padding: 65px 0 60px;
    }

    .gift-faq-heading h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .gift-faq-heading p {
        font-size: 13px;
    }

    .gift-faq-question {
        min-height: 52px;
        padding: 0 14px;
        font-size: 13px;
        gap: 12px;
    }

    .gift-faq-question i {
        font-size: 11px;
    }

    .gift-faq-answer>p {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
        line-height: 1.7;
    }

    .gift-faq-item.active .gift-faq-answer>p {
        padding: 14px 14px 17px;
    }

}

/* =========================================================
   FINAL CTA SECTION
   ========================================================= */

.gift-final-cta {
    position: relative;
    min-height: 500px;
    padding: 78px 0 132px;
    background:
        radial-gradient(circle at 42% 75%,
            rgba(193, 28, 117, .16),
            transparent 42%),
        #100719;
    overflow: hidden;
}


/* TOP BORDER */

.gift-final-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(224, 48, 139, .30);
}


/* SOFT GLOW */

.gift-cta-glow {
    position: absolute;
    width: 600px;
    height: 360px;
    left: 180px;
    bottom: -220px;

    background: rgba(218, 35, 133, .14);
    filter: blur(90px);
    border-radius: 50%;

    pointer-events: none;
}


/* MAIN GRID */

.gift-final-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 72px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.gift-final-content {
    max-width: 590px;
}

.gift-final-content .gift-section-badge {
    margin-bottom: 20px;
}


/* HEADING */

.gift-final-content h2 {
    margin: 0;

    color: #fff;

    font-family: Poppins, sans-serif;
    font-size: clamp(38px, 4vw, 43px);
    font-weight: 800;

    line-height: 1.07;
    letter-spacing: -1.2px;
}

.gift-final-content h2 span {
    color: #ee63ad;
}


/* DESCRIPTION */

.gift-final-content>p {
    max-width: 560px;

    margin: 20px 0 22px;

    color: #9ca8bd;

    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   FEATURES
   ========================================================= */

.gift-final-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;

    margin-bottom: 28px;
}

.gift-final-features>div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #9da9bf;

    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.gift-final-features i {
    color: #11c998;
    font-size: 14px;
    flex-shrink: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.gift-final-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 5px;
}

.gift-final-btn {
    min-height: 61px;

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

    gap: 10px;

    padding: 0 31px;

    border-radius: 32px;

    text-decoration: none;

    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;

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

.gift-final-btn:hover {
    transform: translateY(-2px);
}


/* WHITE BUTTON */

.gift-final-btn-light {
    color: #b81763;
    background: #fff;
}

.gift-final-btn-light:hover {
    color: #a50f55;
    background: #fff;
    box-shadow: 0 12px 30px rgba(255, 255, 255, .12);
}


/* PINK BUTTON */

.gift-final-btn-pink {
    color: #fff;
    background: #d01468;
}

.gift-final-btn-pink:hover {
    color: #fff;
    background: #e01a72;
    box-shadow: 0 12px 30px rgba(208, 20, 104, .25);
}


/* =========================================================
   PHONE
   ========================================================= */

.gift-final-phone {
    width: fit-content;

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

    gap: 10px;

    min-height: 61px;

    margin: 12px 0 0 125px;

    padding: 0 31px;

    border: 2px solid rgba(190, 178, 197, .50);
    border-radius: 34px;

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

    color: #fff;

    text-decoration: none;

    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;

    transition: all .25s ease;
}

.gift-final-phone:hover {
    color: #fff;
    border-color: #ee63ad;
    background: rgba(238, 99, 173, .08);
}


/* =========================================================
   RIGHT STATISTICS
   ========================================================= */

.gift-final-stats {
    width: 100%;
    max-width: 565px;
    margin-left: auto;
}


/* 2 COLUMN */

.gift-final-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}


/* STAT CARD */

.gift-final-stat {
    min-height: 120px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 19px 18px;

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

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

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

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

.gift-final-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(238, 99, 173, .35);
    background: rgba(255, 255, 255, .06);
}


/* ICON */

.gift-final-stat-icon {
    width: 45px;
    height: 45px;

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

    flex: 0 0 45px;

    border-radius: 12px;

    font-size: 19px;
}

.gift-stat-pink {
    color: #ed5ca8;
    background: rgba(222, 42, 128, .20);
}

.gift-stat-green {
    color: #2bd39e;
    background: rgba(24, 194, 148, .16);
}

.gift-stat-orange {
    color: #ffad16;
    background: rgba(255, 153, 0, .18);
}

.gift-stat-blue {
    color: #27d9e9;
    background: rgba(35, 181, 204, .16);
}


/* STAT TEXT */

.gift-final-stat div:last-child {
    min-width: 0;
}

.gift-final-stat strong {
    display: block;

    margin-bottom: 3px;

    color: #f5f2f7;

    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 800;

    line-height: 1.2;
}

.gift-final-stat span {
    display: block;

    color: #75829c;

    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   RATING
   ========================================================= */

.gift-final-rating {
    min-height: 83px;

    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 15px;
    padding: 16px 20px;

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

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

.gift-stars {
    display: flex;
    align-items: center;
    gap: 3px;

    white-space: nowrap;
}

.gift-stars i {
    color: #ffb000;
    font-size: 15px;
}

.gift-rating-text {
    min-width: 0;
}

.gift-rating-text strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.gift-rating-text span {
    display: block;

    color: #76839d;

    font-family: Poppins, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}


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

@media (max-width: 1100px) {

    .gift-final-grid {
        gap: 45px;
    }

    .gift-final-content h2 {
        font-size: 38px;
    }

    .gift-final-phone {
        margin-left: 90px;
    }

}


@media (max-width: 991px) {

    .gift-final-cta {
        padding: 75px 0 100px;
    }

    .gift-final-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .gift-final-content {
        max-width: 720px;
    }

    .gift-final-stats {
        max-width: 720px;
        margin-left: 0;
    }

}


@media (max-width: 768px) {

    .gift-final-cta {
        padding: 65px 0 80px;
    }

    .gift-final-content h2 {
        font-size: 34px;
    }

    .gift-final-content>p {
        font-size: 14px;
    }

    .gift-final-stat-grid {
        gap: 11px;
    }

    .gift-final-stat {
        min-height: 105px;
        padding: 15px;
        gap: 11px;
    }

    .gift-final-stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }

    .gift-final-stat strong {
        font-size: 16px;
    }

    .gift-final-stat span {
        font-size: 11px;
    }

    .gift-final-btn {
        min-height: 57px;
        padding: 0 24px;
        font-size: 14px;
    }

    .gift-final-phone {
        margin-left: 0;
    }

}


@media (max-width: 560px) {

    .gift-final-grid {
        gap: 35px;
    }

    .gift-final-content h2 {
        font-size: 29px;
        line-height: 1.13;
    }

    .gift-final-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .gift-final-btn {
        width: 100%;
    }

    .gift-final-phone {
        width: 100%;
        margin-top: 12px;
    }

    .gift-final-stat-grid {
        grid-template-columns: 1fr;
    }

    .gift-final-stat {
        min-height: 92px;
    }

    .gift-final-rating {
        padding: 15px;
    }

}


@media (max-width: 400px) {

    .gift-final-cta {
        padding: 55px 0 70px;
    }

    .gift-final-content h2 {
        font-size: 27px;
    }

    .gift-final-content>p {
        font-size: 13px;
    }

    .gift-final-features>div {
        font-size: 13px;
    }

    .gift-final-rating {
        gap: 11px;
    }

    .gift-stars i {
        font-size: 12px;
    }

}

/* =========================================================
   SCROLL BACK TO TOP + STICKY BOTTOM CTA
========================================================= */


/* =========================================================
   BACK TO TOP BUTTON
========================================================= */

.gift-back-to-top {
    position: fixed;

    right: 23px;
    bottom: 23px;

    width: 45px;
    height: 45px;

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

    border: 0;
    border-radius: 50%;

    background: linear-gradient(120deg, var(--violet) 0%, var(--cyan) 100%);
    color: #fff;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    z-index: 9997;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    box-shadow:
        0 8px 25px rgba(220, 60, 140, .30);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;
}


/* SHOW */

.gift-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* HOVER */

.gift-back-to-top:hover {
    background: #7c5cfc;
    transform: translateY(-3px);
}


/* =========================================================
   STICKY BOTTOM BAR
========================================================= */

.gift-scroll-bottom-bar {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 70px;

    display: flex;
    align-items: center;

    background: #100b16;

    border-top: 1px solid rgba(255, 255, 255, .10);

    box-shadow:
        0 -8px 30px rgba(0, 0, 0, .25);

    z-index: 9996;

    opacity: 0;
    visibility: hidden;

    transform: translateY(100%);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}


/* SHOW AFTER SCROLL */

.gift-scroll-bottom-bar.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


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

.gift-scroll-bar-inner {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    padding: 10px 24px;

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

    gap: 25px;
}


/* =========================================================
   MESSAGE
========================================================= */

.gift-scroll-message {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #9da8bd;

    font-family: Poppins, sans-serif;
    font-size: 14px;

    line-height: 1.4;

    white-space: nowrap;
}

.gift-scroll-message i {
    margin-right: 1px;

    color: #aeb9cc;

    font-size: 15px;
}

.gift-scroll-message strong {
    color: #f2eff5;

    font-weight: 700;
}

.gift-scroll-message span {
    color: #9ba6ba;

    font-weight: 400;
}


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

.gift-scroll-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* =========================================================
   BOOK FREE DEMO
========================================================= */

.gift-scroll-demo-btn {
    min-width: 146px;
    height: 42px;

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

    padding: 0 20px;

    border-radius: 24px;

    background: #26d9e8;
    color: #fff;

    text-decoration: none;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 700;

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

.gift-scroll-demo-btn:hover {
    color: #fff;

    background: #7c5cfc;

    transform: translateY(-1px);

    box-shadow:
        0 8px 22px rgba(206, 23, 104, .25);
}


/* =========================================================
   CALL NOW
========================================================= */

.gift-scroll-call-btn {
    min-width: 97px;
    height: 42px;

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

    padding: 0 18px;

    border: 2px solid rgba(188, 181, 193, .48);
    border-radius: 24px;

    background: rgba(255, 255, 255, .035);
    color: #f4f1f5;

    text-decoration: none;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;

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

.gift-scroll-call-btn:hover {
    color: #fff;

    border-color: #7c5cfc;

    background: rgba(238, 99, 173, .08);

    transform: translateY(-1px);
}


/* =========================================================
   DESKTOP POSITION
========================================================= */

@media (min-width: 992px) {

    .gift-scroll-bottom-bar {
        padding-left: 0;
        padding-right: 0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .gift-scroll-bottom-bar {
        min-height: 64px;
    }

    .gift-scroll-bar-inner {
        padding: 9px 18px;
    }

    .gift-scroll-message {
        font-size: 13px;
    }

    .gift-scroll-demo-btn {
        min-width: 130px;
    }

    .gift-scroll-call-btn {
        min-width: 90px;
    }

    .gift-back-to-top {
        right: 18px;
        bottom: 76px;
    }

}


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

@media (max-width: 767px) {

    .gift-scroll-bottom-bar {
        min-height: auto;
    }

    .gift-scroll-bar-inner {
        padding: 9px 12px;

        gap: 10px;
    }

    .gift-scroll-message {
        min-width: 0;

        font-size: 11px;

        white-space: normal;

        line-height: 1.35;
    }

    .gift-scroll-message i {
        display: none;
    }

    .gift-scroll-message strong {
        display: block;
    }

    .gift-scroll-message span {
        display: block;
    }

    .gift-scroll-actions {
        gap: 6px;
    }

    .gift-scroll-demo-btn {
        min-width: auto;

        height: 38px;

        padding: 0 12px;

        font-size: 11px;
    }

    .gift-scroll-call-btn {
        min-width: auto;

        height: 38px;

        padding: 0 12px;

        font-size: 11px;
    }

    .gift-back-to-top {
        right: 12px;
        bottom: 76px;

        width: 42px;
        height: 42px;

        font-size: 16px;
    }

}


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

@media (max-width: 480px) {

    .gift-scroll-bar-inner {
        padding: 8px 10px;
    }

    .gift-scroll-message {
        max-width: 46%;

        font-size: 10px;
    }

    .gift-scroll-demo-btn {
        height: 36px;

        padding: 0 10px;

        font-size: 10px;
    }

    .gift-scroll-call-btn {
        height: 36px;

        padding: 0 10px;

        font-size: 10px;
    }

    .gift-back-to-top {
        width: 40px;
        height: 40px;

        right: 10px;
        bottom: 70px;
    }

}

/*----------------------------- Hybrid MLM Software --------------------------*/
/* =========================================================
   HYBRID MLM HERO - SCREENSHOT MATCH
========================================================= */

.hybrid-hero {
    position: relative;
    min-height: 493px;
    padding: 22px 0 28px;
    overflow: hidden;
    background:
        radial-gradient(500px 420px at 82% 48%,
            rgba(124, 92, 252, .11),
            transparent 70%),
        #05030d;
}

.hybrid-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .015) 1px,
            transparent 1px),
        linear-gradient(rgba(255, 255, 255, .015) 1px,
            transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, .8),
            transparent 85%);
}

.hybrid-hero-glow {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -160px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(124, 92, 252, .16),
            transparent 68%);
    filter: blur(35px);
    pointer-events: none;
}

.hybrid-hero-row {
    position: relative;
    z-index: 2;
}

.hybrid-hero-left {
    padding-right: 38px;
    padding-top: 0;
}


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

.hybrid-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(124, 92, 252, .38);
    background: rgba(124, 92, 252, .07);
    color: #956cff;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .15px;
    margin-bottom: 21px;
}

.hybrid-rank-badge i {
    width: 14px;
    height: 14px;
}


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

.hybrid-title {
    margin: 0 0 23px;
    max-width: 610px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.6rem, 4.25vw, 3.18rem);
    line-height: 1.025;
    letter-spacing: -1.7px;
    font-weight: 800;
}

.hybrid-title span {
    color: #9157f5;
}

.hybrid-title strong {
    color: #fff;
    font-weight: 800;
}


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

.hybrid-description {
    max-width: 560px;
    margin: 0;
    color: #9ba5bd;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.78;
    font-weight: 400;
}

.hybrid-description b {
    color: #fff;
    font-weight: 700;
}

.hybrid-description em {
    color: #8e98ae;
    font-style: italic;
}


/* ================= BUTTONS ================= */

.hybrid-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}

.hybrid-btn {
    min-height: 61px;
    padding: 0 30px;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    transition: .25s ease;
}

.hybrid-btn i {
    width: 17px;
    height: 17px;
}

.hybrid-btn-primary {
    color: #fff;
    background: #8d55f2;
    box-shadow: 0 12px 32px rgba(124, 92, 252, .25);
}

.hybrid-btn-primary:hover {
    color: #fff;
    background: #985fff;
    transform: translateY(-2px);
}

.hybrid-btn-price {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .06);
}

.hybrid-btn-price:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .48);
    background: rgba(255, 255, 255, .09);
    transform: translateY(-2px);
}

.hybrid-btn-learn {
    color: #955cff;
    border: 2px solid #8750f6;
    background: transparent;
    padding: 0 29px;
}

.hybrid-btn-learn:hover {
    color: #fff;
    background: rgba(124, 92, 252, .12);
    transform: translateY(-2px);
}


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

.hybrid-stats {
    display: flex;
    align-items: flex-start;
    gap: 49px;
    margin-top: 43px;
}

.hybrid-stat strong {
    display: block;
    color: #8d4ff0;
    font-family: 'Outfit', sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 11px;
}

.hybrid-stat span {
    display: block;
    color: #65728c;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .25px;
}


/* =========================================================
   RIGHT COMPENSATION CARD
========================================================= */

.hybrid-hero-right {
    padding-left: 10px;
}

.hybrid-plan-card {
    position: relative;
    width: 100%;
    min-height: 333px;
    margin-top: 18px;
    padding: 31px 21px 27px;
    border: 1px solid rgba(124, 92, 252, .22);
    border-radius: 26px;
    background:
        linear-gradient(160deg,
            rgba(11, 8, 24, .98),
            rgba(8, 6, 18, .98));
    box-shadow:
        0 0 35px rgba(124, 92, 252, .07),
        inset 0 0 45px rgba(124, 92, 252, .025);
}


/* SLA */

.hybrid-sla {
    position: absolute;
    top: 17px;
    right: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 211, 157, .34);
    background: rgba(0, 211, 157, .06);
    color: #00bd91;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
}


/* CARD HEADING */

.hybrid-plan-card h3 {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}

.hybrid-plan-subtitle {
    margin: 10px 0 27px;
    text-align: center;
    color: #8f55ed;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .35px;
}


/* ================= FLOW NODE ================= */

.hybrid-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hybrid-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hybrid-icon i {
    width: 24px;
    height: 24px;
    color: #fff;
}

.hybrid-purple {
    background: linear-gradient(145deg, #9d58ff, #6935dc);
    border: 2px solid rgba(191, 143, 255, .65);
    box-shadow: 0 0 24px rgba(124, 92, 252, .45);
}

.hybrid-blue {
    background: linear-gradient(145deg, #3989ff, #2163df);
    border: 2px solid rgba(90, 154, 255, .55);
    box-shadow: 0 0 22px rgba(38, 113, 255, .32);
}

.hybrid-flow-node>span {
    margin-top: 7px;
    color: #657089;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 500;
}

.hybrid-flow-node>b,
.hybrid-wallet>b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0, 206, 157, .08);
    border: 1px solid rgba(0, 206, 157, .25);
    color: #00b98d;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}


/* ================= ARROWS ================= */

.hybrid-arrow {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8952ed;
    font-size: 21px;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.dual-arrow {
    height: 26px;
    font-size: 18px;
}


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

.hybrid-income-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 470px;
    margin: 0 auto;
}

.hybrid-income-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hybrid-income-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 13, 35, .85);
}

.hybrid-income-icon i {
    width: 21px;
    height: 21px;
}

.purple-border {
    border: 2px solid #7138d6;
    color: #a15bff;
    box-shadow: 0 0 18px rgba(124, 92, 252, .12);
}

.green-border {
    border: 2px solid #15aa7b;
    color: #2cdda6;
}

.amber-border {
    border: 2px solid #a16b05;
    color: #ffbd2f;
}

.cyan-border {
    border: 2px solid #007d9a;
    color: #26d9e8;
}

.hybrid-income-item>span {
    margin-top: 6px;
    color: #68738b;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
}

.hybrid-income-item>b {
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 205, 157, .07);
    border: 1px solid rgba(0, 205, 157, .23);
    color: #00b991;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}


/* ================= WALLET ================= */

.hybrid-wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hybrid-wallet-icon {
    width: 52px;
    height: 52px;
    background: rgba(91, 54, 170, .16);
    border: 2px solid #633bb2;
    color: #a25cff;
    box-shadow: 0 0 18px rgba(124, 92, 252, .13);
}

.hybrid-wallet>span {
    margin-top: 6px;
    color: #68738b;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
}


/* ================= BOTTOM BOXES ================= */

.hybrid-bottom-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}

.hybrid-bottom-boxes>div {
    min-height: 50px;
    padding: 9px 7px;
    border-radius: 11px;
    border: 1px solid rgba(124, 92, 252, .16);
    background: rgba(124, 92, 252, .055);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hybrid-bottom-boxes strong {
    color: #9b58fa;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.hybrid-bottom-boxes span {
    margin-top: 7px;
    color: #657089;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}


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

@media (max-width: 1199px) {

    .hybrid-title {
        font-size: 2.75rem;
    }

    .hybrid-description {
        font-size: 15px;
    }

    .hybrid-buttons {
        gap: 8px;
    }

    .hybrid-btn {
        padding: 0 22px;
        font-size: 14px;
    }

    .hybrid-stats {
        gap: 30px;
    }

    .hybrid-hero-left {
        padding-right: 20px;
    }

}


@media (max-width: 991px) {

    .hybrid-hero {
        min-height: auto;
        padding: 135px 0 60px;
    }

    .hybrid-hero-left {
        padding-right: 0;
        margin-bottom: 45px;
    }

    .hybrid-title {
        max-width: 760px;
        font-size: clamp(2.5rem, 7vw, 3.4rem);
    }

    .hybrid-description {
        max-width: 700px;
    }

    .hybrid-hero-right {
        padding-left: 0;
    }

    .hybrid-plan-card {
        max-width: 620px;
        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .hybrid-hero {
        padding: 115px 0 45px;
    }

    .hybrid-rank-badge {
        font-size: 10px;
        padding: 8px 11px;
        max-width: 100%;
    }

    .hybrid-rank-badge span {
        white-space: nowrap;
    }

    .hybrid-title {
        font-size: clamp(2.15rem, 10vw, 2.85rem);
        line-height: 1.06;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .desktop-break {
        display: none;
    }

    .hybrid-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .hybrid-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .hybrid-btn {
        width: 100%;
        min-height: 52px;
        padding: 0 12px;
        font-size: 13px;
    }

    .hybrid-btn-learn {
        grid-column: 1 / -1;
    }

    .hybrid-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 35px;
    }

    .hybrid-stat strong {
        font-size: 22px;
    }

    .hybrid-stat span {
        font-size: 9px;
        line-height: 1.3;
    }

    .hybrid-plan-card {
        padding: 27px 12px 18px;
        border-radius: 20px;
    }

    .hybrid-sla {
        top: 12px;
        right: 12px;
        font-size: 9px;
        padding: 6px 8px;
    }

    .hybrid-plan-card h3 {
        font-size: 15px;
        padding-right: 65px;
    }

    .hybrid-plan-subtitle {
        font-size: 9px;
        margin-bottom: 22px;
    }

    .hybrid-income-grid {
        gap: 5px;
    }

    .hybrid-income-icon,
    .hybrid-icon,
    .hybrid-wallet-icon {
        width: 46px;
        height: 46px;
    }

    .hybrid-income-icon i,
    .hybrid-icon i {
        width: 19px;
        height: 19px;
    }

    .hybrid-income-item>span {
        font-size: 8px;
    }

    .hybrid-income-item>b {
        font-size: 8px;
        padding: 3px 5px;
    }

    .hybrid-bottom-boxes {
        gap: 5px;
        margin-top: 16px;
    }

}


@media (max-width: 420px) {

    .hybrid-hero {
        padding-top: 105px;
    }

    .hybrid-rank-badge {
        font-size: 8.5px;
    }

    .hybrid-title {
        font-size: 2.05rem;
    }

    .hybrid-description {
        font-size: 13px;
    }

    .hybrid-stats {
        gap: 5px;
    }

    .hybrid-stat strong {
        font-size: 20px;
    }

    .hybrid-stat span {
        font-size: 8px;
    }

    .hybrid-plan-card {
        padding-left: 8px;
        padding-right: 8px;
    }

    .hybrid-plan-subtitle {
        font-size: 8px;
    }

    .hybrid-income-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hybrid-income-icon,
    .hybrid-icon,
    .hybrid-wallet-icon {
        width: 42px;
        height: 42px;
    }

    .hybrid-income-item>span {
        font-size: 7px;
    }

    .hybrid-bottom-boxes strong {
        font-size: 14px;
    }

    .hybrid-bottom-boxes span {
        font-size: 7px;
    }

}

/* =========================================================
   HYBRID STATS STRIP
========================================================= */

.hybrid-stats-strip {
    width: 100%;
    min-height: 162px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;

    background: #05030d;

    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);

    padding: 25px 40px;
}

.hybrid-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.hybrid-stat-box strong {
    display: block;

    color: #8d4ff0;

    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -.5px;

    margin-bottom: 18px;
}

.hybrid-stat-box span {
    display: block;

    color: #64728b;

    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    line-height: 1;

    font-weight: 600;
    letter-spacing: .25px;
}


/* ================= TABLET ================= */

@media (max-width: 991px) {

    .hybrid-stats-strip {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 30px;
        padding: 30px 20px;
    }

    .hybrid-stat-box strong {
        font-size: 30px;
    }

}


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

@media (max-width: 600px) {

    .hybrid-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        min-height: auto;
        padding: 32px 12px;
        row-gap: 32px;
    }

    .hybrid-stat-box:last-child {
        grid-column: 1 / -1;
    }

    .hybrid-stat-box strong {
        font-size: 27px;
        margin-bottom: 12px;
    }

    .hybrid-stat-box span {
        font-size: 10px;
    }

}

/* =========================================================
   HYBRID MLM — DEFINITION & OVERVIEW
========================================================= */

.hybrid-overview {
    position: relative;
    overflow: hidden;

    padding: 49px 0 57px;

    background: #05030d;
    color: #fff;
}


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

.hybrid-overview-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 57px;
}

.hybrid-overview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 14px;

    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 999px;

    background: rgba(124, 92, 252, .07);

    color: #955cff;

    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .25px;
}

.hybrid-overview-badge i {
    width: 13px;
    height: 13px;
}


.hybrid-overview-header h2 {
    margin: 30px 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -1.1px;
    font-weight: 800;
}

.hybrid-overview-header h2 span {
    color: #9256f4;
}


.hybrid-overview-header>p {
    max-width: 720px;
    margin: 0 auto;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}


/* ================= TWO COLUMNS ================= */

.hybrid-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 54px;

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


.hybrid-overview-column {
    min-width: 0;
}


.hybrid-overview-column h3 {
    margin: 0 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -.65px;
    font-weight: 800;
}


.hybrid-overview-column p {
    margin: 0 0 18px;

    color: #9aa5bb;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.73;
    font-weight: 400;
}


.hybrid-overview-column p strong {
    color: #f4f3f7;
    font-weight: 700;
}


.hybrid-overview-column p em {
    color: #a0aabd;
    font-style: italic;
}


/* ================= NUMBERED LIST ================= */

.hybrid-architecture-list {
    margin: 8px 0 20px;
    padding-left: 35px;

    color: #9aa5bb;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.hybrid-architecture-list li {
    padding-left: 1px;
    margin-bottom: 7px;
}

.hybrid-architecture-list li::marker {
    color: #a8afbf;
}

.hybrid-architecture-list strong {
    color: #f4f3f7;
    font-weight: 700;
}


/* ================= EEAT NOTE ================= */

.hybrid-eeat-note {
    position: relative;

    margin-top: 14px;
    padding: 17px 20px 18px 22px;

    border: 1px solid rgba(124, 92, 252, .27);
    border-left: 3px solid #9155f3;

    border-radius: 11px;

    background: rgba(124, 92, 252, .065);

    color: #9ba5bb;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.72;
}


.hybrid-eeat-note strong {
    color: #f4f3f7;
    font-weight: 700;
}


.hybrid-eeat-note a {
    color: #965bfa;
    text-decoration: none;
}

.hybrid-eeat-note a:hover {
    color: #ad7aff;
    text-decoration: underline;
}


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

@media (max-width: 1199px) {

    .hybrid-overview-grid {
        padding: 0 20px;
        column-gap: 35px;
    }

    .hybrid-overview-column h3 {
        font-size: 25px;
    }

}


@media (max-width: 991px) {

    .hybrid-overview {
        padding: 45px 0 50px;
    }

    .hybrid-overview-header {
        padding: 0 20px;
        margin-bottom: 45px;
    }

    .hybrid-overview-header h2 {
        font-size: 35px;
    }

    .hybrid-overview-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
        padding: 0 25px;
    }

}


@media (max-width: 767px) {

    .hybrid-overview {
        padding: 40px 0 45px;
    }

    .hybrid-overview-header {
        margin-bottom: 38px;
    }

    .hybrid-overview-badge {
        font-size: 10px;
        padding: 7px 11px;
    }

    .hybrid-overview-header h2 {
        margin-top: 23px;
        font-size: 29px;
        letter-spacing: -.7px;
    }

    .hybrid-overview-header>p {
        font-size: 14px;
        line-height: 1.7;
    }

    .overview-desktop-break {
        display: none;
    }

    .hybrid-overview-grid {
        padding: 0 18px;
        row-gap: 38px;
    }

    .hybrid-overview-column h3 {
        font-size: 23px;
        line-height: 1.25;
    }

    .hybrid-overview-column p {
        font-size: 14px;
        line-height: 1.75;
    }

    .hybrid-architecture-list {
        font-size: 13.5px;
        line-height: 1.7;
        padding-left: 29px;
    }

    .hybrid-eeat-note {
        padding: 15px 15px 16px 17px;
        font-size: 12.5px;
        line-height: 1.7;
    }

}


@media (max-width: 420px) {

    .hybrid-overview-header h2 {
        font-size: 26px;
    }

    .hybrid-overview-column h3 {
        font-size: 21px;
    }

    .hybrid-overview-column p {
        font-size: 13px;
    }

    .hybrid-architecture-list {
        font-size: 12.5px;
    }

}

/* =========================================================
   MOST POPULAR HYBRID MLM COMBINATIONS
========================================================= */

.hybrid-combinations {
    position: relative;
    overflow: hidden;

    padding: 39px 0 92px;

    background: #05030d;
}


.hybrid-combinations-title {
    margin-bottom: 31px;

    text-align: center;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -.5px;
    font-weight: 800;
}

.hybrid-combinations-title span {
    color: #9256f4;
}


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

.hybrid-combination-grid {
    display: grid;

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

    gap: 23px;

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


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

.hybrid-combination-card {
    min-height: 153px;

    padding: 28px 28px 30px;

    border: 1px solid rgba(124, 92, 252, .14);
    border-radius: 17px;

    background:
        linear-gradient(145deg,
            rgba(16, 11, 30, .94),
            rgba(9, 7, 19, .96));

    box-shadow:
        inset 0 0 30px rgba(124, 92, 252, .012);

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

.hybrid-combination-card:hover {
    transform: translateY(-3px);

    border-color: rgba(124, 92, 252, .28);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .25),
        inset 0 0 30px rgba(124, 92, 252, .025);
}


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

.combination-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 21px;

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

    border-radius: 11px;
}

.combination-icon i {
    width: 23px;
    height: 23px;
}


/* PURPLE */

.combination-purple {
    color: #a36bff;

    border: 1px solid rgba(145, 76, 255, .35);

    background: rgba(124, 92, 252, .10);
}


/* BLUE */

.combination-blue {
    color: #579bff;

    border: 1px solid rgba(61, 131, 255, .30);

    background: rgba(37, 103, 220, .10);
}


/* GREEN */

.combination-green {
    color: #29d9bd;

    border: 1px solid rgba(22, 203, 177, .30);

    background: rgba(17, 185, 159, .09);
}


/* AMBER */

.combination-amber {
    color: #ffc21e;

    border: 1px solid rgba(255, 177, 21, .30);

    background: rgba(255, 167, 17, .09);
}


/* =========================================================
   BADGES
========================================================= */

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

    min-height: 25px;

    padding: 5px 11px;

    margin-bottom: 11px;

    border-radius: 999px;

    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}


/* PURPLE BADGE */

.badge-purple {
    color: #b28aff;
    background: rgba(124, 92, 252, .16);
}


/* BLUE BADGE */

.badge-blue {
    color: #579cff;
    background: rgba(35, 105, 226, .15);
}


/* GREEN BADGE */

.badge-green {
    color: #25d8bd;
    background: rgba(15, 194, 163, .13);
}


/* AMBER BADGE */

.badge-amber {
    color: #ffc322;
    background: rgba(255, 177, 16, .13);
}


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

.hybrid-combination-card h3 {
    margin: 0 0 9px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.2px;
    font-weight: 800;
}


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

.hybrid-combination-card p {
    margin: 0;

    color: #9ba5bb;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.72;
    font-weight: 400;
}

.hybrid-combination-card p strong {
    color: #f4f3f7;
    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hybrid-combination-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 25px;
    }

}


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

@media (max-width: 767px) {

    .hybrid-combinations {
        padding: 35px 0 55px;
    }

    .hybrid-combinations-title {
        padding: 0 15px;

        font-size: 23px;

        margin-bottom: 25px;
    }

    .hybrid-combination-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 0 18px;
    }

    .hybrid-combination-card {
        min-height: auto;

        padding: 24px 22px 27px;
    }

    .hybrid-combination-card h3 {
        font-size: 18px;
    }

    .hybrid-combination-card p {
        font-size: 13px;
        line-height: 1.7;
    }

}


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

@media (max-width: 420px) {

    .hybrid-combinations-title {
        font-size: 21px;
    }

    .hybrid-combination-card {
        padding: 22px 19px 24px;
    }

    .combination-icon {
        width: 49px;
        height: 49px;
    }

    .hybrid-combination-card p {
        font-size: 12.5px;
    }

}

/* =========================================================
   HOW HYBRID MLM SOFTWARE WORKS
========================================================= */

.hybrid-how-section {
    position: relative;
    overflow: hidden;

    padding: 75px 0 97px;

    background: #050811;
}


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

.hybrid-how-header {
    text-align: center;

    max-width: 850px;

    margin: 0 auto 59px;
}


.hybrid-how-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(124, 92, 252, .34);
    border-radius: 999px;

    background: rgba(124, 92, 252, .06);

    color: #965cff;

    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .35px;
}


.hybrid-how-badge i {
    width: 13px;
    height: 13px;
}


.hybrid-how-header h2 {
    margin: 31px 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    line-height: 1.12;

    letter-spacing: -1.15px;

    font-weight: 800;
}


.hybrid-how-header h2 span {
    color: #9256f4;
}


.hybrid-how-header>p {
    margin: 0 auto;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.68;
}


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

.hybrid-how-grid {
    display: grid;

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

    gap: 23px;

    max-width: 1212px;

    margin: 0 auto;
}


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

.hybrid-how-card {
    position: relative;

    min-height: 348px;

    padding: 28px 28px 25px;

    border: 1px solid rgba(124, 92, 252, .14);

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            rgba(15, 11, 29, .97),
            rgba(9, 7, 20, .98));

    box-shadow:
        inset 0 0 35px rgba(124, 92, 252, .012);

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


.hybrid-how-card:hover {
    transform: translateY(-3px);

    border-color: rgba(124, 92, 252, .27);
}


/* =========================================================
   NUMBER
========================================================= */

.how-number {
    width: 39px;
    height: 39px;

    margin-bottom: 17px;

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

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #9654f8,
            #7034df);

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;

    box-shadow:
        0 0 20px rgba(124, 92, 252, .25);
}


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

.hybrid-how-card h3 {
    margin: 0 0 9px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    line-height: 1.2;

    letter-spacing: -.2px;

    font-weight: 800;
}


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

.hybrid-how-card p {
    margin: 0;

    color: #9aa5bb;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.72;
}


/* =========================================================
   CARD BOTTOM LABEL
========================================================= */

.how-card-label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 18px;

    color: #65718b;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.3;
}


.how-card-label i {
    width: 14px;
    height: 14px;

    color: #9556f2;
}


/* =========================================================
   TECHNICAL INSIGHT
========================================================= */

.hybrid-technical-insight {
    max-width: 1190px;

    margin: 46px auto 0;

    padding: 17px 20px;

    border: 1px solid rgba(124, 92, 252, .27);

    border-left: 3px solid #9656f5;

    border-radius: 11px;

    background:
        rgba(124, 92, 252, .055);

    color: #9ca7bc;

    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    line-height: 1.72;
}


.hybrid-technical-insight strong {
    color: #f2f1f5;

    font-weight: 700;
}


.hybrid-technical-insight em {
    color: #a1aabd;

    font-style: italic;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .hybrid-how-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 0 25px;
    }

    .hybrid-how-card {
        min-height: 330px;
    }

    .hybrid-technical-insight {
        margin-left: 25px;
        margin-right: 25px;
    }

}


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

@media (max-width: 767px) {

    .hybrid-how-section {
        padding: 55px 0 60px;
    }

    .hybrid-how-header {
        padding: 0 18px;

        margin-bottom: 40px;
    }

    .hybrid-how-badge {
        font-size: 9px;
        padding: 7px 11px;
    }

    .hybrid-how-header h2 {
        margin-top: 23px;

        font-size: 29px;

        letter-spacing: -.7px;
    }

    .hybrid-how-header>p {
        font-size: 14px;
        line-height: 1.7;
    }

    .how-desktop-break {
        display: none;
    }

    .hybrid-how-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 0 18px;
    }

    .hybrid-how-card {
        min-height: auto;

        padding: 24px 22px 25px;
    }

    .hybrid-how-card h3 {
        font-size: 18px;
    }

    .hybrid-how-card p {
        font-size: 13px;
        line-height: 1.72;
    }

    .how-card-label {
        font-size: 10px;
    }

    .hybrid-technical-insight {
        margin: 28px 18px 0;

        padding: 15px 15px 16px 17px;

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

}


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

@media (max-width: 420px) {

    .hybrid-how-header h2 {
        font-size: 26px;
    }

    .hybrid-how-card {
        padding: 22px 19px 23px;
    }

    .hybrid-how-card h3 {
        font-size: 17px;
    }

    .hybrid-how-card p {
        font-size: 12.5px;
    }

    .hybrid-technical-insight {
        font-size: 11.5px;
    }

}

/* =========================================================
   PACKAGE EXAMPLE & COMPENSATION FLOW
========================================================= */

.hybrid-package-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0 90px;
    background: #05030d;
    color: #fff;
}


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

.hybrid-package-header {
    max-width: 1000px;
    margin: 0 auto 50px;
    text-align: center;
}

.hybrid-package-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(145, 82, 245, .35);
    border-radius: 999px;
    background: rgba(124, 92, 252, .06);
    color: #965cff;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}

.hybrid-package-badge i {
    width: 13px;
    height: 13px;
}

.hybrid-package-header h2 {
    margin: 30px 0 17px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.hybrid-package-header h2 span {
    color: #9256f4;
}

.hybrid-package-header>p {
    margin: 0;
    color: #9aa5ba;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.72;
}


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

.hybrid-package-top {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 48px;
    max-width: 1225px;
    margin: 0 auto 48px;
}

.package-config-column h3,
.package-flow-column h3 {
    margin: 0 0 17px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -.55px;
    font-weight: 800;
}

.package-config-column>p {
    margin: 0 0 21px;
    color: #99a5bb;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.72;
}

.package-config-column>p strong {
    color: #f4f3f7;
}

.package-config-column>p em {
    color: #9da7bb;
}

/* =========================================================
   HYBRID PACKAGE SECTION
   MOBILE RESPONSIVE FIX
   Paste at the VERY END of CSS
========================================================= */

@media (max-width: 1000px) {

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

    .hybrid-package-header {
        width: calc(100% - 40px) !important;
        max-width: 850px !important;
        margin: 0 auto 42px !important;
    }

    .hybrid-package-header h2 {
        font-size: 34px !important;
        line-height: 1.18 !important;
        letter-spacing: -.8px !important;
    }

    .hybrid-package-header>p {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    /* TOP TWO COLUMNS → ONE COLUMN */
    .hybrid-package-top {
        width: calc(100% - 40px) !important;
        max-width: 850px !important;

        grid-template-columns: 1fr !important;
        gap: 40px !important;

        margin: 0 auto 42px !important;
    }

    .package-config-column,
    .package-flow-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Prevent tables from breaking the page */
    .package-config-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .package-config-table {
        min-width: 700px !important;
    }

    /* PACKAGE PANELS */
    .package-panel-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .package-panel-left,
    .package-panel-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .package-summary-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}


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

@media (max-width: 767px) {

    .hybrid-package-section {
        padding: 58px 0 65px !important;
        overflow: hidden !important;
    }

    /* MAIN WIDTH */
    .container-xl-custom {
        width: calc(100% - 28px) !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

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

    .hybrid-package-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 38px !important;
        text-align: center !important;
    }

    .hybrid-package-badge {
        max-width: 100% !important;
        padding: 7px 12px !important;

        gap: 6px !important;

        font-size: 9px !important;
        line-height: 1.35 !important;
        letter-spacing: .25px !important;

        box-sizing: border-box !important;
    }

    .hybrid-package-badge i {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .hybrid-package-header h2 {
        margin: 23px 0 14px !important;

        font-size: 29px !important;
        line-height: 1.2 !important;
        letter-spacing: -.65px !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .hybrid-package-header>p {
        margin: 0 auto !important;

        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.72 !important;

        overflow-wrap: break-word !important;
    }

    /* Hide desktop-only breaks */
    .package-desktop-break {
        display: none !important;
    }


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

    .hybrid-package-top {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 34px !important;

        margin: 0 auto 38px !important;
    }

    .package-config-column,
    .package-flow-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .package-config-column h3,
    .package-flow-column h3 {
        margin-bottom: 13px !important;

        font-size: 22px !important;
        line-height: 1.25 !important;
        letter-spacing: -.35px !important;
    }

    .package-config-column>p {
        margin-bottom: 18px !important;

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

    .package-flow-intro {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }


    /* ================= CONFIG TABLE ================= */

    .package-config-table-wrap {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .package-config-table {
        width: 100% !important;
        min-width: 650px !important;

        table-layout: auto !important;
    }

    .package-config-table th,
    .package-config-table td {
        white-space: nowrap !important;
    }


    /* ================= INCOME FLOW ================= */

    .package-income-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .income-flow-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .income-flow-item {
        width: 100% !important;
        box-sizing: border-box !important;

        font-size: 12px !important;
        line-height: 1.7 !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .income-flow-group h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .income-flow-group h4 i {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .income-total-box {
        width: 100% !important;
        box-sizing: border-box !important;

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

    .income-total-box p {
        font-size: 11px !important;
        line-height: 1.65 !important;
    }


    /* ================= PACKAGE TABS ================= */

    .hybrid-package-tabs-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hybrid-package-tabs {
        width: 100% !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        gap: 8px !important;

        padding-bottom: 5px !important;

        scrollbar-width: none !important;
    }

    .hybrid-package-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .package-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;

        min-height: 44px !important;

        padding: 10px 15px !important;

        font-size: 12px !important;
    }


    /* ================= PACKAGE PANEL ================= */

    .package-panel {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    .package-panel-grid {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;
    }

    .package-panel-left,
    .package-panel-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .package-panel-left h3,
    .package-panel-right h3 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    .package-panel-description {
        font-size: 13px !important;
        line-height: 1.72 !important;
    }


    /* ================= FEATURES ================= */

    .package-feature {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;

        gap: 12px !important;

        box-sizing: border-box !important;
    }

    .package-feature-icon {
        flex: 0 0 40px !important;

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

    .package-feature h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .package-feature p {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }


    /* ================= SUMMARY ================= */

    .package-summary-table {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;

        box-sizing: border-box !important;
    }

    .summary-head,
    .summary-row {
        min-width: 500px !important;
    }

    .summary-head span,
    .summary-row span,
    .summary-row strong,
    .summary-row b {
        font-size: 11px !important;
    }


    /* ================= TAGS ================= */

    .package-tags,
    .enterprise-tags {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 7px !important;
    }

    .package-tags span,
    .enterprise-tags span {
        max-width: 100% !important;

        font-size: 10px !important;
        line-height: 1.4 !important;

        padding: 6px 9px !important;
    }


    /* ================= CUSTOM QUOTE ================= */

    .custom-quote-box {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    .custom-quote-box h4 {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .custom-quote-box p {
        font-size: 12px !important;
        line-height: 1.7 !important;

        overflow-wrap: anywhere !important;
    }
}


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

@media (max-width: 480px) {

    .hybrid-package-section {
        padding: 50px 0 58px !important;
    }

    .container-xl-custom {
        width: calc(100% - 22px) !important;
    }

    .hybrid-package-header {
        margin-bottom: 32px !important;
    }

    .hybrid-package-badge {
        font-size: 8.5px !important;
        padding: 6px 10px !important;
    }

    .hybrid-package-header h2 {
        font-size: 26px !important;
        line-height: 1.18 !important;
        letter-spacing: -.45px !important;
    }

    .hybrid-package-header>p {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .hybrid-package-top {
        gap: 28px !important;
    }

    .package-config-column h3,
    .package-flow-column h3 {
        font-size: 20px !important;
    }

    .income-flow-item {
        font-size: 11.5px !important;
    }

    .package-feature {
        gap: 10px !important;
    }

    .package-feature-icon {
        flex-basis: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .container-xl-custom {
        width: calc(100% - 18px) !important;
    }

    .hybrid-package-header h2 {
        font-size: 24px !important;
    }

    .hybrid-package-header>p {
        font-size: 11.5px !important;
    }

    .package-config-column h3,
    .package-flow-column h3 {
        font-size: 19px !important;
    }

    .package-feature h4 {
        font-size: 14px !important;
    }

    .package-feature p {
        font-size: 11.5px !important;
    }

    .package-tab {
        font-size: 11px !important;
        padding: 9px 13px !important;
    }
}


/* ================= CONFIG TABLE ================= */

.package-config-table-wrap {
    overflow: hidden;
    border: 1px solid rgba(124, 92, 252, .16);
    border-radius: 16px;
    background: rgba(7, 5, 16, .7);
}

.package-config-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.package-config-table th {
    padding: 14px 18px;
    text-align: left;
    color: #995dff;
    background: rgba(124, 92, 252, .10);
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .3px;
}

.package-config-table td {
    padding: 14px 18px;
    border-top: 1px solid rgba(124, 92, 252, .10);
    color: #98a4b9;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    vertical-align: middle;
}

.package-config-table td strong {
    color: #9aa7bc;
}

.package-config-table th:nth-child(1),
.package-config-table td:nth-child(1) {
    width: 22%;
}

.package-config-table th:nth-child(2),
.package-config-table td:nth-child(2) {
    width: 23%;
}

.package-config-table th:nth-child(3),
.package-config-table td:nth-child(3) {
    width: 30%;
}

.package-config-table th:nth-child(4),
.package-config-table td:nth-child(4) {
    width: 25%;
}

.package-config-table .maximum-row td {
    color: #fff;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

.module-purple {
    color: #ae80ff;
    background: rgba(124, 92, 252, .16);
}

.module-green {
    color: #21d4ba;
    background: rgba(12, 192, 163, .13);
}

.module-amber {
    color: #ffc020;
    background: rgba(255, 175, 12, .13);
}


/* ================= FLOW ================= */

.package-flow-intro {
    margin: 0 0 19px;
    color: #9ba6bb;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

.package-income-card {
    padding: 24px 27px 27px;
    border: 1px solid rgba(124, 92, 252, .16);
    border-radius: 17px;
    background: rgba(14, 10, 27, .82);
}

.income-flow-group {
    margin-bottom: 16px;
}

.income-flow-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.income-flow-group h4 i {
    width: 18px;
    height: 18px;
}

.income-purple {
    color: #9758fa;
}

.income-green {
    color: #985aff;
}

.income-amber {
    color: #995cff;
}

.income-flow-item {
    position: relative;
    padding-left: 19px;
    margin-bottom: 10px;
    color: #9aa5bb;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.income-flow-item strong {
    color: #11d5a4;
    font-weight: 700;
}

.income-flow-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.purple-dot::before {
    background: #ae83ff;
}

.green-dot::before {
    background: #27d2b5;
}

.amber-dot::before {
    background: #ffbd20;
}

.income-total-box {
    margin-top: 19px;
    padding: 20px 17px;
    border: 1px solid rgba(15, 205, 164, .34);
    border-radius: 12px;
    background: rgba(15, 205, 164, .065);
}

.income-total-box>div {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.income-total-box>div strong {
    color: #14d5a4;
    font-size: 18px;
}

.income-total-box p {
    margin: 9px 0 0;
    color: #69768d;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   PACKAGE TABS CONTAINER
========================================================= */

.hybrid-package-tabs-wrap {
    max-width: 1190px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(124, 92, 252, .17);
    border-radius: 25px;
    background: rgba(13, 9, 26, .9);
}

.hybrid-package-tabs {
    display: flex;
    align-items: stretch;
    min-height: 38px;
    border-bottom: 1px solid rgba(124, 92, 252, .14);
    background: rgba(124, 92, 252, .055);
}

.package-tab {
    flex: 0 0 auto;
    padding: 0 27px;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: #8994aa;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.package-tab:hover {
    color: #b17cff;
}

.package-tab.active {
    color: #9c5cff;
    background: rgba(124, 92, 252, .08);
    box-shadow: inset 0 -1px 0 #9a58f8;
}


/* ================= PANELS ================= */

.package-panel {
    display: none;
    padding: 61px 28px 34px;
}

.package-panel.active {
    display: block;
}

.package-panel-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 45px;
}

.package-panel-left h3,
.package-panel-right>h3 {
    margin: 0 0 9px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.package-panel-description {
    margin: 0 0 24px;
    color: #9aa5ba;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.72;
}


/* ================= FEATURES ================= */

.package-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 21px;
}

.package-feature-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(140, 77, 247, .32);
    border-radius: 11px;
    background: rgba(124, 92, 252, .09);
    color: #995cff;
}

.package-feature-icon i {
    width: 19px;
    height: 19px;
}

.package-feature h4 {
    margin: 0 0 4px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.package-feature p {
    margin: 0;
    color: #99a5bb;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.65;
}


/* ================= SUMMARY TABLE ================= */

.package-summary-table {
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid rgba(124, 92, 252, .15);
    border-radius: 17px;
}

.summary-head,
.summary-row {
    display: grid;
    grid-template-columns: 1.45fr .7fr .7fr;
    align-items: center;
}

.summary-head {
    min-height: 48px;
    padding: 0 17px;
    background: rgba(124, 92, 252, .10);
    color: #985cff;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.summary-row {
    min-height: 53px;
    padding: 0 17px;
    border-top: 1px solid rgba(124, 92, 252, .10);
    color: #99a5bb;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.summary-row strong {
    color: #98a5ba;
}

.status-active,
.status-inactive {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    line-height: 1;
}

.status-active {
    color: #15d8a5;
    background: rgba(15, 205, 164, .13);
}

.status-inactive {
    color: #ff5d62;
    background: rgba(255, 61, 71, .13);
}


/* ================= TAGS ================= */

.package-tags,
.enterprise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.package-tags span,
.enterprise-tags span {
    padding: 7px 12px;
    border: 1px solid rgba(124, 92, 252, .19);
    border-radius: 999px;
    background: rgba(124, 92, 252, .045);
    color: #8995ab;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    line-height: 1;
}


/* ================= ENTERPRISE ================= */

.custom-quote-box {
    padding: 18px 20px;
    border: 1px solid rgba(255, 174, 0, .33);
    border-left: 3px solid #ffb000;
    border-radius: 12px;
    background: rgba(255, 153, 0, .055);
}

.custom-quote-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #ffb000;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.custom-quote-box h4 i {
    width: 18px;
    height: 18px;
}

.custom-quote-box p {
    margin: 0;
    color: #a0a9bb;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.75;
}

.custom-quote-box strong {
    color: #ffb000;
}


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

@media (max-width: 1100px) {

    .hybrid-package-top {
        grid-template-columns: 1fr;
        padding: 0 25px;
    }

    .hybrid-package-header {
        padding: 0 25px;
    }

    .hybrid-package-tabs-wrap {
        margin-left: 25px;
        margin-right: 25px;
    }

    .package-panel-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 767px) {

    .hybrid-package-section {
        padding: 55px 0 65px;
    }

    .hybrid-package-header {
        padding: 0 18px;
        margin-bottom: 40px;
    }

    .hybrid-package-badge {
        font-size: 9px;
    }

    .hybrid-package-header h2 {
        margin-top: 23px;
        font-size: 29px;
        letter-spacing: -.7px;
    }

    .hybrid-package-header>p {
        font-size: 14px;
    }

    .package-desktop-break {
        display: none;
    }

    .hybrid-package-top {
        padding: 0 18px;
        gap: 40px;
    }

    .package-config-column h3,
    .package-flow-column h3 {
        font-size: 23px;
    }

    .package-config-column>p,
    .package-flow-intro {
        font-size: 13px;
    }

    .package-config-table-wrap {
        overflow-x: auto;
    }

    .package-config-table {
        min-width: 680px;
    }

    .package-income-card {
        padding: 20px 17px;
    }

    .income-flow-item {
        font-size: 12px;
    }

    .hybrid-package-tabs-wrap {
        margin: 35px 12px 0;
        border-radius: 17px;
    }

    .hybrid-package-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hybrid-package-tabs::-webkit-scrollbar {
        display: none;
    }

    .package-tab {
        padding: 0 17px;
        white-space: nowrap;
        font-size: 11px;
    }

    .package-panel {
        padding: 35px 17px 28px;
    }

    .package-panel-grid {
        gap: 30px;
    }

    .package-panel-left h3,
    .package-panel-right>h3 {
        font-size: 18px;
    }

    .package-panel-description {
        font-size: 13px;
    }

    .package-feature p {
        font-size: 12px;
    }

    .summary-head,
    .summary-row {
        grid-template-columns: 1.3fr .7fr .8fr;
    }

    .summary-head {
        padding: 0 11px;
        font-size: 9px;
    }

    .summary-row {
        padding: 0 11px;
        font-size: 11px;
    }

    .status-active,
    .status-inactive {
        padding: 5px 7px;
        font-size: 8px;
    }

    .custom-quote-box p {
        font-size: 12px;
    }

}


@media (max-width: 420px) {

    .hybrid-package-header h2 {
        font-size: 26px;
    }

    .package-config-table {
        min-width: 620px;
    }

    .package-feature {
        gap: 11px;
    }

    .package-feature-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .package-feature h4 {
        font-size: 14px;
    }

    .package-feature p {
        font-size: 11.5px;
    }

}

/* =========================================================
   TYPES OF COMMISSION IN HYBRID MLM
========================================================= */

.income-types-section {
    position: relative;
    overflow: hidden;

    padding: 82px 0 94px;

    background: #050811;
}


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

.income-types-header {
    max-width: 900px;

    margin: 0 auto 58px;

    text-align: center;
}


.income-types-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(145, 82, 245, .34);

    border-radius: 999px;

    background: rgba(124, 92, 252, .055);

    color: #965cff;

    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .35px;
}


.income-types-badge i {
    width: 13px;
    height: 13px;
}


.income-types-header h2 {
    margin: 31px 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    line-height: 1.15;

    letter-spacing: -1.1px;

    font-weight: 800;
}


.income-types-header h2 span {
    color: #9256f4;
}


.income-types-header>p {
    margin: 0 auto;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.75;
}


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

.income-types-grid {
    display: grid;

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

    gap: 23px;

    max-width: 1210px;

    margin: 0 auto;
}


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

.income-type-card {
    min-height: 273px;

    padding: 27px 28px 28px;

    border: 1px solid rgba(124, 92, 252, .14);

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            rgba(15, 11, 29, .97),
            rgba(9, 7, 20, .98));

    box-shadow:
        inset 0 0 35px rgba(124, 92, 252, .012);

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


.income-type-card:hover {
    transform: translateY(-3px);

    border-color: rgba(139, 87, 248, .28);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .22),
        inset 0 0 35px rgba(124, 92, 252, .025);
}


/* =========================================================
   INCOME TYPE LABEL
========================================================= */

.income-type-label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 13px;

    color: #965cff;

    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .35px;
}


.income-type-label i {
    width: 14px;
    height: 14px;

    stroke-width: 2;
}


/* =========================================================
   HEADING
========================================================= */

.income-type-card h3 {
    margin: 0 0 9px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    line-height: 1.2;

    letter-spacing: -.3px;

    font-weight: 800;
}


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

.income-type-card p {
    margin: 0;

    color: #9ca7bb;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.72;

    font-weight: 400;
}


/* =========================================================
   TYPICAL BADGE
========================================================= */

.income-typical {
    display: inline-flex;
    align-items: center;

    margin-top: 15px;

    padding: 7px 12px;

    border: 1px solid rgba(137, 76, 247, .34);

    border-radius: 999px;

    background: rgba(124, 92, 252, .095);

    color: #9c5cff;

    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1.1;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .income-types-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 0 25px;
    }

}


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

@media (max-width: 767px) {

    .income-types-section {
        padding: 55px 0 65px;
    }


    .income-types-header {
        padding: 0 18px;

        margin-bottom: 40px;
    }


    .income-types-badge {
        font-size: 9px;
        padding: 7px 12px;
    }


    .income-types-header h2 {
        margin-top: 23px;

        font-size: 29px;

        letter-spacing: -.7px;
    }


    .income-types-header>p {
        font-size: 14px;

        line-height: 1.7;
    }


    .income-desktop-break {
        display: none;
    }


    .income-types-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 0 18px;
    }


    .income-type-card {
        min-height: auto;

        padding: 24px 22px 25px;
    }


    .income-type-card h3 {
        font-size: 18px;
    }


    .income-type-card p {
        font-size: 13px;

        line-height: 1.72;
    }


    .income-typical {
        font-size: 10px;
    }

}


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

@media (max-width: 420px) {

    .income-types-header h2 {
        font-size: 26px;
    }


    .income-type-card {
        padding: 22px 19px 24px;
    }


    .income-type-card h3 {
        font-size: 17px;
    }


    .income-type-card p {
        font-size: 12.5px;
    }


    .income-type-label {
        font-size: 10px;
    }

}

/* =========================================================
   KEY BENEFITS OF HYBRID MLM SOFTWARE
========================================================= */

.hybrid-benefits-section {
    position: relative;
    overflow: hidden;

    padding: 82px 0 94px;

    background: #050811;
}


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

.hybrid-benefits-header {
    max-width: 920px;

    margin: 0 auto 58px;

    text-align: center;
}


.hybrid-benefits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(145, 82, 245, .34);

    border-radius: 999px;

    background: rgba(124, 92, 252, .055);

    color: #965cff;

    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .35px;
}


.hybrid-benefits-badge i {
    width: 13px;
    height: 13px;
}


.hybrid-benefits-header h2 {
    margin: 31px 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    line-height: 1.15;

    letter-spacing: -1.1px;

    font-weight: 800;
}


.hybrid-benefits-header h2 span {
    color: #9256f4;
}


.hybrid-benefits-header>p {
    margin: 0 auto;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.75;
}


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

.hybrid-benefits-grid {
    display: grid;

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

    gap: 28px 28px;

    max-width: 1212px;

    margin: 0 auto;
}


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

.hybrid-benefit-card {
    min-height: 376px;

    padding: 28px 27px 27px;

    border: 1px solid rgba(124, 92, 252, .14);

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            rgba(15, 11, 29, .97),
            rgba(9, 7, 20, .98));

    box-shadow:
        inset 0 0 35px rgba(124, 92, 252, .012);

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


.hybrid-benefit-card:hover {
    transform: translateY(-3px);

    border-color: rgba(139, 87, 248, .28);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .22),
        inset 0 0 35px rgba(124, 92, 252, .025);
}


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

.benefit-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 20px;

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

    border-radius: 12px;
}


.benefit-icon i {
    width: 24px;
    height: 24px;
}


/* PURPLE */

.benefit-icon-purple {
    color: #9b5cff;

    border: 1px solid rgba(139, 76, 247, .35);

    background: rgba(124, 92, 252, .10);
}


/* BLUE */

.benefit-icon-blue {
    color: #4f98ff;

    border: 1px solid rgba(56, 129, 247, .30);

    background: rgba(45, 111, 220, .09);
}


/* GREEN */

.benefit-icon-green {
    color: #2bd8c1;

    border: 1px solid rgba(20, 200, 178, .28);

    background: rgba(14, 181, 158, .09);
}


/* YELLOW */

.benefit-icon-yellow {
    color: #ffbd19;

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

    background: rgba(255, 169, 15, .09);
}


/* TEAL */

.benefit-icon-teal {
    color: #25d3ad;

    border: 1px solid rgba(22, 200, 164, .28);

    background: rgba(15, 185, 153, .09);
}


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

.hybrid-benefit-card h3 {
    margin: 0 0 10px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;
    line-height: 1.2;

    letter-spacing: -.3px;

    font-weight: 800;
}


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

.hybrid-benefit-card p {
    margin: 0;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
    line-height: 1.72;

    font-weight: 400;
}


/* =========================================================
   STAT ROW
========================================================= */

.benefit-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 22px;

    color: #69758b;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 600;
}


.benefit-counter,
.benefit-text-stat {
    flex-shrink: 0;

    color: #758198;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.benefit-progress {
    position: relative;

    width: 100%;
    height: 6px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(91, 74, 137, .23);
}


.benefit-progress-fill {
    width: 0;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            #712be4 0%,
            #9251f4 55%,
            #a066ff 100%);

    box-shadow:
        0 0 8px rgba(145, 77, 247, .25);

    transition:
        width 1.5s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .hybrid-benefits-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 0 25px;
    }

}


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

@media (max-width: 767px) {

    .hybrid-benefits-section {
        padding: 55px 0 65px;
    }


    .hybrid-benefits-header {
        padding: 0 18px;

        margin-bottom: 40px;
    }


    .hybrid-benefits-badge {
        font-size: 9px;

        padding: 7px 12px;
    }


    .hybrid-benefits-header h2 {
        margin-top: 23px;

        font-size: 29px;

        letter-spacing: -.7px;
    }


    .hybrid-benefits-header>p {
        font-size: 14px;

        line-height: 1.7;
    }


    .benefits-desktop-break {
        display: none;
    }


    .hybrid-benefits-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 0 18px;
    }


    .hybrid-benefit-card {
        min-height: auto;

        padding: 24px 22px 25px;
    }


    .hybrid-benefit-card h3 {
        font-size: 18px;
    }


    .hybrid-benefit-card p {
        font-size: 13px;

        line-height: 1.72;
    }


    .benefit-stat-row {
        font-size: 10px;
    }


    .benefit-counter,
    .benefit-text-stat {
        font-size: 10px;
    }

}


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

@media (max-width: 420px) {

    .hybrid-benefits-header h2 {
        font-size: 26px;
    }


    .hybrid-benefit-card {
        padding: 22px 19px 24px;
    }


    .hybrid-benefit-card h3 {
        font-size: 17px;
    }


    .hybrid-benefit-card p {
        font-size: 12.5px;
    }

}

/* =========================================================
   PLATFORM FEATURES
========================================================= */

.platform-features-section {
    position: relative;
    overflow: hidden;

    padding: 82px 0 90px;

    background: #050811;
}


.platform-features-container {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


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

.platform-features-header {
    max-width: 1050px;

    margin: 0 auto 58px;

    text-align: center;
}


.platform-features-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 15px;

    border: 1px solid rgba(145, 82, 245, .35);

    border-radius: 999px;

    background: rgba(124, 92, 252, .055);

    color: #965cff;

    font-family: 'Outfit', sans-serif;

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

    letter-spacing: .4px;
}


.platform-features-badge i {
    width: 13px;
    height: 13px;
}


.platform-features-header h2 {
    margin: 30px 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 40px;

    line-height: 1.15;

    letter-spacing: -1.2px;

    font-weight: 800;
}


.platform-features-header h2 span {
    color: #9256f4;
}


.platform-features-header p {
    margin: 0;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.platform-feature-panel {
    overflow: hidden;

    border: 1px solid rgba(124, 92, 252, .16);

    border-radius: 22px;

    background: #0b0917;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .15);
}


/* =========================================================
   TABS
========================================================= */

.platform-feature-tabs {
    display: flex;
    align-items: stretch;

    min-height: 52px;

    overflow-x: auto;

    scrollbar-width: none;

    border-bottom: 1px solid rgba(124, 92, 252, .13);

    background: #120d21;
}


.platform-feature-tabs::-webkit-scrollbar {
    display: none;
}


.platform-tab {
    position: relative;

    flex: 0 0 auto;

    min-height: 52px;

    padding: 0 30px;

    border: 0;

    border-right: 1px solid transparent;

    background: transparent;

    color: #8995aa;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.platform-tab i {
    width: 14px;
    height: 14px;

    margin-right: 6px;

    vertical-align: -2px;
}


.platform-tab:hover {
    color: #b7a0ed;
}


.platform-tab.active {
    color: #9a5cff;

    background: #0b0917;

    border-left: 1px solid rgba(124, 92, 252, .10);

    border-right: 1px solid rgba(124, 92, 252, .10);
}


/* =========================================================
   TAB CONTENT
========================================================= */

.platform-tab-content {
    display: none;

    padding: 61px 38px 31px;
}


.platform-tab-content.active {
    display: block;
}


.platform-content-grid {
    display: grid;

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

    gap: 50px;
}


/* =========================================================
   LEFT / RIGHT TITLES
========================================================= */

.platform-left-content>h3,
.platform-right-content>h3 {
    display: flex;
    align-items: center;

    gap: 7px;

    margin: 0 0 20px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.3px;
}


.platform-left-content>h3 i {
    width: 19px;
    height: 19px;

    color: #965cff;
}


/* =========================================================
   FEATURE ITEMS
========================================================= */

.platform-feature-item {
    display: grid;

    grid-template-columns: 43px minmax(0, 1fr);

    gap: 13px;

    margin-bottom: 24px;
}


.platform-feature-item:last-child {
    margin-bottom: 0;
}


.platform-item-icon {
    width: 43px;
    height: 43px;

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

    border: 1px solid rgba(140, 82, 244, .30);

    border-radius: 12px;

    background: rgba(124, 92, 252, .09);

    color: #955bfa;
}


.platform-item-icon i {
    width: 20px;
    height: 20px;
}


.platform-feature-item h4 {
    margin: 1px 0 5px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 800;
}


.platform-feature-item p {
    margin: 0;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;

    font-size: 13.5px;

    line-height: 1.7;
}


/* =========================================================
   RIGHT INFO BOX
========================================================= */

.platform-info-box {
    padding: 27px 28px;

    border: 1px solid rgba(124, 92, 252, .14);

    border-radius: 17px;

    background: #0b0917;
}


.platform-bullet-item {
    display: grid;

    grid-template-columns: 9px minmax(0, 1fr);

    gap: 12px;

    margin-bottom: 17px;
}


.platform-bullet-item:last-child {
    margin-bottom: 0;
}


.platform-bullet {
    width: 8px;
    height: 8px;

    margin-top: 7px;

    border-radius: 50%;

    background: #9256f4;

    box-shadow:
        0 0 7px rgba(146, 86, 244, .35);
}


.platform-bullet-item p {
    margin: 0;

    color: #9ba6bb;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


.platform-bullet-item strong {
    color: #fff;

    font-weight: 700;
}


/* =========================================================
   TAGS
========================================================= */

.platform-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;
}


.platform-tags span,
.mobile-pill {
    display: inline-flex;
    align-items: center;

    padding: 6px 12px;

    border: 1px solid rgba(124, 92, 252, .20);

    border-radius: 999px;

    background: rgba(124, 92, 252, .045);

    color: #929db2;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   WITHDRAWAL FLOW
========================================================= */

.withdrawal-flow {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.withdrawal-step {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 57px;

    padding: 10px 14px;

    border: 1px solid rgba(124, 92, 252, .14);

    border-radius: 15px;

    background: #0b0917;
}


.withdrawal-step>span {
    flex: 0 0 29px;

    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    background: #8744ed;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 13px;

    font-weight: 800;
}


.withdrawal-step strong {
    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   MOBILE APP PILLS
========================================================= */

.mobile-feature-pills {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 2px;
}


.mobile-pill.active {
    color: #8d9aae;
}


.mobile-pill.active::first-letter {
    color: #20c997;
}


.mobile-feature-pills.secondary {
    margin-top: 27px;
}


.mobile-feature-pills.secondary .mobile-pill {
    padding: 7px 13px;

    color: #8994aa;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .platform-features-container {
        width: min(100% - 30px, 900px);
    }


    .platform-features-header h2 {
        font-size: 34px;
    }


    .platform-content-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .platform-tab-content {
        padding: 45px 30px 30px;
    }

}


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

@media (max-width: 767px) {

    .platform-features-section {
        padding: 58px 0 65px;
    }


    .platform-features-container {
        width: calc(100% - 24px);
    }


    .platform-features-header {
        margin-bottom: 38px;
    }


    .platform-features-badge {
        font-size: 9px;

        padding: 7px 12px;
    }


    .platform-features-header h2 {
        margin-top: 22px;

        font-size: 28px;

        line-height: 1.18;

        letter-spacing: -.7px;
    }


    .platform-features-header p {
        font-size: 13px;

        line-height: 1.7;
    }


    .platform-feature-panel {
        border-radius: 17px;
    }


    .platform-feature-tabs {
        justify-content: flex-start;

        overflow-x: auto;
    }


    .platform-tab {
        min-height: 50px;

        padding: 0 18px;

        font-size: 11px;
    }


    .platform-tab-content {
        padding: 32px 19px 25px;
    }


    .platform-content-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .platform-left-content>h3,
    .platform-right-content>h3 {
        font-size: 18px;
    }


    .platform-feature-item {
        grid-template-columns: 39px minmax(0, 1fr);

        gap: 11px;

        margin-bottom: 22px;
    }


    .platform-item-icon {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }


    .platform-item-icon i {
        width: 18px;
        height: 18px;
    }


    .platform-feature-item h4 {
        font-size: 14px;
    }


    .platform-feature-item p {
        font-size: 12.5px;

        line-height: 1.7;
    }


    .platform-info-box {
        padding: 22px 19px;
    }


    .platform-bullet-item {
        gap: 10px;

        margin-bottom: 15px;
    }


    .platform-bullet-item p {
        font-size: 12.5px;

        line-height: 1.7;
    }


    .platform-tags {
        gap: 7px;
    }


    .platform-tags span {
        font-size: 9px;

        padding: 6px 10px;
    }


    .withdrawal-step {
        min-height: 58px;

        padding: 10px 11px;
    }


    .withdrawal-step>span {
        flex-basis: 27px;

        width: 27px;
        height: 27px;

        font-size: 12px;
    }


    .withdrawal-step strong {
        font-size: 12px;
    }


    .mobile-feature-pills {
        gap: 7px;
    }


    .mobile-pill {
        font-size: 9px;

        padding: 6px 9px;
    }

}


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

@media (max-width: 420px) {

    .platform-features-header h2 {
        font-size: 25px;
    }


    .platform-tab {
        padding: 0 15px;

        font-size: 10px;
    }


    .platform-tab-content {
        padding-left: 15px;
        padding-right: 15px;
    }


    .platform-feature-item h4 {
        font-size: 13px;
    }


    .platform-feature-item p {
        font-size: 12px;
    }


    .platform-bullet-item p {
        font-size: 12px;
    }

}

/* =========================================================
   ADVANCED HYBRID COMMISSION LOGIC
========================================================= */

.advanced-commission-section {
    position: relative;
    overflow: hidden;

    padding: 86px 0 90px;

    background: #050711;
}

.advanced-commission-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


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

.advanced-commission-header {
    text-align: center;
    max-width: 950px;

    margin: 0 auto 58px;
}

.advanced-commission-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 15px;

    border: 1px solid rgba(139, 83, 245, .35);
    border-radius: 999px;

    background: rgba(139, 83, 245, .055);

    color: #955af5;

    font-family: 'Poppins', sans-serif;

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

    letter-spacing: .5px;
}

.advanced-commission-badge i {
    width: 13px;
    height: 13px;
}

.advanced-commission-header h2 {
    margin: 31px 0 17px;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 40px;
    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.2px;
}

.advanced-commission-header h2 span {
    color: #9255f5;
}

.advanced-commission-header p {
    margin: 0;

    color: #9ba7bc;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.8;
}

/* =========================================================
   ADVANCED COMMISSION - MOBILE RESPONSIVE FIX
   Paste this at the VERY END of your CSS
========================================================= */

@media (max-width: 767px) {

    .advanced-commission-section {
        padding: 60px 0 65px !important;
        overflow: hidden !important;
    }

    .advanced-commission-container {
        width: calc(100% - 28px) !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* HEADER */
    .advanced-commission-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 40px !important;
        text-align: center !important;
    }

    .advanced-commission-badge {
        max-width: 100% !important;
        padding: 7px 13px !important;
        gap: 6px !important;

        font-size: 10px !important;
        line-height: 1.3 !important;
        letter-spacing: .4px !important;

        box-sizing: border-box !important;
    }

    .advanced-commission-badge i {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .advanced-commission-header h2 {
        margin: 24px 0 14px !important;

        font-size: 30px !important;
        line-height: 1.2 !important;
        letter-spacing: -.7px !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .advanced-commission-header p {
        margin: 0 auto !important;

        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.75 !important;

        overflow-wrap: break-word !important;
    }

    /* Hide desktop line break on mobile */
    .advanced-commission-header .desktop-only {
        display: none !important;
    }

    /* LOGIC GRID */
    .commission-logic-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .commission-logic-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* CODE / PSEUDOCODE */
    .commission-pseudocode-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .commission-code-box {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    .commission-code-box pre {
        max-width: none !important;
        min-width: max-content !important;
        overflow: visible !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
    }
}


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

@media (max-width: 480px) {

    .advanced-commission-section {
        padding: 50px 0 55px !important;
    }

    .advanced-commission-container {
        width: calc(100% - 22px) !important;
    }

    .advanced-commission-header {
        margin-bottom: 32px !important;
    }

    .advanced-commission-badge {
        font-size: 9px !important;
        padding: 7px 11px !important;
    }

    .advanced-commission-header h2 {
        margin-top: 21px !important;
        margin-bottom: 12px !important;

        font-size: 26px !important;
        line-height: 1.18 !important;
        letter-spacing: -.5px !important;
    }

    .advanced-commission-header p {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .commission-logic-grid {
        gap: 15px !important;
    }

    .commission-code-box pre {
        font-size: 11px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .advanced-commission-container {
        width: calc(100% - 18px) !important;
    }

    .advanced-commission-header h2 {
        font-size: 24px !important;
    }

    .advanced-commission-header p {
        font-size: 12px !important;
    }

    .advanced-commission-badge {
        font-size: 8.5px !important;
    }
}


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

.commission-logic-grid {
    display: grid;

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

    gap: 32px;

    margin-bottom: 58px;
}


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

.commission-logic-card {
    min-width: 0;

    padding: 28px 28px 30px;

    border: 1px solid rgba(126, 87, 219, .17);

    border-radius: 17px;

    background: #0b0917;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .10);
}

.commission-logic-card h3 {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 18px;

    color: #9255f5;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;
}

.commission-logic-card h3 i {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;
}


/* =========================================================
   LIST
========================================================= */

.commission-logic-card ul {
    padding: 0;
    margin: 0;

    list-style: none;
}

.commission-logic-card li {
    position: relative;

    padding-left: 21px;

    margin-bottom: 18px;

    color: #a1adbf;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.72;
}

.commission-logic-card li:last-child {
    margin-bottom: 0;
}

.commission-logic-card li::before {
    content: "";

    position: absolute;

    left: 1px;
    top: 8px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #9559f5;

    box-shadow:
        0 0 7px rgba(149, 89, 245, .30);
}

.commission-logic-card li strong {
    color: #fff;

    font-weight: 700;
}

.commission-logic-card li em {
    color: #aab4c5;
}

.commission-logic-card code {
    display: inline-block;

    padding: 1px 5px;

    border-radius: 3px;

    background: rgba(126, 69, 221, .18);

    color: #9859f6;

    font-family: Consolas, Monaco, monospace;

    font-size: 11px;

    line-height: 1.5;

    white-space: normal;
}


/* =========================================================
   PSEUDOCODE SECTION - SCREENSHOT SAME STYLE
========================================================= */

.commission-pseudocode-section {
    margin-top: 58px;
    padding-bottom: 10px;
}

.commission-pseudocode-section>h2 {
    margin: 0 0 22px;
    text-align: center;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.6px;
}


/* CODE BOX */

.commission-code-box {
    width: 100%;
    overflow: hidden;

    background: #030711;

    border: 1px solid #151a2a;
    border-radius: 12px;
}


/* IMPORTANT:
   pre ka white-space preserve rahega,
   isliye screenshot ki tarah code compact dikhega
*/

.commission-code-box pre {
    margin: 0;
    padding: 38px 20px;

    overflow-x: auto;
    overflow-y: hidden;

    background: transparent;

    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.75;

    color: #f1f1f5;

    white-space: pre;
    tab-size: 4;

    scrollbar-width: thin;
    scrollbar-color: #35254f #030711;
}

.commission-code-box pre::-webkit-scrollbar {
    height: 6px;
}

.commission-code-box pre::-webkit-scrollbar-track {
    background: #030711;
}

.commission-code-box pre::-webkit-scrollbar-thumb {
    background: #35254f;
    border-radius: 10px;
}

.commission-code-box code {
    display: block;

    margin: 0;
    padding: 0;

    background: transparent;

    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    color: inherit;
}


/* CODE COLORS */

.commission-code-box .code-comment {
    color: #626b7c;
}

.commission-code-box .code-keyword {
    color: #d56bff;
}

.commission-code-box .code-function {
    color: #4ca6ff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .commission-pseudocode-section {
        margin-top: 45px;
    }

    .commission-pseudocode-section>h2 {
        font-size: 22px;
    }

    .commission-code-box pre {
        padding: 30px 18px;
        font-size: 11px;
    }
}


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

@media (max-width: 767px) {

    .commission-pseudocode-section {
        margin-top: 38px;
    }

    .commission-pseudocode-section>h2 {
        margin-bottom: 18px;

        font-size: 18px;
        line-height: 1.45;
    }

    .commission-code-box {
        border-radius: 10px;
    }

    .commission-code-box pre {
        padding: 24px 16px;

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

        /* code ko todna nahi hai */
        white-space: pre;

        /* mobile par scroll */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


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

@media (max-width: 480px) {

    .commission-pseudocode-section>h2 {
        font-size: 16px;
    }

    .commission-code-box pre {
        padding: 20px 14px;

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

/* =========================================================
   WHY MLM MIND SECTION
========================================================= */

.why-mlm-section {
    width: 100%;
    padding: 105px 5.2% 78px;
    background: #020711;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}


/* HEADING */

.why-mlm-heading {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 65px;
}

.why-mlm-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 17px;

    border: 1px solid #4b2788;
    border-radius: 30px;

    background: rgba(92, 45, 160, 0.10);

    color: #9a5cff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.why-mlm-badge i {
    font-size: 12px;
}

.why-mlm-heading h2 {
    margin: 30px 0 18px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1.2px;
}

.why-mlm-heading h2 span {
    color: #8b4dff;
}

.why-mlm-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   CARDS
========================================================= */

.why-mlm-grid {
    max-width: 1195px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.why-mlm-card {
    min-height: 287px;

    padding: 24px 24px 25px;

    background: #0b0917;

    border: 1px solid #211b38;
    border-radius: 17px;

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

.why-mlm-card:hover {
    transform: translateY(-3px);

    border-color: #4b2a80;

    box-shadow: 0 15px 40px rgba(75, 42, 128, 0.10);
}


/* ICON */

.why-mlm-icon {
    width: 47px;
    height: 47px;

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

    margin-bottom: 19px;

    border-radius: 12px;

    background: linear-gradient(135deg,
            #7135df,
            #914df8);

    color: #ffffff;

    font-size: 21px;
}

.why-mlm-icon i {
    line-height: 1;
}


/* CARD TEXT */

.why-mlm-card h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.4px;
}

.why-mlm-card p {
    margin: 0;

    color: #9aa7bc;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}


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

.why-mlm-stats {
    max-width: 1120px;

    margin: 52px auto 0;

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

    align-items: center;
}

.why-mlm-stat {
    text-align: center;
}

.why-mlm-number {
    color: #8b4dff;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.why-mlm-label {
    margin-top: 10px;

    color: #718198;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .why-mlm-section {
        padding: 80px 4% 60px;
    }

    .why-mlm-heading {
        margin-bottom: 50px;
    }

    .why-mlm-heading h2 {
        font-size: 32px;
    }

    .why-mlm-heading p {
        font-size: 15px;
    }

    .why-mlm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-mlm-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}


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

@media (max-width: 767px) {

    .why-mlm-section {
        padding: 65px 16px 50px;
    }

    .why-mlm-heading {
        margin-bottom: 38px;
    }

    .why-mlm-badge {
        font-size: 11px;
        padding: 6px 13px;
    }

    .why-mlm-heading h2 {
        margin-top: 23px;

        font-size: 26px;
        line-height: 1.3;
        letter-spacing: -0.6px;
    }

    .why-mlm-heading p {
        font-size: 14px;
        line-height: 1.65;
    }

    .why-mlm-heading p br {
        display: none;
    }

    .why-mlm-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-mlm-card {
        min-height: auto;
        padding: 22px;
    }

    .why-mlm-card h3 {
        font-size: 17px;
    }

    .why-mlm-card p {
        font-size: 14px;
    }

    .why-mlm-stats {
        margin-top: 45px;

        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px;
    }

    .why-mlm-number {
        font-size: 28px;
    }

    .why-mlm-label {
        font-size: 11px;
    }
}


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

@media (max-width: 400px) {

    .why-mlm-heading h2 {
        font-size: 23px;
    }

    .why-mlm-number {
        font-size: 25px;
    }
}

/* =========================================================
   CASE STUDY SECTION
========================================================= */

.case-study-section {
    width: 100%;
    padding: 105px 5.2% 80px;

    background: #020711;
    color: #ffffff;

    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   HEADING
========================================================= */

.case-study-heading {
    max-width: 1150px;
    margin: 0 auto 62px;

    text-align: center;
}

.case-study-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 17px;

    border: 1px solid #4b2788;
    border-radius: 30px;

    background: rgba(92, 45, 160, 0.10);

    color: #995cff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.case-study-heading h2 {
    margin: 30px 0 18px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: -1.2px;
}

.case-study-heading h2 span {
    color: #8d4fff;
}

.case-study-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.case-study-wrapper {
    max-width: 1195px;

    margin: 0 auto;

    padding: 32px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;

    background: #0a0816;

    border: 1px solid #211b38;
    border-radius: 22px;
}


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

.case-study-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-study-card {
    padding: 24px;

    background: #100c20;

    border: 1px solid #28203f;
    border-radius: 17px;
}

.case-study-card-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}

.case-study-card-title h3 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.case-study-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 12px;

    font-size: 17px;
}

.case-study-icon.red {
    color: #ff464c;

    background: rgba(255, 55, 65, 0.10);
    border: 1px solid rgba(255, 55, 65, 0.25);
}

.case-study-icon.green {
    color: #14c58b;

    background: rgba(20, 197, 139, 0.10);
    border: 1px solid rgba(20, 197, 139, 0.25);
}

.case-study-card p {
    margin: 0 0 17px;

    color: #9aa7bc;

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

.case-study-card strong {
    color: #ffffff;
}


/* =========================================================
   LIST
========================================================= */

.case-study-list {
    list-style: none;

    padding: 0;
    margin: 0;
}

.case-study-list li {
    position: relative;

    padding-left: 20px;
    margin-bottom: 11px;

    color: #9aa7bc;

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

.case-study-list li:last-child {
    margin-bottom: 0;
}

.case-study-list li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 8px;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.red-list li::before {
    background: #ff454c;
}

.green-list li::before {
    background: #13c58a;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.case-study-right {
    min-width: 0;
}

.results-card {
    height: 100%;

    padding: 24px;

    background: #100c20;

    border: 1px solid #4a2b76;
    border-radius: 17px;
}

.results-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 19px;
}

.results-title i {
    color: #9a5cff;

    font-size: 21px;
}

.results-title h3 {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}


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

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.result-box {
    min-height: 114px;

    padding: 17px 12px;

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

    text-align: center;

    background: #060512;

    border: 1px solid #141125;
    border-radius: 12px;
}

.result-box strong {
    display: block;

    margin-bottom: 9px;

    color: #8848f7;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.result-box span {
    display: block;

    color: #92a0b5;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.result-box small {
    display: block;

    margin-top: 7px;

    color: #10c992;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   QUOTE
========================================================= */

.case-study-quote {
    margin-top: 25px;

    padding: 18px 20px;

    background: #1b1530;

    border-left: 3px solid #8e4cff;
    border-radius: 0 12px 12px 0;
}

.case-study-quote p {
    margin: 0 0 13px;

    color: #99a6ba;

    font-size: 14px;
    font-style: italic;
    line-height: 1.65;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: 6px;

    flex-wrap: wrap;
}

.quote-author strong {
    color: #ffffff;

    font-size: 13px;
}

.quote-author span {
    color: #8751ec;

    font-size: 12px;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.case-study-disclaimer {
    max-width: 1195px;

    margin: 52px auto 0;

    padding: 18px 22px;

    background: rgba(60, 8, 17, 0.25);

    border: 1px solid #5d2029;
    border-left: 3px solid #ff4148;

    border-radius: 12px;
}

.disclaimer-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #ff484f;

    font-size: 15px;
    font-weight: 700;
}

.case-study-disclaimer p {
    margin: 0;

    color: #99a6ba;

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

.case-study-disclaimer strong {
    color: #ffffff;
}

.case-study-disclaimer a {
    color: #9254f7;
    text-decoration: none;
}

.case-study-disclaimer a:hover {
    text-decoration: underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .case-study-section {
        padding: 80px 4% 60px;
    }

    .case-study-heading h2 {
        font-size: 32px;
    }

    .case-study-heading p {
        font-size: 15px;
    }

    .case-study-heading p br {
        display: none;
    }

    .case-study-wrapper {
        grid-template-columns: 1fr;

        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .case-study-section {
        padding: 65px 16px 50px;
    }

    .case-study-heading {
        margin-bottom: 38px;
    }

    .case-study-badge {
        font-size: 10px;
        padding: 6px 13px;
    }

    .case-study-heading h2 {
        margin-top: 22px;

        font-size: 26px;
        line-height: 1.3;
        letter-spacing: -0.6px;
    }

    .case-study-heading p {
        font-size: 14px;
        line-height: 1.65;
    }

    .case-study-wrapper {
        padding: 12px;

        grid-template-columns: 1fr;
        gap: 16px;

        border-radius: 16px;
    }

    .case-study-card,
    .results-card {
        padding: 20px;

        border-radius: 14px;
    }

    .case-study-card-title h3 {
        font-size: 16px;
    }

    .case-study-card p,
    .case-study-list li,
    .case-study-quote p,
    .case-study-disclaimer p {
        font-size: 13px;
    }

    .results-title h3 {
        font-size: 16px;
    }

    .results-grid {
        gap: 10px;
    }

    .result-box {
        min-height: 105px;
        padding: 13px 8px;
    }

    .result-box strong {
        font-size: 20px;
    }

    .result-box span {
        font-size: 10px;
    }

    .result-box small {
        font-size: 9px;
    }

    .case-study-quote {
        margin-top: 18px;
        padding: 16px;
    }

    .case-study-disclaimer {
        margin-top: 28px;
        padding: 16px;
    }

}


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

@media (max-width: 420px) {

    .case-study-heading h2 {
        font-size: 23px;
    }

    .case-study-wrapper {
        padding: 8px;
    }

    .case-study-card,
    .results-card {
        padding: 17px;
    }

    .results-grid {
        grid-template-columns: 1fr 1fr;
    }

    .result-box strong {
        font-size: 18px;
    }

    .quote-author {
        display: block;
    }

    .quote-author span {
        display: block;
        margin-top: 3px;
    }
}

/* =========================================================
   PLAN COMPARISON SECTION
========================================================= */

.plan-comparison-section {
    width: 100%;
    padding: 75px 5% 85px;

    background: #020711;
    color: #ffffff;

    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   HEADING
========================================================= */

.plan-comparison-heading {
    max-width: 1050px;

    margin: 0 auto 58px;

    text-align: center;
}

.plan-comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 17px;

    border: 1px solid #48277e;
    border-radius: 30px;

    background: rgba(112, 57, 190, 0.08);

    color: #9657ff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.plan-comparison-heading h2 {
    margin: 29px 0 18px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -1.2px;
}

.plan-comparison-heading h2 span {
    color: #8f4fff;
}

.plan-comparison-heading p {
    margin: 0;

    color: #94a2b8;

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


/* =========================================================
   CARDS
========================================================= */

.plan-comparison-cards {
    max-width: 1200px;

    margin: 0 auto 48px;

    display: grid;

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

    gap: 18px;
}

.comparison-card {
    min-width: 0;

    padding: 24px 24px 21px;

    background: #0c0919;

    border: 1px solid #28203e;
    border-radius: 17px;

    transition: border-color 0.25s ease,
        transform 0.25s ease;
}

.comparison-card:hover {
    border-color: #54338d;

    transform: translateY(-3px);
}


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

.hybrid-card {
    border-color: #9657ff;

    box-shadow: 0 0 0 1px rgba(150, 87, 255, 0.06);
}

.hybrid-card:hover {
    border-color: #a96cff;
}


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

.comparison-icon {
    width: 44px;
    height: 44px;

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

    margin-bottom: 18px;

    border-radius: 11px;

    font-size: 18px;
}

.comparison-icon.purple {
    color: #9b62ff;

    background: rgba(116, 55, 213, 0.12);

    border: 1px solid #41206f;
}

.comparison-icon.teal {
    color: #18d5c6;

    background: rgba(14, 181, 170, 0.10);

    border: 1px solid #124e51;
}

.comparison-icon.yellow {
    color: #ffba19;

    background: rgba(238, 164, 0, 0.10);

    border: 1px solid #5c4311;
}


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

.comparison-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}

.comparison-card>p {
    min-height: 118px;

    margin: 0 0 14px;

    color: #98a5b9;

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


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

.comparison-card ul {
    list-style: none;

    padding: 0;
    margin: 0 0 17px;
}

.comparison-card li {
    display: flex;
    align-items: flex-start;
    gap: 6px;

    margin-bottom: 9px;

    color: #9aa7ba;

    font-size: 12px;
    line-height: 1.45;
}

.comparison-card li:last-child {
    margin-bottom: 0;
}

.comparison-card li i {
    flex: 0 0 auto;

    margin-top: 1px;

    font-size: 13px;
}

.comparison-card li.positive i {
    color: #14ca91;
}

.comparison-card li.negative i {
    color: #ff464c;
}


/* =========================================================
   TAGS
========================================================= */

.plan-tag,
.recommended-tag {
    display: inline-flex;
    align-items: center;

    padding: 5px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}

.plan-tag {
    color: #9560f5;

    background: rgba(112, 54, 204, 0.11);

    border: 1px solid #392064;
}

.recommended-tag {
    color: #10cf92;

    background: rgba(10, 179, 127, 0.12);

    border: 1px solid rgba(10, 179, 127, 0.25);
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.comparison-table-wrapper {
    max-width: 1195px;

    margin: 0 auto;

    border: 1px solid #19172c;

    border-radius: 18px;

    overflow: hidden;

    background: #020711;
}

.comparison-table-scroll {
    width: 100%;
    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #4b287e #080714;
}


/* =========================================================
   TABLE
========================================================= */

.comparison-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;

    table-layout: fixed;
}

.comparison-table th {
    height: 51px;

    padding: 0 18px;

    text-align: left;

    color: #9658f9;

    background: #17112d;

    border-bottom: 1px solid #211b38;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.3px;
}

.comparison-table th:first-child {
    width: 24%;
}

.comparison-table th:not(:first-child) {
    width: 19%;
}

.comparison-table th.hybrid-column {
    background: #292052;

    color: #a16aff;
}

.comparison-table td {
    height: 51px;

    padding: 0 18px;

    color: #95a3b8;

    border-bottom: 1px solid #151426;

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

.comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.comparison-table td:first-child {
    color: #9aa7ba;
}

.comparison-table .hybrid-value {
    color: #98a7bb;

    font-weight: 600;
}


/* =========================================================
   TABLE SCROLLBAR
========================================================= */

.comparison-table-scroll::-webkit-scrollbar {
    height: 6px;
}

.comparison-table-scroll::-webkit-scrollbar-track {
    background: #080714;
}

.comparison-table-scroll::-webkit-scrollbar-thumb {
    background: #4b287e;
    border-radius: 10px;
}

.comparison-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #7042b8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .plan-comparison-cards {
        grid-template-columns: repeat(2, 1fr);

        max-width: 850px;
    }

    .comparison-card>p {
        min-height: auto;
    }

}


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

@media (max-width: 767px) {

    .plan-comparison-section {
        padding: 65px 16px 60px;
    }

    .plan-comparison-heading {
        margin-bottom: 38px;
    }

    .plan-comparison-badge {
        padding: 6px 13px;

        font-size: 10px;
    }

    .plan-comparison-heading h2 {
        margin-top: 22px;

        font-size: 27px;

        line-height: 1.3;
        letter-spacing: -0.6px;
    }

    .plan-comparison-heading p {
        font-size: 13px;

        line-height: 1.65;
    }

    .plan-comparison-heading p br {
        display: none;
    }


    /* CARDS */

    .plan-comparison-cards {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-bottom: 30px;
    }

    .comparison-card {
        padding: 21px;

        border-radius: 15px;
    }

    .comparison-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 16px;
    }

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

    .comparison-card>p {
        min-height: auto;

        font-size: 13px;
    }

    .comparison-card li {
        font-size: 12px;
    }


    /* TABLE */

    .comparison-table-wrapper {
        border-radius: 14px;
    }

    .comparison-table {
        min-width: 850px;
    }

    .comparison-table th,
    .comparison-table td {
        padding-left: 14px;
        padding-right: 14px;
    }

}


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

@media (max-width: 420px) {

    .plan-comparison-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .plan-comparison-heading h2 {
        font-size: 24px;
    }

    .comparison-card {
        padding: 18px;
    }

    .comparison-card h3 {
        font-size: 15px;
    }

    .comparison-card>p {
        font-size: 13px;
    }

}

/* =========================================================
   SUSTAINABILITY SECTION
========================================================= */

.sustainability-section {
    width: 100%;
    padding: 85px 5% 90px;

    background: #020711;
    color: #ffffff;

    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   HEADING
========================================================= */

.sustainability-heading {
    max-width: 1050px;

    margin: 0 auto 58px;

    text-align: center;
}

.sustainability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 16px;

    border: 1px solid #45267c;
    border-radius: 30px;

    background: rgba(113, 55, 207, 0.08);

    color: #9658f8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.sustainability-heading h2 {
    margin: 28px 0 18px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -1px;
}

.sustainability-heading h2 span {
    color: #9253f5;
}

.sustainability-heading p {
    margin: 0;

    color: #96a4b8;

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


/* =========================================================
   MAIN CONTENT
========================================================= */

.sustainability-content {
    max-width: 1190px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.02fr 1fr;

    gap: 42px;

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.sustainability-left h3,
.sustainability-right h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 700;

    line-height: 1.25;
}

.sustainability-left>p {
    margin: 0 0 20px;

    color: #96a4b8;

    font-size: 16px;
    line-height: 1.72;
}

.sustainability-left>p strong {
    color: #ffffff;
    font-weight: 700;
}

.sustainability-left>p em {
    color: #9da8ba;
}


/* =========================================================
   WARNING BOX
========================================================= */

.sustainability-warning {
    margin-top: 25px;

    padding: 17px 20px 18px;

    background: #17100e;

    border: 1px solid #61420a;

    border-left: 3px solid #ffb000;

    border-radius: 12px;
}

.warning-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;

    color: #ffb000;

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

.warning-title i {
    font-size: 15px;
}

.sustainability-warning p {
    margin: 0;

    color: #9ca8ba;

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

.sustainability-warning p strong {
    color: #ffffff;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.sustainability-right h3 {
    max-width: 600px;
}

.dashboard-intro {
    margin: 0 0 18px;

    color: #96a4b8;

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

.dashboard-intro strong {
    color: #ffffff;
}


/* =========================================================
   DASHBOARD BOX
========================================================= */

.sustainability-dashboard {
    width: 100%;

    padding: 21px 25px;

    background: #0c0919;

    border: 1px solid #211a36;

    border-radius: 15px;
}


/* =========================================================
   DASHBOARD ITEMS
========================================================= */

.sustainability-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 22px;

    color: #98a5b9;

    font-size: 14px;

    line-height: 1.65;
}

.sustainability-item:last-child {
    margin-bottom: 0;
}

.sustainability-item strong {
    color: #ffffff;

    font-weight: 700;
}


/* =========================================================
   PURPLE BULLET
========================================================= */

.sustainability-dot {
    flex: 0 0 8px;

    width: 8px;
    height: 8px;

    margin-top: 8px;

    border-radius: 50%;

    background: #9657ff;

    box-shadow: 0 0 7px rgba(150, 87, 255, 0.35);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .sustainability-content {
        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 850px;
    }

    .sustainability-heading h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 767px) {

    .sustainability-section {
        padding: 65px 16px 65px;
    }


    /* HEADING */

    .sustainability-heading {
        margin-bottom: 40px;
    }

    .sustainability-badge {
        padding: 6px 13px;

        font-size: 10px;
    }

    .sustainability-heading h2 {
        margin-top: 21px;

        font-size: 27px;

        line-height: 1.3;

        letter-spacing: -0.5px;
    }

    .sustainability-heading p {
        font-size: 13px;

        line-height: 1.7;
    }

    .sustainability-heading p br {
        display: none;
    }


    /* CONTENT */

    .sustainability-content {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    /* HEADINGS */

    .sustainability-left h3,
    .sustainability-right h3 {
        font-size: 22px;

        line-height: 1.35;
    }


    /* PARAGRAPHS */

    .sustainability-left>p,
    .dashboard-intro {
        font-size: 13px;

        line-height: 1.7;
    }


    /* WARNING */

    .sustainability-warning {
        padding: 16px;

        margin-top: 20px;
    }

    .warning-title {
        font-size: 15px;
    }

    .sustainability-warning p {
        font-size: 13px;

        line-height: 1.65;
    }


    /* DASHBOARD */

    .sustainability-dashboard {
        padding: 19px 17px;

        border-radius: 14px;
    }

    .sustainability-item {
        gap: 10px;

        margin-bottom: 20px;

        font-size: 13px;

        line-height: 1.65;
    }

    .sustainability-dot {
        flex-basis: 7px;

        width: 7px;
        height: 7px;

        margin-top: 7px;
    }

}


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

@media (max-width: 420px) {

    .sustainability-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sustainability-heading h2 {
        font-size: 24px;
    }

    .sustainability-left h3,
    .sustainability-right h3 {
        font-size: 20px;
    }

    .sustainability-dashboard {
        padding: 17px 14px;
    }

}

/* =========================================================
   CLIENT SUCCESS STORIES
========================================================= */

.client-stories-section {
    width: 100%;
    padding: 105px 5% 85px;

    background: #020711;
    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.client-stories-heading {
    max-width: 1050px;

    margin: 0 auto 58px;

    text-align: center;
}

.client-stories-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 15px;

    border: 1px solid #45267c;
    border-radius: 30px;

    background: rgba(116, 56, 214, 0.08);

    color: #9859f8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.client-stories-heading h2 {
    margin: 27px 0 17px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -1px;
}

.client-stories-heading h2 span {
    color: #9454f6;
}

.client-stories-heading p {
    margin: 0;

    color: #96a4b8;

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


/* =========================================================
   SLIDER CONTAINER
========================================================= */

.client-slider {
    width: 100%;
    max-width: 1190px;

    margin: 0 auto;

    background: #0c0919;

    border: 1px solid #211a36;

    border-radius: 25px;

    overflow: hidden;

    position: relative;
}


/* =========================================================
   SLIDES
========================================================= */

.client-slides {
    position: relative;

    width: 100%;
}

.client-slide {
    display: none;

    width: 100%;
}

.client-slide.active {
    display: block;
}


/* =========================================================
   REVIEW
========================================================= */

.client-review {
    min-height: 295px;

    padding: 45px 48px 50px;
}


/* =========================================================
   STARS
========================================================= */

.client-stars {
    margin-bottom: 23px;

    color: #ffb000;

    font-size: 16px;

    letter-spacing: 3px;

    line-height: 1;
}


/* =========================================================
   QUOTE
========================================================= */

.client-quote {
    margin: 0 0 27px;

    color: #98a6ba;

    font-size: 17px;

    font-style: italic;

    line-height: 1.72;
}

.client-quote strong {
    color: #ffffff;

    font-weight: 700;
}


/* =========================================================
   PERSON
========================================================= */

.client-person {
    display: flex;
    align-items: center;

    gap: 14px;
}

.client-avatar {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 50%;

    background: linear-gradient(135deg,
            #8b3df5,
            #7440e8);

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

.client-info h4 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}

.client-info span {
    color: #9152ef;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   FOOTER
========================================================= */

.client-slider-footer {
    min-height: 72px;

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

    padding: 0 24px;

    background: #130d25;

    border-top: 1px solid #211a36;
}


/* =========================================================
   ARROWS
========================================================= */

.client-arrow {
    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #080615;

    color: #8490a5;

    font-size: 17px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.client-arrow:hover {
    background: #7e43ed;

    color: #ffffff;

    transform: scale(1.05);
}


/* =========================================================
   DOTS
========================================================= */

.client-dots {
    display: flex;
    align-items: center;

    gap: 6px;
}

.client-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 1px solid #2a2141;

    border-radius: 50%;

    background: #171129;

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.client-dot.active {
    width: 9px;
    height: 9px;

    background: #9252f4;

    border-color: #9252f4;

    box-shadow: 0 0 8px rgba(146, 82, 244, .35);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .client-stories-section {
        padding: 80px 4% 70px;
    }

    .client-stories-heading h2 {
        font-size: 35px;
    }

    .client-slider {
        border-radius: 21px;
    }

    .client-review {
        padding: 38px 35px 42px;
    }

    .client-quote {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .client-stories-section {
        padding: 65px 14px 60px;
    }


    /* HEADING */

    .client-stories-heading {
        margin-bottom: 38px;
    }

    .client-stories-badge {
        padding: 6px 13px;

        font-size: 10px;
    }

    .client-stories-heading h2 {
        margin-top: 21px;

        font-size: 27px;

        line-height: 1.3;

        letter-spacing: -.5px;
    }

    .client-stories-heading p {
        font-size: 13px;

        line-height: 1.7;
    }

    .client-stories-heading p br {
        display: none;
    }


    /* SLIDER */

    .client-slider {
        border-radius: 17px;
    }


    /* REVIEW */

    .client-review {
        min-height: auto;

        padding: 30px 23px 32px;
    }


    /* STARS */

    .client-stars {
        margin-bottom: 18px;

        font-size: 14px;

        letter-spacing: 2px;
    }


    /* QUOTE */

    .client-quote {
        margin-bottom: 25px;

        font-size: 13px;

        line-height: 1.75;
    }


    /* PERSON */

    .client-person {
        gap: 11px;
    }

    .client-avatar {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 16px;
    }

    .client-info h4 {
        font-size: 14px;
    }

    .client-info span {
        font-size: 12px;
    }


    /* FOOTER */

    .client-slider-footer {
        min-height: 64px;

        padding: 0 14px;
    }

    .client-arrow {
        width: 35px;
        height: 35px;

        font-size: 15px;
    }

}


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

@media (max-width: 420px) {

    .client-stories-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .client-stories-heading h2 {
        font-size: 24px;
    }

    .client-review {
        padding: 26px 18px 29px;
    }

    .client-quote {
        font-size: 13px;
    }

    .client-info span {
        font-size: 11px;
    }

}

/* ================= FAQ SECTION ================= */

.faq-section {
    width: 100%;
    padding: 85px 5% 90px;
    background: #05050f;
    color: #fff;
    box-sizing: border-box;
}

.faq-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 58px;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid rgba(139, 92, 246, 0.38);
    border-radius: 30px;
    background: rgba(100, 50, 180, 0.08);
    color: #955cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.faq-badge i {
    font-size: 12px;
}

.faq-heading h2 {
    margin: 0;
    color: #f7f7fa;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.faq-heading h2 span {
    color: #8b5cf6;
}

.faq-heading p {
    margin: 22px auto 0;
    max-width: 760px;
    color: #98a3b9;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 500;
}


/* FAQ CONTAINER */

.faq-container {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
}


/* FAQ ITEM */

.faq-item {
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid #211b38;
    border-radius: 18px;
    background: #0c0919;
    overflow: hidden;
    transition: border-color 0.25s ease,
        background 0.25s ease;
}

.faq-item:hover {
    border-color: #302252;
}


/* QUESTION */

.faq-question {
    width: 100%;
    min-height: 57px;
    padding: 0 22px;
    border: 0;
    outline: none;
    background: transparent;
    color: #f2f1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.faq-question span {
    display: block;
}

.faq-icon {
    flex: 0 0 auto;
    color: #78839b;
    font-size: 16px;
    transition: transform 0.3s ease,
        color 0.3s ease;
}


/* ACTIVE */

.faq-item.active {
    border-color: #2b2443;
    background: #0e0b1c;
}

.faq-item.active .faq-question {
    color: #945cff;
}

.faq-item.active .faq-icon {
    color: #945cff;
    transform: rotate(180deg);
}


/* ANSWER */

.faq-answer {
    display: none;
    padding: 0 22px 20px;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0;
    color: #9ba6bc;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.faq-answer strong {
    color: #f4f2f8;
    font-weight: 700;
}


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

@media (max-width: 768px) {

    .faq-section {
        padding: 65px 16px 70px;
    }

    .faq-heading {
        margin-bottom: 38px;
    }

    .faq-badge {
        font-size: 11px;
        padding: 7px 13px;
        margin-bottom: 20px;
    }

    .faq-heading h2 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: -0.7px;
    }

    .faq-heading p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    .faq-desktop {
        display: none;
    }

    .faq-item {
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .faq-question {
        min-height: 58px;
        padding: 15px 16px;
        font-size: 14px;
        line-height: 1.45;
        gap: 12px;
    }

    .faq-icon {
        font-size: 14px;
    }

    .faq-answer {
        padding: 0 16px 18px;
    }

    .faq-answer p {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .faq-section {
        padding: 55px 12px 60px;
    }

    .faq-heading h2 {
        font-size: 26px;
    }

    .faq-heading p {
        font-size: 13px;
    }

    .faq-question {
        padding: 14px;
        font-size: 13px;
    }

    .faq-answer {
        padding: 0 14px 17px;
    }

    .faq-answer p {
        font-size: 13px;
    }
}

/* =========================================
   HYBRID CTA SECTION
========================================= */

.hybrid-cta-section {
    width: 100%;
    padding: 96px 0 100px;
    background:
        radial-gradient(circle at 75% 50%,
            rgba(128, 70, 255, 0.10),
            transparent 35%),
        #090713;
    overflow: hidden;
}

.hybrid-cta-container {
    width: min(1190px, calc(100% - 40px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.96fr);
    gap: 70px;

    align-items: center;
}


/* =========================================
   LEFT CONTENT
========================================= */

.hybrid-cta-content {
    min-width: 0;
}

.hybrid-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(143, 75, 255, 0.45);
    border-radius: 30px;

    background: rgba(120, 60, 220, 0.08);

    color: #975cff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.8px;
    line-height: 1;
}

.hybrid-cta-badge i {
    font-size: 12px;
}


.hybrid-cta-content h2 {
    margin: 22px 0 20px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.12;
    font-weight: 800;

    letter-spacing: -1.8px;
}

.hybrid-cta-content h2 span {
    color: #9655ff;
}


.hybrid-cta-description {
    max-width: 620px;

    margin: 0 0 28px;

    color: #a9a2bb;

    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}

.hybrid-cta-description strong {
    color: #ffffff;
    font-weight: 700;
}


/* =========================================
   FEATURES
========================================= */

.hybrid-cta-features {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-top: 8px;
}

.hybrid-feature {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    color: #aaa4ba;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}

.hybrid-feature i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #11c99a;
    font-size: 14px;
}


/* =========================================
   BUTTONS
========================================= */

.hybrid-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 30px;
}

.hybrid-demo-btn,
.hybrid-call-btn {
    min-height: 60px;

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

    padding: 0 28px;

    border-radius: 35px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.hybrid-demo-btn {
    color: #7536e8;
    background: #ffffff;
}

.hybrid-demo-btn:hover {
    color: #7536e8;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.12);
}

.hybrid-call-btn {
    color: #ffffff;
    background: linear-gradient(135deg,
            #8b45ef,
            #9958ff);
}

.hybrid-call-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(137, 69, 239, 0.30);
}


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

.hybrid-quote-card {
    width: 100%;

    padding: 34px 36px 38px;

    border: 1px solid rgba(148, 129, 184, 0.30);
    border-radius: 25px;

    background:
        linear-gradient(145deg,
            rgba(42, 32, 58, 0.80),
            rgba(32, 24, 48, 0.88));

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

    backdrop-filter: blur(8px);
}


.hybrid-quote-card h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: -0.8px;
}

.hybrid-quote-subtitle {
    margin: 0 0 27px;

    color: #a8a1b5;

    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================
   FORM
========================================= */

.hybrid-form-group {
    margin-bottom: 17px;
}

.hybrid-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #c2bccd;

    font-size: 13px;
    font-weight: 700;
}

.hybrid-form-group input,
.hybrid-form-group select {
    width: 100%;
    height: 42px;

    padding: 0 14px;

    border: 1px solid rgba(164, 147, 193, 0.28);
    border-radius: 12px;

    outline: none;

    color: #ffffff;
    background: rgba(91, 76, 111, 0.28);

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

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

.hybrid-form-group input::placeholder {
    color: #81798e;
}

.hybrid-form-group input:focus,
.hybrid-form-group select:focus {
    border-color: #8d4df5;

    background: rgba(103, 82, 130, 0.30);

    box-shadow:
        0 0 0 3px rgba(141, 77, 245, 0.10);
}

.hybrid-form-group select {
    cursor: pointer;
}

.hybrid-form-group select option {
    color: #ffffff;
    background: #211a2d;
}


/* =========================================
   QUOTE BUTTON
========================================= */

.hybrid-quote-btn {
    width: 100%;
    height: 55px;

    margin-top: 2px;

    border: 0;
    border-radius: 30px;

    color: #ffffff;

    background: linear-gradient(135deg,
            #8c48ef,
            #995aff);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.hybrid-quote-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(142, 72, 240, 0.30);
}

.hybrid-quote-btn i {
    font-size: 15px;
}


/* =========================================
   FORM NOTE
========================================= */

.hybrid-form-note {
    margin-top: 12px;

    color: #777080;

    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    font-weight: 600;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .hybrid-cta-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hybrid-cta-content {
        max-width: 760px;
    }

    .hybrid-cta-description {
        max-width: 700px;
    }

    .hybrid-quote-card {
        max-width: 700px;
    }
}


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

@media (max-width: 767px) {

    .hybrid-cta-section {
        padding: 65px 0 70px;
    }

    .hybrid-cta-container {
        width: min(100% - 28px, 600px);
        gap: 38px;
    }

    .hybrid-cta-content h2 {
        margin-top: 18px;

        font-size: 35px;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .hybrid-cta-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hybrid-cta-features {
        gap: 12px;
    }

    .hybrid-feature {
        font-size: 13px;
    }

    .hybrid-cta-buttons {
        flex-direction: column;
        align-items: stretch;

        gap: 11px;
    }

    .hybrid-demo-btn,
    .hybrid-call-btn {
        width: 100%;
        min-height: 55px;

        padding: 0 18px;

        font-size: 14px;
    }

    .hybrid-quote-card {
        padding: 26px 20px 28px;
        border-radius: 20px;
    }

    .hybrid-quote-card h3 {
        font-size: 23px;
    }

    .hybrid-quote-subtitle {
        font-size: 13px;
        margin-bottom: 23px;
    }

    .hybrid-form-group {
        margin-bottom: 15px;
    }

    .hybrid-form-group input,
    .hybrid-form-group select {
        height: 46px;
        font-size: 13px;
    }

    .hybrid-quote-btn {
        height: 52px;
        font-size: 14px;
    }
}


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

@media (max-width: 420px) {

    .hybrid-cta-section {
        padding: 50px 0 60px;
    }

    .hybrid-cta-container {
        width: calc(100% - 22px);
    }

    .hybrid-cta-content h2 {
        font-size: 30px;
    }

    .hybrid-cta-description {
        font-size: 13px;
    }

    .hybrid-feature {
        font-size: 12px;
    }

    .hybrid-quote-card {
        padding: 23px 16px 25px;
    }

    .hybrid-quote-card h3 {
        font-size: 21px;
    }
}

/* ===== MOBILE RESPONSIVE FIX ===== */
@media (max-width: 767px) {
    .hybrid-cta-container {
        width: calc(100% - 28px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .hybrid-cta-content,
    .hybrid-quote-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hybrid-cta-content h2 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    .hybrid-cta-description {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .hybrid-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hybrid-demo-btn,
    .hybrid-call-btn {
        width: 100% !important;
        min-height: 54px !important;
    }

    .hybrid-quote-card {
        padding: 25px 18px !important;
    }

    .hybrid-form-group input,
    .hybrid-form-group select,
    .hybrid-quote-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 420px) {
    .hybrid-cta-container {
        width: calc(100% - 20px) !important;
    }

    .hybrid-cta-content h2 {
        font-size: 28px !important;
    }

    .hybrid-cta-description {
        font-size: 13px !important;
    }

    .hybrid-quote-card {
        padding: 22px 15px !important;
    }
}


/*============================================ Matrix MLM Software ===================================*/
/* Matrix Hero */

.matrix-hero {
    position: relative;
    overflow: hidden;
    padding: 86px 0 80px;
    background:
        radial-gradient(circle at 82% 18%, rgba(0, 190, 150, .08), transparent 32%),
        linear-gradient(135deg, #0d1428 0%, #182544 55%, #0c1d31 100%);
    color: #fff;
}

.matrix-hero .container {
    max-width: 1240px;
}

/* Content */

.matrix-hero-content {
    max-width: 610px;
}

.matrix-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(0, 209, 165, .38);
    border-radius: 999px;
    background: rgba(0, 209, 165, .07);
    color: #00d3a7;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-badge i {
    width: 13px;
    height: 13px;
}

.matrix-hero h1 {
    margin: 27px 0 20px;
    color: #f5f8f7;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1.035;
    font-weight: 800;
    letter-spacing: -2.5px;
}

.matrix-hero h1 span {
    color: #bff5df;
}

.matrix-hero-content>p {
    max-width: 570px;
    margin: 0;
    color: #aeb7c8;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.72;
    font-weight: 500;
}

/* Buttons */

.matrix-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 31px;
}

.matrix-hero-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 25px;
    border-radius: 17px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    transition: .25s ease;
}

.matrix-hero-buttons i {
    width: 17px;
    height: 17px;
}

.matrix-btn-primary {
    background: #00bd91;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 205, 160, .22);
}

.matrix-btn-primary:hover {
    background: #00d3a3;
    color: #fff;
    transform: translateY(-2px);
}

.matrix-btn-outline,
.matrix-btn-explore {
    border: 2px solid rgba(178, 188, 207, .42);
    background: transparent;
    color: #eef2f7;
}

.matrix-btn-outline:hover,
.matrix-btn-explore:hover {
    border-color: #00cfa3;
    color: #00d3a7;
    transform: translateY(-2px);
}

.matrix-btn-explore {
    flex-basis: 238px;
}

/* Stats */

.matrix-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
}

.matrix-stat {
    width: 124px;
    min-height: 126px;
    padding: 20px 12px 15px;
    border: 1px solid rgba(157, 175, 211, .19);
    border-radius: 11px;
    background: rgba(94, 112, 158, .16);
    text-align: center;
    box-sizing: border-box;
}

.matrix-stat strong {
    display: block;
    color: #00d3a7;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
}

.matrix-stat span {
    display: block;
    margin-top: 12px;
    color: #aab3c5;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.8;
    font-weight: 600;
}

/* Preview */

.matrix-preview {
    position: relative;
    min-height: 490px;
    padding: 37px 30px 28px;
    border: 1px solid rgba(159, 180, 214, .18);
    border-radius: 28px;
    background: rgba(61, 78, 119, .18);
    box-sizing: border-box;
}

.matrix-live-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 15px;
    border-radius: 999px;
    background: #00b98e;
    color: #fff;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
}

.matrix-preview-title {
    text-align: center;
    color: #00d3a7;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
}

/* Tree */

.matrix-tree {
    position: relative;
    height: 350px;
    margin-top: 24px;
}

.tree-root {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.tree-root span,
.tree-node {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.tree-root span {
    width: 45px;
    height: 45px;
    background: #00cda0;
    border: 1px solid #00f1bc;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(0, 210, 163, .18);
}

.tree-level {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.level-one {
    top: 81px;
    padding: 0 11%;
    box-sizing: border-box;
}

.level-two {
    top: 158px;
}

.level-three {
    top: 235px;
    padding: 0 7%;
    box-sizing: border-box;
}

.tree-node {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #fff;
    font-size: 8px;
}

.node-green {
    flex-direction: column;
    border: 2px solid #00d2a1;
    background: rgba(0, 211, 161, .09);
}

.node-green small {
    font-size: 6px;
}

.node-purple {
    border: 2px solid #743cff;
    background: rgba(116, 60, 255, .12);
    color: #d0bcff;
}

.node-blue {
    width: 27px;
    height: 27px;
    border: 2px solid #397fff;
    background: rgba(57, 127, 255, .1);
    color: #b8d1ff;
    font-size: 7px;
}

.node-empty {
    width: 27px;
    height: 27px;
    border: 1px dashed rgba(150, 165, 193, .3);
    background: transparent;
}

.tree-connector {
    position: absolute;
    left: 50%;
    width: 1px;
    background: rgba(0, 206, 165, .32);
}

.root-line {
    top: 45px;
    height: 36px;
}

.connector-one {
    top: 118px;
    height: 40px;
}

.connector-two {
    top: 195px;
    height: 40px;
}

/* Legend */

.matrix-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 5px;
}

.matrix-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #aab4c7;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
}

.matrix-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-root {
    background: #00cfa0;
}

.legend-one {
    background: #168a78;
}

.legend-two {
    background: #6038bd;
}

.legend-three {
    background: #28599e;
}

/* Tablet */

@media (max-width: 991px) {

    .matrix-hero {
        padding: 70px 0;
    }

    .matrix-hero-content {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .matrix-hero-content>p {
        margin: 0 auto;
    }

    .matrix-hero-buttons,
    .matrix-stats {
        justify-content: center;
    }

    .matrix-preview {
        max-width: 720px;
        margin: 15px auto 0;
    }
}

/* Mobile */

@media (max-width: 767px) {

    .matrix-hero {
        padding: 55px 0 60px;
    }

    .matrix-hero .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-badge {
        font-size: 9px;
        padding: 8px 12px;
    }

    .matrix-hero h1 {
        margin-top: 22px;
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -1.3px;
    }

    .matrix-hero-content>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .matrix-hero-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 25px;
    }

    .matrix-hero-buttons a {
        width: 100%;
        min-height: 53px;
    }

    .matrix-btn-explore {
        flex-basis: auto;
    }

    .matrix-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 34px;
    }

    .matrix-stat {
        width: 100%;
        min-height: 108px;
        padding: 17px 8px 13px;
    }

    .matrix-stat strong {
        font-size: 21px;
    }

    .matrix-stat span {
        margin-top: 8px;
        font-size: 10px;
    }

    .matrix-preview {
        min-height: 410px;
        padding: 34px 12px 20px;
        border-radius: 20px;
    }

    .matrix-preview-title {
        font-size: 9px;
        letter-spacing: .45px;
    }

    .matrix-tree {
        height: 285px;
        margin-top: 22px;
        transform: scale(.88);
        transform-origin: top center;
    }

    .matrix-legend {
        gap: 9px;
        margin-top: -25px;
    }

    .matrix-legend span {
        font-size: 8px;
    }

    .matrix-legend i {
        width: 8px;
        height: 8px;
    }
}

/* Small Mobile */

@media (max-width: 420px) {

    .matrix-hero {
        padding-top: 48px;
    }

    .matrix-hero h1 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .matrix-hero-content>p {
        font-size: 12px;
    }

    .matrix-preview {
        min-height: 370px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .matrix-tree {
        transform: scale(.74);
        transform-origin: top center;
    }

    .matrix-live-badge {
        font-size: 8px;
    }
}

/* Matrix Overview */

.matrix-overview-section {
    position: relative;
    overflow: hidden;
    padding: 98px 0 95px;
    background: #fff;
    color: #172033;
}

.matrix-overview-section .container {
    max-width: 1240px;
}

/* Header */

.matrix-overview-header {
    max-width: 950px;
    margin: 0 auto 62px;
    text-align: center;
}

.matrix-overview-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 194, 151, .25);
    border-radius: 999px;
    background: rgba(0, 201, 157, .07);
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-overview-badge i {
    width: 13px;
    height: 13px;
}

.matrix-overview-header h2 {
    margin: 20px 0 17px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.matrix-overview-header h2 span {
    color: #00bd91;
}

.matrix-overview-header>p {
    margin: 0;
    color: #687b9a;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.9;
}

/* Explanation */

.matrix-explanation-row {
    max-width: 1060px;
    margin: 0 auto;
}

.matrix-explanation-column {
    padding: 0 12px;
}

.matrix-explanation-column h3 {
    margin: 0 0 6px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.55px;
}

.matrix-explanation-column>p {
    margin: 0 0 21px;
    color: #657894;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.82;
}

.matrix-explanation-column strong {
    color: #61718b;
    font-weight: 800;
}

/* Insight */

.matrix-insight-box {
    margin-top: 25px;
    padding: 22px 23px;
    border: 1px solid rgba(0, 193, 150, .3);
    border-left: 4px solid #00c39a;
    border-radius: 11px;
    background: #e1faf4;
}

.matrix-insight-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: #009c79;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.matrix-insight-title i {
    width: 16px;
    height: 16px;
}

.matrix-insight-box p {
    margin: 0;
    color: #3e5b67;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

/* Formula */

.matrix-formula {
    margin: 17px 0 17px;
    padding: 21px 22px;
    border-radius: 12px;
    background: #11182c;
    color: #00d4a4;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Compare */

.matrix-compare-title {
    margin: 27px 0 15px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.matrix-compare-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.matrix-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.matrix-compare-item>i {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 5px;
    color: #00b98e;
}

.matrix-compare-item p {
    margin: 0;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

.matrix-compare-item strong {
    color: #172033;
}

/* Config */

.matrix-config-section {
    max-width: 1060px;
    margin: 66px auto 0;
}

.matrix-config-section>h3 {
    margin: 0 0 40px;
    text-align: center;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.5px;
}

.matrix-config-card {
    position: relative;
    height: 100%;
    min-height: 282px;
    padding: 28px 27px 25px;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #fff;
    box-sizing: border-box;
    transition: .25s ease;
}

.matrix-config-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 192, 150, .35);
    box-shadow: 0 14px 35px rgba(24, 40, 70, .08);
}

.matrix-config-label {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #dcfaf2;
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
}

.matrix-config-label.purple {
    background: #eee8ff;
    color: #7b45e9;
}

.matrix-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 11px;
    background: #ddfaf3;
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 700;
}

.matrix-config-icon.purple-icon {
    background: #eee8ff;
    color: #7541e5;
}

.matrix-config-icon i {
    width: 23px;
    height: 23px;
}

.matrix-config-card h4 {
    margin: 0 0 10px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

.matrix-config-card p {
    margin: 0;
    color: #6b7d9b;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-overview-section {
        padding: 75px 0 80px;
    }

    .matrix-overview-header {
        margin-bottom: 48px;
    }

    .matrix-overview-header h2 {
        font-size: 34px;
    }

    .matrix-explanation-column {
        padding: 0;
    }

    .matrix-config-section {
        margin-top: 50px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-overview-section {
        padding: 62px 0 68px;
    }

    .matrix-overview-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-overview-header {
        margin-bottom: 40px;
    }

    .matrix-overview-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-overview-header h2 {
        margin: 20px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-overview-header>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .matrix-desktop-break {
        display: none;
    }

    .matrix-explanation-row {
        row-gap: 38px;
    }

    .matrix-explanation-column h3 {
        font-size: 22px;
        line-height: 1.3;
    }

    .matrix-explanation-column>p {
        font-size: 13px;
        line-height: 1.8;
    }

    .matrix-insight-box {
        padding: 18px 17px;
    }

    .matrix-insight-title {
        font-size: 14px;
    }

    .matrix-insight-box p {
        font-size: 12px;
        line-height: 1.75;
    }

    .matrix-formula {
        padding: 18px 14px;
        font-size: 11px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .matrix-compare-title {
        font-size: 18px;
    }

    .matrix-compare-item p {
        font-size: 12px;
        line-height: 1.75;
    }

    .matrix-config-section {
        margin-top: 48px;
    }

    .matrix-config-section>h3 {
        margin-bottom: 27px;
        font-size: 22px;
        line-height: 1.35;
    }

    .matrix-config-card {
        min-height: auto;
        padding: 24px 21px;
    }

    .matrix-config-card p {
        font-size: 12px;
        line-height: 1.75;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-overview-section {
        padding: 52px 0 58px;
    }

    .matrix-overview-header h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .matrix-overview-header>p {
        font-size: 12px;
    }

    .matrix-explanation-column h3 {
        font-size: 20px;
    }

    .matrix-config-section>h3 {
        font-size: 20px;
    }

    .matrix-config-card {
        border-radius: 16px;
    }
}

/* Matrix Workflow */

.matrix-workflow-section {
    position: relative;
    overflow: hidden;
    padding: 92px 0 100px;
    background: #f7f9fb;
    color: #172033;
}

.matrix-workflow-section .container {
    max-width: 1240px;
}

/* Header */

.matrix-workflow-header {
    max-width: 900px;
    margin: 0 auto 64px;
    text-align: center;
}

.matrix-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 194, 151, .25);
    border-radius: 999px;
    background: rgba(0, 201, 157, .07);
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-section-badge i {
    width: 14px;
    height: 14px;
}

.matrix-workflow-header h2 {
    margin: 20px 0 18px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.matrix-workflow-header h2 span {
    color: #00bf94;
}

.matrix-workflow-header>p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.9;
}

/* Steps */

.matrix-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
    margin: 0 auto 67px;
}

.matrix-steps::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
            #00c69a,
            #00bda0,
            #00b6d5,
            #7149ee);
}

.matrix-step {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    text-align: center;
}

.matrix-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border: 2px solid #8debd8;
    border-radius: 50%;
    background: #00b991;
    box-shadow: 0 0 0 4px rgba(0, 198, 155, .1);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.matrix-step h4 {
    margin: 0 0 7px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.matrix-step p {
    margin: 0;
    color: #70829e;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.65;
}

/* Spillover */

.matrix-spillover-row {
    max-width: 1160px;
    margin: 0 auto;
}

.matrix-spillover-content {
    padding-right: 20px;
}

.matrix-spillover-content h3 {
    margin: 0 0 7px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.6px;
}

.matrix-spillover-content>p {
    margin: 0 0 20px;
    color: #6c7e9a;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.82;
}

.matrix-spillover-content>p strong {
    color: #60718b;
}

.matrix-spillover-title {
    margin: 27px 0 15px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.matrix-spillover-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.matrix-spillover-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.matrix-spillover-item>i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: #00b990;
}

.matrix-spillover-item:nth-child(2)>i {
    color: #7745ed;
}

.matrix-spillover-item:nth-child(3)>i {
    color: #3e82ed;
}

.matrix-spillover-item p {
    margin: 0;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

/* Dashboard */

.matrix-dashboard {
    overflow: hidden;
    border: 1px solid #26334d;
    border-radius: 27px;
    background: #0d1425;
    box-shadow: 0 22px 45px rgba(23, 35, 58, .18);
}

.matrix-dashboard-top {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 15px;
    background: #151d31;
}

.dashboard-dots {
    display: flex;
    gap: 6px;
}

.dashboard-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dashboard-dots span:nth-child(1) {
    background: #ff4e4e;
}

.dashboard-dots span:nth-child(2) {
    background: #ffb51c;
}

.dashboard-dots span:nth-child(3) {
    background: #00bd82;
}

.dashboard-title {
    flex: 1;
    padding: 7px 11px;
    border-radius: 4px;
    background: #20293d;
    color: #737d91;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
}

.matrix-dashboard-body {
    padding: 17px;
}

/* Stats */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.dashboard-stats>div {
    padding: 12px 9px;
    border: 1px solid #27334b;
    border-radius: 8px;
    background: #151e31;
}

.dashboard-stats strong {
    display: block;
    color: #00d2a3;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.dashboard-stats small {
    display: block;
    margin-top: 3px;
    color: #747e91;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
}

.dashboard-stats b,
.dashboard-stats em {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(0, 205, 160, .13);
    color: #00d0a0;
    font-family: 'Poppins', sans-serif;
    font-size: 7px;
    font-style: normal;
}

.dashboard-stats em {
    background: rgba(255, 75, 105, .14);
    color: #ff7189;
}

/* Progress */

.dashboard-progress {
    margin-top: 11px;
    padding: 12px;
    border: 1px solid #27334b;
    border-radius: 8px;
    background: #151e31;
}

.dashboard-progress h5,
.dashboard-chart h5,
.dashboard-matrix h5 {
    margin: 0 0 10px;
    color: #7b8495;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.progress-row {
    margin-bottom: 8px;
}

.progress-row:last-child {
    margin-bottom: 0;
}

.progress-row>span {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: #858fa2;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
}

.progress-row>span b {
    color: #00cfa1;
}

.progress-row:nth-child(4)>span b {
    color: #ffb71b;
}

.progress-row>div {
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: #242e43;
}

.progress-row>div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #00cba0;
}

.progress-row:nth-child(4)>div i {
    background: #ffb71b;
}

.progress-row:nth-child(5)>div i {
    background: #8654ed;
}

/* Dashboard Bottom */

.dashboard-bottom {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 9px;
    margin-top: 9px;
}

.dashboard-chart,
.dashboard-matrix {
    min-height: 130px;
    padding: 12px;
    border: 1px solid #27334b;
    border-radius: 8px;
    background: #151e31;
    box-sizing: border-box;
}

.bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 82px;
    padding-top: 8px;
}

.bars i {
    width: 12%;
    border-radius: 3px 3px 0 0;
    background: #008d7d;
}

.bars i:nth-child(4),
.bars i:nth-child(5) {
    background: #00b995;
}

.bars i:nth-child(6) {
    background: #8150ed;
}

/* Mini Matrix */

.mini-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mini-you {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00cda0;
    color: #fff;
    font-size: 6px;
}

.mini-level {
    display: flex;
    gap: 7px;
}

.mini-level span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #086f68;
    color: #b5fff1;
    font-size: 5px;
}

.mini-level.purple span {
    background: #47278e;
    color: #d5c6ff;
}

.mini-level.blue span {
    background: #234f8b;
    color: #bdd4ff;
}

.mini-tree small {
    color: #687388;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-workflow-section {
        padding: 75px 0 80px;
    }

    .matrix-workflow-header {
        margin-bottom: 50px;
    }

    .matrix-workflow-header h2 {
        font-size: 34px;
    }

    .matrix-steps {
        grid-template-columns: repeat(5, 1fr);
        margin-bottom: 55px;
    }

    .matrix-step {
        padding: 0 6px;
    }

    .matrix-step p {
        font-size: 10px;
    }

    .matrix-spillover-content {
        padding-right: 0;
        margin-bottom: 35px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-workflow-section {
        padding: 60px 0 65px;
    }

    .matrix-workflow-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-workflow-header {
        margin-bottom: 42px;
    }

    .matrix-section-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-workflow-header h2 {
        margin: 20px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-workflow-header>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .matrix-flow-break {
        display: none;
    }

    /* Steps */

    .matrix-steps {
        display: flex;
        flex-direction: column;
        gap: 27px;
        margin-bottom: 48px;
    }

    .matrix-steps::before {
        top: 25px;
        bottom: 25px;
        left: 25px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg,
                #00c69a,
                #00bda0,
                #00b6d5,
                #7149ee);
    }

    .matrix-step {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 15px;
        padding: 0;
        text-align: left;
    }

    .matrix-step-number {
        grid-row: span 2;
        margin: 0;
    }

    .matrix-step h4 {
        margin: 3px 0 5px;
        font-size: 15px;
    }

    .matrix-step p {
        font-size: 12px;
        line-height: 1.65;
    }

    /* Spillover */

    .matrix-spillover-content {
        margin-bottom: 30px;
    }

    .matrix-spillover-content h3 {
        font-size: 23px;
    }

    .matrix-spillover-content>p {
        font-size: 13px;
        line-height: 1.8;
    }

    .matrix-spillover-title {
        font-size: 18px;
    }

    .matrix-spillover-item p {
        font-size: 12px;
        line-height: 1.7;
    }

    /* Dashboard */

    .matrix-dashboard {
        border-radius: 20px;
    }

    .matrix-dashboard-body {
        padding: 11px;
    }

    .dashboard-title {
        font-size: 9px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .dashboard-stats>div {
        padding: 10px 8px;
    }

    .dashboard-stats strong {
        font-size: 14px;
    }

    .dashboard-bottom {
        grid-template-columns: 1fr;
    }

    .dashboard-chart,
    .dashboard-matrix {
        min-height: 125px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-workflow-section {
        padding: 52px 0 58px;
    }

    .matrix-workflow-header h2 {
        font-size: 26px;
    }

    .matrix-workflow-header>p {
        font-size: 12px;
    }

    .matrix-step {
        grid-template-columns: 46px 1fr;
        column-gap: 12px;
    }

    .matrix-step-number {
        width: 46px;
        height: 46px;
        font-size: 15px;
    }

    .matrix-steps::before {
        left: 22px;
    }

    .matrix-dashboard-top {
        height: 43px;
        padding: 0 10px;
    }

    .dashboard-title {
        font-size: 8px;
    }

    .dashboard-stats small {
        font-size: 7px;
    }

    .dashboard-stats b,
    .dashboard-stats em {
        font-size: 6px;
    }

    .progress-row>span {
        font-size: 7px;
    }
}

/* Matrix Earnings */

.matrix-earning-section {
    position: relative;
    overflow: hidden;
    padding: 92px 0 100px;
    background: #fff;
    color: #172033;
}

.matrix-earning-section .container {
    max-width: 1240px;
}

/* Header */

.matrix-earning-header {
    max-width: 900px;
    margin: 0 auto 62px;
    text-align: center;
}

.matrix-earning-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 194, 151, .28);
    border-radius: 999px;
    background: rgba(0, 201, 157, .07);
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-earning-badge i {
    width: 13px;
    height: 13px;
}

.matrix-earning-header h2 {
    max-width: 700px;
    margin: 20px auto 18px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.matrix-earning-header h2 span {
    color: #00bf94;
}

.matrix-earning-header>p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.85;
}

/* Main Table */

.matrix-earning-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 0 auto 48px;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(25, 42, 70, .06);
}

.matrix-earning-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Poppins', sans-serif;
}

.matrix-earning-table thead th {
    padding: 15px 20px;
    border: 0;
    background: #11192b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.matrix-earning-table thead th:first-child {
    border-radius: 19px 0 0 0;
}

.matrix-earning-table thead th:last-child {
    border-radius: 0 19px 0 0;
}

.matrix-earning-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid #e1e7ef;
    color: #46566e;
    font-size: 13px;
    vertical-align: middle;
}

.matrix-earning-table tbody tr:last-child td {
    border-bottom: 0;
}

.matrix-earning-table tbody td strong {
    color: #3b4b63;
}

.income-green {
    color: #00a982 !important;
    font-size: 15px;
}

.earning-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
}

.earning-status.green {
    background: #d9f8ec;
    color: #008f6e;
}

.earning-status.blue {
    background: #dce9ff;
    color: #315ec1;
}

.earning-status.purple {
    background: #eee5ff;
    color: #7443d8;
}

.cycle-row td {
    background: #ddfaf3;
}

.cycle-row em {
    color: #596b7e;
}

.total-row td {
    background: #effbf5;
}

.total-income {
    color: #00a982 !important;
    font-size: 18px !important;
}

/* Calculator */

.matrix-calculator-row {
    max-width: 1170px;
    margin: 0 auto;
}

.matrix-scenario-card {
    height: 100%;
    padding: 40px 40px 41px;
    border-radius: 27px;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 190, 150, .05), transparent 35%),
        #111a31;
    box-sizing: border-box;
}

.matrix-scenario-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #00d1a2;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.matrix-scenario-title i {
    width: 17px;
    height: 17px;
}

.matrix-scenario-subtitle {
    margin-bottom: 28px;
    color: #929caf;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.matrix-scenario-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.scenario-stat {
    min-height: 104px;
    padding: 18px;
    border: 1px solid #34405a;
    border-radius: 12px;
    background: rgba(42, 54, 81, .55);
    box-sizing: border-box;
}

.scenario-stat span {
    display: block;
    margin-bottom: 8px;
    color: #8993a6;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
}

.scenario-stat strong {
    color: #00d0a1;
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
}

.scenario-stat.purple-stat strong {
    color: #a879ff;
}

.scenario-info-box {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 23px;
    padding: 14px;
    border: 1px solid rgba(0, 202, 162, .38);
    border-radius: 8px;
    background: rgba(0, 191, 157, .09);
}

.scenario-info-box i {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    color: #00d1a2;
}

.scenario-info-box p {
    margin: 0;
    color: #b5c0d1;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.scenario-total-box {
    margin-top: 19px;
    padding: 20px 16px;
    border: 1px solid rgba(0, 204, 162, .4);
    border-radius: 10px;
    background: rgba(0, 190, 157, .1);
}

.scenario-total-box>span {
    display: block;
    color: #91a0b4;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
}

.scenario-total-box>strong {
    display: block;
    margin: 7px 0;
    color: #00d2a2;
    font-family: 'Poppins', sans-serif;
    font-size: 31px;
    font-weight: 800;
}

.scenario-total-box p {
    margin: 0;
    color: #8d9aae;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.65;
}

/* Calculator Card */

.matrix-calculator-card {
    min-height: 100%;
    padding: 29px 28px 31px;
    border: 1px solid #dce4ee;
    border-radius: 22px;
    background: #fff;
    box-sizing: border-box;
}

.matrix-calculator-heading h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.matrix-calculator-heading h3 i {
    width: 18px;
    height: 18px;
    color: #00bd91;
}

.matrix-calculator-heading p {
    margin: 0 0 25px;
    color: #71819b;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

.matrix-input-group {
    margin-bottom: 15px;
}

.matrix-input-group label {
    display: block;
    margin-bottom: 7px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.matrix-input-group input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d8e1eb;
    border-radius: 6px;
    outline: none;
    color: #26344a;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    box-sizing: border-box;
}

.matrix-input-group input:focus {
    border-color: #00b991;
    box-shadow: 0 0 0 3px rgba(0, 190, 145, .08);
}

/* Calc Table */

.matrix-calc-table-wrap {
    max-height: 315px;
    overflow: auto;
    margin-top: 18px;
    border: 1px solid #dce4ee;
    border-radius: 12px;
}

.matrix-calc-table {
    width: 100%;
    min-width: 510px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Poppins', sans-serif;
}

.matrix-calc-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 15px;
    background: #11192b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
}

.matrix-calc-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #e1e7ef;
    color: #47566c;
    font-size: 12px;
}

.matrix-calc-table td:last-child {
    color: #00a982;
    font-weight: 800;
}

.matrix-calc-table tfoot td {
    position: sticky;
    bottom: 0;
    background: #fff;
    color: #172033;
    font-size: 12px;
}

.matrix-calc-table tfoot td:last-child {
    color: #172033;
}

.matrix-calculator-note {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 11px;
    color: #6c7b92;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    line-height: 1.5;
}

.matrix-calculator-note i {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    margin-top: 1px;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-earning-section {
        padding: 75px 0 80px;
    }

    .matrix-earning-header {
        margin-bottom: 48px;
    }

    .matrix-earning-header h2 {
        font-size: 35px;
    }

    .matrix-scenario-card {
        padding: 32px 28px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-earning-section {
        padding: 60px 0 65px;
    }

    .matrix-earning-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-earning-header {
        margin-bottom: 38px;
    }

    .matrix-earning-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-earning-header h2 {
        margin: 19px auto 14px;
        font-size: 29px;
        line-height: 1.18;
        letter-spacing: -.7px;
    }

    .matrix-earning-header>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .matrix-earning-break {
        display: none;
    }

    /* Table */

    .matrix-earning-table-wrap {
        margin-bottom: 30px;
        border-radius: 15px;
    }

    .matrix-earning-table {
        min-width: 880px;
    }

    .matrix-earning-table th {
        padding: 13px 14px;
        font-size: 10px;
    }

    .matrix-earning-table td {
        padding: 12px 14px;
        font-size: 11px;
    }

    /* Scenario */

    .matrix-scenario-card {
        padding: 26px 20px 27px;
        border-radius: 20px;
    }

    .matrix-scenario-title {
        font-size: 15px;
    }

    .matrix-scenario-subtitle {
        font-size: 11px;
        line-height: 1.6;
    }

    .matrix-scenario-stats {
        gap: 10px;
    }

    .scenario-stat {
        min-height: 94px;
        padding: 14px;
    }

    .scenario-stat span {
        font-size: 9px;
        line-height: 1.5;
    }

    .scenario-stat strong {
        font-size: 18px;
    }

    .scenario-info-box {
        padding: 12px;
    }

    .scenario-info-box p {
        font-size: 10px;
    }

    .scenario-total-box>strong {
        font-size: 27px;
    }

    /* Calculator */

    .matrix-calculator-card {
        padding: 23px 17px 25px;
        border-radius: 18px;
    }

    .matrix-calculator-heading h3 {
        font-size: 16px;
    }

    .matrix-calculator-heading p {
        font-size: 11px;
    }

    .matrix-input-group label {
        font-size: 11px;
    }

    .matrix-input-group input {
        height: 43px;
    }

    .matrix-calc-table-wrap {
        max-height: 300px;
        overflow: auto;
    }

    .matrix-calc-table {
        min-width: 510px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-earning-section {
        padding: 52px 0 58px;
    }

    .matrix-earning-header h2 {
        font-size: 26px;
    }

    .matrix-earning-header>p {
        font-size: 12px;
    }

    .matrix-scenario-card {
        padding: 23px 15px 24px;
    }

    .matrix-scenario-stats {
        gap: 8px;
    }

    .scenario-stat {
        min-height: 88px;
        padding: 12px 10px;
    }

    .scenario-stat strong {
        font-size: 16px;
    }

    .matrix-calculator-card {
        padding: 21px 13px 23px;
    }
}

/* Commission Types */

.matrix-commission-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background: #f7f9fb;
    color: #172033;
}

.matrix-commission-section .container {
    max-width: 1240px;
}

.matrix-commission-header {
    max-width: 900px;
    margin: 0 auto 62px;
    text-align: center;
}

.matrix-commission-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(126, 71, 240, .28);
    border-radius: 999px;
    background: rgba(126, 71, 240, .06);
    color: #7944ed;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-commission-badge i {
    width: 14px;
    height: 14px;
}

.matrix-commission-header h2 {
    max-width: 800px;
    margin: 20px auto 18px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.matrix-commission-header h2 span {
    color: #00bf94;
}

.matrix-commission-header>p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.85;
}


/* Cards */

.matrix-commission-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 328px;
    padding: 28px 27px 25px;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 49, 78, .025);
    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease;
}

.matrix-commission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(31, 49, 78, .08);
}

.commission-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 11px;
}

.commission-icon i {
    width: 21px;
    height: 21px;
}

.matrix-commission-card h3 {
    margin: 0 0 12px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.matrix-commission-card>p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.72;
}

.commission-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
}

.commission-tag i {
    width: 12px;
    height: 12px;
}


/* Green */

.commission-green .commission-icon {
    background: #d9f9ef;
    color: #00a982;
}

.commission-green .commission-tag {
    background: #d9f9ef;
    color: #00a982;
}


/* Purple */

.commission-purple .commission-icon {
    background: #eee8ff;
    color: #7541e9;
}

.commission-purple .commission-tag {
    background: #eae3ff;
    color: #7541e9;
}


/* Amber */

.commission-amber .commission-icon {
    background: #fff0c6;
    color: #a35a00;
}

.commission-amber .commission-tag {
    background: #fff0c6;
    color: #9b5700;
}


/* Blue */

.commission-blue .commission-icon {
    background: #dceaff;
    color: #2455bd;
}

.commission-blue .commission-tag {
    background: #dceaff;
    color: #2455bd;
}


/* Pink */

.commission-pink .commission-icon {
    background: #fce4f2;
    color: #b11961;
}

.commission-pink .commission-tag {
    background: #f9e0ef;
    color: #aa1a5e;
}


/* Mint */

.commission-mint .commission-icon {
    background: #d9f8e9;
    color: #00866b;
}

.commission-mint .commission-tag {
    background: #cdf5df;
    color: #08705c;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-commission-section {
        padding: 75px 0 80px;
    }

    .matrix-commission-header {
        margin-bottom: 48px;
    }

    .matrix-commission-header h2 {
        font-size: 35px;
    }

    .matrix-commission-card {
        min-height: 310px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-commission-section {
        padding: 60px 0 65px;
    }

    .matrix-commission-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-commission-header {
        margin-bottom: 38px;
    }

    .matrix-commission-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-commission-header h2 {
        margin: 19px auto 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-commission-header>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .commission-desktop-break {
        display: none;
    }

    .matrix-commission-grid {
        --bs-gutter-y: 16px;
    }

    .matrix-commission-card {
        min-height: auto;
        padding: 24px 20px 21px;
        border-radius: 17px;
    }

    .commission-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 13px;
    }

    .matrix-commission-card h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .matrix-commission-card>p {
        font-size: 12px;
        line-height: 1.7;
    }

    .commission-tag {
        margin-top: 20px;
        font-size: 9px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-commission-section {
        padding: 52px 0 58px;
    }

    .matrix-commission-header h2 {
        font-size: 26px;
    }

    .matrix-commission-header>p {
        font-size: 12px;
    }

    .matrix-commission-card {
        padding: 22px 16px 19px;
    }

    .matrix-commission-card>p {
        font-size: 12px;
    }
}

/* Matrix Benefits */

.matrix-benefits-section {
    position: relative;
    overflow: hidden;
    padding: 92px 0 100px;
    background: #fff;
    color: #172033;
}

.matrix-benefits-section .container {
    max-width: 1240px;
}


/* Header */

.matrix-benefits-header {
    max-width: 900px;
    margin: 0 auto 62px;
    text-align: center;
}

.matrix-benefits-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 194, 151, .28);
    border-radius: 999px;
    background: rgba(0, 201, 157, .07);
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-benefits-badge i {
    width: 14px;
    height: 14px;
}

.matrix-benefits-header h2 {
    margin: 20px 0 18px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.matrix-benefits-header h2 span {
    color: #00bf94;
}

.matrix-benefits-header>p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.9;
}


/* Cards */

.matrix-benefit-card {
    height: 100%;
    min-height: 348px;
    padding: 28px 27px 27px;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #fff;
    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease;
}

.matrix-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(31, 49, 78, .08);
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 19px;
    border-radius: 12px;
}

.benefit-icon i {
    width: 24px;
    height: 24px;
}

.benefit-green {
    background: #d9f9ef;
    color: #00a982;
}

.benefit-purple {
    background: #eee7ff;
    color: #7742eb;
}

.matrix-benefit-card h3 {
    margin: 0 0 12px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.matrix-benefit-card p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.72;
}


/* Benchmarks */

.matrix-benchmark-box {
    margin-top: 28px;
    padding: 28px 32px 29px;
    border: 1px solid #a8e9dc;
    border-radius: 20px;
    background: linear-gradient(110deg,
            #ddfbf4,
            #f0f8ff);
}

.matrix-benchmark-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
}

.matrix-benchmark-title i {
    width: 19px;
    height: 19px;
    color: #00bd91;
}

.matrix-benchmark-title h3 {
    margin: 0;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.benchmark-item {
    margin-bottom: 20px;
}

.benchmark-item:last-child {
    margin-bottom: 0;
}

.benchmark-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 9px;
}

.benchmark-label strong {
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.benchmark-label span {
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.benchmark-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef5;
}

.benchmark-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #00b991;
    transition: width 1s ease;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-benefits-section {
        padding: 75px 0 80px;
    }

    .matrix-benefits-header {
        margin-bottom: 48px;
    }

    .matrix-benefits-header h2 {
        font-size: 35px;
    }

    .matrix-benefit-card {
        min-height: 320px;
    }

    .matrix-benchmark-box {
        padding: 25px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-benefits-section {
        padding: 60px 0 65px;
    }

    .matrix-benefits-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-benefits-header {
        margin-bottom: 38px;
    }

    .matrix-benefits-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-benefits-header h2 {
        margin: 19px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-benefits-header>p {
        font-size: 13px;
        line-height: 1.75;
    }

    .benefits-desktop-break {
        display: none;
    }

    .matrix-benefits-grid {
        --bs-gutter-y: 16px;
    }

    .matrix-benefit-card {
        min-height: auto;
        padding: 24px 20px 23px;
        border-radius: 17px;
    }

    .benefit-icon {
        width: 47px;
        height: 47px;
        margin-bottom: 15px;
    }

    .benefit-icon i {
        width: 21px;
        height: 21px;
    }

    .matrix-benefit-card h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .matrix-benefit-card p {
        font-size: 12px;
        line-height: 1.72;
    }

    .matrix-benchmark-box {
        margin-top: 18px;
        padding: 22px 17px 23px;
        border-radius: 17px;
    }

    .matrix-benchmark-title {
        align-items: flex-start;
        margin-bottom: 19px;
    }

    .matrix-benchmark-title h3 {
        font-size: 14px;
        line-height: 1.45;
    }

    .benchmark-item {
        margin-bottom: 17px;
    }

    .benchmark-label strong,
    .benchmark-label span {
        font-size: 10px;
    }

    .benchmark-progress {
        height: 7px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-benefits-section {
        padding: 52px 0 58px;
    }

    .matrix-benefits-header h2 {
        font-size: 26px;
    }

    .matrix-benefits-header>p {
        font-size: 12px;
    }

    .matrix-benefit-card {
        padding: 21px 16px 20px;
    }

    .matrix-benefit-card p {
        font-size: 12px;
    }

    .matrix-benchmark-box {
        padding: 20px 14px;
    }
}

/* Matrix Features */

.matrix-features-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background: #f7f9fb;
    color: #172033;
}

.matrix-features-section .container {
    max-width: 1240px;
}

.matrix-features-header {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.matrix-features-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #d3c1ff;
    border-radius: 999px;
    background: #f2edff;
    color: #7b43ed;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
}

.matrix-features-badge i {
    width: 14px;
    height: 14px;
}

.matrix-features-header h2 {
    margin: 20px 0 18px;
    color: #151d31;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.matrix-features-header h2 span {
    color: #00bf94;
}

.matrix-features-header p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.85;
}


/* Tabs */

.matrix-feature-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 32px;
    padding: 5px;
    overflow-x: auto;
    border-radius: 18px;
    background: #edf2f7;
    scrollbar-width: none;
}

.matrix-feature-tabs::-webkit-scrollbar {
    display: none;
}

.matrix-feature-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 9px 18px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: .25s ease;
}

.matrix-feature-tab i {
    width: 15px;
    height: 15px;
}

.matrix-feature-tab:hover {
    color: #00a982;
}

.matrix-feature-tab.active {
    color: #00a982;
    background: #fff;
    box-shadow: 0 5px 15px rgba(28, 47, 73, .08);
}


/* Panels */

.matrix-feature-panel {
    display: none;
}

.matrix-feature-panel.active {
    display: block;
}

.matrix-feature-panel h3 {
    margin: 0 0 27px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
}

.feature-intro {
    max-width: 650px;
    margin: 0 0 31px;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* List */

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid #dce4ee;
    border-radius: 13px;
    background: #f9fbfd;
}

.feature-list-item.active-feature {
    border-color: #00c99c;
    background: #ddfbf4;
}

.feature-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #e4e9ef;
    border-radius: 7px;
    background: #fff;
    color: #00bd91;
    box-shadow: 0 2px 5px rgba(20, 40, 70, .05);
}

.feature-item-icon i {
    width: 18px;
    height: 18px;
}

.feature-list-item h4 {
    margin: 2px 0 4px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.feature-list-item p {
    margin: 0;
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.65;
}


/* Side */

.feature-side-card {
    padding: 27px 28px;
    border: 1px solid #dce4ee;
    border-radius: 19px;
    background: #fff;
}

.feature-side-card>h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 23px;
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.feature-side-card>h4 i {
    width: 19px;
    height: 19px;
    color: #00bf94;
}

.spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.spec-row:last-child {
    margin-bottom: 0;
}

.spec-row span {
    color: #687b99;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.spec-row strong {
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
}


/* Stats */

.feature-stat {
    margin-bottom: 21px;
}

.feature-stat:last-child {
    margin-bottom: 0;
}

.stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.stat-label span {
    color: #172033;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.stat-label strong {
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.stat-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f5;
}

.stat-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #00bd91;
}


/* Note */

.feature-note {
    margin-top: 15px;
    padding: 22px 24px;
    border-left: 4px solid #00c99c;
    border-radius: 12px;
    background: #dffbf4;
}

.feature-note h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #00a982;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.feature-note h4 i {
    width: 17px;
    height: 17px;
}

.feature-note p {
    margin: 0;
    color: #49667a;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.75;
}


/* Gateway */

.gateway-tags,
.admin-module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gateway-tags span,
.admin-module-tags span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #dce5ef;
    border-radius: 999px;
    background: #f5f8fb;
    color: #4c5c73;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
}


/* Dark Card */

.dark-feature-card {
    padding: 29px 28px;
    border-radius: 22px;
    background: #11192e;
    color: #fff;
    box-shadow: 0 15px 35px rgba(14, 25, 48, .10);
}

.dark-feature-title {
    margin-bottom: 18px;
    color: #00c89b;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.dark-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 47px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #1d263b;
}

.dark-stat-row:last-child {
    margin-bottom: 0;
}

.dark-stat-row span {
    color: #eef2f7;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.dark-stat-row strong {
    color: #00c99c;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
}


/* Security */

.security-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #f3f6fa;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.security-row:last-child {
    margin-bottom: 0;
}

.security-row i {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: #00c99c;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-features-section {
        padding: 75px 0 80px;
    }

    .matrix-features-header {
        margin-bottom: 45px;
    }

    .matrix-features-header h2 {
        font-size: 35px;
    }

    .matrix-feature-tabs {
        margin-bottom: 27px;
    }

    .matrix-feature-tab {
        font-size: 12px;
        padding: 8px 14px;
    }

    .matrix-feature-panel h3 {
        font-size: 24px;
    }

    .feature-intro {
        font-size: 14px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-features-section {
        padding: 60px 0 65px;
    }

    .matrix-features-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-features-header {
        margin-bottom: 35px;
    }

    .matrix-features-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-features-header h2 {
        margin: 18px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-features-header p {
        font-size: 13px;
        line-height: 1.75;
    }

    .features-desktop-break {
        display: none;
    }

    .matrix-feature-tabs {
        margin: 0 -2px 25px;
        padding: 4px;
        border-radius: 14px;
        gap: 3px;
    }

    .matrix-feature-tab {
        min-height: 42px;
        padding: 8px 13px;
        font-size: 11px;
    }

    .matrix-feature-tab i {
        width: 14px;
        height: 14px;
    }

    .matrix-feature-panel h3 {
        margin-bottom: 17px;
        font-size: 22px;
        line-height: 1.3;
    }

    .feature-intro {
        margin-bottom: 22px;
        font-size: 13px;
        line-height: 1.75;
    }

    .feature-list {
        gap: 11px;
    }

    .feature-list-item {
        gap: 11px;
        padding: 13px;
        border-radius: 12px;
    }

    .feature-item-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
    }

    .feature-item-icon i {
        width: 16px;
        height: 16px;
    }

    .feature-list-item h4 {
        font-size: 13px;
    }

    .feature-list-item p {
        font-size: 12px;
        line-height: 1.65;
    }

    .feature-side-card {
        padding: 22px 18px;
        border-radius: 17px;
    }

    .feature-side-card>h4 {
        font-size: 16px;
        margin-bottom: 19px;
    }

    .spec-row span {
        font-size: 12px;
    }

    .spec-row strong {
        font-size: 13px;
    }

    .feature-note {
        padding: 18px 17px;
    }

    .feature-note p {
        font-size: 12px;
    }

    .dark-feature-card {
        padding: 22px 17px;
        border-radius: 18px;
    }

    .dark-stat-row {
        min-height: 44px;
        padding: 9px 10px;
    }

    .dark-stat-row span {
        font-size: 11px;
    }

    .dark-stat-row strong {
        font-size: 12px;
    }

    .gateway-tags,
    .admin-module-tags {
        gap: 7px;
    }

    .gateway-tags span,
    .admin-module-tags span {
        padding: 7px 10px;
        font-size: 10px;
    }

    .security-row {
        font-size: 12px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-features-section {
        padding: 52px 0 58px;
    }

    .matrix-features-header h2 {
        font-size: 26px;
    }

    .matrix-features-header p {
        font-size: 12px;
    }

    .matrix-feature-tab {
        padding: 8px 11px;
        font-size: 10px;
    }

    .matrix-feature-panel h3 {
        font-size: 20px;
    }

    .feature-intro {
        font-size: 12px;
    }

    .feature-list-item p {
        font-size: 12px;
    }

    .spec-row {
        gap: 8px;
    }

    .spec-row span {
        font-size: 11px;
    }

    .spec-row strong {
        font-size: 12px;
    }
}

/* Logic */

.matrix-logic-section {
    padding: 90px 0 100px;
    background: #fff;
    overflow: hidden;
    color: #151d31;
}

.matrix-logic-section .container {
    max-width: 1240px;
}

.matrix-logic-head {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.matrix-logic-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #9debdc;
    border-radius: 999px;
    background: #ecfffa;
    color: #00a982;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.matrix-logic-badge i {
    width: 14px;
    height: 14px;
}

.matrix-logic-head h2 {
    margin: 20px 0 18px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    color: #000;
    letter-spacing: -1.3px;
}

.matrix-logic-head h2 span {
    color: #00bf94;
}

.matrix-logic-head p {
    margin: 0;
    color: #687b99;
    font-size: 16px;
    line-height: 1.8;
}

.logic-content h3 {
    margin: 0 0 2px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 800;
}

.logic-content p {
    margin: 0 0 29px;
    color: #687b99;
    font-size: 15px;
    line-height: 1.8;
}


/* Matrix */

.forced-matrix-box {
    min-height: 277px;
    padding: 39px 25px 28px;
    border-radius: 27px;
    background: #10182d;
    color: #fff;
}

.forced-matrix-title {
    margin-bottom: 22px;
    text-align: center;
    color: #00c99c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.matrix-tree {
    text-align: center;
}

.matrix-you {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    border: 2px solid #00d2a2;
    border-radius: 50%;
    background: #00bd91;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(0, 210, 162, .15);
}

.matrix-arrow {
    margin: 5px 0 7px;
    color: #677187;
    font-size: 11px;
}

.matrix-level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.matrix-level span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid #00c99c;
    border-radius: 50%;
    background: #14273a;
    color: #00c99c;
    font-size: 11px;
    font-weight: 700;
}

.matrix-level-2 {
    gap: 9px;
}

.matrix-level-2 span {
    border-color: #8845ff;
    background: #21183b;
    color: #a779ff;
}

.matrix-level-3 {
    gap: 9px;
}

.matrix-level-3 span {
    border-color: #3988ff;
    background: #162a4a;
    color: #72aaff;
}

.matrix-level-3 .matrix-empty {
    border-color: #41495a;
    background: transparent;
    border-style: dashed;
}

.matrix-bottom-text {
    margin-top: 14px;
    color: #687187;
    font-size: 10px;
}


/* Parameters */

.logic-parameter-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.logic-parameter {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid #dce4ed;
    border-radius: 13px;
    background: #f9fbfd;
}

.logic-parameter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 7px;
}

.logic-parameter-icon.green {
    background: #ddfaf3;
    color: #00b990;
}

.logic-parameter-icon.purple {
    background: #eee6ff;
    color: #7d42ee;
}

.logic-parameter-icon i {
    width: 18px;
    height: 18px;
}

.logic-parameter h4 {
    margin: 2px 0 5px;
    font-size: 14px;
    font-weight: 800;
}

.logic-parameter p {
    margin: 0;
    color: #687b99;
    font-size: 12px;
    line-height: 1.65;
}


/* Note */

.business-note {
    margin-top: 5px;
    padding: 21px 23px;
    border: 1px solid #8ee8d5;
    border-left: 4px solid #00c99c;
    border-radius: 13px;
    background: #dcfaf3;
}

.business-note h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #00a982;
    font-size: 15px;
    font-weight: 800;
}

.business-note h4 i {
    width: 17px;
    height: 17px;
}

.business-note p {
    margin: 0;
    color: #466477;
    font-size: 13px;
    line-height: 1.75;
}


/* Tablet */

@media (max-width: 991px) {

    .matrix-logic-section {
        padding: 75px 0 80px;
    }

    .matrix-logic-head {
        margin-bottom: 50px;
    }

    .matrix-logic-head h2 {
        font-size: 35px;
    }

    .logic-content h3 {
        font-size: 24px;
    }

    .forced-matrix-box {
        margin-bottom: 10px;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .matrix-logic-section {
        padding: 60px 0 65px;
    }

    .matrix-logic-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .matrix-logic-head {
        margin-bottom: 38px;
    }

    .matrix-logic-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .matrix-logic-head h2 {
        margin: 17px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .matrix-logic-head p {
        font-size: 13px;
        line-height: 1.75;
    }

    .logic-content h3 {
        font-size: 22px;
        line-height: 1.3;
    }

    .logic-content p {
        margin-bottom: 23px;
        font-size: 13px;
        line-height: 1.75;
    }

    .forced-matrix-box {
        min-height: auto;
        padding: 28px 10px 24px;
        border-radius: 20px;
        overflow: hidden;
    }

    .forced-matrix-title {
        font-size: 9px;
        margin-bottom: 20px;
    }

    .matrix-you {
        width: 55px;
        height: 55px;
        font-size: 11px;
    }

    .matrix-level {
        gap: 7px;
    }

    .matrix-level span {
        width: 42px;
        height: 42px;
        font-size: 9px;
    }

    .matrix-level-2 {
        gap: 4px;
    }

    .matrix-level-3 {
        gap: 5px;
    }

    .matrix-level-3 span {
        width: 38px;
        height: 38px;
    }

    .matrix-bottom-text {
        font-size: 9px;
    }

    .logic-parameter-list {
        gap: 11px;
    }

    .logic-parameter {
        gap: 10px;
        padding: 13px;
    }

    .logic-parameter-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    .logic-parameter-icon i {
        width: 16px;
        height: 16px;
    }

    .logic-parameter h4 {
        font-size: 13px;
    }

    .logic-parameter p {
        font-size: 12px;
        line-height: 1.65;
    }

    .business-note {
        padding: 18px 16px;
    }

    .business-note h4 {
        font-size: 14px;
    }

    .business-note p {
        font-size: 12px;
        line-height: 1.7;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .matrix-logic-head h2 {
        font-size: 26px;
    }

    .matrix-logic-head p {
        font-size: 12px;
    }

    .forced-matrix-box {
        padding-left: 5px;
        padding-right: 5px;
    }

    .matrix-level {
        gap: 4px;
    }

    .matrix-level span {
        width: 37px;
        height: 37px;
        font-size: 8px;
    }

    .matrix-level-2 span {
        width: 34px;
        height: 34px;
    }

    .matrix-level-3 span {
        width: 33px;
        height: 33px;
    }

    .matrix-arrow {
        font-size: 9px;
    }
}

/* Authority */

.authority-section {
    padding: 90px 0 100px;
    background: #f8fafc;
    color: #151d31;
    overflow: hidden;
}

.authority-section .container {
    max-width: 1240px;
}

.authority-head {
    max-width: 780px;
    margin: 0 auto 62px;
    text-align: center;
}

.authority-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #9debdc;
    border-radius: 999px;
    background: #ecfffa;
    color: #00a982;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.authority-badge i {
    width: 14px;
    height: 14px;
}

.authority-head h2 {
    margin: 19px 0 17px;
    font-size: 42px;
    color: #000;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.authority-head h2 span {
    color: #00bf94;
}

.authority-head p {
    margin: 0;
    color: #687b99;
    font-size: 16px;
    line-height: 1.8;
}


/* Info Cards */

.authority-info-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 19px;
    padding: 19px 20px;
    border: 1px solid #dce4ed;
    border-radius: 14px;
    background: #fff;
    transition: .3s ease;
}

.authority-info-card:hover {
    border-color: #00c99c;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 30, 50, .08);
}



.authority-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: #ddfaf3;
    color: #00aa85;
}

.authority-icon i {
    width: 21px;
    height: 21px;
}

.authority-info-card h3 {
    margin: 2px 0 6px;
    font-size: 15px;
    font-weight: 800;
}

.authority-info-card p {
    margin: 0;
    color: #687b99;
    font-size: 13px;
    line-height: 1.7;
}


/* Stats */

.authority-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.authority-stat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 130px;
    padding: 20px;
    border: 1px solid #dce4ed;
    border-radius: 19px;
    background: #fff;
    transition: .3s ease;
}

.authority-stat-card:hover {
    border-color: #00c99c;
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(15, 30, 50, .08);
}

.authority-stat-card strong,
.authority-stat-card>span {
    color: #00bf94;
    font-size: 35px;
    line-height: 1;
    font-weight: 800;
}

.authority-stat-card small {
    margin-top: 12px;
    color: #687b99;
    font-size: 13px;
}


/* Technology */

.technology-card {
    padding: 29px 32px;
    border-radius: 19px;
    background: #10182d;
    color: #fff;
}

.technology-card h4 {
    margin: 0 0 20px;
    color: #00c99c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.tech-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid #354056;
    border-radius: 999px;
    background: #182238;
    color: #b8c2d5;
    font-size: 12px;
    font-weight: 700;
    transition: .3s ease;
}

.tech-list span:hover {
    border-color: #00c99c;
    color: #00c99c;
    transform: translateY(-3px);
}

.tech-list i {
    width: 14px;
    height: 14px;
    color: #00c99c;
}


/* Tablet */

@media (max-width: 991px) {

    .authority-section {
        padding: 75px 0 80px;
    }

    .authority-head {
        margin-bottom: 48px;
    }

    .authority-head h2 {
        font-size: 35px;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .authority-section {
        padding: 60px 0 65px;
    }

    .authority-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .authority-head {
        margin-bottom: 38px;
    }

    .authority-badge {
        padding: 7px 12px;
        font-size: 9px;
    }

    .authority-head h2 {
        margin: 17px 0 14px;
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .authority-head p {
        font-size: 13px;
        line-height: 1.75;
    }

    .authority-info-card {
        gap: 11px;
        margin-bottom: 12px;
        padding: 15px;
    }

    .authority-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .authority-icon i {
        width: 18px;
        height: 18px;
    }

    .authority-info-card h3 {
        font-size: 13px;
    }

    .authority-info-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .authority-stats {
        gap: 11px;
        margin-top: 20px;
    }

    .authority-stat-card {
        min-height: 105px;
        padding: 15px 10px;
    }

    .authority-stat-card strong,
    .authority-stat-card>span {
        font-size: 28px;
    }

    .authority-stat-card small {
        margin-top: 9px;
        font-size: 11px;
    }

    .technology-card {
        padding: 23px 17px;
        border-radius: 16px;
    }

    .tech-list {
        gap: 8px;
    }

    .tech-list span {
        padding: 7px 10px;
        font-size: 10px;
    }
}


/* Small Mobile */

@media (max-width: 420px) {

    .authority-head h2 {
        font-size: 26px;
    }

    .authority-head p {
        font-size: 12px;
    }

    .authority-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .authority-stat-card strong,
    .authority-stat-card>span {
        font-size: 25px;
    }

}

/* Case Study */

.matrix-case-section {
    padding: 90px 0 100px;
    background: #fff;
    color: #111a2e;
}

.matrix-case-section .container {
    max-width: 1240px;
}

.case-head {
    max-width: 780px;
    margin: 0 auto 62px;
    text-align: center;
}

.case-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #9debdc;
    border-radius: 999px;
    background: #ecfffa;
    color: #00ad88;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
}

.case-head h2 {
    margin: 20px 0 18px;
    font-size: 42px;
    color: #000;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.case-head h2 span {
    color: #00bf94;
}

.case-head p {
    margin: 0;
    color: #687b99;
    font-size: 16px;
    line-height: 1.85;
}


/* Study Card */

.case-study-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid #dce4ed;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(20, 32, 52, .08);
}

.case-left {
    padding: 46px 40px;
    background: #111b32;
    color: #fff;
}

.case-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid rgba(0, 201, 156, .45);
    border-radius: 999px;
    background: rgba(0, 201, 156, .1);
    color: #00c99c;
    font-size: 11px;
    font-weight: 800;
}

.case-left h3 {
    margin: 21px 0 13px;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 800;
}

.case-left p {
    margin: 0 0 24px;
    color: #aeb8ca;
    font-size: 13px;
    line-height: 1.75;
}

.case-meta {
    display: grid;
    gap: 12px;
}

.case-meta div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aeb8ca;
    font-size: 12px;
}

.case-meta i {
    color: #00c99c;
}

.case-right {
    padding: 48px 40px;
    background: #fff;
}

.result-title {
    margin-bottom: 25px;
    color: #687b99;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.result-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 19px;
}

.result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: #dcfaf2;
    color: #00b98f;
}

.result-icon i {
    font-size: 15px;
}

.result-item strong {
    display: block;
    margin-bottom: 3px;
    color: #111a2e;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
}

.result-item span {
    color: #687b99;
    font-size: 12px;
    line-height: 1.5;
}


/* Testimonials */

.testimonial-heading {
    margin: 65px 0 30px;
    text-align: center;
}

.testimonial-heading h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.testimonial-slider {
    position: relative;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    transition: transform .6s ease;
}

.testimonial-slide {
    position: relative;
    min-width: 100%;
    min-height: 360px;
    padding: 52px 55px 48px;
    border-radius: 28px;
    background: #111b32;
    color: #fff;
    box-sizing: border-box;
}

.stars {
    margin-bottom: 17px;
    color: #ffb000;
    font-size: 15px;
    letter-spacing: 2px;
}

.quote-mark {
    position: absolute;
    top: 68px;
    left: 53px;
    color: #00c99c;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
}

.testimonial-slide p {
    margin: 22px 0 38px;
    padding-left: 23px;
    max-width: 1030px;
    color: #d5dbe5;
    font-size: 17px;
    line-height: 1.9;
    font-weight: 500;
}

.client-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00bfa0, #635bdb);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.client-row strong {
    display: block;
    font-size: 15px;
}

.client-row small {
    display: block;
    margin-top: 3px;
    color: #8e99ad;
    font-size: 12px;
}

.client-result {
    position: absolute;
    right: 50px;
    bottom: 80px;
    min-width: 105px;
    padding: 13px 15px;
    border: 1px solid rgba(0, 201, 156, .4);
    border-radius: 6px;
    background: rgba(0, 201, 156, .1);
    text-align: center;
}

.client-result strong {
    display: block;
    color: #00c99c;
    font-size: 23px;
    font-weight: 800;
}

.client-result small {
    color: #8995a9;
    font-size: 10px;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 28px;
}

.testimonial-prev,
.testimonial-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #dce4ed;
    border-radius: 50%;
    background: #fff;
    color: #172036;
    cursor: pointer;
    transition: .25s ease;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    border-color: #00c99c;
    background: #00c99c;
    color: #fff;
}

.testimonial-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dfe6ef;
    cursor: pointer;
    transition: .3s ease;
}

.testimonial-dot.active {
    width: 24px;
    border-radius: 10px;
    background: #00c99c;
}


/* Mobile */

@media (max-width: 767px) {

    .matrix-case-section {
        padding: 60px 0 70px;
    }

    .matrix-case-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .case-head {
        margin-bottom: 38px;
    }

    .case-head h2 {
        font-size: 29px;
        letter-spacing: -.7px;
    }

    .case-head p {
        font-size: 13px;
        line-height: 1.75;
    }

    .case-study-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
        margin-bottom: 25px;
    }

    .case-left {
        padding: 27px 20px;
    }

    .case-left h3 {
        font-size: 20px;
    }

    .case-left p {
        font-size: 12px;
    }

    .case-right {
        padding: 27px 20px;
    }

    .result-item strong {
        font-size: 20px;
    }

    .result-item span {
        font-size: 11px;
    }

    .testimonial-heading {
        margin: 48px 0 23px;
    }

    .testimonial-heading h2 {
        font-size: 23px;
    }

    .testimonial-slide {
        min-height: 430px;
        padding: 30px 22px;
        border-radius: 20px;
    }

    .testimonial-slide p {
        margin: 20px 0 30px;
        padding-left: 8px;
        font-size: 13px;
        line-height: 1.75;
    }

    .quote-mark {
        top: 58px;
        left: 20px;
        font-size: 35px;
    }

    .client-result {
        position: static;
        display: inline-block;
        margin-top: 25px;
        min-width: 95px;
    }

    .testimonial-controls {
        margin-top: 20px;
    }
}


/* Small */

@media (max-width: 420px) {

    .case-head h2 {
        font-size: 26px;
    }

    .case-left,
    .case-right {
        padding: 24px 16px;
    }

    .testimonial-slide {
        min-height: 460px;
        padding: 27px 17px;
    }

    .testimonial-slide p {
        font-size: 12px;
    }

    .client-result strong {
        font-size: 20px;
    }

}

/* =========================================================
   PLAN COMPARISON SECTION
   ========================================================= */

.plan-comparison-section {
    width: 100%;
    padding: 88px 0 80px;
    background: #f8fafc;
    overflow: hidden;
}

.plan-comparison-container {
    width: min(1150px, calc(100% - 40px));
    margin: 0 auto;
}


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

.plan-comparison-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 62px;
}

.plan-comparison-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 17px;
    border: 1px solid rgba(0, 200, 160, .35);
    background: rgba(0, 200, 160, .08);
    color: #00aF8f;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.plan-comparison-badge svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.plan-comparison-header h2 {
    margin: 0;
    color: #111a2e;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.plan-comparison-header h2 span {
    color: #00bd91;
}

.plan-comparison-header p {
    max-width: 780px;
    margin: 22px auto 0;
    color: #687d9b;
    font-size: 17px;
    line-height: 1.8;
}


/* ================= TABLE ================= */

.plan-comparison-table-wrap {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce4ee;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}

.plan-comparison-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.plan-comparison-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.plan-comparison-table th {
    padding: 16px 18px;
    background: #111a2e;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.plan-comparison-table th:first-child {
    width: 22%;
    text-align: left;
}

.plan-comparison-table th:nth-child(2),
.plan-comparison-table th:nth-child(3),
.plan-comparison-table th:nth-child(4) {
    width: 26%;
}

.plan-comparison-table th.matrix-column {
    background: #00c49a;
}

.plan-comparison-table td {
    padding: 14px 18px;
    color: #465772;
    background: #f8fafc;
    border-bottom: 1px solid #dce4ee;
    border-right: 1px solid #dce4ee;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    vertical-align: middle;
}

.plan-comparison-table td:first-child {
    color: #172138;
    font-weight: 700;
    text-align: left;
}

.plan-comparison-table td.matrix-column {
    background: rgba(0, 193, 154, .065);
}

.plan-comparison-table tr:last-child td {
    border-bottom: 0;
}

.plan-comparison-table td:last-child,
.plan-comparison-table th:last-child {
    border-right: 0;
}


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

.success-text {
    color: #00ae86 !important;
}

.warning-text {
    color: #f59e0b !important;
}

.danger-text {
    color: #ff4141 !important;
}

.matrix-column strong {
    font-weight: 800;
}


/* ================= HIGHLIGHT ROW ================= */

.plan-comparison-table .highlight-row td {
    background: #d9fbf2;
}

.plan-comparison-table .highlight-row td.matrix-column {
    background: #c8f8ec;
}


/* ================= CURRENT PLAN ================= */

.matrix-current {
    color: #00ae86 !important;
    font-weight: 800;
}

.comparison-link {
    color: #4385f5;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

.comparison-link:hover {
    color: #00ae86;
}


/* ================= DECISION GUIDE ================= */

.plan-decision-guide {
    margin-top: 26px;
    padding: 22px 25px;
    border: 1px solid rgba(0, 193, 154, .35);
    border-left: 4px solid #00c49a;
    border-radius: 12px;
    background: linear-gradient(135deg,
            rgba(214, 255, 245, .95),
            rgba(239, 248, 255, .95));
}

.plan-decision-guide h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    color: #00a982;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;
}

.plan-decision-guide h3 svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.plan-decision-guide p {
    margin: 0;
    color: #40536d;
    font-size: 14px;
    line-height: 1.85;
}

.plan-decision-guide strong {
    font-weight: 800;
}


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

@media (max-width: 767px) {

    .plan-comparison-section {
        padding: 60px 0 55px;
    }

    .plan-comparison-container {
        width: calc(100% - 24px);
    }

    .plan-comparison-header {
        margin-bottom: 35px;
        padding: 0 5px;
    }

    .plan-comparison-badge {
        font-size: 11px;
        padding: 7px 14px;
        margin-bottom: 16px;
    }

    .plan-comparison-header h2 {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -.8px;
    }

    .plan-desktop-break {
        display: none;
    }

    .plan-comparison-header p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    .plan-comparison-table-wrap {
        border-radius: 15px;
    }

    .plan-comparison-table-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .plan-comparison-table {
        min-width: 900px;
        width: 900px;
    }

    .plan-comparison-table th {
        padding: 14px 12px;
        font-size: 11px;
    }

    .plan-comparison-table td {
        padding: 13px 12px;
        font-size: 12px;
        line-height: 1.5;
    }

    .plan-comparison-table th:first-child {
        width: 180px;
    }

    .plan-comparison-table th:nth-child(2),
    .plan-comparison-table th:nth-child(3),
    .plan-comparison-table th:nth-child(4) {
        width: 240px;
    }

    .plan-decision-guide {
        margin-top: 20px;
        padding: 18px 16px;
        border-radius: 11px;
    }

    .plan-decision-guide h3 {
        font-size: 15px;
        line-height: 1.45;
    }

    .plan-decision-guide p {
        font-size: 13px;
        line-height: 1.75;
    }
}


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

@media (max-width: 420px) {

    .plan-comparison-section {
        padding: 50px 0 50px;
    }

    .plan-comparison-container {
        width: calc(100% - 16px);
    }

    .plan-comparison-header h2 {
        font-size: 27px;
        line-height: 1.18;
    }

    .plan-comparison-header p {
        font-size: 13px;
    }

    .plan-comparison-table {
        min-width: 850px;
        width: 850px;
    }

    .plan-comparison-table th {
        padding: 12px 10px;
        font-size: 10px;
    }

    .plan-comparison-table td {
        padding: 12px 10px;
        font-size: 12px;
    }

    .plan-comparison-table th:first-child {
        width: 165px;
    }

    .plan-comparison-table th:nth-child(2),
    .plan-comparison-table th:nth-child(3),
    .plan-comparison-table th:nth-child(4) {
        width: 228px;
    }

    .plan-decision-guide {
        padding: 16px 14px;
    }

    .plan-decision-guide h3 {
        font-size: 14px;
    }

    .plan-decision-guide p {
        font-size: 12px;
    }
}

/* =========================================================
   MATRIX MLM FAQ SECTION
========================================================= */

.matrix-faq-section {
    width: 100%;
    padding: 82px 0 80px;
    background: #ffffff;
    overflow: hidden;
}

.matrix-faq-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.matrix-faq-header {
    max-width: 850px;
    margin: 0 auto 62px;
    text-align: center;
}

.matrix-faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 17px;
    margin-bottom: 18px;

    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 999px;

    background: rgba(124, 92, 252, .10);
    color: #7442f5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.matrix-faq-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.8;
}

.matrix-faq-header h2 {
    margin: 0;
    color: #111a2e;

    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.matrix-faq-header h2 span {
    color: #00bf91;
}

.matrix-faq-header p {
    max-width: 760px;
    margin: 20px auto 0;

    color: #687d9b;
    font-size: 17px;
    line-height: 1.8;
}


/* ================= FAQ LIST ================= */

.matrix-faq-list {
    width: 100%;
}

.matrix-faq-item {
    width: 100%;
    margin-bottom: 10px;

    border: 1px solid #dbe3ee;
    border-radius: 13px;

    background: #ffffff;
    overflow: hidden;

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

.matrix-faq-item:hover {
    border-color: #cdd9e8;
}

.matrix-faq-item.active {
    border-color: #00c49a;
    box-shadow: 0 4px 18px rgba(0, 196, 154, .08);
}


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

.matrix-faq-question {
    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 0 20px;

    border: 0;
    outline: none;

    background: transparent;
    color: #172138;

    text-align: left;
    cursor: pointer;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.matrix-faq-question>span:first-child {
    flex: 1;
}

.matrix-faq-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;

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

    border-radius: 50%;
    background: #f0f4f8;
    color: #647994;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.matrix-faq-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.matrix-faq-item.active .matrix-faq-question {
    background: #dcfbf3;
}

.matrix-faq-item.active .matrix-faq-icon {
    background: #00bf91;
    color: #ffffff;
}


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

.matrix-faq-answer {
    display: none;

    padding: 0 21px 21px;

    background: #dcfbf3;
}

.matrix-faq-item.active .matrix-faq-answer {
    display: block;
}

.matrix-faq-answer p {
    margin: 0;

    color: #687d9b;
    font-size: 15px;
    line-height: 1.75;
}

.matrix-faq-answer strong {
    color: #657994;
    font-weight: 800;
}


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

@media (max-width: 767px) {

    .matrix-faq-section {
        padding: 60px 0 60px;
    }

    .matrix-faq-container {
        width: calc(100% - 24px);
    }

    .matrix-faq-header {
        margin-bottom: 38px;
        padding: 0 5px;
    }

    .matrix-faq-badge {
        font-size: 11px;
        padding: 7px 14px;
        margin-bottom: 15px;
    }

    .matrix-faq-header h2 {
        font-size: 30px;
        line-height: 1.18;
        letter-spacing: -.8px;
    }

    .faq-title-break {
        display: none;
    }

    .matrix-faq-header p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    .matrix-faq-item {
        margin-bottom: 8px;
        border-radius: 11px;
    }

    .matrix-faq-question {
        min-height: 58px;
        padding: 14px 14px 14px 16px;
        gap: 12px;

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

    .matrix-faq-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .matrix-faq-icon svg {
        width: 14px;
        height: 14px;
    }

    .matrix-faq-answer {
        padding: 0 16px 17px;
    }

    .matrix-faq-answer p {
        font-size: 13px;
        line-height: 1.75;
    }
}


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

@media (max-width: 420px) {

    .matrix-faq-section {
        padding: 50px 0 50px;
    }

    .matrix-faq-container {
        width: calc(100% - 16px);
    }

    .matrix-faq-header {
        margin-bottom: 32px;
    }

    .matrix-faq-header h2 {
        font-size: 27px;
        line-height: 1.2;
    }

    .matrix-faq-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .matrix-faq-question {
        min-height: 55px;
        padding: 13px 12px 13px 14px;
        font-size: 13px;
    }

    .matrix-faq-answer {
        padding: 0 14px 16px;
    }

    .matrix-faq-answer p {
        font-size: 12px;
        line-height: 1.75;
    }
}

/* =========================================================
   MATRIX MLM CTA SECTION
========================================================= */

.matrix-cta-section {
    width: 100%;
    padding: 100px 20px 105px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 85% 15%,
            rgba(0, 191, 145, 0.08),
            transparent 32%),
        radial-gradient(circle at 10% 90%,
            rgba(32, 92, 170, 0.10),
            transparent 35%),
        #111d35;

    box-sizing: border-box;
}

.matrix-cta-container {
    width: min(1160px, 100%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


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

.matrix-cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 39px;
    padding: 0 17px;

    margin-bottom: 25px;

    border: 1px solid rgba(255, 76, 88, 0.42);
    border-radius: 999px;

    background: rgba(190, 38, 51, 0.12);

    color: #ff9a9f;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}

.matrix-cta-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.8;
}


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

.matrix-cta-title {
    max-width: 1050px;

    margin: 0;

    color: #f4f8ff;

    font-size: 48px;
    line-height: 1.16;
    font-weight: 800;

    letter-spacing: -1.7px;
}

.matrix-cta-title span {
    color: #baf1df;
}


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

.matrix-cta-description {
    max-width: 650px;

    margin: 20px auto 0;

    color: #aab5c8;

    font-size: 17px;
    line-height: 1.85;
    font-weight: 500;
}


/* =========================================================
   BUTTONS
========================================================= */

.matrix-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 34px;
}

.matrix-cta-btn {
    min-width: 190px;
    height: 68px;

    padding: 0 28px;

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

    border-radius: 19px;

    text-decoration: none;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

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

.matrix-cta-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.8;
}


/* PRIMARY */

.matrix-cta-primary {
    color: #ffffff;

    background: #00bd8f;

    box-shadow:
        0 9px 24px rgba(0, 191, 145, 0.30);
}

.matrix-cta-primary:hover {
    color: #ffffff;
    background: #00c99a;

    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(0, 191, 145, 0.38);
}


/* PRICING */

.matrix-cta-pricing {
    color: #00a982;

    background: #ffffff;

    border: 1px solid #ffffff;
}

.matrix-cta-pricing:hover {
    color: #00a982;
    background: #f3fffb;

    transform: translateY(-2px);
}


/* CALL */

.matrix-cta-call {
    color: #eef3fb;

    background: transparent;

    border: 2px solid #5d6c84;
}

.matrix-cta-call:hover {
    color: #ffffff;

    border-color: #7c8da7;

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

    transform: translateY(-2px);
}


/* =========================================================
   TRUST FEATURES
========================================================= */

.matrix-cta-trust {
    max-width: 1080px;

    margin-top: 40px;

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

    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 24px;
}

.matrix-cta-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #aeb8ca;

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

    white-space: nowrap;
}

.matrix-cta-trust-item svg {
    width: 16px;
    height: 16px;

    color: #00c59a;

    stroke-width: 2.7;
}


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

@media (max-width: 767px) {

    .matrix-cta-section {
        padding: 70px 14px 75px;
    }

    .matrix-cta-container {
        width: 100%;
    }

    .matrix-cta-badge {
        max-width: 100%;
        min-height: 36px;

        padding: 0 13px;
        margin-bottom: 22px;

        font-size: 11px;

        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }

    .matrix-cta-badge svg {
        flex-shrink: 0;
    }

    .matrix-cta-title {
        font-size: 33px;
        line-height: 1.18;
        letter-spacing: -1px;
    }

    .matrix-cta-description {
        max-width: 520px;

        margin-top: 17px;

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

    .matrix-cta-buttons {
        width: 100%;

        flex-direction: column;

        gap: 10px;

        margin-top: 29px;
    }

    .matrix-cta-btn {
        width: 100%;
        max-width: 360px;

        min-width: 0;
        height: 56px;

        border-radius: 16px;

        font-size: 14px;
    }

    .matrix-cta-trust {
        width: 100%;

        margin-top: 33px;

        flex-direction: column;

        gap: 17px;
    }

    .matrix-cta-trust-item {
        font-size: 13px;

        white-space: normal;
        text-align: center;
    }
}


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

@media (max-width: 420px) {

    .matrix-cta-section {
        padding: 58px 11px 62px;
    }

    .matrix-cta-badge {
        font-size: 10px;
        padding: 0 11px;
    }

    .matrix-cta-title {
        font-size: 29px;
        line-height: 1.2;
    }

    .matrix-cta-description {
        font-size: 13px;
        line-height: 1.7;
    }

    .matrix-cta-btn {
        max-width: 100%;
        height: 54px;

        font-size: 13px;
    }

    .matrix-cta-trust-item {
        font-size: 12px;
    }
}


/*===================================== Generation MLM Software ===================================*/
/* =========================================================
   GENERATION MLM HERO
========================================================= */

.generation-hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 48%, rgb(2 114 91 / 6%), transparent 34%), linear-gradient(135deg, #001714 0%, #001d19 48%, #001511 100%);
    color: #ffffff;
}

.generation-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(0, 255, 190, 0.018) 1px,
            transparent 1px),
        linear-gradient(rgba(0, 255, 190, 0.018) 1px,
            transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, .5),
            transparent 90%);
}


/* =========================================================
   CONTAINER
========================================================= */

.generation-hero-container {
    position: relative;
    z-index: 2;

    width: min(1200px, calc(100% - 50px));
    margin: 0 auto;

    min-height: 700px;

    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 55px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.generation-hero-content {
    padding-top: 10px;
}


/* BADGE */

.generation-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    border: 1px solid rgba(25, 205, 165, .30);
    border-radius: 30px;

    background: rgba(7, 55, 48, .48);

    color: #26d29f;

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

    margin-bottom: 22px;
}

.generation-badge svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}


/* TITLE */

.generation-title {
    margin: 0;

    font-size: clamp(42px, 4.05vw, 57px);
    line-height: 1.03;

    letter-spacing: -1.8px;

    font-weight: 800;
    color: #ffffff;
}

.generation-title span,
.generation-title strong {
    color: #2bd3a0;
}

.generation-title strong {
    font-weight: 800;
}

.generation-title em {
    color: #ffffff;
    font-style: normal;
}


/* DESCRIPTION */

.generation-description {
    max-width: 600px;

    margin: 25px 0 28px;

    color: #95a8b7;

    font-size: 17px;
    line-height: 1.68;
    font-weight: 500;
}

.generation-description b {
    color: #aebbc6;
    font-weight: 800;
}


/* =========================================================
   BUTTONS
========================================================= */

.generation-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.generation-btn {
    min-height: 61px;

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

    padding: 0 31px;

    border-radius: 34px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 800;

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

.generation-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}


/* PRIMARY */

.generation-btn-primary {
    background: #10a995;
    color: #ffffff;
    border: 1px solid #10a995;
}

.generation-btn-primary:hover {
    background: #16bba4;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(16, 169, 149, .22);
}


/* PRICING */

.generation-btn-pricing {
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(180, 193, 196, .40);
    color: #ffffff;
}

.generation-btn-pricing:hover {
    background: rgba(255, 255, 255, .13);
    border-color: #26d3a5;
    color: #ffffff;
    transform: translateY(-3px);
}


/* LEARN */

.generation-btn-learn {
    min-height: 61px;

    background: transparent;

    border: 2px solid #00aaa0;
    color: #00b9aa;
}

.generation-btn-learn:hover {
    background: rgba(0, 185, 170, .10);
    color: #21d6c1;
    transform: translateY(-3px);
}


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

.generation-stats {
    margin-top: 42px;

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

    gap: 25px;
}

.generation-stat strong {
    display: block;

    color: #16c39d;

    font-size: 28px;
    line-height: 1;

    font-weight: 800;

    margin-bottom: 11px;
}

.generation-stat span {
    display: block;

    color: #718799;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .65px;
}


/* =========================================================
   RIGHT PLAN CARD
========================================================= */

.generation-plan-card {
    position: relative;

    min-height: 500px;

    padding: 28px 20px 25px;

    border-radius: 26px;

    border: 1px solid rgba(19, 177, 145, .25);

    background:
        linear-gradient(145deg,
            rgba(5, 40, 34, .90),
            rgba(1, 29, 25, .92));

    box-shadow:
        0 25px 65px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .015);
}


/* HEADER */

.generation-plan-header {
    position: relative;

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

    margin-bottom: 7px;
}

.generation-plan-header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
}

.generation-sla {
    position: absolute;
    right: -2px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 11px;

    border: 1px solid rgba(16, 199, 155, .35);
    border-radius: 20px;

    background: rgba(10, 82, 69, .35);

    color: #16c99e;

    font-size: 11px;
    font-weight: 800;
}

.generation-sla svg {
    width: 13px;
    height: 13px;
}


/* SUBTITLE */

.generation-plan-subtitle {
    text-align: center;

    color: #20cda0;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .45px;

    margin-bottom: 23px;
}


/* METRICS */

.generation-plan-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;

    margin-bottom: 16px;
}

.generation-metric {
    min-height: 73px;

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

    border-radius: 13px;

    background: rgba(8, 56, 49, .72);
    border: 1px solid rgba(19, 177, 145, .14);
}

.generation-metric strong {
    color: #25d3a1;

    font-size: 17px;
    font-weight: 800;

    margin-bottom: 7px;
}

.generation-metric span {
    color: #627987;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .7px;
}


/* =========================================================
   TREE
========================================================= */

.generation-tree {
    position: relative;

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

    margin: 0 auto;
}


/* YOU */

.generation-you {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    z-index: 2;
}

.generation-person-icon {
    width: 53px;
    height: 53px;

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

    border-radius: 50%;

    background: #11998b;

    border: 2px solid #22ddb0;

    box-shadow: 0 0 0 7px rgba(16, 169, 149, .08);
}

.generation-person-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
    fill: #ffffff;
}

.generation-you span {
    margin-top: 8px;

    color: #6e8493;

    font-size: 9px;
    font-weight: 800;
}

.generation-you small {
    font-size: 9px;
}


/* CONNECTOR */

.generation-connector-main {
    height: 18px;
    width: 1px;

    margin: 0 auto;

    background: #07887d;
}


/* GENERATION TITLE */

.generation-row-title {
    position: relative;

    height: 28px;

    display: flex;
    align-items: center;

    margin-bottom: 1px;
}

.generation-row-title span {
    position: relative;
    z-index: 2;

    padding: 5px 10px;

    border-radius: 15px;

    background: #064a3e;

    color: #15c79a;

    font-size: 9px;
    font-weight: 800;
}

.generation-row-title i {
    position: absolute;
    left: 93px;
    right: 0;

    height: 1px;

    background: rgba(15, 155, 131, .20);
}

.generation-row-muted span {
    opacity: .72;
}


/* LEVEL */

.generation-level {
    position: relative;

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

    gap: 12px;

    min-height: 72px;
}


/* MEMBER */

.generation-member {
    position: relative;

    width: 59px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-circle {
    width: 43px;
    height: 43px;

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

    border-radius: 50%;

    border: 2px solid #20d3a1;

    background: #082f29;

    color: #1dd4a0;

    font-size: 12px;
    font-weight: 800;

    transition: .25s ease;
}

.generation-member:hover .member-circle {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(24, 211, 164, .15);
}

.generation-member small {
    margin-top: 5px;

    white-space: nowrap;

    color: #718593;

    font-size: 8px;
    font-weight: 700;
}


/* ACTIVE SOFT */

.active-soft .member-circle {
    background: #0b4137;
    border-color: #168f77;
    color: #18bc94;
}


/* BREAKAWAY */

.breakaway .member-circle {
    border-color: #ffae00;
    color: #ffae00;

    background: #122c26;
}

.breakaway .member-circle svg {
    width: 14px;
    height: 14px;

    fill: currentColor;
}

.breakaway small {
    color: #ffae00;
}


/* MUTED */

.muted .member-circle {
    border-color: #12685f;

    background: #103633;

    color: #397c76;

    opacity: .65;
}

.muted small {
    color: #536f78;
}


/* MORE */

.more-circle {
    font-size: 9px;
}


/* =========================================================
   LEGEND
========================================================= */

.generation-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 2px;
}

.generation-legend>div {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #718895;

    font-size: 10px;
}

.legend-dot {
    width: 10px;
    height: 10px;

    display: inline-block;

    border-radius: 50%;
}

.legend-active {
    background: #2bd3a0;
}

.legend-breakaway {
    background: #ffab00;
}

.legend-you {
    background: #118f85;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .generation-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;

        padding-top: 55px;
        padding-bottom: 60px;
    }

    .generation-hero {
        min-height: auto;
    }

    .generation-hero-content {
        max-width: 800px;
    }

    .generation-plan-card {
        width: min(650px, 100%);
        margin: 0 auto;
    }

    .generation-title {
        font-size: clamp(42px, 7vw, 62px);
    }
}


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

@media (max-width: 767px) {

    .generation-hero-container {
        width: calc(100% - 28px);

        padding-top: 35px;
        padding-bottom: 45px;

        gap: 38px;
    }

    .generation-badge {
        padding: 8px 12px;

        font-size: 10px;

        line-height: 1.4;
    }

    .generation-title {
        font-size: 38px;
        line-height: 1.06;

        letter-spacing: -1px;
    }

    .generation-description {
        margin-top: 20px;

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

    .generation-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
    }

    .generation-btn,
    .generation-btn-learn {
        width: 100%;

        flex-basis: auto;

        box-sizing: border-box;

        min-height: 54px;

        padding: 0 20px;

        font-size: 14px;
    }

    .generation-stats {
        grid-template-columns: 1fr 1fr;

        gap: 27px 15px;

        margin-top: 35px;
    }

    .generation-stat strong {
        font-size: 24px;
    }

    .generation-stat span {
        font-size: 10px;
    }


    /* PLAN */

    .generation-plan-card {
        min-height: auto;

        padding: 23px 13px 20px;

        border-radius: 20px;
    }

    .generation-plan-header h3 {
        font-size: 16px;
    }

    .generation-sla {
        position: static;

        font-size: 9px;

        padding: 5px 8px;
    }

    .generation-plan-header {
        justify-content: space-between;
        gap: 8px;
    }

    .generation-plan-subtitle {
        font-size: 9px;
        line-height: 1.5;

        margin-top: 8px;
        margin-bottom: 18px;
    }

    .generation-plan-metrics {
        gap: 7px;
    }

    .generation-metric {
        min-height: 65px;
    }

    .generation-metric strong {
        font-size: 15px;
    }

    .generation-level {
        gap: 5px;
    }

    .generation-member {
        width: 55px;
    }

    .member-circle {
        width: 38px;
        height: 38px;

        font-size: 10px;
    }

    .generation-member small {
        font-size: 7px;
    }

    .generation-row-title i {
        left: 82px;
    }

    .generation-legend {
        gap: 8px;

        margin-top: 7px;
    }

    .generation-legend>div {
        font-size: 8px;
    }
}


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

@media (max-width: 420px) {

    .generation-title {
        font-size: 32px;
    }

    .generation-description {
        font-size: 13px;
    }

    .generation-badge {
        font-size: 9px;
    }

    .generation-plan-card {
        padding-left: 9px;
        padding-right: 9px;
    }

    .generation-level {
        gap: 2px;
    }

    .generation-member {
        width: 50px;
    }

    .member-circle {
        width: 35px;
        height: 35px;
    }

    .generation-member small {
        font-size: 6.5px;
    }

    .generation-stat strong {
        font-size: 22px;
    }
}

/* =========================================================
   GENERATION STATS BAR
========================================================= */

.generation-stats-bar {
    width: 100%;

    background: #001d19;

    border-top: 1px solid rgba(25, 190, 157, .12);
    border-bottom: 1px solid rgba(25, 190, 157, .12);

    padding: 46px 0 43px;
}

.generation-stats-bar-inner {
    width: min(1200px, calc(100% - 50px));

    margin: 0 auto;

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

    align-items: center;
}

.generation-bar-stat {
    text-align: center;

    position: relative;
}

.generation-bar-stat strong {
    display: block;

    color: #20c6a0;

    font-size: 32px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -.5px;

    margin-bottom: 17px;
}

.generation-bar-stat span {
    display: block;

    color: #667e8d;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .55px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .generation-stats-bar-inner {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 40px;
    }

    .generation-bar-stat strong {
        font-size: 28px;
    }
}


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

@media (max-width: 600px) {

    .generation-stats-bar {
        padding: 35px 0;
    }

    .generation-stats-bar-inner {
        width: calc(100% - 30px);

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

        gap: 32px 10px;
    }

    .generation-bar-stat strong {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .generation-bar-stat span {
        font-size: 9px;
        line-height: 1.4;
    }
}


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

@media (max-width: 380px) {

    .generation-stats-bar-inner {
        grid-template-columns: 1fr 1fr;
    }

    .generation-bar-stat strong {
        font-size: 23px;
    }

    .generation-bar-stat span {
        font-size: 8px;
    }
}

/* =========================================================
   WHAT IS GENERATION MLM SOFTWARE
========================================================= */

.generation-about-section {
    position: relative;

    width: 100%;

    padding: 82px 0 72px;

    background:
        radial-gradient(circle at 82% 45%,
            rgba(16, 169, 149, .045),
            transparent 35%),
        #001512;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.generation-about-container {
    position: relative;
    z-index: 2;

    width: min(1215px, calc(100% - 50px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, .98fr);

    column-gap: 70px;

    align-items: start;
}


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

.generation-about-left {
    padding-top: 2px;
}


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

.generation-about-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 13px;

    border-radius: 30px;

    border: 1px solid rgba(22, 198, 157, .28);

    background: rgba(7, 63, 53, .38);

    color: #1bc99c;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .45px;

    margin-bottom: 16px;
}

.generation-about-badge svg {
    width: 13px;
    height: 13px;

    fill: currentColor;
}


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

.generation-about-title {
    margin: 0 0 2px;

    color: #f4f8f8;

    font-size: clamp(39px, 4vw, 43px);

    line-height: 1.1;

    letter-spacing: -1.4px;

    font-weight: 800;
}

.generation-about-title span {
    color: #2bd3a0;
}


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

.generation-about-text {
    max-width: 610px;

    margin: 0 0 22px;

    color: #95a9b8;

    font-size: 16.5px;

    line-height: 1.72;

    font-weight: 500;
}

.generation-about-text strong {
    color: #edf4f3;

    font-weight: 800;
}

.generation-about-text em {
    color: #a4b4be;

    font-style: italic;
}

.green-text {
    color: #24d09e !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.generation-about-buttons {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 27px;
}

.generation-about-btn {
    min-height: 52px;

    padding: 0 25px;

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

    gap: 8px;

    border-radius: 28px;

    text-decoration: none;

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

    transition:
        .25s ease;
}

.generation-about-btn svg {
    width: 16px;
    height: 16px;

    stroke-width: 2.5;
}


/* PRIMARY BUTTON */

.generation-about-primary {
    background: #10a994;

    color: #ffffff;

    border: 1px solid #10a994;
}

.generation-about-primary:hover {
    color: #ffffff;

    background: #15b9a1;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(16, 169, 148, .18);
}


/* OUTLINE BUTTON */

.generation-about-outline {
    background: transparent;

    color: #05b9ac;

    border: 2px solid #00aaa0;
}

.generation-about-outline:hover {
    color: #1dd5c2;

    background: rgba(0, 178, 163, .07);

    transform: translateY(-3px);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.generation-about-right {
    display: flex;

    flex-direction: column;

    gap: 24px;
}


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

.generation-info-card {
    position: relative;

    padding: 28px 28px 25px;

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            rgba(5, 48, 41, .96),
            rgba(3, 39, 34, .96));

    border: 1px solid rgba(17, 176, 143, .13);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .12);

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

.generation-info-card:hover {
    transform: translateY(-4px);

    border-color: rgba(27, 207, 161, .30);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .20);
}


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

.generation-info-icon {
    width: 51px;
    height: 51px;

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

    border-radius: 11px;

    background:
        rgba(7, 112, 94, .25);

    border: 1px solid rgba(14, 188, 153, .22);

    margin-bottom: 19px;
}

.generation-info-icon svg {
    width: 23px;
    height: 23px;

    color: #20d0a0;

    stroke-width: 2.5;
}


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

.generation-info-card h3 {
    margin: 0 0 10px;

    color: #f1f6f5;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -.35px;
}


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

.generation-info-card p {
    margin: 0 0 13px;

    color: #93a8b6;

    font-size: 15px;

    line-height: 1.62;

    font-weight: 500;
}

.generation-info-card p:last-child {
    margin-bottom: 0;
}

.generation-info-card strong {
    color: #eaf3f1;

    font-weight: 800;
}

.generation-info-card .green-text {
    color: #22cf9e;
}

.generation-info-card em {
    color: #a1b3bd;

    font-style: italic;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .generation-about-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .generation-about-left {
        max-width: 800px;
    }

    .generation-about-text {
        max-width: 100%;
    }

    .generation-about-right {
        width: 100%;
    }
}


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

@media (max-width: 767px) {

    .generation-about-section {
        padding: 55px 0 55px;
    }

    .generation-about-container {
        width: calc(100% - 28px);

        gap: 35px;
    }

    .generation-about-badge {
        font-size: 9px;

        padding: 7px 10px;

        margin-bottom: 15px;
    }

    .generation-about-title {
        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

        margin-bottom: 16px;
    }

    .generation-about-text {
        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 20px;
    }

    .generation-about-buttons {
        flex-direction: column;

        align-items: stretch;

        width: 100%;

        margin-top: 25px;
    }

    .generation-about-btn {
        width: 100%;

        min-height: 54px;

        box-sizing: border-box;

        font-size: 14px;
    }


    /* CARDS */

    .generation-about-right {
        gap: 16px;
    }

    .generation-info-card {
        padding: 22px 19px 21px;

        border-radius: 17px;
    }

    .generation-info-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 16px;
    }

    .generation-info-icon svg {
        width: 21px;
        height: 21px;
    }

    .generation-info-card h3 {
        font-size: 17px;

        line-height: 1.35;
    }

    .generation-info-card p {
        font-size: 13px;

        line-height: 1.7;
    }
}


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

@media (max-width: 420px) {

    .generation-about-title {
        font-size: 30px;
    }

    .generation-about-text {
        font-size: 13px;
    }

    .generation-info-card h3 {
        font-size: 16px;
    }

    .generation-info-card p {
        font-size: 13px;
    }
}

/* =========================================================
   HOW GENERATION MLM SOFTWARE WORKS
========================================================= */

.generation-process-section {
    position: relative;

    width: 100%;

    padding: 74px 0 78px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(16, 174, 146, .035),
            transparent 38%),
        #001915;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.generation-process-container {
    width: min(1200px, calc(100% - 50px));

    margin: 0 auto;
}


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

.generation-process-header {
    text-align: center;

    margin-bottom: 60px;
}


/* BADGE */

.generation-process-badge {
    width: fit-content;

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

    gap: 7px;

    padding: 7px 13px;

    margin-bottom: 27px;

    border: 1px solid rgba(24, 199, 158, .28);

    border-radius: 30px;

    background: rgba(5, 62, 53, .38);

    color: #20cda0;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .5px;
}

.generation-process-badge svg {
    width: 13px;
    height: 13px;

    stroke-width: 2.7;
}


/* TITLE */

.generation-process-header h2 {
    margin: 0;

    color: #f4f8f7;

    font-size: clamp(38px, 4vw, 43px);

    line-height: 1.15;

    letter-spacing: -1.3px;

    font-weight: 800;
}

.generation-process-header h2 span {
    color: #2bd2a0;
}


/* SUBTITLE */

.generation-process-header p {
    margin: 19px auto 0;

    max-width: 700px;

    color: #93a9b7;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 500;
}


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

.generation-process-grid {
    display: grid;

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

    gap: 25px 24px;
}


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

.generation-process-card {
    position: relative;

    min-height: 278px;

    padding: 46px 22px 27px;

    border-radius: 17px;

    border: 1px solid rgba(18, 176, 145, .18);

    background:
        linear-gradient(145deg,
            rgba(4, 46, 39, .96),
            rgba(3, 40, 34, .96));

    box-sizing: border-box;

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

.generation-process-card:hover {
    transform: translateY(-5px);

    border-color: rgba(27, 207, 162, .38);

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


/* =========================================================
   NUMBER
========================================================= */

.generation-step-number {
    position: absolute;

    top: -12px;
    left: 21px;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #24cda0,
            #14ae96);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 5px 16px rgba(18, 193, 151, .20);
}


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

.generation-step-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 13px;
}

.generation-step-icon svg {
    width: 30px;
    height: 30px;

    color: #29d2a1;

    stroke-width: 2.4;
}


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

.generation-process-card h3 {
    margin: 0 0 8px;

    color: #f3f7f6;

    font-size: 16px;

    line-height: 1.25;

    letter-spacing: -.25px;

    font-weight: 800;
}


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

.generation-process-card p {
    margin: 0;

    color: #93a8b6;

    font-size: 14.5px;

    line-height: 1.63;

    font-weight: 500;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .generation-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .generation-process-header {
        margin-bottom: 50px;
    }
}


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

@media (max-width: 767px) {

    .generation-process-section {
        padding: 55px 0 55px;
    }

    .generation-process-container {
        width: calc(100% - 28px);
    }

    .generation-process-header {
        margin-bottom: 45px;
    }

    .generation-process-badge {
        font-size: 9px;

        padding: 7px 10px;

        margin-bottom: 20px;
    }

    .generation-process-header h2 {
        font-size: 31px;

        line-height: 1.15;

        letter-spacing: -.8px;
    }

    .generation-process-header p {
        font-size: 13px;

        line-height: 1.65;

        margin-top: 15px;
    }

    .generation-desktop-break {
        display: none;
    }


    /* ONE CARD PER ROW */

    .generation-process-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .generation-process-card {
        min-height: auto;

        padding: 44px 19px 24px;

        border-radius: 16px;
    }

    .generation-step-number {
        left: 18px;
    }

    .generation-step-icon {
        margin-bottom: 12px;
    }

    .generation-process-card h3 {
        font-size: 16px;

        line-height: 1.35;
    }

    .generation-process-card p {
        font-size: 13px;

        line-height: 1.7;
    }

    .generation-card-break {
        display: none;
    }
}


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

@media (max-width: 420px) {

    .generation-process-header h2 {
        font-size: 28px;
    }

    .generation-process-header p {
        font-size: 13px;
    }

    .generation-process-card {
        padding-left: 17px;
        padding-right: 17px;
    }

    .generation-process-card p {
        font-size: 13px;
    }
}

/* =========================================================
   GENERATION PLAN EXAMPLE
========================================================= */

.generation-example-section {
    width: 100%;

    padding: 78px 0 70px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(15, 177, 146, .035),
            transparent 35%),
        #001512;

    color: #fff;

    overflow: hidden;
}

.generation-example-container {
    width: min(1200px, calc(100% - 50px));

    margin: 0 auto;
}


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

.generation-example-header {
    text-align: center;

    margin-bottom: 57px;
}

.generation-example-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 13px;

    margin-bottom: 28px;

    border: 1px solid rgba(25, 202, 161, .27);

    border-radius: 25px;

    background: rgba(5, 62, 53, .38);

    color: #20cda0;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .5px;
}

.generation-example-badge svg {
    width: 13px;
    height: 13px;
}

.generation-example-header h2 {
    margin: 0;

    font-size: clamp(38px, 4vw, 43px);

    line-height: 1.15;

    letter-spacing: -1.3px;

    font-weight: 800;

    color: #f4f8f7;
}

.generation-example-header h2 span {
    color: #2bd2a0;
}

.generation-example-header p {
    margin: 20px auto 0;

    color: #91a6b5;

    font-size: 17px;

    line-height: 1.6;

    font-weight: 500;
}


/* =========================================================
   STRUCTURE TITLE
========================================================= */

.generation-structure-title {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

    color: #f2f7f6;

    font-size: 18px;

    font-weight: 800;
}

.generation-structure-title span {
    color: #24d1a0;

    font-size: 27px;

    font-weight: 800;
}


/* =========================================================
   MAIN TABLE
========================================================= */

.generation-main-table-wrap {
    width: 100%;

    overflow-x: auto;

    border-radius: 20px;

    border: 1px solid rgba(20, 171, 141, .14);

    background: #001513;
}

.generation-main-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 900px;
}

.generation-main-table thead {
    background: #032b25;
}

.generation-main-table th {
    height: 49px;

    padding: 0 17px;

    text-align: left;

    color: #25cda0;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .35px;

    white-space: nowrap;
}

.generation-main-table td {
    height: 53px;

    padding: 0 17px;

    border-top: 1px solid rgba(26, 111, 99, .12);

    color: #91a5b4;

    font-size: 14px;

    font-weight: 500;

    white-space: nowrap;
}

.generation-main-table td strong {
    color: #f1f6f5;

    font-weight: 800;
}

.generation-main-table .rate {
    color: #20d1a0;

    font-weight: 800;
}


/* RANK BADGES */

.rank-badge {
    display: inline-flex;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 800;
}

.rank-badge.green {
    color: #16c99d;
    background: rgba(13, 128, 100, .17);
}

.rank-badge.blue {
    color: #348cff;
    background: rgba(20, 91, 168, .17);
}

.rank-badge.yellow {
    color: #f6aa00;
    background: rgba(147, 111, 0, .19);
}


/* =========================================================
   TABLE NOTE
========================================================= */

.generation-table-note {
    display: flex;
    align-items: flex-start;

    gap: 5px;

    margin-top: 12px;

    color: #71889a;

    font-size: 13px;

    line-height: 1.5;
}

.generation-table-note svg {
    width: 13px;
    height: 13px;

    flex-shrink: 0;

    margin-top: 2px;
}


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

.generation-earning-grid {
    display: grid;

    grid-template-columns:
        1.02fr 1fr;

    gap: 46px;

    margin-top: 62px;
}


/* =========================================================
   EARNING LEFT
========================================================= */

.generation-earning-title {
    margin: 0 0 18px;

    color: #f2f7f6;

    font-size: 28px;

    line-height: 1.08;

    letter-spacing: -.7px;

    font-weight: 800;
}

.generation-earning-title span {
    color: #23d09e;
}

.generation-earning-description {
    max-width: 590px;

    margin: 0 0 23px;

    color: #94a9b7;

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   EARNING TABLE
========================================================= */

.generation-earning-table-wrap {
    width: 100%;

    overflow-x: auto;

    border-radius: 18px;

    background: #001512;

    border: 1px solid rgba(20, 169, 141, .10);
}

.generation-earning-table {
    width: 100%;

    min-width: 570px;

    border-collapse: collapse;
}

.generation-earning-table thead {
    background: #032c26;
}

.generation-earning-table th {
    height: 72px;

    padding: 0 18px;

    text-align: left;

    color: #25cda0;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: .45px;
}

.generation-earning-table td {
    height: 50px;

    padding: 0 18px;

    border-top: 1px solid rgba(24, 111, 99, .13);

    color: #8ea3b1;

    font-size: 14px;

    white-space: nowrap;
}

.generation-earning-table td strong {
    color: #f0f5f4;

    font-weight: 800;
}

.generation-earning-table td.rate {
    color: #20d09e;

    font-weight: 800;
}

.generation-earning-table td.income {
    color: #17ce9c;

    font-weight: 800;
}


/* FOOTER TOTAL */

.generation-earning-table tfoot {
    background: #032a24;
}

.generation-earning-table tfoot td {
    height: 55px;

    color: #f1f6f5;

    font-weight: 800;

    border-top: 1px solid rgba(24, 171, 142, .14);
}

.generation-earning-table tfoot td:last-child {
    color: #25d3a1;

    font-size: 16px;

    white-space: nowrap;
}


/* =========================================================
   EARNING NOTE
========================================================= */

.generation-earning-note {
    display: flex;

    gap: 6px;

    margin-top: 19px;

    color: #8ea3b1;

    font-size: 13px;

    line-height: 1.65;
}

.generation-earning-note svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    color: #20cfa0;

    margin-top: 3px;
}

.generation-earning-note strong {
    color: #1fd09e;
}


/* =========================================================
   SIMULATOR
========================================================= */

.generation-simulator-area {
    min-width: 0;
}

.generation-simulator-title {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 17px;

    color: #f2f7f6;

    font-size: 27px;

    line-height: 1.15;

    letter-spacing: -.6px;

    font-weight: 800;
}

.generation-simulator-title svg {
    width: 27px;
    height: 27px;

    color: #23d0a0;

    stroke-width: 2.4;
}


/* SIMULATOR CARD */

.generation-simulator-card {
    padding: 38px 36px 36px;

    border-radius: 25px;

    background:
        linear-gradient(145deg,
            #063a32,
            #032d27);

    border: 1px solid rgba(21, 178, 145, .25);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .18);
}


/* INPUT ROW */

.generation-simulator-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 20px;
}

.generation-field label {
    display: block;

    margin: 0 0 9px;

    color: #91a5b4;

    font-size: 13px;

    font-weight: 700;
}

.generation-field input,
.generation-field select {
    width: 100%;

    height: 40px;

    box-sizing: border-box;

    padding: 0 14px;

    border: 1px solid rgba(17, 155, 130, .18);

    border-radius: 12px;

    outline: none;

    background: #0b4038;

    color: #f0f7f5;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    transition: .25s ease;
}

.generation-field input:focus,
.generation-field select:focus {
    border-color: #20cda0;

    box-shadow:
        0 0 0 3px rgba(32, 205, 160, .08);
}

.generation-field select {
    cursor: pointer;
}


/* =========================================================
   RESULT
========================================================= */

.generation-result-box {
    margin-top: 24px;

    padding: 27px 24px 24px;

    border-radius: 19px;

    background: rgba(8, 66, 56, .78);

    border: 1px solid rgba(25, 173, 143, .15);
}

.generation-result-heading {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #20ce9e;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .35px;

    margin-bottom: 19px;
}

.generation-result-heading svg {
    width: 15px;
    height: 15px;
}


/* RESULT TEXT */

.generation-result-lines {
    color: #f0f6f5;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 600;
}

.generation-result-line {
    display: inline;
}

.generation-result-line strong {
    color: #ffffff;
}


/* TOTAL */

.generation-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 65px;

    margin-top: 17px;

    padding: 0 18px;

    border-radius: 12px;

    border: 1px solid rgba(20, 179, 146, .25);

    background: rgba(8, 67, 57, .75);
}

.generation-total-box span {
    color: #f0f6f5;

    font-size: 14px;

    font-weight: 800;
}

.generation-total-box strong {
    color: #25d3a1;

    font-size: 25px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   GENERATION EXAMPLE - MOBILE RESPONSIVE FIX
   Paste this CSS AFTER all existing CSS
========================================================= */

@media (max-width: 767px) {

    /* ---------- MAIN SECTION ---------- */

    .generation-example-section {
        width: 100% !important;
        padding: 48px 0 45px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .generation-example-container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }


    /* ---------- HEADER ---------- */

    .generation-example-header {
        width: 100% !important;
        margin: 0 0 38px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .generation-example-badge {
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 18px !important;
        padding: 7px 10px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .generation-example-header h2 {
        width: 100% !important;
        margin: 0 !important;
        font-size: 29px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.7px !important;
        word-break: normal !important;
    }

    .generation-example-header p {
        width: 100% !important;
        margin: 15px auto 0 !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .generation-example-desktop {
        display: none !important;
    }


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

    .generation-structure-title {
        width: 100% !important;
        margin-bottom: 14px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .generation-structure-title span {
        font-size: 23px !important;
    }


    /* =====================================================
       MAIN TABLE
       Table itself scrolls, page does NOT overflow
    ===================================================== */

    .generation-main-table-wrap {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;

        scrollbar-width: thin;
    }

    .generation-main-table {
        width: 900px !important;
        min-width: 900px !important;
        max-width: none !important;
        table-layout: fixed !important;
    }

    .generation-main-table th,
    .generation-main-table td {
        box-sizing: border-box !important;
    }

    .generation-main-table th {
        height: 47px !important;
        padding: 0 14px !important;
        font-size: 10px !important;
    }

    .generation-main-table td {
        height: 51px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .generation-main-table th:nth-child(1),
    .generation-main-table td:nth-child(1) {
        width: 145px !important;
    }

    .generation-main-table th:nth-child(2),
    .generation-main-table td:nth-child(2) {
        width: 330px !important;
    }

    .generation-main-table th:nth-child(3),
    .generation-main-table td:nth-child(3) {
        width: 180px !important;
    }

    .generation-main-table th:nth-child(4),
    .generation-main-table td:nth-child(4) {
        width: 190px !important;
    }

    .generation-main-table th:nth-child(5),
    .generation-main-table td:nth-child(5) {
        width: 150px !important;
    }

    .rank-badge {
        font-size: 9px !important;
        padding: 5px 9px !important;
    }


    /* ---------- NOTE ---------- */

    .generation-table-note {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;

        margin-top: 11px !important;

        font-size: 10px !important;
        line-height: 1.55 !important;

        box-sizing: border-box !important;
    }

    .generation-table-note svg {
        flex: 0 0 13px !important;
    }


    /* =====================================================
       EARNING SECTION
    ===================================================== */

    .generation-earning-grid {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 42px !important;

        margin-top: 45px !important;

        box-sizing: border-box !important;
    }


    /* ---------- LEFT ---------- */

    .generation-earning-left {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .generation-earning-title {
        width: 100% !important;

        margin: 0 0 15px !important;

        font-size: 23px !important;
        line-height: 1.18 !important;
        letter-spacing: -.5px !important;

        word-break: normal !important;
    }

    .generation-earning-description {
        width: 100% !important;

        margin: 0 0 20px !important;

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


    /* =====================================================
       EARNING TABLE
    ===================================================== */

    .generation-earning-table-wrap {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;
    }

    .generation-earning-table {
        width: 570px !important;
        min-width: 570px !important;
        max-width: none !important;

        table-layout: fixed !important;
    }

    .generation-earning-table th,
    .generation-earning-table td {
        box-sizing: border-box !important;
    }

    .generation-earning-table th {
        height: 62px !important;

        padding: 0 12px !important;

        font-size: 9px !important;
        line-height: 1.35 !important;
    }

    .generation-earning-table td {
        height: 50px !important;

        padding: 0 12px !important;

        font-size: 12px !important;
    }

    .generation-earning-table th:nth-child(1),
    .generation-earning-table td:nth-child(1) {
        width: 130px !important;
    }

    .generation-earning-table th:nth-child(2),
    .generation-earning-table td:nth-child(2) {
        width: 100px !important;
    }

    .generation-earning-table th:nth-child(3),
    .generation-earning-table td:nth-child(3) {
        width: 125px !important;
    }

    .generation-earning-table th:nth-child(4),
    .generation-earning-table td:nth-child(4) {
        width: 75px !important;
    }

    .generation-earning-table th:nth-child(5),
    .generation-earning-table td:nth-child(5) {
        width: 140px !important;
    }

    .generation-earning-table tfoot td {
        height: 57px !important;
        font-size: 11px !important;
    }

    .generation-earning-table tfoot td:last-child {
        font-size: 14px !important;
    }


    /* ---------- EARNING NOTE ---------- */

    .generation-earning-note {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;

        margin-top: 15px !important;

        font-size: 10px !important;
        line-height: 1.6 !important;

        box-sizing: border-box !important;
    }

    .generation-earning-note svg {
        flex: 0 0 14px !important;
    }


    /* =====================================================
       SIMULATOR
    ===================================================== */

    .generation-simulator-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .generation-simulator-title {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 7px !important;

        margin: 0 0 15px !important;

        font-size: 22px !important;
        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }

    .generation-simulator-title svg {
        width: 22px !important;
        height: 22px !important;

        flex: 0 0 22px !important;
    }


    /* ---------- SIMULATOR CARD ---------- */

    .generation-simulator-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 22px 14px 17px !important;

        border-radius: 19px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* ---------- INPUTS ---------- */

    .generation-simulator-row {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 15px !important;

        margin-bottom: 17px !important;

        box-sizing: border-box !important;
    }

    .generation-field {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .generation-field label {
        margin-bottom: 7px !important;

        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .generation-field input,
    .generation-field select {
        width: 100% !important;
        max-width: 100% !important;

        height: 44px !important;

        padding: 0 12px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }


    /* ---------- RESULT BOX ---------- */

    .generation-result-box {
        width: 100% !important;

        margin-top: 20px !important;

        padding: 20px 13px 15px !important;

        border-radius: 16px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .generation-result-heading {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;

        gap: 7px !important;

        margin-bottom: 15px !important;

        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .generation-result-heading svg {
        flex: 0 0 14px !important;

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


    /* RESULT TEXT */

    .generation-result-lines {
        width: 100% !important;

        font-size: 12px !important;
        line-height: 1.75 !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .generation-result-line {
        display: inline !important;
    }


    /* ---------- TOTAL ---------- */

    .generation-total-box {
        width: 100% !important;

        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 5px !important;

        margin-top: 16px !important;

        padding: 13px 14px !important;

        border-radius: 11px !important;

        box-sizing: border-box !important;
    }

    .generation-total-box span {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .generation-total-box strong {
        font-size: 21px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .generation-example-container {
        width: calc(100% - 20px) !important;
    }

    .generation-example-header h2 {
        font-size: 26px !important;
    }

    .generation-example-header p {
        font-size: 12px !important;
    }

    .generation-earning-title {
        font-size: 21px !important;
    }

    .generation-simulator-title {
        font-size: 20px !important;
    }

    .generation-simulator-card {
        padding: 19px 11px 15px !important;
    }

    .generation-result-box {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .generation-result-lines {
        font-size: 11px !important;
    }

    .generation-total-box strong {
        font-size: 19px !important;
    }
}

/* =========================================================
   8 TYPES OF COMMISSION IN GENERATION MLM
========================================================= */

.generation-income-section {
    position: relative;

    width: 100%;

    padding: 78px 0 72px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(18, 183, 149, .035),
            transparent 36%),
        #001914;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.generation-income-container {
    width: min(1200px, calc(100% - 50px));

    margin: 0 auto;
}


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

.generation-income-header {
    text-align: center;

    margin-bottom: 61px;
}


/* BADGE */

.generation-income-badge {
    width: fit-content;

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

    gap: 7px;

    padding: 7px 13px;

    margin-bottom: 28px;

    border-radius: 25px;

    border: 1px solid rgba(22, 198, 157, .28);

    background: rgba(5, 61, 52, .38);

    color: #20cca0;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .5px;
}

.generation-income-badge svg {
    width: 13px;
    height: 13px;

    stroke-width: 2.5;
}


/* TITLE */

.generation-income-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: clamp(38px, 4vw, 43px);

    line-height: 1.15;

    letter-spacing: -1.3px;

    font-weight: 800;
}

.generation-income-header h2 span {
    color: #2bd2a0;
}


/* DESCRIPTION */

.generation-income-header p {
    margin: 20px auto 0;

    color: #92a7b5;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 500;
}


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

.generation-income-grid {
    display: grid;

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

    gap: 24px 22px;
}


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

.generation-income-card {
    position: relative;

    min-height: 220px;

    padding: 27px 23px 22px;

    box-sizing: border-box;

    border-radius: 17px;

    border: 1px solid rgba(20, 174, 143, .14);

    border-top: 3px solid #19c99c;

    background:
        linear-gradient(145deg,
            rgba(4, 48, 41, .97),
            rgba(3, 41, 35, .97));

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

.generation-income-card:hover {
    transform: translateY(-5px);

    border-color: rgba(29, 207, 161, .35);

    border-top-color: #2bd5a4;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22);
}


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

.generation-income-icon {
    width: 43px;
    height: 43px;

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

    margin-bottom: 14px;
}

.generation-income-icon svg {
    width: 30px;
    height: 30px;

    color: #29d2a0;

    stroke-width: 2.5;
}


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

.generation-income-card h3 {
    margin: 0 0 8px;

    color: #f1f6f5;

    font-size: 16px;

    line-height: 1.3;

    letter-spacing: -.2px;

    font-weight: 800;
}


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

.generation-income-card p {
    margin: 0;

    color: #93a8b6;

    font-size: 14.5px;

    line-height: 1.62;

    font-weight: 500;
}


/* =========================================================
   TAG
========================================================= */

.generation-income-tag {
    display: inline-flex;

    align-items: center;

    margin-top: 15px;

    padding: 5px 11px;

    border-radius: 20px;

    border: 1px solid rgba(21, 191, 151, .25);

    background: rgba(7, 99, 81, .25);

    color: #1dd09f;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   LAST ROW
========================================================= */

.generation-income-card:nth-child(7),
.generation-income-card:nth-child(8) {
    min-height: 240px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .generation-income-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .generation-income-header {
        margin-bottom: 50px;
    }
}


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

@media (max-width: 767px) {

    .generation-income-section {
        padding: 55px 0 55px;
    }

    .generation-income-container {
        width: calc(100% - 28px);
    }

    .generation-income-header {
        margin-bottom: 40px;
    }

    .generation-income-badge {
        font-size: 9px;

        padding: 7px 10px;

        margin-bottom: 20px;
    }

    .generation-income-header h2 {
        font-size: 31px;

        line-height: 1.15;

        letter-spacing: -.8px;
    }

    .generation-income-header p {
        font-size: 13px;

        line-height: 1.7;

        margin-top: 15px;
    }

    .generation-income-desktop {
        display: none;
    }


    /* ONE CARD PER ROW */

    .generation-income-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .generation-income-card,
    .generation-income-card:nth-child(7),
    .generation-income-card:nth-child(8) {
        min-height: auto;

        padding: 23px 18px 22px;

        border-radius: 16px;
    }

    .generation-income-icon {
        margin-bottom: 11px;
    }

    .generation-income-card h3 {
        font-size: 16px;

        line-height: 1.35;
    }

    .generation-income-card p {
        font-size: 13px;

        line-height: 1.7;
    }

    .generation-income-tag {
        font-size: 10px;

        margin-top: 13px;
    }
}


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

@media (max-width: 420px) {

    .generation-income-header h2 {
        font-size: 28px;
    }

    .generation-income-header p {
        font-size: 13px;
    }

    .generation-income-card p {
        font-size: 13px;
    }
}

/* =========================================
   GENERATION MLM BENEFITS SECTION
========================================= */

.generation-benefits-section {
    width: 100%;
    background: #000d0b;
    padding: 100px 0 96px;
    overflow: hidden;
    box-sizing: border-box;
}

.generation-benefits-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


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

.generation-benefits-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 58px;
}

.generation-benefits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(36, 211, 155, 0.28);
    border-radius: 30px;

    background: rgba(15, 211, 155, 0.055);

    color: #2bd39f;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.7px;
    text-transform: uppercase;

    margin-bottom: 30px;
}

.generation-benefits-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.8;
}


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

.generation-benefits-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1.3px;
}

.generation-benefits-header h2 span {
    color: #2bd39f;
}

.generation-benefits-header p {
    max-width: 720px;

    margin: 22px auto 0;

    color: #91a5a9;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}


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

.generation-benefits-grid {
    display: grid;

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

    gap: 16px;

    width: 100%;
}


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

.generation-benefit-card {
    min-height: 128px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 19px 20px;

    background: #062b25;

    border: 1px solid rgba(40, 214, 163, 0.13);

    border-radius: 12px;

    box-sizing: border-box;

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

.generation-benefit-card:hover {
    transform: translateY(-3px);

    border-color: rgba(40, 214, 163, 0.28);

    background: #07322c;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}


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

.generation-benefit-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    background: rgba(13, 197, 151, 0.08);

    border: 1px solid rgba(25, 211, 163, 0.23);

    color: #22d3a0;

    box-sizing: border-box;
}

.generation-benefit-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 2.3;
}


/* =========================================
   CONTENT
========================================= */

.generation-benefit-content {
    min-width: 0;
    padding-top: 1px;
}

.generation-benefit-content h3 {
    margin: 0 0 6px;

    color: #f2f6f5;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: -0.15px;
}

.generation-benefit-content p {
    margin: 0;

    color: #91a7aa;

    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.65;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .generation-benefits-section {
        padding: 80px 0;
    }

    .generation-benefits-header {
        margin-bottom: 45px;
    }

    .generation-benefits-header h2 {
        font-size: 34px;
    }

    .generation-benefits-grid {
        gap: 14px;
    }

    .generation-benefit-card {
        padding: 18px;
    }
}


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

@media (max-width: 767px) {

    .generation-benefits-section {
        padding: 65px 0;
    }

    .generation-benefits-container {
        width: calc(100% - 28px);
    }

    .generation-benefits-header {
        margin-bottom: 36px;
    }

    .generation-benefits-badge {
        font-size: 11px;
        padding: 7px 13px;
        margin-bottom: 22px;
    }

    .generation-benefits-header h2 {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .generation-benefits-header p {
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.7;
    }

    .generation-benefits-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .generation-benefit-card {
        min-height: auto;
        padding: 18px 17px;
        gap: 13px;
    }

    .generation-benefit-icon {
        flex: 0 0 39px;
        width: 39px;
        height: 39px;
    }

    .generation-benefit-icon svg {
        width: 18px;
        height: 18px;
    }

    .generation-benefit-content h3 {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .generation-benefit-content p {
        font-size: 13px;
        line-height: 1.65;
    }
}


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

@media (max-width: 420px) {

    .generation-benefits-section {
        padding: 55px 0;
    }

    .generation-benefits-container {
        width: calc(100% - 22px);
    }

    .generation-benefits-header h2 {
        font-size: 26px;
    }

    .generation-benefits-header p {
        font-size: 13px;
    }

    .generation-benefit-card {
        padding: 16px 14px;
    }

    .generation-benefit-content h3 {
        font-size: 13.5px;
    }

    .generation-benefit-content p {
        font-size: 13px;
    }
}

/* ==========================================
   ADVANCED GENERATION FEATURES
========================================== */

.generation-features-section {
    width: 100%;
    background: #001b17;
    padding: 100px 0 96px;
    overflow: hidden;
    box-sizing: border-box;
}

.generation-features-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


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

.generation-features-header {
    max-width: 1100px;
    margin: 0 auto 58px;
    text-align: center;
}

.generation-features-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(37, 211, 159, 0.25);
    border-radius: 30px;

    background: rgba(37, 211, 159, 0.05);

    color: #2bd39f;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    line-height: 1;

    margin-bottom: 30px;
}

.generation-features-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}


.generation-features-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1.3px;
}

.generation-features-header h2 span {
    color: #2bd39f;
}


.generation-features-header p {
    max-width: 690px;

    margin: 21px auto 0;

    color: #91a6aa;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}


/* ==========================================
   TABS
========================================== */

.generation-features-tabs {
    display: flex;
    align-items: center;

    width: 100%;

    border-bottom: 1px solid rgba(43, 211, 159, 0.10);

    margin-bottom: 32px;

    overflow-x: auto;
    scrollbar-width: none;
}

.generation-features-tabs::-webkit-scrollbar {
    display: none;
}


.generation-feature-tab {
    flex: 0 0 auto;

    border: 0;
    outline: none;

    background: transparent;

    color: #91a5aa;

    padding: 12px 21px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;

    cursor: pointer;

    border-radius: 6px 6px 0 0;

    transition:
        color .25s ease,
        background .25s ease;
}

.generation-feature-tab:hover {
    color: #2bd39f;
}

.generation-feature-tab.active {
    color: #2bd39f;

    background: rgba(22, 211, 159, 0.065);

    box-shadow:
        inset 0 -1px 0 #2bd39f;
}


/* ==========================================
   PANELS
========================================== */

.generation-feature-panel {
    display: none;
}

.generation-feature-panel.active {
    display: block;
}


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

.generation-feature-grid {
    display: grid;

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

    gap: 22px;
}


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

.generation-feature-card {
    min-height: 320px;

    padding: 24px;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, 0.13);

    border-radius: 17px;

    box-sizing: border-box;

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

.generation-feature-card:hover {
    transform: translateY(-4px);

    border-color: rgba(43, 211, 159, 0.28);

    background: #07332c;

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


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

.generation-feature-icon {
    width: 44px;
    height: 44px;

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

    margin-bottom: 15px;

    border-radius: 12px;

    color: #2bd39f;

    background: rgba(16, 205, 158, 0.08);

    border: 1px solid rgba(27, 211, 161, 0.22);
}

.generation-feature-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 2.4;
}


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

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

    color: #f2f6f5;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.35;

    letter-spacing: -.25px;
}

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

    color: #91a7aa;

    font-size: 13.5px;
    font-weight: 500;

    line-height: 1.7;
}


/* ==========================================
   LIST
========================================== */

.generation-feature-card ul {
    margin: 12px 0 0;
    padding: 0 0 0 17px;
}

.generation-feature-card li {
    margin: 0 0 6px;

    color: #91a7aa;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.55;
}

.generation-feature-card li:last-child {
    margin-bottom: 0;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .generation-features-section {
        padding: 80px 0;
    }

    .generation-features-header h2 {
        font-size: 34px;
    }

    .generation-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .generation-feature-card {
        min-height: 300px;
    }

}


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

@media (max-width: 767px) {

    .generation-features-section {
        padding: 65px 0;
    }

    .generation-features-container {
        width: calc(100% - 28px);
    }

    .generation-features-header {
        margin-bottom: 38px;
    }

    .generation-features-badge {
        font-size: 11px;
        padding: 7px 13px;
        margin-bottom: 22px;
    }

    .generation-features-header h2 {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .generation-features-header p {
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.7;
    }


    /* Tabs horizontal scroll */
    .generation-features-tabs {
        margin-bottom: 22px;
        gap: 2px;
    }

    .generation-feature-tab {
        padding: 11px 15px;

        font-size: 12px;
        white-space: nowrap;
    }


    /* Cards */
    .generation-feature-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .generation-feature-card {
        min-height: auto;

        padding: 19px 17px;

        border-radius: 14px;
    }

    .generation-feature-icon {
        width: 41px;
        height: 41px;

        margin-bottom: 14px;
    }

    .generation-feature-icon svg {
        width: 19px;
        height: 19px;
    }

    .generation-feature-card h3 {
        font-size: 15px;
    }

    .generation-feature-card p {
        font-size: 13px;
        line-height: 1.68;
    }

    .generation-feature-card li {
        font-size: 13px;
    }

}


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

@media (max-width: 420px) {

    .generation-features-section {
        padding: 55px 0;
    }

    .generation-features-container {
        width: calc(100% - 22px);
    }

    .generation-features-header h2 {
        font-size: 26px;
    }

    .generation-features-header p {
        font-size: 13px;
    }

    .generation-feature-card {
        padding: 17px 15px;
    }

    .generation-feature-card h3 {
        font-size: 14px;
    }

    .generation-feature-card p,
    .generation-feature-card li {
        font-size: 13px;
    }

}

/* ==========================================
   ADVANCED GENERATION LOGIC
========================================== */

.generation-logic-section {
    width: 100%;
    background: #000d0b;
    padding: 94px 0 96px;
    overflow: hidden;
    box-sizing: border-box;
}

.generation-logic-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


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

.generation-logic-header {
    max-width: 1150px;
    margin: 0 auto 58px;
    text-align: center;
}

.generation-logic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(42, 211, 159, 0.28);
    border-radius: 30px;

    background: rgba(42, 211, 159, 0.045);

    color: #2bd39f;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .7px;

    margin-bottom: 30px;
}

.generation-logic-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}


.generation-logic-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: -1.25px;
}

.generation-logic-header h2 span {
    color: #2bd39f;
}


.generation-logic-header p {
    max-width: 690px;

    margin: 20px auto 0;

    color: #91a6aa;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}


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

.generation-logic-grid {
    display: grid;

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

    gap: 22px;
}


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

.generation-logic-card {
    position: relative;

    padding: 28px 30px 30px;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, 0.15);

    border-radius: 17px;

    box-sizing: border-box;

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

.generation-logic-card:hover {
    transform: translateY(-4px);

    border-color: rgba(43, 211, 159, 0.30);

    background: #07322c;

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


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

.generation-logic-card-head {
    position: relative;

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

    gap: 15px;

    margin-bottom: 13px;
}

.generation-logic-title {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.generation-logic-title svg {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    color: #2bd39f;

    stroke-width: 2.5;
}

.generation-logic-title h3 {
    margin: 0;

    color: #2bd39f;

    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: -.3px;
}


/* ==========================================
   TAG
========================================== */

.generation-logic-tag {
    flex: 0 0 auto;

    padding: 6px 11px;

    border: 1px solid rgba(43, 211, 159, .22);

    border-radius: 20px;

    background: rgba(43, 211, 159, .07);

    color: #2bd39f;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}


/* ==========================================
   INTRO
========================================== */

.generation-logic-intro {
    margin: 0 0 13px;

    color: #94a9ac;

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

    line-height: 1.7;
}


/* ==========================================
   LIST
========================================== */

.generation-logic-card ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.generation-logic-card li {
    margin: 0 0 7px;

    color: #96aaad;

    font-size: 13.5px;
    font-weight: 500;

    line-height: 1.62;
}

.generation-logic-card li:last-child {
    margin-bottom: 0;
}

.generation-logic-card li::marker {
    color: #91a7aa;
}

.generation-logic-card li strong {
    color: #aab9bb;
    font-weight: 800;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .generation-logic-section {
        padding: 80px 0;
    }

    .generation-logic-header h2 {
        font-size: 34px;
    }

    .generation-logic-grid {
        gap: 16px;
    }

    .generation-logic-card {
        padding: 24px;
    }

    .generation-logic-title h3 {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .generation-logic-section {
        padding: 65px 0;
    }

    .generation-logic-container {
        width: calc(100% - 28px);
    }

    .generation-logic-header {
        margin-bottom: 38px;
    }

    .generation-logic-badge {
        font-size: 11px;
        padding: 7px 13px;
        margin-bottom: 22px;
    }

    .generation-logic-header h2 {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -.7px;
    }

    .generation-logic-header p {
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.7;
    }


    .generation-logic-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .generation-logic-card {
        padding: 20px 17px;

        border-radius: 14px;
    }


    .generation-logic-card-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 13px;
    }

    .generation-logic-title {
        align-items: flex-start;
    }

    .generation-logic-title svg {
        width: 19px;
        height: 19px;

        margin-top: 2px;
    }

    .generation-logic-title h3 {
        font-size: 15px;
        line-height: 1.4;
    }

    .generation-logic-tag {
        font-size: 9px;
        padding: 6px 10px;
    }

    .generation-logic-intro {
        font-size: 13px;
        line-height: 1.68;
    }

    .generation-logic-card li {
        font-size: 13px;
        line-height: 1.65;
    }

}


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

@media (max-width: 420px) {

    .generation-logic-section {
        padding: 55px 0;
    }

    .generation-logic-container {
        width: calc(100% - 22px);
    }

    .generation-logic-header h2 {
        font-size: 26px;
    }

    .generation-logic-header p {
        font-size: 13px;
    }

    .generation-logic-card {
        padding: 18px 15px;
    }

    .generation-logic-title h3 {
        font-size: 14px;
    }

    .generation-logic-intro,
    .generation-logic-card li {
        font-size: 13px;
    }

}

/* ==========================================
   WHY MLM MIND SECTION
========================================== */

.why-mlm-mind-section {
    width: 100%;
    background: #001b17;
    padding: 96px 0 100px;
    overflow: hidden;
    box-sizing: border-box;
}

.why-mlm-mind-container {
    width: min(1210px, calc(100% - 40px));
    margin: 0 auto;
}


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

.why-mlm-mind-header {
    max-width: 900px;
    margin: 0 auto 58px;
    text-align: center;
}

.why-mlm-mind-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);
    border-radius: 30px;

    background: rgba(43, 211, 159, .045);

    color: #2bd39f;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    line-height: 1;

    margin-bottom: 30px;
}

.why-mlm-mind-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}


.why-mlm-mind-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;
    font-weight: 800;
    line-height: 1.18;

    letter-spacing: -1.2px;
}

.why-mlm-mind-header h2 span {
    color: #2bd39f;
}


.why-mlm-mind-header p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #91a6aa;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}


/* ==========================================
   MAIN LAYOUT
========================================== */

.why-mlm-mind-layout {
    display: grid;

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

    gap: 40px;

    align-items: start;
}


/* ==========================================
   LEFT BENEFITS
========================================== */

.why-mlm-mind-benefits {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


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

.why-mlm-benefit-card {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 19px 20px;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, .13);

    border-radius: 12px;

    box-sizing: border-box;

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

.why-mlm-benefit-card:hover {
    transform: translateY(-3px);

    border-color: rgba(43, 211, 159, .28);

    background: #07322c;
}


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

.why-mlm-benefit-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

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

    border-radius: 11px;

    color: #2bd39f;

    background: rgba(21, 205, 158, .08);

    border: 1px solid rgba(43, 211, 159, .22);

    box-sizing: border-box;
}

.why-mlm-benefit-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 2.3;
}


/* ==========================================
   BENEFIT CONTENT
========================================== */

.why-mlm-benefit-content {
    min-width: 0;
}

.why-mlm-benefit-content h3 {
    margin: 0 0 5px;

    color: #f3f7f6;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: -.2px;
}

.why-mlm-benefit-content p {
    margin: 0;

    color: #91a7aa;

    font-size: 13.5px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================
   PERFORMANCE PANEL
========================================== */

.why-mlm-performance-panel {
    padding: 30px 28px 29px;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, .22);

    border-radius: 27px;

    box-sizing: border-box;

    box-shadow:
        0 0 40px rgba(22, 210, 160, .035);
}


/* ==========================================
   PANEL TITLE
========================================== */

.why-mlm-performance-title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 27px;
}

.why-mlm-performance-title svg {
    width: 21px;
    height: 21px;

    color: #2bd39f;

    stroke-width: 2.5;
}

.why-mlm-performance-title h3 {
    margin: 0;

    color: #f1f6f5;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}


/* ==========================================
   BENCHMARK
========================================== */

.why-mlm-benchmark {
    margin-bottom: 17px;
}

.why-mlm-benchmark-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;
}

.why-mlm-benchmark-top span {
    color: #91a7aa;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.3;
}

.why-mlm-benchmark-top strong {
    flex: 0 0 auto;

    color: #2bd39f;

    font-size: 13px;
    font-weight: 800;
}


/* ==========================================
   PROGRESS BAR
========================================== */

.why-mlm-progress {
    width: 100%;
    height: 8px;

    overflow: hidden;

    background: #073c35;

    border-radius: 20px;
}

.why-mlm-progress span {
    display: block;

    height: 100%;

    background: linear-gradient(90deg,
            #0fa894,
            #2bd39f);

    border-radius: inherit;
}


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

.why-mlm-mini-stats {
    display: grid;

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

    gap: 12px;

    margin-top: 23px;
}

.why-mlm-mini-stat {
    min-height: 74px;

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

    padding: 10px;

    background: #07332d;

    border: 1px solid rgba(43, 211, 159, .12);

    border-radius: 12px;

    box-sizing: border-box;
}

.why-mlm-mini-stat strong {
    color: #2bd39f;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.2;
}

.why-mlm-mini-stat span {
    margin-top: 6px;

    color: #718b8f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .5px;
    line-height: 1.2;

    text-align: center;
}

.why-mlm-performance-note {
    margin: 10px 0 0;

    color: #718b8f;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .why-mlm-mind-section {
        padding: 80px 0;
    }

    .why-mlm-mind-header h2 {
        font-size: 34px;
    }

    .why-mlm-mind-layout {
        grid-template-columns: 1fr;

        gap: 24px;
    }

}


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

@media (max-width: 767px) {

    .why-mlm-mind-section {
        padding: 65px 0;
    }

    .why-mlm-mind-container {
        width: calc(100% - 28px);
    }

    .why-mlm-mind-header {
        margin-bottom: 38px;
    }

    .why-mlm-mind-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 22px;
    }

    .why-mlm-mind-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }

    .why-mlm-mind-header p {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* Benefits */
    .why-mlm-mind-benefits {
        gap: 13px;
    }

    .why-mlm-benefit-card {
        padding: 18px 17px;

        gap: 13px;

        border-radius: 13px;
    }

    .why-mlm-benefit-icon {
        flex: 0 0 40px;

        width: 40px;
        height: 40px;
    }

    .why-mlm-benefit-icon svg {
        width: 18px;
        height: 18px;
    }

    .why-mlm-benefit-content h3 {
        font-size: 14px;
    }

    .why-mlm-benefit-content p {
        font-size: 13px;

        line-height: 1.65;
    }


    /* Performance */
    .why-mlm-performance-panel {
        padding: 22px 17px;

        border-radius: 19px;
    }

    .why-mlm-performance-title {
        margin-bottom: 23px;
    }

    .why-mlm-performance-title h3 {
        font-size: 15px;
    }

    .why-mlm-benchmark-top span,
    .why-mlm-benchmark-top strong {
        font-size: 12px;
    }

    .why-mlm-progress {
        height: 7px;
    }

    .why-mlm-mini-stats {
        gap: 10px;

        margin-top: 20px;
    }

    .why-mlm-mini-stat {
        min-height: 70px;
    }

}


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

@media (max-width: 420px) {

    .why-mlm-mind-section {
        padding: 55px 0;
    }

    .why-mlm-mind-container {
        width: calc(100% - 22px);
    }

    .why-mlm-mind-header h2 {
        font-size: 26px;
    }

    .why-mlm-benefit-card {
        padding: 16px 14px;
    }

    .why-mlm-benefit-content h3 {
        font-size: 13.5px;
    }

    .why-mlm-benefit-content p {
        font-size: 13px;
    }

    .why-mlm-performance-panel {
        padding: 20px 14px;
    }

    .why-mlm-benchmark-top span,
    .why-mlm-benchmark-top strong {
        font-size: 11.5px;
    }

}

.why-mlm-progress span {
    display: block;
    height: 100%;
    width: 0;

    background: linear-gradient(90deg,
            #0fa894,
            #2bd39f);

    border-radius: inherit;
}

/* ==========================================
   GENERATION CASE STUDY
========================================== */

.generation-case-section {
    width: 100%;

    background: #000d0b;

    padding: 92px 0 96px;

    overflow: hidden;

    box-sizing: border-box;
}

.generation-case-container {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


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

.generation-case-header {
    max-width: 1050px;

    margin: 0 auto 58px;

    text-align: center;
}

.generation-case-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 30px;

    background: rgba(43, 211, 159, .045);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    margin-bottom: 29px;
}

.generation-case-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-case-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.18;

    letter-spacing: -1.2px;
}

.generation-case-header h2 span {
    color: #2bd39f;
}


/* ==========================================
   MAIN CASE CARD
========================================== */

.generation-case-main-card {
    width: 100%;

    padding: 40px 40px;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, .22);

    border-radius: 24px;

    box-sizing: border-box;
}


.generation-case-grid {
    display: grid;

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

    gap: 40px;

    align-items: start;
}


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

.generation-case-left {
    min-width: 0;
}


.generation-case-category {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 13px;

    border: 1px solid rgba(245, 174, 35, .35);

    border-radius: 20px;

    background: rgba(245, 174, 35, .07);

    color: #f5ad20;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .6px;

    line-height: 1;

    margin-bottom: 16px;
}

.generation-case-category svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-case-left h3 {
    margin: 0 0 17px;

    max-width: 560px;

    color: #f4f8f7;

    font-size: 31px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.9px;
}


.generation-case-left>p {
    margin: 0 0 20px;

    color: #94a9ac;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.85;
}


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

.generation-case-stats {
    display: grid;

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

    gap: 12px;

    margin-top: 18px;
}


.generation-case-stat {
    min-height: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 10px 8px;

    background: #07332d;

    border: 1px solid rgba(43, 211, 159, .10);

    border-radius: 11px;

    text-align: center;

    box-sizing: border-box;
}

.generation-case-stat strong {
    color: #2bd39f;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;
}

.generation-case-stat span {
    max-width: 130px;

    margin-top: 8px;

    color: #718b8f;

    font-size: 10px;

    font-weight: 800;

    line-height: 1.55;

    letter-spacing: .35px;
}


/* ==========================================
   QUOTE
========================================== */

.generation-case-quote {
    margin-top: 20px;

    padding: 17px 20px;

    background: rgba(0, 26, 22, .34);

    border-left: 3px solid #2bd39f;

    border-radius: 0 10px 10px 0;

    box-sizing: border-box;
}

.generation-case-quote p {
    margin: 0;

    color: #91a6aa;

    font-size: 14px;

    font-style: italic;

    font-weight: 500;

    line-height: 1.7;
}

.generation-case-quote strong {
    display: block;

    margin-top: 9px;

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;
}


/* ==========================================
   RIGHT CHART CARD
========================================== */

.generation-case-right {
    min-width: 0;

    padding-top: 57px;
}


.generation-case-chart-card {
    padding: 25px 25px 24px;

    background: #0b3831;

    border: 1px solid rgba(43, 211, 159, .13);

    border-radius: 18px;

    box-sizing: border-box;
}


.generation-case-chart-card h4 {
    margin: 0;

    color: #f0f5f4;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;

    text-align: center;
}


/* ==========================================
   BAR CHART
========================================== */

.generation-case-chart {
    height: 200px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin: 24px 8px 27px;

    border-bottom: 0 solid rgba(255, 255, 255, .05);
}


.generation-case-bar-wrap {
    height: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    min-width: 0;
}


.generation-case-bar-wrap strong {
    margin-bottom: 5px;

    color: #2bd39f;

    font-size: 11px;

    font-weight: 800;

    line-height: 1;
}


.generation-case-bar {
    width: 100%;

    max-width: 44px;

    height: 0;

    background: linear-gradient(to top,
            #159f91,
            #36c89c);

    border-radius: 6px 6px 0 0;

    transition: height 1s cubic-bezier(.2, .7, .2, 1);

    box-shadow: 0 0 15px rgba(43, 211, 159, .05);
}


.generation-case-bar-wrap span {
    margin-top: 7px;

    color: #6e878b;

    font-size: 10px;

    font-weight: 700;
}


/* ==========================================
   METRICS
========================================== */

.generation-case-metric {
    margin-top: 18px;
}


.generation-case-metric-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}


.generation-case-metric-top span {
    color: #91a7aa;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;
}

.generation-case-metric-top strong {
    color: #2bd39f;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;
}

.generation-case-metric-top strong.danger {
    color: #ff5151;
}


/* ==========================================
   PROGRESS
========================================== */

.generation-case-progress {
    width: 100%;

    height: 6px;

    overflow: hidden;

    background: #063b34;

    border-radius: 20px;
}

.generation-case-progress span {
    display: block;

    width: 0;

    height: 100%;

    background: #2bd39f;

    border-radius: inherit;

    transition: width 1.1s ease-out;
}

.generation-case-progress span.danger-bar {
    background: #ff4b4b;
}


/* ==========================================
   BOTTOM BUTTON
========================================== */

.generation-case-button-wrap {
    display: flex;

    justify-content: center;

    margin-top: 32px;
}


.generation-case-button {
    display: inline-flex;

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

    gap: 9px;

    min-height: 52px;

    padding: 0 22px;

    border: 2px solid #0cbca7;

    border-radius: 28px;

    background: transparent;

    color: #08bca8;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.generation-case-button:hover {
    background: #0cbca7;

    color: #001b17;

    transform: translateY(-2px);
}

.generation-case-button svg {
    width: 16px;
    height: 16px;

    stroke-width: 2.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .generation-case-section {
        padding: 80px 0;
    }

    .generation-case-header h2 {
        font-size: 34px;
    }

    .generation-case-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .generation-case-right {
        padding-top: 0;
    }

}


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

@media (max-width: 767px) {

    .generation-case-section {
        padding: 65px 0;
    }

    .generation-case-container {
        width: calc(100% - 28px);
    }


    .generation-case-header {
        margin-bottom: 35px;
    }

    .generation-case-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 21px;
    }

    .generation-case-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }


    .generation-case-main-card {
        padding: 22px 17px;

        border-radius: 17px;
    }


    .generation-case-left h3 {
        font-size: 25px;

        line-height: 1.2;
    }

    .generation-case-left>p {
        font-size: 13px;

        line-height: 1.75;
    }


    .generation-case-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .generation-case-stat {
        min-height: 85px;
    }

    .generation-case-stat strong {
        font-size: 21px;
    }


    .generation-case-quote {
        padding: 15px 16px;
    }

    .generation-case-quote p {
        font-size: 13px;
    }


    .generation-case-chart-card {
        padding: 21px 15px;
    }


    .generation-case-chart {
        height: 175px;

        gap: 7px;

        margin-left: 2px;

        margin-right: 2px;
    }

    .generation-case-bar {
        max-width: 35px;
    }

    .generation-case-bar-wrap strong {
        font-size: 10px;
    }


    .generation-case-metric-top span,
    .generation-case-metric-top strong {
        font-size: 12px;
    }

}


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

@media (max-width: 420px) {

    .generation-case-section {
        padding: 55px 0;
    }

    .generation-case-container {
        width: calc(100% - 22px);
    }

    .generation-case-header h2 {
        font-size: 26px;
    }

    .generation-case-main-card {
        padding: 19px 14px;
    }

    .generation-case-left h3 {
        font-size: 23px;
    }

    .generation-case-stat strong {
        font-size: 19px;
    }

    .generation-case-stat span {
        font-size: 9px;
    }

}

/* ==========================================
   CLIENT REVIEWS
========================================== */

.generation-reviews-section {
    width: 100%;

    background: #001b17;

    padding: 95px 0 90px;

    overflow: hidden;

    box-sizing: border-box;
}

.generation-reviews-container {
    width: min(1100px, calc(100% - 40px));

    margin: 0 auto;
}


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

.generation-reviews-header {
    max-width: 800px;

    margin: 0 auto 58px;

    text-align: center;
}


.generation-reviews-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 30px;

    background: rgba(43, 211, 159, .045);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    margin-bottom: 30px;
}


.generation-reviews-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-reviews-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -1.2px;
}


.generation-reviews-header h2 span {
    color: #2bd39f;
}


.generation-reviews-header p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #91a6aa;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


/* ==========================================
   SLIDER
========================================== */

.generation-reviews-slider {
    width: 100%;

    overflow: hidden;

    border-radius: 25px;
}


.generation-review-track {
    display: flex;

    width: 100%;

    transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}


.generation-review-slide {
    flex: 0 0 100%;

    width: 100%;

    box-sizing: border-box;
}


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

.generation-review-card {
    width: min(680px, calc(100% - 30px));

    min-height: 390px;

    margin: 0 auto;

    padding: 40px 42px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    background: #062b25;

    border: 1px solid rgba(43, 211, 159, .15);

    border-radius: 25px;

    box-sizing: border-box;

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


.generation-review-card:hover {
    border-color: rgba(43, 211, 159, .25);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .16);
}


/* ==========================================
   STARS
========================================== */

.generation-review-stars {
    color: #f5a800;

    font-size: 19px;

    letter-spacing: 2px;

    line-height: 1;

    margin-bottom: 27px;
}


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

.generation-review-text {
    max-width: 620px;

    margin: 0;

    color: #93a8ab;

    font-size: 17px;

    font-style: italic;

    font-weight: 500;

    line-height: 1.72;
}


/* ==========================================
   AVATAR
========================================== */

.generation-review-avatar {
    width: 60px;
    height: 60px;

    display: flex;

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

    margin-top: 27px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #10a997,
            #2bd39f);

    color: #ffffff;

    font-size: 21px;

    font-weight: 800;

    box-shadow: 0 8px 22px rgba(16, 169, 151, .13);
}


/* ==========================================
   NAME
========================================== */

.generation-review-card h3 {
    margin: 16px 0 0;

    color: #f2f6f5;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;
}


.generation-review-card>span {
    display: block;

    margin-top: 8px;

    color: #2bd39f;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================
   CONTROLS
========================================== */

.generation-reviews-controls {
    display: flex;

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

    gap: 12px;

    margin-top: 25px;
}


.generation-review-arrow {
    width: 40px;
    height: 40px;

    display: flex;

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

    padding: 0;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 50%;

    background: rgba(43, 211, 159, .035);

    color: #2bd39f;

    cursor: pointer;

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


.generation-review-arrow:hover {
    background: rgba(43, 211, 159, .12);

    transform: translateY(-2px);
}


.generation-review-arrow svg {
    width: 18px;
    height: 18px;

    stroke-width: 2.5;
}


/* ==========================================
   DOTS
========================================== */

.generation-review-dots {
    display: flex;

    align-items: center;

    gap: 8px;
}


.generation-review-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #08453e;

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease,
        border-radius .3s ease;
}


.generation-review-dot.active {
    width: 23px;

    border-radius: 10px;

    background: #2bd39f;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .generation-reviews-section {
        padding: 80px 0;
    }

    .generation-reviews-header h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 767px) {

    .generation-reviews-section {
        padding: 65px 0;
    }

    .generation-reviews-container {
        width: calc(100% - 28px);
    }


    .generation-reviews-header {
        margin-bottom: 36px;
    }

    .generation-reviews-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 22px;
    }

    .generation-reviews-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }

    .generation-reviews-header p {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.7;
    }


    .generation-review-card {
        width: calc(100% - 4px);

        min-height: 420px;

        padding: 30px 18px;

        border-radius: 18px;
    }


    .generation-review-stars {
        font-size: 17px;

        margin-bottom: 22px;
    }


    .generation-review-text {
        font-size: 14px;

        line-height: 1.75;
    }


    .generation-review-avatar {
        width: 54px;
        height: 54px;

        margin-top: 24px;

        font-size: 19px;
    }


    .generation-review-card h3 {
        font-size: 15px;
    }

    .generation-review-card>span {
        font-size: 12px;
    }


    .generation-reviews-controls {
        margin-top: 20px;
    }

}


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

@media (max-width: 420px) {

    .generation-reviews-section {
        padding: 55px 0;
    }

    .generation-reviews-container {
        width: calc(100% - 22px);
    }

    .generation-reviews-header h2 {
        font-size: 26px;
    }

    .generation-review-card {
        min-height: 440px;

        padding: 27px 15px;
    }

    .generation-review-text {
        font-size: 13px;
    }

}

/* ==========================================
   MLM PLAN COMPARISON
========================================== */

.generation-plan-comparison {
    width: 100%;

    background: #000d0b;

    padding: 90px 0 95px;

    overflow: hidden;

    box-sizing: border-box;
}


.generation-plan-comparison-container {
    width: min(1140px, calc(100% - 40px));

    margin: 0 auto;
}


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

.generation-plan-comparison-header {
    max-width: 1100px;

    margin: 0 auto 58px;

    text-align: center;
}


.generation-plan-comparison-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 30px;

    background: rgba(43, 211, 159, .04);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    margin-bottom: 30px;
}


.generation-plan-comparison-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-plan-comparison-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -1.2px;
}


.generation-plan-comparison-header h2 span {
    color: #2bd39f;
}


.generation-plan-comparison-header p {
    max-width: 720px;

    margin: 20px auto 0;

    color: #91a6aa;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


/* ==========================================
   TABLE
========================================== */

.generation-plan-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border: 1px solid rgba(43, 211, 159, .10);

    border-radius: 17px;

    scrollbar-width: thin;

    scrollbar-color: #0c6659 #031d19;
}


.generation-plan-table-wrapper::-webkit-scrollbar {
    height: 7px;
}

.generation-plan-table-wrapper::-webkit-scrollbar-track {
    background: #031d19;
}

.generation-plan-table-wrapper::-webkit-scrollbar-thumb {
    background: #0c6659;

    border-radius: 10px;
}


.generation-plan-table {
    width: 100%;

    min-width: 1000px;

    border-collapse: separate;

    border-spacing: 0;

    background: #00110f;

    table-layout: fixed;
}


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

.generation-plan-table thead th {
    height: 50px;

    padding: 0 18px;

    background: #032d27;

    color: #2bd39f;

    border-bottom: 1px solid rgba(43, 211, 159, .13);

    font-size: 13px;

    font-weight: 800;

    text-align: left;

    letter-spacing: .25px;

    white-space: nowrap;
}


.generation-plan-table thead th:first-child {
    width: 25%;
}

.generation-plan-table thead th:not(:first-child) {
    width: 18.75%;
}


/* ==========================================
   BODY
========================================== */

.generation-plan-table tbody td {
    min-height: 53px;

    padding: 13px 18px;

    color: #94a8ac;

    border-bottom: 1px solid rgba(43, 211, 159, .07);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.55;

    vertical-align: middle;
}


.generation-plan-table tbody tr:last-child td {
    border-bottom: 0;
}


/* FIRST COLUMN */

.generation-plan-table tbody td:first-child {
    color: #f1f5f4;

    font-weight: 800;

    background: rgba(0, 0, 0, .05);
}


/* GENERATION COLUMN */

.generation-plan-table tbody td:nth-child(2) {
    background: rgba(5, 47, 40, .55);
}


/* ==========================================
   PILLS
========================================== */

.plan-pill {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 4px 11px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;
}


.plan-pill.green {
    background: rgba(8, 115, 89, .22);

    color: #20c997;
}


.plan-pill.blue {
    background: rgba(22, 94, 171, .25);

    color: #3987f5;
}


.plan-pill.orange {
    background: rgba(139, 100, 0, .25);

    color: #e7a900;
}


/* ==========================================
   STATUS COLORS
========================================== */

.generation-plan-table .positive {
    color: #20c997;
}

.generation-plan-table .positive span {
    color: #91a8ab;
}


.generation-plan-table .negative {
    color: #e84c4c;
}

.generation-plan-table .negative span {
    color: #91a8ab;
}


.generation-plan-table .warning {
    color: #e5ad18;
}

.generation-plan-table .warning span {
    color: #91a8ab;
}


/* ==========================================
   BOTTOM LINKS
========================================== */

.generation-plan-links {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 28px;
}


.generation-plan-link {
    min-height: 43px;

    display: inline-flex;

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

    gap: 8px;

    padding: 0 18px;

    border: 2px solid #08bca8;

    border-radius: 24px;

    background: transparent;

    color: #08bca8;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.generation-plan-link:hover {
    background: #08bca8;

    color: #001b17;

    transform: translateY(-2px);
}


.generation-plan-link svg {
    width: 15px;
    height: 15px;

    stroke-width: 2.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .generation-plan-comparison {
        padding: 80px 0;
    }

    .generation-plan-comparison-header h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 767px) {

    .generation-plan-comparison {
        padding: 65px 0 70px;
    }


    .generation-plan-comparison-container {
        width: calc(100% - 28px);
    }


    .generation-plan-comparison-header {
        margin-bottom: 35px;
    }


    .generation-plan-comparison-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 21px;
    }


    .generation-plan-comparison-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }


    .generation-plan-comparison-header p {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* TABLE SCROLL */

    .generation-plan-table-wrapper {
        border-radius: 14px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .generation-plan-table {
        min-width: 950px;
    }


    .generation-plan-table thead th {
        height: 48px;

        padding: 0 14px;

        font-size: 11px;
    }


    .generation-plan-table tbody td {
        padding: 12px 14px;

        font-size: 12px;
    }


    .generation-plan-table tbody td:first-child {
        font-size: 12px;
    }


    .plan-pill {
        font-size: 10px;

        padding: 4px 9px;
    }


    /* LINKS */

    .generation-plan-links {
        display: grid;

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

        gap: 10px;

        margin-top: 22px;
    }


    .generation-plan-link {
        width: 100%;

        min-height: 45px;

        padding: 0 8px;

        font-size: 11px;

        box-sizing: border-box;
    }

}


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

@media (max-width: 420px) {

    .generation-plan-comparison {
        padding: 55px 0 60px;
    }


    .generation-plan-comparison-container {
        width: calc(100% - 22px);
    }


    .generation-plan-comparison-header h2 {
        font-size: 26px;
    }


    .generation-plan-comparison-header p {
        font-size: 12px;
    }


    .generation-plan-table {
        min-width: 900px;
    }


    .generation-plan-table thead th {
        padding: 0 12px;

        font-size: 10px;
    }


    .generation-plan-table tbody td {
        padding: 11px 12px;

        font-size: 11px;
    }


    .generation-plan-links {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .generation-plan-link {
        min-height: 43px;

        font-size: 10px;
    }

}

/* ==========================================
   SUSTAINABILITY SECTION
========================================== */

.generation-sustainability-section {
    width: 100%;

    background: #001b17;

    padding: 88px 0 90px;

    overflow: hidden;

    box-sizing: border-box;
}


.generation-sustainability-container {
    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;
}


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

.generation-sustainability-header {
    max-width: 1100px;

    margin: 0 auto 57px;

    text-align: center;
}


.generation-sustainability-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 30px;

    background: rgba(43, 211, 159, .04);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    margin-bottom: 29px;
}


.generation-sustainability-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-sustainability-header h2 {
    margin: 0;

    color: #f4f8f7;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -1.2px;
}


.generation-sustainability-header h2 span {
    color: #2bd39f;
}


.generation-sustainability-header p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #91a6aa;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


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

.generation-sustainability-grid {
    display: grid;

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

    gap: 22px;
}


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

.generation-sustainability-card {
    min-height: 255px;

    padding: 30px 28px 27px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #062e28;

    border: 1px solid rgba(43, 211, 159, .12);

    border-radius: 17px;

    box-sizing: border-box;

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


.generation-sustainability-card:hover {
    transform: translateY(-5px);

    border-color: rgba(43, 211, 159, .28);

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


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

.generation-sustainability-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 21px;
}


.generation-sustainability-icon svg {
    width: 34px;
    height: 34px;

    stroke-width: 2.2;
}


.icon-green {
    color: #2bd39f;
}


.icon-orange {
    color: #ffa500;
}


.icon-blue {
    color: #4d8cff;
}


.icon-purple {
    color: #9b5cff;
}


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

.generation-sustainability-card h3 {
    margin: 0 0 10px;

    color: #f2f6f5;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.35;
}


.generation-sustainability-card p {
    margin: 0;

    color: #91a7aa;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.72;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .generation-sustainability-section {
        padding: 78px 0;
    }

    .generation-sustainability-header h2 {
        font-size: 34px;
    }

    .generation-sustainability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .generation-sustainability-section {
        padding: 65px 0 70px;
    }


    .generation-sustainability-container {
        width: calc(100% - 28px);
    }


    .generation-sustainability-header {
        margin-bottom: 35px;
    }


    .generation-sustainability-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 21px;
    }


    .generation-sustainability-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }


    .generation-sustainability-header p {
        margin-top: 17px;

        font-size: 13px;

        line-height: 1.7;
    }


    .generation-sustainability-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .generation-sustainability-card {
        min-height: auto;

        padding: 27px 20px 25px;

        border-radius: 15px;
    }


    .generation-sustainability-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 17px;
    }


    .generation-sustainability-icon svg {
        width: 31px;
        height: 31px;
    }


    .generation-sustainability-card h3 {
        font-size: 16px;

        margin-bottom: 9px;
    }


    .generation-sustainability-card p {
        font-size: 13px;

        line-height: 1.72;
    }

}


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

@media (max-width: 420px) {

    .generation-sustainability-section {
        padding: 55px 0 60px;
    }


    .generation-sustainability-container {
        width: calc(100% - 22px);
    }


    .generation-sustainability-header h2 {
        font-size: 26px;
    }


    .generation-sustainability-header p {
        font-size: 12px;
    }


    .generation-sustainability-card {
        padding: 24px 17px;
    }


    .generation-sustainability-card h3 {
        font-size: 15px;
    }


    .generation-sustainability-card p {
        font-size: 12px;
    }

}

/* ==========================================
   GENERATION MLM FAQ
========================================== */

.generation-faq-section {
    width: 100%;

    background: #000d0b;

    padding: 82px 0 90px;

    overflow: hidden;

    box-sizing: border-box;
}


.generation-faq-container {
    width: min(880px, calc(100% - 40px));

    margin: 0 auto;
}


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

.generation-faq-header {
    text-align: center;

    margin-bottom: 58px;
}


.generation-faq-badge {
    display: inline-flex;

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

    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(43, 211, 159, .25);

    border-radius: 30px;

    background: rgba(43, 211, 159, .04);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    line-height: 1;

    margin-bottom: 28px;
}


.generation-faq-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.generation-faq-header h2 {
    margin: 0;

    color: #f5f8f7;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -1.2px;
}


.generation-faq-header h2 span {
    color: #2bd39f;
}


.generation-faq-header p {
    margin: 20px auto 0;

    max-width: 720px;

    color: #91a6aa;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


/* ==========================================
   FAQ LIST
========================================== */

.generation-faq-list {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 11px;
}


.generation-faq-item {
    width: 100%;

    overflow: hidden;

    background: #062e28;

    border: 1px solid rgba(43, 211, 159, .08);

    border-radius: 11px;

    box-sizing: border-box;

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


.generation-faq-item:hover {
    border-color: rgba(43, 211, 159, .18);
}


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

.generation-faq-question {
    width: 100%;

    min-height: 61px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 0 22px;

    border: 0;

    outline: none;

    background: transparent;

    color: #f1f6f5;

    text-align: left;

    cursor: pointer;

    font-family: inherit;
}


.generation-faq-question>span:first-child {
    font-size: 15px;

    font-weight: 800;

    line-height: 1.4;
}


.generation-faq-toggle {
    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    display: flex;

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

    border: 1px solid rgba(43, 211, 159, .28);

    border-radius: 50%;

    color: #13c999;

    background: rgba(43, 211, 159, .03);
}


.generation-faq-toggle svg {
    width: 13px;
    height: 13px;

    stroke-width: 2.5;
}


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

.generation-faq-answer {
    display: none;

    padding: 0 22px 22px;

    background: rgba(0, 13, 11, .25);
}


.generation-faq-item.active .generation-faq-answer {
    display: block;
}


.generation-faq-answer p {
    margin: 0;

    color: #94a8ac;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.72;
}


.generation-faq-answer strong {
    color: #9eafb2;

    font-weight: 800;
}


.generation-faq-answer .faq-highlight {
    color: #20c997;
}


.generation-faq-answer ul {
    margin: 9px 0 0;

    padding-left: 20px;

    color: #94a8ac;
}


.generation-faq-answer li {
    margin-bottom: 7px;

    font-size: 15px;

    line-height: 1.55;
}


.generation-faq-answer li:last-child {
    margin-bottom: 0;
}


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

.generation-faq-cta {
    display: flex;

    justify-content: center;

    margin-top: 29px;
}


.generation-faq-cta-btn {
    min-height: 51px;

    display: inline-flex;

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

    gap: 8px;

    padding: 0 25px;

    border-radius: 28px;

    background: #18a99a;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

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


.generation-faq-cta-btn:hover {
    background: #20bbaa;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(24, 169, 154, .20);
}


.generation-faq-cta-btn svg {
    width: 15px;
    height: 15px;

    stroke-width: 2.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .generation-faq-section {
        padding: 75px 0 80px;
    }

    .generation-faq-header h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 767px) {

    .generation-faq-section {
        padding: 62px 0 70px;
    }


    .generation-faq-container {
        width: calc(100% - 26px);
    }


    .generation-faq-header {
        margin-bottom: 35px;
    }


    .generation-faq-badge {
        font-size: 11px;

        padding: 7px 13px;

        margin-bottom: 21px;
    }


    .generation-faq-header h2 {
        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -.7px;
    }


    .generation-faq-header p {
        margin-top: 16px;

        font-size: 13px;

        line-height: 1.7;
    }


    .generation-faq-desktop-break {
        display: none;
    }


    .generation-faq-list {
        gap: 9px;
    }


    .generation-faq-item {
        border-radius: 10px;
    }


    .generation-faq-question {
        min-height: 58px;

        padding: 0 15px;

        gap: 12px;
    }


    .generation-faq-question>span:first-child {
        font-size: 13px;

        line-height: 1.45;
    }


    .generation-faq-toggle {
        width: 23px;
        height: 23px;
    }


    .generation-faq-answer {
        padding: 0 15px 18px;
    }


    .generation-faq-answer p {
        font-size: 13px;

        line-height: 1.7;
    }


    .generation-faq-answer ul {
        padding-left: 18px;
    }


    .generation-faq-answer li {
        font-size: 13px;

        line-height: 1.6;

        margin-bottom: 6px;
    }


    .generation-faq-cta {
        margin-top: 23px;
    }


    .generation-faq-cta-btn {
        width: 100%;

        min-height: 50px;

        padding: 0 14px;

        font-size: 13px;
    }

}


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

@media (max-width: 420px) {

    .generation-faq-section {
        padding: 54px 0 60px;
    }


    .generation-faq-container {
        width: calc(100% - 20px);
    }


    .generation-faq-header h2 {
        font-size: 26px;
    }


    .generation-faq-header p {
        font-size: 12px;
    }


    .generation-faq-question {
        min-height: 55px;

        padding: 0 13px;
    }


    .generation-faq-question>span:first-child {
        font-size: 12px;
    }


    .generation-faq-answer {
        padding: 0 13px 16px;
    }


    .generation-faq-answer p,
    .generation-faq-answer li {
        font-size: 12px;
    }

}

/* ==========================================
   GENERATION FINAL CTA
========================================== */

.generation-final-cta {
    width: 100%;

    background: #001b17;

    padding: 58px 0 92px;

    overflow: hidden;

    box-sizing: border-box;
}


.generation-final-cta-container {
    width: min(1050px, calc(100% - 40px));

    margin: 0 auto;

    text-align: center;
}


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

.generation-final-cta-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(43, 211, 159, .32);

    border-radius: 30px;

    background: rgba(43, 211, 159, .05);

    color: #2bd39f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .65px;

    line-height: 1;

    margin-bottom: 23px;
}


.generation-final-cta-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


/* ==========================================
   HEADING
========================================== */

.generation-final-cta h2 {
    max-width: 850px;

    margin: 0 auto;

    color: #f5f8f7;

    font-size: 44px;

    font-weight: 800;

    line-height: 1.13;

    letter-spacing: -1.4px;
}


.generation-final-cta h2 span {
    color: #2bd39f;
}


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

.generation-final-cta-description {
    max-width: 790px;

    margin: 24px auto 0;

    color: #91a6aa;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;
}


/* ==========================================
   BUTTONS
========================================== */

.generation-final-cta-buttons {
    display: flex;

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

    gap: 12px;

    margin-top: 36px;
}


.generation-final-demo-btn,
.generation-final-call-btn {
    min-width: 218px;

    height: 60px;

    display: inline-flex;

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

    gap: 9px;

    padding: 0 25px;

    border-radius: 32px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    box-sizing: border-box;

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


.generation-final-demo-btn {
    background: #ffffff;

    color: #087f78;
}


.generation-final-demo-btn:hover {
    background: #f1fffc;

    color: #087f78;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(255, 255, 255, .10);
}


.generation-final-call-btn {
    background: #12a79b;

    color: #ffffff;
}


.generation-final-call-btn:hover {
    background: #18b8a9;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(18, 167, 155, .20);
}


.generation-final-demo-btn svg,
.generation-final-call-btn svg {
    width: 16px;
    height: 16px;

    stroke-width: 2.6;
}


/* ==========================================
   TRUST LIST
========================================== */

.generation-final-trust-list {
    display: flex;

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

    flex-wrap: wrap;

    column-gap: 22px;

    row-gap: 17px;

    margin-top: 35px;
}


.generation-final-trust-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #91a6aa;

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;
}


.generation-final-trust-item svg {
    width: 14px;
    height: 14px;

    color: #2bd39f;

    fill: #2bd39f;

    stroke: #001b17;

    stroke-width: 2.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .generation-final-cta {
        padding: 55px 0 80px;
    }


    .generation-final-cta h2 {
        font-size: 38px;
    }

}


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

@media (max-width: 767px) {

    .generation-final-cta {
        padding: 52px 0 65px;
    }


    .generation-final-cta-container {
        width: calc(100% - 28px);
    }


    .generation-final-cta-badge {
        max-width: 100%;

        padding: 8px 12px;

        font-size: 10px;

        letter-spacing: .45px;

        white-space: nowrap;
    }


    .generation-final-cta h2 {
        font-size: 30px;

        line-height: 1.18;

        letter-spacing: -.8px;
    }


    .generation-final-cta-break {
        display: none;
    }


    .generation-final-cta-description {
        margin-top: 18px;

        font-size: 13px;

        line-height: 1.7;
    }


    .generation-final-cta-buttons {
        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 29px;
    }


    .generation-final-demo-btn,
    .generation-final-call-btn {
        width: 100%;

        min-width: 0;

        height: 56px;

        font-size: 14px;
    }


    .generation-final-trust-list {
        display: grid;

        grid-template-columns: 1fr 1fr;

        justify-items: start;

        gap: 14px 12px;

        margin-top: 28px;
    }


    .generation-final-trust-item {
        font-size: 11px;

        white-space: normal;

        text-align: left;
    }


    .generation-final-trust-item svg {
        flex: 0 0 auto;

        width: 13px;
        height: 13px;
    }

}


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

@media (max-width: 420px) {

    .generation-final-cta {
        padding: 45px 0 55px;
    }


    .generation-final-cta-container {
        width: calc(100% - 20px);
    }


    .generation-final-cta-badge {
        font-size: 9px;

        padding: 7px 10px;
    }


    .generation-final-cta h2 {
        font-size: 27px;
    }


    .generation-final-cta-description {
        font-size: 12px;
    }


    .generation-final-demo-btn,
    .generation-final-call-btn {
        height: 53px;

        font-size: 13px;
    }


    .generation-final-trust-item {
        font-size: 10px;
    }

}

/*================================== ROI MLM Software ================================*/
/* =========================================================
   ROI HERO SECTION
========================================================= */

.roi-hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    padding: 120px 0 70px;
    background:
        radial-gradient(circle at 78% 48%, rgba(245, 158, 11, .09), transparent 30%),
        radial-gradient(circle at 20% 30%, rgba(124, 92, 252, .04), transparent 30%),
        #080806;
}

.roi-hero-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: 3%;
    top: 15%;
    background: rgba(245, 158, 11, .07);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
}

.roi-hero .container-xl-custom {
    position: relative;
    z-index: 2;
}


/* BADGE */

.roi-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    margin-bottom: 24px;
    border: 1px solid rgba(245, 158, 11, .42);
    border-radius: 50px;
    background: rgba(245, 158, 11, .07);
    color: #f5a000;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}

.roi-badge svg {
    width: 16px;
    height: 16px;
}


/* TITLE */

.roi-hero-title {
    margin: 0;
    max-width: 650px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(42px, 4.3vw, 60px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2px;
}

.roi-hero-title span {
    color: #f5a000;
}


/* DESCRIPTION */

.roi-hero-desc {
    max-width: 590px;
    margin: 26px 0 0;
    color: #8d9aac;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.roi-hero-desc strong {
    color: #f5f5f5;
    font-weight: 700;
}

.roi-hero-desc em {
    color: #9ca7b8;
}


/* BUTTONS */

.roi-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.roi-btn {
    min-height: 60px;
    padding: 0 28px;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all .3s ease;
}

.roi-btn svg {
    width: 17px;
    height: 17px;
}

.roi-btn-primary {
    color: #080808;
    background: #f5a000;
    border: 1px solid #f5a000;
}

.roi-btn-primary:hover {
    color: #080808;
    background: #ffb52c;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 160, 0, .22);
}

.roi-btn-dark {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .32);
}

.roi-btn-dark:hover {
    color: #fff;
    border-color: #f5a000;
    background: rgba(245, 160, 0, .08);
    transform: translateY(-2px);
}

.roi-btn-outline {
    flex-basis: 36%;
    width: fit-content;
    min-height: 60px;
    color: #f5a000;
    background: transparent;
    border: 2px solid #f5a000;
}

.roi-btn-outline:hover {
    color: #0a0907;
    background: #f5a000;
    transform: translateY(-2px);
}


/* COUNTERS */

.roi-counter-row {
    display: flex;
    align-items: flex-start;
    gap: 58px;
    margin-top: 45px;
}

.roi-counter-item {
    min-width: 80px;
}

.roi-counter-number {
    color: #f5a000;
    font-family: 'Outfit', sans-serif;
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
}

.roi-counter-label {
    margin-top: 11px;
    color: #647286;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
}


/* =========================================================
   ROI PLAN CARD
========================================================= */

.roi-plan-card {
    position: relative;
    min-height: 470px;
    padding: 30px 20px 26px;
    border: 1px solid rgba(245, 160, 0, .25);
    border-radius: 25px;
    background:
        linear-gradient(145deg,
            rgba(22, 20, 13, .98),
            rgba(11, 11, 8, .98));
    box-shadow:
        0 0 0 1px rgba(245, 160, 0, .025),
        0 25px 60px rgba(0, 0, 0, .45),
        0 0 50px rgba(245, 160, 0, .10);
}


/* CARD TOP */

.roi-plan-top {
    position: relative;
    text-align: center;
}

.roi-plan-top h3 {
    margin: 0;
    color: #f5f5f5;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.roi-sla {
    position: absolute;
    top: -14px;
    right: -2px;
    padding: 7px 12px;
    border: 1px solid rgba(0, 214, 143, .35);
    border-radius: 20px;
    background: rgba(0, 214, 143, .08);
    color: #00d68f;
    font-size: 11px;
    font-weight: 600;
}

.roi-plan-subtitle {
    margin-top: 9px;
    color: #f5a000;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}


/* FLOW */

.roi-flow {
    margin-top: 28px;
    text-align: center;
}

.roi-flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roi-circle {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}

.roi-circle svg {
    width: 19px;
    height: 19px;
}

.roi-circle-investment {
    background: #f5a000;
    color: #090909;
    box-shadow: 0 0 25px rgba(245, 160, 0, .22);
}

.roi-circle-engine {
    background: #2777ed;
    box-shadow: 0 0 25px rgba(39, 119, 237, .22);
}

.roi-circle-roi {
    background: rgba(0, 214, 143, .10);
    border: 2px solid #008c62;
    color: #00d68f;
}

.roi-circle-referral {
    background: rgba(124, 92, 252, .12);
    border: 2px solid #6d46d8;
    color: #9b7cff;
}

.roi-circle-level {
    background: rgba(245, 160, 0, .10);
    border: 2px solid #a66d00;
    color: #f5a000;
}

.roi-circle-roi span {
    font-size: 20px;
    font-weight: 700;
}


/* FLOW TEXT */

.roi-flow-title {
    margin-top: 8px;
    color: #737e91;
    font-size: 10px;
    font-weight: 600;
}

.roi-flow-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(0, 214, 143, .08);
    color: #00c987;
    font-size: 9px;
    font-weight: 600;
}


/* ARROW */

.roi-flow-arrow {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5a000;
}

.roi-flow-arrow svg {
    width: 17px;
    height: 17px;
}


/* INCOME ROW */

.roi-income-row {
    display: flex;
    justify-content: center;
    gap: 38px;
    margin-top: 2px;
}

.roi-income-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roi-income-title {
    margin-top: 7px;
    color: #717c90;
    font-size: 10px;
    font-weight: 600;
}


/* BOTTOM STATS */

.roi-plan-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 24px;
}

.roi-plan-stat {
    padding: 13px 8px;
    text-align: center;
    border: 1px solid rgba(245, 160, 0, .13);
    border-radius: 12px;
    background: rgba(245, 160, 0, .07);
}

.roi-plan-stat strong {
    display: block;
    color: #f5a000;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.roi-plan-stat span {
    display: block;
    margin-top: 7px;
    color: #657186;
    font-size: 9px;
    font-weight: 600;
}


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

@media (max-width: 991px) {

    .roi-hero {
        padding: 105px 0 60px;
    }

    .roi-hero-title {
        max-width: 750px;
    }

    .roi-hero-desc {
        max-width: 720px;
    }

    .roi-plan-card {
        max-width: 650px;
        margin: 20px auto 0;
    }
}


@media (max-width: 575px) {

    .roi-hero {
        min-height: auto;
        padding: 95px 0 50px;
    }

    .roi-badge {
        font-size: 10px;
        padding: 8px 12px;
    }

    .roi-hero-title {
        font-size: 39px;
        line-height: 1.08;
        letter-spacing: -1.2px;
    }

    .roi-hero-desc {
        font-size: 14px;
        line-height: 1.75;
    }

    .roi-hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .roi-btn {
        min-height: 54px;
        padding: 0 15px;
        font-size: 13px;
    }

    .roi-btn-outline {
        grid-column: 1 / -1;
        width: 100%;
    }

    .roi-counter-row {
        gap: 25px;
        justify-content: space-between;
        margin-top: 38px;
    }

    .roi-counter-number {
        font-size: 22px;
    }

    .roi-counter-label {
        font-size: 9px;
    }

    .roi-plan-card {
        min-height: auto;
        padding: 25px 12px 18px;
        border-radius: 20px;
    }

    .roi-sla {
        position: static;
        display: inline-block;
        margin-top: 9px;
    }

    .roi-income-row {
        gap: 15px;
    }

    .roi-plan-stats {
        gap: 5px;
    }

    .roi-plan-stat {
        padding: 11px 4px;
    }

    .roi-plan-stat strong {
        font-size: 15px;
    }
}

/* =========================================================
   ROI STATS STRIP
========================================================= */

.roi-stats-strip {
    position: relative;
    padding: 44px 0 42px;
    background: #080806;
    border-top: 1px solid rgba(245, 160, 0, .12);
    border-bottom: 1px solid rgba(124, 92, 252, .10);
}

.roi-stat-box {
    text-align: center;
    padding: 5px 10px;
}

.roi-stat-number {
    color: #d98200;
    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.5px;
}

.roi-stat-label {
    margin-top: 16px;
    color: #69778b;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .5px;
}


/* Mobile */

@media (max-width: 991px) {

    .roi-stats-strip {
        padding: 35px 0;
    }

    .roi-stat-box {
        margin-bottom: 25px;
    }

}


@media (max-width: 575px) {

    .roi-stat-number {
        font-size: 27px;
    }

    .roi-stat-label {
        margin-top: 9px;
        font-size: 10px;
    }

}

/* =========================================================
   ROI DEFINITION SECTION
========================================================= */

.roi-definition-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0 95px;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(124, 92, 252, .025),
            transparent 35%),
        #020611;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.roi-definition-heading {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.roi-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 14px;
    margin-bottom: 27px;

    border: 1px solid rgba(245, 160, 0, .30);
    border-radius: 30px;

    background: rgba(245, 160, 0, .06);

    color: #f5a000;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
}

.roi-section-badge svg {
    width: 13px;
    height: 13px;
}

.roi-definition-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(36px, 4vw, 43px);
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-definition-heading h2 span {
    color: #f5a000;
}

.roi-definition-heading>p {
    max-width: 720px;
    margin: 20px auto 0;

    color: #8e9caf;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   PERSPECTIVE CONTENT
========================================================= */

.roi-perspective-row {
    margin-top: 55px;
}

.roi-perspective h3 {
    margin: 0 0 17px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -.6px;
}

.roi-perspective>p {
    margin-bottom: 18px;

    color: #91a0b4;

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

.roi-perspective>p strong {
    color: #f1f1f1;
    font-weight: 700;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.roi-disclaimer-box {
    display: flex;
    gap: 11px;

    margin-top: 27px;
    padding: 17px 18px;

    border: 1px solid rgba(245, 160, 0, .28);
    border-left: 3px solid #f5a000;

    border-radius: 10px;

    background:
        linear-gradient(135deg,
            rgba(245, 160, 0, .07),
            rgba(245, 160, 0, .025));
}

.roi-disclaimer-icon {
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

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

    color: #f5a000;
}

.roi-disclaimer-icon svg {
    width: 15px;
    height: 15px;
}

.roi-disclaimer-content p {
    margin: 0;

    color: #92a0b3;

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

.roi-disclaimer-content strong {
    color: #f1f1f1;
}

.roi-disclaimer-content a {
    color: #f5a000;
    text-decoration: none;
}

.roi-disclaimer-content a:hover {
    text-decoration: underline;
}


/* =========================================================
   COMPARISON CARDS
========================================================= */

.roi-plan-comparison {
    margin-top: 25px;
}

.roi-comparison-card {
    height: 100%;
    min-height: 146px;

    padding: 16px;

    border: 1px solid rgba(245, 160, 0, .14);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            rgba(32, 25, 8, .80),
            rgba(20, 17, 8, .85));

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

.roi-comparison-card:hover {
    transform: translateY(-4px);

    border-color: rgba(245, 160, 0, .35);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .25),
        0 0 25px rgba(245, 160, 0, .04);
}


/* CARD ICON */

.roi-comparison-icon {
    width: 38px;
    height: 38px;

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

    margin-bottom: 10px;

    border-radius: 10px;
}

.roi-comparison-icon svg {
    width: 18px;
    height: 18px;
}

.roi-icon-orange {
    color: #f5a000;
    border: 1px solid rgba(245, 160, 0, .30);
    background: rgba(245, 160, 0, .08);
}

.roi-icon-purple {
    color: #9c78ff;
    border: 1px solid rgba(156, 120, 255, .30);
    background: rgba(156, 120, 255, .08);
}

.roi-icon-blue {
    color: #4d9aff;
    border: 1px solid rgba(77, 154, 255, .30);
    background: rgba(77, 154, 255, .08);
}

.roi-icon-green {
    color: #16d9ad;
    border: 1px solid rgba(22, 217, 173, .30);
    background: rgba(22, 217, 173, .08);
}


/* CARD TEXT */

.roi-comparison-card h4 {
    margin: 0 0 7px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.roi-comparison-card p {
    margin: 0;

    color: #718095;

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-definition-section {
        padding: 80px 0;
    }

    .roi-perspective-row {
        margin-top: 45px;
    }

    .roi-perspective h3 {
        font-size: 24px;
    }

}


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

@media (max-width: 767px) {

    .roi-definition-section {
        padding: 65px 0;
    }

    .roi-definition-heading h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .roi-definition-heading>p {
        padding: 0 8px;
        font-size: 14px;
        line-height: 1.7;
    }

    .roi-perspective-row {
        margin-top: 40px;
    }

    .roi-perspective h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .roi-perspective>p {
        font-size: 14px;
        line-height: 1.75;
    }

    .roi-disclaimer-box {
        padding: 15px;
    }

    .roi-disclaimer-content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .roi-comparison-card {
        min-height: auto;
    }

}


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

@media (max-width: 575px) {

    .roi-definition-section {
        padding: 55px 0;
    }

    .roi-section-badge {
        font-size: 10px;
        padding: 6px 12px;
    }

    .roi-definition-heading h2 {
        font-size: 29px;
    }

    .roi-definition-heading>p {
        font-size: 13px;
    }

    .roi-perspective h3 {
        font-size: 21px;
    }

    .roi-perspective>p {
        font-size: 13px;
    }

    .roi-plan-comparison {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .roi-comparison-card {
        padding: 14px;
        border-radius: 11px;
    }

    .roi-comparison-card p {
        font-size: 12px;
    }

}

/* =========================================================
   HOW ROI MLM SOFTWARE WORKS
========================================================= */

.roi-how-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 100px;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(245, 160, 0, .025),
            transparent 35%),
        #090806;
}


/* =========================================================
   HEADING
========================================================= */

.roi-how-heading {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.roi-how-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 4vw, 43px);
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-how-heading h2 span {
    color: #f5a000;
}

.roi-how-heading>p {
    max-width: 650px;
    margin: 20px auto 0;

    color: #8d9aac;

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


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

.roi-how-grid {
    margin-top: 57px;
}


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

.roi-step-card {
    height: 100%;
    min-height: 310px;

    padding: 28px;

    border: 1px solid rgba(245, 160, 0, .15);
    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(28, 22, 9, .95),
            rgba(20, 16, 7, .95));

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

.roi-step-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 160, 0, .32);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .25),
        0 0 30px rgba(245, 160, 0, .035);
}


/* =========================================================
   NUMBER
========================================================= */

.roi-step-number {
    width: 38px;
    height: 38px;

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

    margin-bottom: 17px;

    border-radius: 50%;

    background: linear-gradient(145deg,
            #ffad12,
            #df8500);

    color: #090909;

    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 800;

    box-shadow:
        0 5px 18px rgba(245, 160, 0, .14);
}


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

.roi-step-card h3 {
    margin: 0 0 10px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: -.3px;
}


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

.roi-step-card p {
    margin: 0;

    color: #8d9aac;

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

.roi-step-card p strong {
    color: #f1f1f1;
    font-weight: 700;
}

.roi-step-card code {
    padding: 2px 5px;

    border-radius: 3px;

    background: rgba(245, 160, 0, .10);

    color: #f5a000;

    font-size: 13px;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.roi-step-note {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 20px;

    color: #718096;

    font-size: 12px;
    font-weight: 500;
}

.roi-step-note svg {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    color: #f5a000;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-how-section {
        padding: 80px 0;
    }

    .roi-how-grid {
        margin-top: 45px;
    }

    .roi-step-card {
        min-height: 300px;
        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .roi-how-section {
        padding: 65px 0;
    }

    .roi-how-heading h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .roi-how-heading>p {
        padding: 0 8px;

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

    .roi-how-grid {
        margin-top: 38px;
    }

    .roi-step-card {
        min-height: auto;
        padding: 22px;
    }

    .roi-step-card h3 {
        font-size: 18px;
    }

    .roi-step-card p {
        font-size: 13px;
        line-height: 1.75;
    }

}


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

@media (max-width: 575px) {

    .roi-how-section {
        padding: 55px 0;
    }

    .roi-how-heading h2 {
        font-size: 29px;
    }

    .roi-how-heading>p {
        font-size: 13px;
    }

    .roi-step-card {
        padding: 20px;
        border-radius: 13px;
    }

    .roi-step-number {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .roi-step-card h3 {
        font-size: 17px;
    }

    .roi-step-card p {
        font-size: 13px;
    }

    .roi-step-note {
        font-size: 11px;
    }

}

/* =========================================================
   ROI EARNINGS SECTION
========================================================= */

.roi-earnings-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0 100px;
    background: #020611;
}


/* =========================================================
   HEADING
========================================================= */

.roi-earnings-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.roi-earnings-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-earnings-heading h2 span {
    color: #f5a000;
}

.roi-earnings-heading>p {
    max-width: 700px;
    margin: 20px auto 0;

    color: #8d9aac;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   TABLE BOX
========================================================= */

.roi-table-box {
    overflow: hidden;

    margin-bottom: 45px;

    border: 1px solid rgba(245, 160, 0, .14);
    border-radius: 19px;

    background: #020611;
}

.roi-table-title {
    padding: 0 0 17px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
}


/* TABLE */

.roi-earnings-table {
    width: 100%;
    margin: 0;

    border-collapse: collapse;

    color: #91a0b4;

    font-size: 14px;
}

.roi-earnings-table thead {
    background: rgba(245, 160, 0, .08);
}

.roi-earnings-table th {
    padding: 17px 17px;

    color: #f5a000;

    font-size: 13px;
    font-weight: 700;
    text-align: left;

    white-space: nowrap;
}

.roi-earnings-table td {
    padding: 16px 17px;

    border-top: 1px solid rgba(255, 255, 255, .06);

    color: #91a0b4;

    white-space: nowrap;
}

.roi-earnings-table td strong {
    color: #aab5c5;
}

.roi-total-row td {
    color: #f1f1f1;
}

.roi-total-row td strong {
    color: #f1f1f1;
}


/* STATUS */

.roi-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}

.roi-status.active,
.roi-status.completed {
    color: #00d99a;
    background: rgba(0, 214, 143, .12);
}

.roi-status.nearing {
    color: #f5a000;
    background: rgba(245, 160, 0, .13);
}


/* =========================================================
   BREAKDOWN
========================================================= */

.roi-breakdown-box {
    margin-bottom: 35px;
}

.roi-breakdown-table td {
    height: 54px;
}


/* INCOME BADGES */

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

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}

.income-badge.personal {
    color: #f5a000;
    background: rgba(245, 160, 0, .12);
}

.income-badge.referral {
    color: #ff9c1a;
    background: rgba(255, 156, 26, .11);
}

.income-badge.level2 {
    color: #00d99a;
    background: rgba(0, 214, 143, .11);
}

.income-badge.level3 {
    color: #4c9aff;
    background: rgba(76, 154, 255, .11);
}

.income-badge.leadership {
    color: #9d7cff;
    background: rgba(157, 124, 255, .11);
}

.income-badge.principal {
    color: #00d9bd;
    background: rgba(0, 217, 189, .11);
}


/* TOTAL */

.roi-breakdown-total td {
    padding-top: 20px;
    padding-bottom: 20px;

    color: #f1f1f1;
}

.roi-breakdown-total td:last-child {
    color: #f5a000;
}


/* =========================================================
   CRITICAL DISCLAIMER
========================================================= */

.roi-critical-disclaimer {
    margin: 0 0 50px;

    padding: 17px 22px;

    border: 1px solid rgba(255, 65, 65, .27);
    border-left: 3px solid #ff4444;
    border-radius: 12px;

    background: rgba(100, 20, 35, .08);
}

.roi-critical-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;

    color: #ff4c4c;

    font-size: 15px;
    font-weight: 700;
}

.roi-critical-title svg {
    width: 16px;
    height: 16px;
}

.roi-critical-disclaimer p {
    margin: 0;

    color: #909caf;

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

.roi-critical-disclaimer strong {
    color: #f3f3f3;
}


/* =========================================================
   LIVE CALCULATOR
========================================================= */

.roi-live-calculator {
    padding: 32px;

    border: 1px solid rgba(245, 160, 0, .28);
    border-radius: 25px;

    background:
        linear-gradient(145deg,
            rgba(30, 23, 8, .96),
            rgba(22, 17, 7, .96));

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .20);
}


/* HEADING */

.roi-calculator-heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 700;
}

.roi-calculator-heading h3 svg {
    width: 18px;
    height: 18px;

    color: #f5a000;
}

.roi-calculator-heading p {
    margin: 7px 0 30px;

    color: #91a0b4;

    font-size: 14px;
}


/* =========================================================
   SLIDERS
========================================================= */

.roi-slider-group label {
    display: block;

    margin-bottom: 16px;

    color: #91a0b4;

    font-size: 13px;
    font-weight: 600;
}

.roi-range {
    width: 100%;
    height: 5px;

    appearance: none;
    -webkit-appearance: none;

    outline: none;

    border-radius: 10px;

    background: rgba(245, 160, 0, .17);

    cursor: pointer;
}


/* Chrome / Edge / Safari */

.roi-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 19px;
    height: 19px;

    border: 0;
    border-radius: 50%;

    background: #f5a000;

    box-shadow:
        0 0 0 4px rgba(245, 160, 0, .08),
        0 4px 15px rgba(245, 160, 0, .35);

    cursor: pointer;
}


/* Firefox */

.roi-range::-moz-range-thumb {
    width: 19px;
    height: 19px;

    border: 0;
    border-radius: 50%;

    background: #f5a000;

    box-shadow:
        0 0 0 4px rgba(245, 160, 0, .08),
        0 4px 15px rgba(245, 160, 0, .35);

    cursor: pointer;
}


/* VALUE */

.roi-slider-value {
    margin-top: 13px;

    color: #f5a000;

    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   RESULT CARDS
========================================================= */

.roi-calculator-results {
    margin-top: 31px;
}

.roi-result-card {
    min-height: 105px;

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

    padding: 15px;

    border: 1px solid rgba(245, 160, 0, .14);
    border-radius: 15px;

    background: rgba(245, 160, 0, .05);

    text-align: center;
}

.roi-result-card.highlight {
    border-color: rgba(245, 160, 0, .35);
}

.roi-result-card strong {
    color: #d98200;

    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.roi-result-card span {
    margin-top: 8px;

    color: #6f7d91;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
}


/* =========================================================
   TIMELINE
========================================================= */

.roi-timeline-box {
    margin-top: 20px;
    padding: 22px 18px;

    border: 1px solid rgba(245, 160, 0, .13);
    border-radius: 15px;

    background: rgba(245, 160, 0, .035);
}

.roi-timeline-title {
    margin-bottom: 13px;

    color: #9ba8ba;

    font-size: 13px;
    font-weight: 600;
}

.roi-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roi-timeline-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px;
}

.roi-timeline-row>span {
    color: #7b889a;

    font-size: 11px;
    text-align: right;
}

.roi-progress {
    height: 19px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(245, 160, 0, .09);
}

.roi-progress-fill {
    position: relative;

    width: 25%;
    height: 100%;

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

    padding-right: 8px;

    border-radius: 20px;

    background: linear-gradient(90deg,
            #c45b09,
            #f5a000);

    transition: width .35s ease;
}

.roi-progress-fill b {
    color: #080808;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}


/* FOOTNOTE */

.roi-calculator-footnote {
    margin-top: 17px;

    color: #6f7888;

    font-size: 11px;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-earnings-section {
        padding: 80px 0;
    }

    .roi-table-box {
        overflow-x: auto;
    }

    .roi-earnings-table {
        min-width: 850px;
    }

    .roi-live-calculator {
        padding: 27px;
    }

}


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

@media (max-width: 767px) {

    .roi-earnings-section {
        padding: 65px 0;
    }

    .roi-earnings-heading {
        margin-bottom: 40px;
    }

    .roi-earnings-heading h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .roi-earnings-heading>p {
        font-size: 14px;
        line-height: 1.7;
    }

    .roi-table-title {
        font-size: 16px;
    }

    .roi-table-box {
        margin-bottom: 35px;
    }

    .roi-critical-disclaimer {
        padding: 15px;
    }

    .roi-critical-disclaimer p {
        font-size: 13px;
    }

    .roi-live-calculator {
        padding: 21px 15px;
        border-radius: 18px;
    }

    .roi-calculator-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .roi-result-card {
        min-height: 92px;
    }

    .roi-result-card strong {
        font-size: 17px;
    }

    .roi-result-card span {
        font-size: 9px;
    }

}


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

@media (max-width: 575px) {

    .roi-earnings-section {
        padding: 55px 0;
    }

    .roi-earnings-heading h2 {
        font-size: 28px;
    }

    .roi-earnings-heading>p {
        font-size: 13px;
    }

    .roi-table-title {
        font-size: 15px;
    }

    .roi-live-calculator {
        padding: 18px 12px;
    }

    .roi-calculator-heading h3 {
        font-size: 19px;
    }

    .roi-slider-group label {
        font-size: 12px;
    }

    .roi-slider-value {
        font-size: 15px;
    }

    .roi-timeline-box {
        padding: 16px 10px;
    }

    .roi-timeline-row {
        grid-template-columns: 55px 1fr;
    }

    .roi-timeline-row>span {
        font-size: 9px;
    }

    .roi-progress-fill b {
        font-size: 8px;
    }

}

/* =========================================================
   ROI COMMISSION SECTION
========================================================= */

.roi-commission-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0 100px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(245, 160, 0, .025),
            transparent 35%),
        #090806;
}


/* =========================================================
   HEADING
========================================================= */

.roi-commission-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.roi-commission-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-commission-heading h2 span {
    color: #f5a000;
}

.roi-commission-heading>p {
    max-width: 700px;
    margin: 20px auto 0;

    color: #8e9caf;

    font-size: 16px;
    line-height: 1.8;
}


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

.roi-commission-grid {
    margin-top: 0;
}


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

.roi-commission-card {
    height: 100%;
    min-height: 300px;

    display: flex;
    flex-direction: column;

    padding: 27px 28px;

    border: 1px solid rgba(245, 160, 0, .14);
    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(29, 23, 9, .96),
            rgba(20, 16, 7, .96));

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

.roi-commission-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 160, 0, .32);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .25),
        0 0 30px rgba(245, 160, 0, .04);
}


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

.roi-commission-type {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 14px;

    color: #f5a000;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.roi-commission-type svg {
    width: 14px;
    height: 14px;
}


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

.roi-commission-card h3 {
    margin: 0 0 9px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: -.3px;
}


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

.roi-commission-card p {
    margin: 0;

    color: #91a0b4;

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

.roi-commission-card p strong {
    color: #f1f1f1;
    font-weight: 700;
}


/* =========================================================
   COMMISSION TAG
========================================================= */

.roi-commission-tag {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: auto;
    padding: 6px 12px;

    border: 1px solid rgba(245, 160, 0, .25);
    border-radius: 30px;

    background: rgba(245, 160, 0, .07);

    color: #f5a000;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-commission-section {
        padding: 80px 0;
    }

    .roi-commission-heading {
        margin-bottom: 45px;
    }

    .roi-commission-card {
        min-height: 290px;
        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .roi-commission-section {
        padding: 65px 0;
    }

    .roi-commission-heading {
        margin-bottom: 38px;
    }

    .roi-commission-heading h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .roi-commission-heading>p {
        padding: 0 8px;

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

    .roi-commission-card {
        min-height: auto;
        padding: 22px;
    }

    .roi-commission-card h3 {
        font-size: 18px;
    }

    .roi-commission-card p {
        font-size: 13px;
        line-height: 1.75;
    }

    .roi-commission-tag {
        margin-top: 20px;
        font-size: 10px;
    }

}


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

@media (max-width: 575px) {

    .roi-commission-section {
        padding: 55px 0;
    }

    .roi-commission-heading h2 {
        font-size: 29px;
    }

    .roi-commission-heading>p {
        font-size: 13px;
    }

    .roi-commission-card {
        padding: 20px;
        border-radius: 13px;
    }

    .roi-commission-type {
        font-size: 10px;
    }

    .roi-commission-card h3 {
        font-size: 17px;
    }

    .roi-commission-card p {
        font-size: 13px;
    }

}

/* =========================================================
   KEY BENEFITS SECTION
========================================================= */

.roi-benefits-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 100px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(124, 92, 252, .025),
            transparent 35%),
        #020611;
}


/* =========================================================
   HEADING
========================================================= */

.roi-benefits-heading {
    max-width: 900px;

    margin: 0 auto 58px;

    text-align: center;
}

.roi-benefits-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(38px, 4vw, 44px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-benefits-heading h2 span {
    color: #f5a000;
}

.roi-benefits-heading>p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #8d9aac;

    font-size: 16px;

    line-height: 1.8;
}


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

.roi-benefit-card {
    height: 100%;

    min-height: 365px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid rgba(245, 160, 0, .14);

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(29, 23, 9, .96),
            rgba(20, 16, 7, .96));

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

.roi-benefit-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 160, 0, .32);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .25),
        0 0 30px rgba(245, 160, 0, .04);
}


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

.roi-benefit-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 19px;

    border-radius: 12px;
}

.roi-benefit-icon svg {
    width: 23px;
    height: 23px;
}


/* ICON COLORS */

.icon-orange {
    color: #f5a000;

    border: 1px solid rgba(245, 160, 0, .30);

    background: rgba(245, 160, 0, .08);
}

.icon-green {
    color: #27df9c;

    border: 1px solid rgba(39, 223, 156, .30);

    background: rgba(39, 223, 156, .08);
}

.icon-blue {
    color: #5c9eff;

    border: 1px solid rgba(92, 158, 255, .30);

    background: rgba(92, 158, 255, .08);
}

.icon-purple {
    color: #a27cff;

    border: 1px solid rgba(162, 124, 255, .30);

    background: rgba(162, 124, 255, .08);
}

.icon-teal {
    color: #22d9bf;

    border: 1px solid rgba(34, 217, 191, .30);

    background: rgba(34, 217, 191, .08);
}


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

.roi-benefit-card h3 {
    margin: 0 0 10px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -.3px;
}


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

.roi-benefit-card p {
    margin: 0;

    color: #91a0b4;

    font-size: 14px;

    line-height: 1.72;
}

.roi-benefit-card p strong {
    color: #f1f1f1;

    font-weight: 700;
}


/* =========================================================
   STAT
========================================================= */

.roi-benefit-stat {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding-top: 23px;

    color: #718096;

    font-size: 12px;

    font-weight: 600;
}

.roi-benefit-stat strong {
    color: #718096;

    font-weight: 600;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.roi-benefit-progress {
    width: 100%;

    height: 5px;

    overflow: hidden;

    margin-top: 8px;

    border-radius: 10px;

    background: rgba(245, 160, 0, .12);
}

.roi-benefit-progress span {
    display: block;

    width: 0%;

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            #c65d08,
            #f5a000);

    transition: width 1.4s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-benefits-section {
        padding: 80px 0;
    }

    .roi-benefits-heading {
        margin-bottom: 45px;
    }

    .roi-benefit-card {
        min-height: 340px;

        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .roi-benefits-section {
        padding: 65px 0;
    }

    .roi-benefits-heading {
        margin-bottom: 38px;
    }

    .roi-benefits-heading h2 {
        font-size: 32px;

        letter-spacing: -1px;
    }

    .roi-benefits-heading>p {
        padding: 0 8px;

        font-size: 14px;

        line-height: 1.7;
    }

    .roi-benefit-card {
        min-height: auto;

        padding: 22px;
    }

    .roi-benefit-card h3 {
        font-size: 18px;
    }

    .roi-benefit-card p {
        font-size: 13px;

        line-height: 1.75;
    }

}


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

@media (max-width: 575px) {

    .roi-benefits-section {
        padding: 55px 0;
    }

    .roi-benefits-heading h2 {
        font-size: 29px;
    }

    .roi-benefits-heading>p {
        font-size: 13px;
    }

    .roi-benefit-card {
        padding: 20px;

        border-radius: 13px;
    }

    .roi-benefit-icon {
        width: 48px;
        height: 48px;
    }

    .roi-benefit-icon svg {
        width: 21px;
        height: 21px;
    }

    .roi-benefit-card h3 {
        font-size: 17px;
    }

    .roi-benefit-card p {
        font-size: 13px;
    }

}

/* =========================================================
   ADVANCED FEATURES SECTION
========================================================= */

.roi-features-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(245, 160, 0, .025),
            transparent 35%),
        #090806;
}


/* =========================================================
   HEADING
========================================================= */

.roi-features-heading {
    max-width: 900px;

    margin: 0 auto 58px;

    text-align: center;
}

.roi-features-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(38px, 4vw, 44px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-features-heading h2 span {
    color: #f5a000;
}

.roi-features-heading>p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #91a0b4;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   MAIN FEATURES BOX
========================================================= */

.roi-features-box {
    overflow: hidden;

    border: 1px solid rgba(245, 160, 0, .14);

    border-radius: 22px;

    background: #171006;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .18);
}


/* =========================================================
   TABS
========================================================= */

.roi-feature-tabs {
    display: flex;

    align-items: stretch;

    overflow-x: auto;

    scrollbar-width: none;

    border-bottom: 1px solid rgba(245, 160, 0, .13);

    background: rgba(38, 27, 10, .72);
}

.roi-feature-tabs::-webkit-scrollbar {
    display: none;
}


.roi-feature-tab {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 48px;

    padding: 0 22px;

    border: 0;

    border-right: 1px solid rgba(245, 160, 0, .05);

    background: transparent;

    color: #8d9bad;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .25s ease,
        background .25s ease;
}

.roi-feature-tab svg {
    width: 15px;
    height: 15px;
}

.roi-feature-tab:hover {
    color: #e8edf4;

    background: rgba(245, 160, 0, .035);
}

.roi-feature-tab.active {
    color: #f5a000;

    background: rgba(245, 160, 0, .055);

    box-shadow:
        inset 0 -1px 0 #f5a000;
}


/* =========================================================
   CONTENT
========================================================= */

.roi-feature-content {
    display: none;

    padding: 62px 28px 32px;

    animation: roiFeatureFade .35s ease;
}

.roi-feature-content.active {
    display: block;
}

@keyframes roiFeatureFade {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   CONTENT TITLE
========================================================= */

.roi-feature-content>h3 {
    margin: 0 0 25px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.roi-feature-item {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 25px;
}

.roi-feature-item:last-of-type {
    margin-bottom: 20px;
}


.roi-feature-item-icon {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;

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

    margin-top: 1px;

    border: 1px solid rgba(245, 160, 0, .30);

    border-radius: 11px;

    background: rgba(245, 160, 0, .07);

    color: #f5a000;
}

.roi-feature-item-icon svg {
    width: 19px;
    height: 19px;
}


.roi-feature-item h4 {
    margin: 0 0 5px;

    color: #f3f3f3;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}


.roi-feature-item p {
    margin: 0;

    color: #91a0b4;

    font-size: 14px;

    line-height: 1.7;
}

.roi-feature-item p strong {
    color: #f1f1f1;

    font-weight: 700;
}


/* =========================================================
   TAGS
========================================================= */

.roi-feature-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}

.roi-feature-tags span {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 4px 12px;

    border: 1px solid rgba(245, 160, 0, .25);

    border-radius: 20px;

    background: rgba(245, 160, 0, .045);

    color: #8d9bad;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   CODE BOX
========================================================= */

.roi-code-box {
    overflow: auto;

    margin: 24px 0 14px;

    border: 1px solid rgba(80, 110, 170, .15);

    border-radius: 12px;

    background: #020712;
}

.roi-code-box pre {
    margin: 0;

    padding: 20px;

    color: #f5a000;

    font-family:
        'SFMono-Regular',
        Consolas,
        'Liberation Mono',
        monospace;

    font-size: 12px;

    line-height: 1.65;

    white-space: pre;

    min-width: 650px;
}

.roi-code-box code {
    color: inherit;
}


/* =========================================================
   COMPLIANCE BADGES
========================================================= */

.roi-feature-compliance {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 28px;
}

.roi-feature-compliance span {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-height: 29px;

    padding: 4px 11px;

    border: 1px solid rgba(245, 160, 0, .25);

    border-radius: 20px;

    background: rgba(245, 160, 0, .04);

    color: #91a0b4;

    font-size: 11px;

    font-weight: 600;
}

.roi-feature-compliance svg {
    width: 12px;
    height: 12px;

    color: #24d79a;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-features-section {
        padding: 80px 0;
    }

    .roi-features-content {
        padding: 50px 24px 28px;
    }

    .roi-feature-tab {
        padding: 0 18px;
    }

}


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

@media (max-width: 767px) {

    .roi-features-section {
        padding: 65px 0;
    }

    .roi-features-heading {
        margin-bottom: 38px;
    }

    .roi-features-heading h2 {
        font-size: 32px;

        letter-spacing: -1px;
    }

    .roi-features-heading>p {
        padding: 0 8px;

        font-size: 14px;

        line-height: 1.7;
    }

    .roi-features-box {
        border-radius: 16px;
    }

    .roi-feature-tabs {
        justify-content: flex-start;
    }

    .roi-feature-tab {
        min-height: 47px;

        padding: 0 16px;

        font-size: 12px;
    }

    .roi-feature-content {
        padding: 35px 20px 25px;
    }

    .roi-feature-content>h3 {
        font-size: 19px;

        margin-bottom: 24px;
    }

    .roi-feature-item {
        gap: 12px;

        margin-bottom: 23px;
    }

    .roi-feature-item-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .roi-feature-item h4 {
        font-size: 14px;
    }

    .roi-feature-item p {
        font-size: 13px;

        line-height: 1.75;
    }

    .roi-feature-tags {
        gap: 6px;
    }

    .roi-feature-tags span {
        font-size: 10px;

        padding: 4px 9px;
    }

    .roi-feature-compliance {
        justify-content: flex-start;

        padding: 0 8px;
    }

}


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

@media (max-width: 575px) {

    .roi-features-section {
        padding: 55px 0;
    }

    .roi-features-heading h2 {
        font-size: 29px;
    }

    .roi-features-heading>p {
        font-size: 13px;
    }

    .roi-feature-content {
        padding: 30px 16px 22px;
    }

    .roi-feature-content>h3 {
        font-size: 18px;
    }

    .roi-feature-item-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .roi-feature-item-icon svg {
        width: 17px;
        height: 17px;
    }

    .roi-feature-item p {
        font-size: 13px;
    }

    .roi-feature-compliance {
        margin-top: 22px;
    }

}

/* =========================================================
   ADVANCED ROI LOGIC SECTION
========================================================= */

.roi-logic-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(92, 158, 255, .025),
            transparent 38%),
        #020611;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.roi-logic-heading {
    max-width: 950px;

    margin: 0 auto 58px;

    text-align: center;
}

.roi-logic-heading h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(38px, 4vw, 44px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.roi-logic-heading h2 span {
    color: #f5a000;
}

.roi-logic-heading>p {
    max-width: 760px;

    margin: 20px auto 0;

    color: #91a0b4;

    font-size: 16px;

    line-height: 1.8;
}

.roi-logic-heading p strong {
    color: #f1f1f1;
}


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

.roi-logic-grid {
    display: grid;

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

    gap: 32px;
}


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

.roi-logic-card {
    min-width: 0;

    padding: 28px 28px 30px;

    border: 1px solid rgba(245, 160, 0, .14);

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            rgba(29, 23, 9, .97),
            rgba(20, 16, 7, .97));

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

.roi-logic-card:hover {
    transform: translateY(-4px);

    border-color: rgba(245, 160, 0, .27);

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


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

.roi-logic-card h3 {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 0 0 25px;

    color: #f5a000;

    font-family: 'Outfit', sans-serif;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 700;
}

.roi-logic-card h3 svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin-top: 2px;
}


/* =========================================================
   LIST
========================================================= */

.roi-logic-list {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.roi-logic-list li {
    display: grid;

    grid-template-columns: 10px minmax(0, 1fr);

    align-items: flex-start;

    gap: 10px;

    color: #91a0b4;

    font-size: 14px;

    line-height: 1.72;
}


/* =========================================================
   BULLET
========================================================= */

.roi-bullet {
    width: 8px;
    height: 8px;

    margin-top: 7px;

    border-radius: 50%;

    background: #f5a000;

    box-shadow:
        0 0 7px rgba(245, 160, 0, .25);
}


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

.roi-logic-list strong {
    color: #f3f3f3;

    font-weight: 700;
}


/* =========================================================
   INLINE CODE
========================================================= */

.roi-logic-list code {
    display: inline-block;

    padding: 1px 5px;

    border-radius: 3px;

    background: rgba(245, 160, 0, .12);

    color: #f5a000;

    font-family:
        'SFMono-Regular',
        Consolas,
        monospace;

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-logic-section {
        padding: 80px 0;
    }

    .roi-logic-grid {
        gap: 22px;
    }

    .roi-logic-card {
        padding: 24px;
    }

}


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

@media (max-width: 767px) {

    .roi-logic-section {
        padding: 65px 0;
    }

    .roi-logic-heading {
        margin-bottom: 38px;
    }

    .roi-logic-heading h2 {
        font-size: 32px;

        letter-spacing: -1px;
    }

    .roi-logic-heading>p {
        padding: 0 8px;

        font-size: 14px;

        line-height: 1.7;
    }

    .roi-logic-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .roi-logic-card {
        padding: 22px;

        border-radius: 14px;
    }

    .roi-logic-card h3 {
        font-size: 16px;

        margin-bottom: 21px;
    }

    .roi-logic-list {
        gap: 16px;
    }

    .roi-logic-list li {
        font-size: 13px;

        line-height: 1.75;
    }

}


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

@media (max-width: 575px) {

    .roi-logic-section {
        padding: 55px 0;
    }

    .roi-logic-heading h2 {
        font-size: 29px;
    }

    .roi-logic-heading>p {
        font-size: 13px;
    }

    .roi-logic-card {
        padding: 20px;
    }

    .roi-logic-card h3 {
        font-size: 15px;
    }

    .roi-logic-list li {
        grid-template-columns: 8px minmax(0, 1fr);

        gap: 9px;

        font-size: 13px;
    }

    .roi-bullet {
        width: 7px;
        height: 7px;
    }

}

/* =========================================================
   WHY CHOOSE MLM MIND
========================================================= */

.roi-why-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 0;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(245, 160, 0, 0.025),
            transparent 35%),
        #0a0803;
}


/* =========================================================
   CONTAINER
========================================================= */

.roi-why-container {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


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

.roi-why-header {
    max-width: 900px;

    margin: 0 auto 60px;

    text-align: center;
}

.roi-why-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(36px, 4vw, 43px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.4px;
}

.roi-why-header h2 span {
    color: #f5a000;
}

.roi-why-header p {
    max-width: 700px;

    margin: 20px auto 0;

    color: #91a0b4;

    font-size: 16px;

    line-height: 1.75;
}


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

.roi-why-grid {
    display: grid;

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

    gap: 24px;
}


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

.roi-why-card {
    min-width: 0;

    padding: 24px;

    min-height: 300px;

    border: 1px solid rgba(245, 160, 0, 0.13);

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(29, 23, 9, .98),
            rgba(20, 16, 7, .98));

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

.roi-why-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 160, 0, .28);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .25);
}


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

.roi-why-icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin-bottom: 22px;

    border-radius: 12px;

    background:
        linear-gradient(145deg,
            #d87500,
            #f5a000);

    color: #080704;

    box-shadow:
        0 8px 20px rgba(245, 160, 0, .12);
}

.roi-why-icon svg {
    width: 23px;
    height: 23px;

    stroke-width: 2.5;
}


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

.roi-why-card h3 {
    margin: 0 0 10px;

    color: #f4f4f4;

    font-family: 'Outfit', sans-serif;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 700;
}


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

.roi-why-card p {
    margin: 0;

    color: #91a0b4;

    font-size: 14px;

    line-height: 1.7;
}

.roi-why-card strong {
    color: #f1f1f1;

    font-weight: 700;
}


/* =========================================================
   COUNTER SECTION
========================================================= */

.roi-why-stats {
    display: grid;

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

    margin-top: 55px;

    padding: 45px 0 55px;

}


/* =========================================================
   STAT
========================================================= */

.roi-why-stat {
    position: relative;

    text-align: center;
}




/* =========================================================
   COUNTER NUMBER
========================================================= */

.roi-counter {
    color: #d98200;

    font-family: 'Outfit', sans-serif;

    font-size: 32px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;
}


/* =========================================================
   STAT LABEL
========================================================= */

.roi-why-stat span {
    display: block;

    margin-top: 12px;

    color: #718097;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: .5px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-why-section {
        padding-top: 80px;
    }

    .roi-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .roi-why-card {
        min-height: auto;
    }

    .roi-why-stats {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 35px;
    }

    .roi-why-stat:nth-child(2)::after {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .roi-why-section {
        padding-top: 65px;
    }

    .roi-why-container {
        width: min(100% - 30px, 600px);
    }

    .roi-why-header {
        margin-bottom: 40px;
    }

    .roi-why-header h2 {
        font-size: 31px;

        letter-spacing: -1px;
    }

    .roi-why-header p {
        font-size: 14px;

        line-height: 1.7;
    }

    .roi-why-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .roi-why-card {
        padding: 22px;

        border-radius: 14px;
    }

    .roi-why-card h3 {
        font-size: 17px;
    }

    .roi-why-card p {
        font-size: 13px;

        line-height: 1.75;
    }

    .roi-why-stats {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 40px;

        padding: 38px 0 45px;
    }

    .roi-counter {
        font-size: 29px;
    }

}


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

@media (max-width: 480px) {

    .roi-why-container {
        width: calc(100% - 24px);
    }

    .roi-why-header h2 {
        font-size: 28px;
    }

    .roi-why-header p {
        font-size: 13px;
    }

    .roi-why-card {
        padding: 20px;
    }

    .roi-why-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 19px;
    }

    .roi-why-card h3 {
        font-size: 16px;
    }

    .roi-why-card p {
        font-size: 13px;
    }

    .roi-counter {
        font-size: 27px;
    }

    .roi-why-stat span {
        font-size: 11px;
    }

}

/* =========================================================
   REAL CASE STUDY
========================================================= */

.roi-case-study {
    padding: 105px 0 80px;
    background: #030712;
    overflow: hidden;
}

.roi-case-container {
    width: min(1200px, calc(100% - 40px));
    margin: auto;
}


/* HEADER */

.roi-case-header {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.roi-case-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid rgba(245, 160, 0, .35);
    border-radius: 30px;
    background: rgba(245, 160, 0, .07);
    color: #f5a000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
}

.roi-case-badge svg {
    width: 13px;
    height: 13px;
}

.roi-case-header h2 {
    margin: 30px 0 18px;
    color: #f5f5f5;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(35px, 4vw, 43px);
    line-height: 1.15;
    font-weight: 800;
}

.roi-case-header h2 span {
    color: #f5a000;
}

.roi-case-header p {
    max-width: 720px;
    margin: auto;
    color: #91a0b4;
    font-size: 16px;
    line-height: 1.7;
}


/* MAIN BOX */

.roi-case-box {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 20px;

    padding: 32px;

    border: 1px solid rgba(245, 160, 0, .16);
    border-radius: 25px;

    background: #171106;
}


/* LEFT */

.roi-case-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.roi-case-card {
    padding: 25px;

    border: 1px solid rgba(245, 160, 0, .14);
    border-radius: 18px;

    background: #211708;
}

.roi-case-card-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}

.roi-case-card-title h3 {
    margin: 0;
    color: #f5f5f5;
    font-size: 17px;
    font-weight: 700;
}

.roi-case-small-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 11px;
}

.roi-case-small-icon svg {
    width: 20px;
}

.roi-case-small-icon.danger {
    color: #ff4545;
    background: rgba(255, 60, 60, .09);
    border: 1px solid rgba(255, 60, 60, .25);
}

.roi-case-small-icon.success {
    color: #19d99b;
    background: rgba(25, 217, 155, .08);
    border: 1px solid rgba(25, 217, 155, .25);
}

.roi-case-card p {
    margin: 0;

    color: #91a0b4;
    font-size: 14px;
    line-height: 1.7;
}

.roi-case-card strong {
    color: #f2f2f2;
}


/* LIST */

.roi-case-list {
    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}

.roi-case-list li {
    position: relative;

    margin-bottom: 12px;
    padding-left: 22px;

    color: #91a0b4;
    font-size: 14px;
}

.roi-case-list li::before {
    position: absolute;
    left: 0;
    top: 0;

    font-weight: 700;
}

.danger-list li::before {
    content: "×";
    color: #ff4545;
}

.success-list li::before {
    content: "✓";
    color: #16d89a;
}


/* RIGHT */

.roi-case-right {
    height: 100%;
}

.roi-results-card {
    height: 100%;

    padding: 25px;

    border: 1px solid rgba(245, 160, 0, .25);
    border-radius: 18px;

    background: #211708;
}

.roi-results-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;
}

.roi-results-title svg {
    width: 21px;
    color: #18d89a;
}

.roi-results-title h3 {
    margin: 0;

    color: #f5f5f5;
    font-size: 19px;
}


/* RESULTS GRID */

.roi-results-grid {
    display: grid;

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

    gap: 14px;
}

.roi-result-item {
    min-height: 110px;

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

    padding: 16px;

    border-radius: 12px;

    background: #120e05;

    text-align: center;
}

.roi-result-item strong {
    color: #e98a00;

    font-size: 24px;
    font-weight: 800;
}

.roi-result-item span {
    margin-top: 8px;

    color: #91a0b4;

    font-size: 12px;
}

.roi-result-item small {
    margin-top: 7px;

    color: #10d995;

    font-size: 11px;
    font-weight: 600;
}


/* QUOTE */

.roi-case-quote {
    margin-top: 24px;
    padding: 22px;

    border-left: 3px solid #f5a000;
    border-radius: 10px;

    background: rgba(245, 160, 0, .07);
}

.roi-case-quote p {
    margin: 0 0 13px;

    color: #91a0b4;

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

    font-style: italic;
}

.roi-case-quote strong {
    color: #f5a000;
    font-size: 12px;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.roi-testimonials {
    padding: 75px 0 90px;
    background: #030712;
    overflow: hidden;
}

.roi-testimonial-container {
    width: min(1200px, calc(100% - 40px));
    margin: auto;
}

.roi-testimonial-container>h2 {
    margin: 0 0 35px;

    color: #f5f5f5;

    text-align: center;

    font-family: 'Outfit', sans-serif;

    font-size: 30px;
    font-weight: 800;
}


/* SLIDER */

.roi-slider {
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.roi-slider-track {
    display: flex;

    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.roi-testimonial-slide {
    min-width: 100%;
    box-sizing: border-box;
}


/* TESTIMONIAL CARD */

.roi-testimonial-content {
    min-height: 235px;

    padding: 38px;

    border: 1px solid rgba(245, 160, 0, .28);
    border-radius: 22px;

    background: #171106;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.roi-stars {
    margin-bottom: 25px;

    color: #f5a000;

    font-size: 18px;
    letter-spacing: 2px;
}

.roi-testimonial-content>p {
    margin: 0 0 28px;

    color: #e6e6e6;

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

    font-style: italic;
}


/* CLIENT */

.roi-client {
    display: flex;
    align-items: center;
    gap: 13px;
}

.roi-client-avatar {
    width: 46px;
    height: 46px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: linear-gradient(145deg,
            #d87500,
            #f5a000);

    color: #111;

    font-size: 13px;
    font-weight: 800;
}

.roi-client strong {
    display: block;

    color: #f3f3f3;

    font-size: 15px;
}

.roi-client span {
    display: block;

    margin-top: 4px;

    color: #718097;

    font-size: 12px;
}


/* CONTROLS */

.roi-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 20px;
}

.roi-slider-btn {
    width: 39px;
    height: 39px;

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

    border: 1px solid rgba(245, 160, 0, .18);
    border-radius: 50%;

    background: #171106;

    color: #8e9caf;

    cursor: pointer;

    transition: .25s ease;
}

.roi-slider-btn:hover {
    color: #f5a000;
    border-color: rgba(245, 160, 0, .45);
    background: #211708;
}

.roi-slider-btn svg {
    width: 17px;
}


/* DOTS */

.roi-slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.roi-slider-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 20px;

    background: #38280e;

    cursor: pointer;

    transition: .3s ease;
}

.roi-slider-dot.active {
    width: 23px;
    background: #f5a000;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-case-box {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 767px) {

    .roi-case-study {
        padding: 70px 0 55px;
    }

    .roi-case-container,
    .roi-testimonial-container {
        width: calc(100% - 28px);
    }

    .roi-case-header {
        margin-bottom: 40px;
    }

    .roi-case-header h2 {
        font-size: 30px;
    }

    .roi-case-header p {
        font-size: 13px;
    }

    .roi-case-box {
        padding: 15px;
        border-radius: 18px;
        gap: 15px;
    }

    .roi-case-card,
    .roi-results-card {
        padding: 20px;
        border-radius: 15px;
    }

    .roi-results-grid {
        gap: 10px;
    }

    .roi-result-item {
        min-height: 100px;
        padding: 12px;
    }

    .roi-result-item strong {
        font-size: 20px;
    }

    .roi-result-item span {
        font-size: 11px;
    }

    .roi-case-card p,
    .roi-case-list li,
    .roi-case-quote p {
        font-size: 13px;
    }

    .roi-testimonials {
        padding: 55px 0 70px;
    }

    .roi-testimonial-container>h2 {
        font-size: 27px;
        margin-bottom: 25px;
    }

    .roi-testimonial-content {
        min-height: 260px;
        padding: 25px;
    }

    .roi-testimonial-content>p {
        font-size: 14px;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .roi-results-grid {
        grid-template-columns: 1fr 1fr;
    }

    .roi-result-item strong {
        font-size: 18px;
    }

    .roi-testimonial-content {
        padding: 22px;
    }

    .roi-stars {
        margin-bottom: 18px;
    }

}

/* =========================================================
   PLAN COMPARISON
========================================================= */

.roi-comparison-section {
    padding: 100px 0 90px;

    background: #0a0803;

    overflow: hidden;
}

.roi-comparison-container {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


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

.roi-comparison-header {
    max-width: 900px;

    margin: 0 auto 58px;

    text-align: center;
}

.roi-comparison-badge {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    border: 1px solid rgba(245, 160, 0, .35);

    border-radius: 30px;

    background: rgba(245, 160, 0, .06);

    color: #f5a000;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .7px;
}

.roi-comparison-badge svg {
    width: 13px;
    height: 13px;
}

.roi-comparison-header h2 {
    margin: 30px 0 18px;

    color: #f5f5f5;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(35px, 4vw, 43px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.3px;
}

.roi-comparison-header h2 span {
    color: #f5a000;
}

.roi-comparison-header p {
    max-width: 720px;

    margin: auto;

    color: #91a0b4;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.roi-comparison-table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid rgba(245, 160, 0, .13);

    border-radius: 18px;

    background: #0c0a06;

    scrollbar-width: thin;

    scrollbar-color: #6e4800 #151006;
}


/* Chrome / Edge scrollbar */

.roi-comparison-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.roi-comparison-table-wrap::-webkit-scrollbar-track {
    background: #151006;
}

.roi-comparison-table-wrap::-webkit-scrollbar-thumb {
    background: #6e4800;

    border-radius: 10px;
}


/* =========================================================
   TABLE
========================================================= */

.roi-comparison-table {
    width: 100%;

    min-width: 980px;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 14px;
}


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

.roi-comparison-table thead th {
    height: 51px;

    padding: 0 17px;

    background: #201705;

    color: #f5a000;

    border-bottom: 1px solid rgba(245, 160, 0, .13);

    text-align: left;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}

.roi-comparison-table thead th:first-child {
    width: 210px;

    background: #171106;
}

.roi-comparison-table thead th:nth-child(2) {
    background: #573600;
}

.roi-comparison-table thead th i {
    width: 15px;
    height: 15px;

    vertical-align: -2px;

    margin-right: 5px;
}


/* =========================================================
   BODY
========================================================= */

.roi-comparison-table tbody td {
    height: 53px;

    padding: 10px 17px;

    color: #91a0b4;

    border-bottom: 1px solid rgba(245, 160, 0, .09);

    vertical-align: middle;

    line-height: 1.45;
}

.roi-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.roi-comparison-table tbody td:first-child {
    color: #91a0b4;

    font-weight: 500;
}


/* ROI COLUMN */

.roi-comparison-table tbody td:nth-child(2) {
    color: #dce1e8;
}

.roi-comparison-table tbody tr:hover td {
    background: rgba(245, 160, 0, .025);
}


/* HIGHLIGHT */

.roi-comparison-table .roi-highlight {
    color: #aab5c5;

    font-weight: 600;
}


/* =========================================================
   PILLS
========================================================= */

.roi-pill {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    white-space: nowrap;
}


/* GREEN */

.roi-pill.green {
    color: #16d996;

    background: rgba(8, 83, 54, .55);
}


/* YELLOW */

.roi-pill.yellow {
    color: #f5b300;

    background: rgba(92, 61, 0, .55);
}


/* RED */

.roi-pill.red {
    color: #ff5a5a;

    background: rgba(91, 27, 27, .55);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-comparison-section {
        padding: 80px 0 70px;
    }

    .roi-comparison-header {
        margin-bottom: 45px;
    }

    .roi-comparison-header h2 {
        font-size: 35px;
    }

}


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

@media (max-width: 767px) {

    .roi-comparison-section {
        padding: 65px 0 60px;
    }

    .roi-comparison-container {
        width: calc(100% - 28px);
    }

    .roi-comparison-header {
        margin-bottom: 35px;
    }

    .roi-comparison-header h2 {
        margin-top: 23px;

        font-size: 29px;

        letter-spacing: -.8px;
    }

    .roi-comparison-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .roi-comparison-table-wrap {
        border-radius: 14px;
    }

    .roi-comparison-table {
        min-width: 900px;

        font-size: 13px;
    }

    .roi-comparison-table thead th {
        height: 48px;

        padding: 0 14px;

        font-size: 12px;
    }

    .roi-comparison-table tbody td {
        height: 51px;

        padding: 9px 14px;

        font-size: 13px;
    }

    .roi-pill {
        font-size: 10px;

        padding: 4px 9px;
    }

}


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

@media (max-width: 480px) {

    .roi-comparison-container {
        width: calc(100% - 20px);
    }

    .roi-comparison-header h2 {
        font-size: 27px;
    }

    .roi-comparison-header p {
        font-size: 13px;
    }

}

/* =========================================================
   RISK MANAGEMENT & COMPLIANCE
========================================================= */

.roi-risk-section {
    width: 100%;
    padding: 95px 0 90px;
    background: #020711;
    color: #fff;
    overflow: hidden;
}

.roi-risk-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================
   SECTION HEADING
========================= */

.roi-section-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 62px;
}

.roi-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 17px;
    margin-bottom: 25px;

    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;

    background: rgba(245, 158, 11, 0.08);

    color: #f59e0b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.roi-section-badge svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
}

.roi-section-heading h2 {
    margin: 0;

    font-size: clamp(34px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.roi-section-heading h2 span {
    color: #f59e0b;
}

.roi-section-heading p {
    max-width: 720px;
    margin: 22px auto 0;

    color: #94a3b8;
    font-size: 17px;
    line-height: 1.7;
}


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

.roi-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


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

.roi-risk-card {
    min-height: 100%;
    padding: 25px 24px 27px;

    background: #151004;
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 16px;

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

.roi-risk-card:hover {
    transform: translateY(-4px);

    border-color: rgba(245, 158, 11, 0.45);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 0 25px rgba(245, 158, 11, 0.05);
}


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

.roi-risk-icon {
    width: 44px;
    height: 44px;

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

    margin-bottom: 17px;

    border-radius: 11px;

    border: 1px solid rgba(245, 158, 11, 0.35);
}

.roi-risk-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.3;
}


/* ICON COLORS */

.roi-icon-orange {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.32);
}

.roi-icon-red {
    color: #ff6464;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
}

.roi-icon-green {
    color: #19d994;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.30);
}

.roi-icon-blue {
    color: #62a5ff;
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.30);
}

.roi-icon-purple {
    color: #b47cff;
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.30);
}

.roi-icon-cyan {
    color: #20d7c4;
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(20, 184, 166, 0.30);
}


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

.roi-risk-card h3 {
    margin: 0 0 10px;

    color: #f8fafc;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.roi-risk-card p {
    margin: 0;

    color: #94a3b8;

    font-size: 15px;
    line-height: 1.72;
}

.roi-risk-card strong {
    color: #f1f5f9;
    font-weight: 700;
}


/* =========================
   DISCLAIMER
========================= */

.roi-critical-disclaimer {
    margin-top: 40px;
    padding: 19px 23px 20px;

    background: rgba(30, 12, 21, 0.72);

    border: 1px solid rgba(255, 75, 75, 0.32);
    border-left: 3px solid #ff4141;

    border-radius: 12px;
}

.roi-disclaimer-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;

    color: #ff4b4b;

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

.roi-disclaimer-title svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.roi-critical-disclaimer p {
    margin: 0;

    color: #94a3b8;

    font-size: 15px;
    line-height: 1.72;
}

.roi-critical-disclaimer strong {
    color: #f1f5f9;
    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-risk-section {
        padding: 75px 0;
    }

    .roi-risk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .roi-section-heading {
        margin-bottom: 45px;
    }

    .roi-section-heading p {
        font-size: 16px;
    }
}


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

@media (max-width: 767px) {

    .roi-risk-section {
        padding: 60px 0 55px;
    }

    .roi-risk-container {
        width: min(100% - 28px, 600px);
    }

    .roi-section-heading {
        margin-bottom: 38px;
    }

    .roi-section-badge {
        padding: 7px 14px;
        margin-bottom: 20px;

        font-size: 11px;
    }

    .roi-section-heading h2 {
        font-size: 31px;
        line-height: 1.18;
        letter-spacing: -0.8px;
    }

    .roi-section-heading p {
        margin-top: 17px;

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

    .roi-risk-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .roi-risk-card {
        padding: 21px 20px 23px;
        border-radius: 14px;
    }

    .roi-risk-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .roi-risk-card h3 {
        font-size: 17px;
    }

    .roi-risk-card p {
        font-size: 14px;
        line-height: 1.68;
    }

    .roi-critical-disclaimer {
        margin-top: 25px;
        padding: 17px 17px 18px;
        border-radius: 11px;
    }

    .roi-disclaimer-title {
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.4;
    }

    .roi-critical-disclaimer p {
        font-size: 13px;
        line-height: 1.68;
    }
}


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

@media (max-width: 420px) {

    .roi-risk-section {
        padding: 50px 0;
    }

    .roi-section-heading h2 {
        font-size: 28px;
    }

    .roi-section-heading p {
        font-size: 13px;
    }

    .roi-risk-card {
        padding: 19px 17px 21px;
    }

    .roi-risk-card h3 {
        font-size: 16px;
    }

    .roi-risk-card p,
    .roi-critical-disclaimer p {
        font-size: 13px;
    }
}

/* =========================================================
   FAQ SECTION
========================================================= */

.roi-faq-section {
    width: 100%;
    padding: 95px 0 100px;
    background: #0b0904;
    color: #fff;
    overflow: hidden;
}

.roi-faq-container {
    width: min(1190px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================
   HEADING
========================= */

.roi-faq-heading {
    max-width: 1000px;
    margin: 0 auto 60px;
    text-align: center;
}

.roi-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 15px;
    margin-bottom: 27px;

    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 999px;

    background: rgba(245, 158, 11, .08);

    color: #f59e0b;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
}

.roi-faq-badge svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.7;
}

.roi-faq-heading h2 {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(34px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.roi-faq-heading h2 span {
    color: #f59e0b;
}

.roi-faq-heading p {
    max-width: 750px;
    margin: 22px auto 0;

    color: #94a3b8;

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


/* =========================
   FAQ LIST
========================= */

.roi-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* =========================
   FAQ ITEM
========================= */

.roi-faq-item {
    overflow: hidden;

    background: #151004;

    border: 1px solid rgba(245, 158, 11, .13);
    border-radius: 12px;

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

.roi-faq-item:hover {
    border-color: rgba(245, 158, 11, .28);
}


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

.roi-faq-question {
    width: 100%;
    min-height: 56px;

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

    gap: 20px;

    padding: 0 20px;

    border: 0;
    outline: none;

    background: transparent;

    color: #f8fafc;

    text-align: left;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.roi-faq-question span {
    flex: 1;
}

.roi-faq-question svg {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    color: #f59e0b;

    stroke-width: 2.5;

    transition: transform .3s ease;
}


/* ACTIVE QUESTION */

.roi-faq-item.active {
    border-color: rgba(245, 158, 11, .22);
    background: #171207;
}

.roi-faq-item.active .roi-faq-question {
    color: #f59e0b;
}

.roi-faq-item.active .roi-faq-question svg {
    transform: rotate(180deg);
}


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

.roi-faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;
}

.roi-faq-answer>p {
    min-height: 0;
    overflow: hidden;

    margin: 0;
    padding: 0 20px;

    color: #94a3b8;

    font-size: 15px;
    line-height: 1.72;

    opacity: 0;

    transition:
        opacity .25s ease,
        padding .35s ease;
}


/* OPEN */

.roi-faq-item.active .roi-faq-answer {
    grid-template-rows: 1fr;
}

.roi-faq-item.active .roi-faq-answer>p {
    padding: 17px 20px 22px;

    opacity: 1;
}

.roi-faq-answer strong {
    color: #f1f5f9;
    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .roi-faq-section {
        padding: 75px 0 80px;
    }

    .roi-faq-heading {
        margin-bottom: 45px;
    }

    .roi-faq-heading p {
        font-size: 16px;
    }
}


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

@media (max-width: 767px) {

    .roi-faq-section {
        padding: 60px 0 65px;
    }

    .roi-faq-container {
        width: min(100% - 28px, 600px);
    }

    .roi-faq-heading {
        margin-bottom: 38px;
    }

    .roi-faq-badge {
        margin-bottom: 20px;
        padding: 7px 13px;
        font-size: 11px;
    }

    .roi-faq-heading h2 {
        font-size: 30px;
        line-height: 1.18;
        letter-spacing: -.8px;
    }

    .roi-faq-heading p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .roi-faq-list {
        gap: 8px;
    }

    .roi-faq-item {
        border-radius: 10px;
    }

    .roi-faq-question {
        min-height: 58px;

        padding: 14px 16px;

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

    .roi-faq-question svg {
        width: 16px;
        height: 16px;
    }

    .roi-faq-item.active .roi-faq-answer>p {
        padding: 15px 16px 19px;
    }

    .roi-faq-answer>p {
        font-size: 13px;
        line-height: 1.7;
    }
}


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

@media (max-width: 420px) {

    .roi-faq-section {
        padding: 50px 0 55px;
    }

    .roi-faq-heading h2 {
        font-size: 27px;
    }

    .roi-faq-heading p {
        font-size: 13px;
    }

    .roi-faq-question {
        padding: 13px 14px;
        font-size: 13px;
    }

    .roi-faq-item.active .roi-faq-answer>p {
        padding: 14px 14px 18px;
    }

    .roi-faq-answer>p {
        font-size: 13px;
    }
}

/* =========================================================
   ROI CTA / FINAL CONVERSION SECTION
   ========================================================= */

.roi-cta-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(245, 158, 11, 0.08),
            transparent 42%),
        #080704;
    padding: 0;
    color: #ffffff;
}


/* MAIN CONTAINER */
.roi-cta-container {
    width: 100%;
    min-height: 590px;
    margin: 0 auto;
    padding: 0 6%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


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

.roi-cta-left {
    padding: 15px 0 35px;
}


/* BADGE */
.roi-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 17px;
    margin-bottom: 18px;

    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 30px;

    background: rgba(245, 158, 11, 0.08);

    color: #f59e0b;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.roi-cta-badge i {
    font-size: 13px;
}


/* HEADING */
.roi-cta-left h2 {
    margin: 0;
    max-width: 620px;

    font-size: clamp(40px, 3vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.8px;

    color: #ffffff;
}

.roi-cta-left h2 span {
    color: #f59e0b;
}


/* DESCRIPTION */
.roi-cta-description {
    max-width: 600px;

    margin: 20px 0 25px;

    color: #94a3b8;

    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}


/* =========================================================
   FEATURES
   ========================================================= */

.roi-cta-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 27px;
}

.roi-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #9aa9bc;

    font-size: 15px;
    line-height: 1.5;
}

.roi-feature-item i {
    flex: 0 0 auto;

    color: #10c991;
    font-size: 15px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.roi-cta-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* COMMON BUTTON */
.roi-cta-buttons a {
    min-height: 60px;

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

    padding: 0 30px;

    border-radius: 35px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* DEMO BUTTON */
.roi-demo-btn {
    background: #ffffff;
    color: #bd6500;
}

.roi-demo-btn:hover {
    color: #a95700;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.12);
}


/* PRICING BUTTON */
.roi-pricing-btn {
    background: #f59e0b;
    color: #080704;
}

.roi-pricing-btn:hover {
    color: #080704;
    background: #ffad18;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.25);
}


/* PHONE BUTTON */
.roi-phone-btn {
    width: fit-content;

    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.35);

    color: #ffffff;

    margin-top: 0;
}

.roi-phone-btn:hover {
    color: #ffffff;
    border-color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.08);
    transform: translateY(-2px);
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.roi-cta-right {
    width: 100%;
    padding-top: 25px;
}


/* STATS GRID */
.roi-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}


/* STAT CARD */
.roi-stat-card {
    min-height: 121px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px 18px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 17px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025));

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

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.roi-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.35);

    background:
        linear-gradient(135deg,
            rgba(245, 158, 11, 0.09),
            rgba(255, 255, 255, 0.025));
}


/* STAT ICON */
.roi-stat-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 12px;

    font-size: 19px;
}


/* ORANGE */
.roi-icon-orange {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
}


/* GREEN */
.roi-icon-green {
    color: #24d394;
    background: rgba(16, 185, 129, 0.14);
}


/* BLUE */
.roi-icon-blue {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.14);
}


/* STAT CONTENT */
.roi-stat-content {
    min-width: 0;
}

.roi-stat-content h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.roi-stat-content p {
    margin: 0;

    color: #718096;

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


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

.roi-rating-card {
    min-height: 94px;

    margin-top: 14px;

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 17px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025));
}


/* STARS */
.roi-stars {
    flex: 0 0 auto;

    color: #f59e0b;

    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1;
}


/* RATING CONTENT */
.roi-rating-content h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 800;
}

.roi-rating-content p {
    margin: 0;

    color: #718096;

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .roi-cta-container {
        grid-template-columns: 1fr;
        gap: 35px;

        padding: 70px 7%;
    }

    .roi-cta-left h2 {
        max-width: 800px;
    }

    .roi-cta-description {
        max-width: 800px;
    }

    .roi-cta-right {
        max-width: 750px;
        padding-top: 0;
    }

}


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

@media (max-width: 767px) {

    .roi-cta-container {
        min-height: auto;

        padding: 55px 20px 60px;

        gap: 40px;
    }


    .roi-cta-left {
        padding: 0;
    }


    .roi-cta-badge {
        font-size: 12px;
        padding: 8px 14px;
    }


    .roi-cta-left h2 {
        font-size: 36px;
        line-height: 1.12;
        letter-spacing: -1px;
    }


    .roi-cta-description {
        margin: 17px 0 23px;

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


    .roi-feature-item {
        font-size: 13px;
    }


    .roi-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }


    .roi-cta-buttons a {
        width: 100%;
        min-height: 55px;

        font-size: 14px;
    }


    .roi-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }


    .roi-stat-card {
        min-height: 125px;

        flex-direction: column;
        align-items: flex-start;

        gap: 10px;

        padding: 16px;
    }


    .roi-stat-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;

        font-size: 16px;
    }


    .roi-stat-content h3 {
        font-size: 19px;
    }


    .roi-stat-content p {
        font-size: 12px;
    }


    .roi-rating-card {
        align-items: flex-start;

        gap: 12px;

        padding: 17px;
    }


    .roi-stars {
        font-size: 17px;
        letter-spacing: 1px;
    }


    .roi-rating-content h3 {
        font-size: 17px;
    }


    .roi-rating-content p {
        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .roi-cta-container {
        padding-left: 16px;
        padding-right: 16px;
    }


    .roi-cta-left h2 {
        font-size: 31px;
    }


    .roi-stats-grid {
        grid-template-columns: 1fr;
    }


    .roi-stat-card {
        min-height: 100px;

        flex-direction: row;
        align-items: center;
    }


    .roi-rating-card {
        flex-direction: column;
    }

}

/*======================================== Stairstep MLM Software ===================================*/
/* =====================================================
   STAIRSTEP HERO SECTION
===================================================== */

.stairstep-hero {
    position: relative;
    min-height: 100vh;
    padding: 75px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 55%,
            rgba(0, 180, 125, 0.07),
            transparent 32%),
        #03150c;
    color: #fff;
}

/* GRID BACKGROUND */
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;

    background-image:
        linear-gradient(rgba(0, 190, 130, .09) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(0, 190, 130, .09) 1px,
            transparent 1px);

    background-size: 28px 28px;

    mask-image: linear-gradient(to bottom,
            black 0%,
            rgba(0, 0, 0, .7) 65%,
            transparent 100%);
}


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

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

    padding: 9px 18px;
    margin-bottom: 25px;

    border: 1px solid rgba(0, 194, 133, .45);
    border-radius: 50px;

    background: rgba(0, 180, 125, .08);

    color: #00c98b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

.hero-badge i {
    font-size: 15px;
}


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

.hero-title {
    margin: 0;
    max-width: 650px;

    font-family: "Outfit", sans-serif;
    font-size: clamp(48px, 5vw, 56px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.hero-title>span {
    display: block;
    color: #08bf86;
}

.hero-title>span b {
    color: #fff;
    font-weight: 700;
}

.hero-title strong {
    display: block;
    color: #f8f9f8;
    font-weight: 700;
}


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

.hero-description {
    max-width: 650px;
    margin: 30px 0 27px;

    color: #91a6b9;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
}

.hero-description strong {
    color: #f5f7f6;
    font-weight: 700;
}


/* =====================================================
   BUTTONS
===================================================== */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-buttons a {
    min-height: 61px;

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

    padding: 0 30px;

    border-radius: 12px;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;
}

.hero-buttons i {
    font-size: 18px;
}


/* DEMO BUTTON */

.btn-demo {
    color: #fff;
    background: #08b980;
    border: 1px solid #08b980;

    box-shadow:
        0 10px 25px rgba(0, 185, 128, .15);
}

.btn-demo:hover {
    color: #fff;
    background: #00a873;
    transform: translateY(-2px);
}


/* PRICING BUTTON */

.btn-pricing {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(170, 190, 185, .45);
}

.btn-pricing:hover {
    color: #08c38a;
    border-color: #08c38a;
    transform: translateY(-2px);
}


/* LEARN BUTTON */

.btn-learn {
    color: #00c88b;
    background: transparent;
    border: 2px solid #00c88b;
}

.btn-learn:hover {
    color: #fff;
    background: #00b982;
    transform: translateY(-2px);
}


/* =====================================================
   HERO COUNTERS
===================================================== */

.hero-stats {
    display: flex;
    align-items: flex-start;
    gap: 58px;

    margin-top: 35px;
}

.hero-stat {
    min-width: 80px;
}

.hero-stat .counter {
    color: #08c48b;

    font-family: "Outfit", sans-serif;
    font-size: 30px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: .2px;
}

.hero-stat span {
    display: block;

    margin-top: 8px;

    color: #8da1b0;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
}


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

.stairstep-card {
    position: relative;

    max-width: 570px;
    margin-left: auto;

    padding: 31px 24px 27px;

    border: 1px solid rgba(0, 190, 130, .28);
    border-radius: 26px;

    background:
        linear-gradient(145deg,
            rgba(5, 27, 17, .97),
            rgba(4, 29, 18, .93));

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


/* SLA */

.sla-badge {
    position: absolute;
    top: -12px;
    right: 20px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 13px;

    border-radius: 20px;

    background: #08b982;
    color: #fff;

    font-size: 12px;
    font-weight: 700;
}

.sla-badge i {
    font-size: 12px;
}


/* CARD HEADING */

.plan-heading {
    text-align: center;
    margin-bottom: 21px;
}

.plan-heading h3 {
    margin: 0 0 7px;

    color: #f1f5f3;

    font-family: "Outfit", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.plan-heading p {
    margin: 0;

    color: #879baa;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
}


/* =====================================================
   RANK ITEMS
===================================================== */

.rank-item {
    min-height: 44px;

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

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

    border: 1px solid rgba(0, 190, 130, .25);
    border-radius: 12px;

    background: rgba(3, 53, 34, .55);

    color: #00c98b;
}

.rank-left {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
}

.rank-left i {
    font-size: 14px;
    flex-shrink: 0;
}

.rank-left span {
    font-size: 13px;
    font-weight: 600;
}

.rank-item strong {
    white-space: nowrap;

    color: #00b982;

    font-size: 12px;
    font-weight: 700;
}


/* RANK UP */

.rank-up {
    display: flex;
    align-items: center;
    gap: 2px;

    margin: -2px 0 8px 7px;

    color: #00bd83;

    font-size: 12px;
    font-weight: 500;
}

.rank-up i {
    font-size: 13px;
}

.rank-yellow {
    color: #ffb900;
}


/* DIRECTOR */

.rank-item.director {
    border-color: rgba(217, 161, 0, .38);

    background:
        rgba(75, 65, 10, .45);

    color: #ffbd00;
}

.rank-item.director strong {
    color: #e8ad00;
}

.rank-item.director i {
    color: #ffbd00;
}


/* EXECUTIVE */

.rank-item.executive {
    border-color: rgba(91, 107, 190, .45);

    background:
        rgba(31, 40, 73, .58);

    color: #a887ff;
}

.rank-item.executive strong {
    color: #9d83ed;
}

.rank-item.executive i {
    color: #a887ff;
}


/* =====================================================
   PLAN BOTTOM STATS
===================================================== */

.plan-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-top: 18px;
}

.plan-stat {
    min-height: 70px;

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

    border: 1px solid rgba(75, 110, 93, .22);
    border-radius: 11px;

    background: rgba(21, 66, 44, .52);

    text-align: center;
}

.plan-stat strong {
    color: #08c38b;

    font-family: "Outfit", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.plan-stat span {
    margin-top: 3px;

    color: #8da0ad;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
}


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

@media (max-width: 1199px) {

    .hero-title {
        font-size: 48px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-stats {
        gap: 38px;
    }

    .stairstep-card {
        max-width: 100%;
    }
}


@media (max-width: 991px) {

    .stairstep-hero {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 46px;
    }

    .hero-description {
        max-width: 100%;
    }

    .stairstep-card {
        margin-top: 15px;
    }
}


@media (max-width: 767px) {

    .stairstep-hero {
        min-height: auto;
        padding: 45px 0;
    }

    .hero-badge {
        font-size: 11px;
        padding: 8px 13px;
    }

    .hero-title {
        font-size: 39px;
        line-height: 1.13;
        letter-spacing: -1px;
    }

    .hero-title strong {
        font-size: 38px;
    }

    .hero-description {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-buttons {
        gap: 10px;
    }

    .hero-buttons a {
        min-height: 52px;
        padding: 0 20px;
        font-size: 14px;
    }

    .hero-stats {
        gap: 25px;
        margin-top: 30px;
    }

    .hero-stat .counter {
        font-size: 25px;
    }

    .hero-stat span {
        font-size: 11px;
    }

    .stairstep-card {
        padding: 28px 14px 18px;
        border-radius: 20px;
    }

    .rank-item {
        padding: 0 10px;
    }

    .rank-left span {
        font-size: 11px;
    }

    .rank-item strong {
        font-size: 10px;
    }

    .plan-stats {
        gap: 7px;
    }

    .plan-stat {
        min-height: 65px;
    }

    .plan-stat strong {
        font-size: 15px;
    }

    .plan-stat span {
        font-size: 9px;
    }
}


@media (max-width: 480px) {

    .hero-title {
        font-size: 34px;
    }

    .hero-title strong {
        font-size: 33px;
    }

    .hero-buttons a {
        width: 100%;
    }

    .hero-stats {
        justify-content: space-between;
        gap: 10px;
    }

    .hero-stat .counter {
        font-size: 22px;
    }

    .hero-stat span {
        font-size: 10px;
    }

    .plan-heading h3 {
        font-size: 16px;
    }
}

/* =====================================================
   GLOBAL STATS BAR
===================================================== */

.global-stats-section {
    position: relative;
    background: #031b10;
    border-top: 1px solid rgba(0, 190, 130, 0.18);
    border-bottom: 1px solid rgba(0, 190, 130, 0.10);
    overflow: hidden;
}

.global-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 110px;
}

.global-stat {
    position: relative;

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

    text-align: center;
    padding: 20px 15px;
}

/* Number */
.global-counter {
    color: #08c38b;

    font-family: "Outfit", sans-serif;
    font-size: 30px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: -0.5px;

    min-height: 30px;
}

/* Label */
.global-stat span {
    display: block;

    margin-top: 8px;

    color: #8ea3b2;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .global-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .global-stat:nth-child(3)::after {
        display: none;
    }

    .global-stat:nth-child(4),
    .global-stat:nth-child(5) {
        border-top: 1px solid rgba(0, 190, 130, 0.10);
    }

    .global-counter {
        font-size: 27px;
    }
}


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

@media (max-width: 575px) {

    .global-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .global-stat {
        min-height: 95px;
        padding: 17px 8px;
    }

    .global-stat:nth-child(3)::after {
        display: block;
    }

    .global-stat:nth-child(even)::after {
        display: none;
    }

    .global-stat:nth-child(3),
    .global-stat:nth-child(4),
    .global-stat:nth-child(5) {
        border-top: 1px solid rgba(0, 190, 130, 0.10);
    }

    .global-counter {
        font-size: 25px;
    }

    .global-stat span {
        font-size: 10px;
    }
}


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

@media (max-width: 380px) {

    .global-counter {
        font-size: 22px;
    }

    .global-stat span {
        font-size: 9px;
    }
}

/* =====================================================
   DEFINITION SECTION
===================================================== */

.definition-section {
    position: relative;
    padding: 95px 0 90px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(0, 190, 130, 0.035),
            transparent 35%),
        #020e09;

    color: #fff;
}


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

.definition-header {
    max-width: 850px;
    margin: 0 auto 58px;

    text-align: center;
}


/* BADGE */

.definition-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(0, 195, 135, .32);
    border-radius: 30px;

    background: rgba(0, 190, 130, .06);

    color: #00c58b;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
}

.definition-badge i {
    font-size: 12px;
}


/* HEADING */

.definition-header h2 {
    margin: 18px 0 15px;

    color: #f5f7f6;

    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.8px;
}

.definition-header h2 span {
    color: #08bf87;
}


/* DESCRIPTION */

.definition-header>p {
    max-width: 760px;
    margin: 0 auto;

    color: #91a5b7;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
}


/* =====================================================
   CONTENT
===================================================== */

.definition-content {
    align-items: flex-start;
}

.definition-column {
    height: 100%;
}

.definition-column h3 {
    margin: 0 0 17px;

    color: #f4f6f5;

    font-family: "Outfit", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.definition-column p {
    margin-bottom: 17px;

    color: #91a5b7;

    font-family: "Poppins", sans-serif;
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
}

.definition-column p strong {
    color: #f2f5f4;
    font-weight: 700;
}


/* =====================================================
   EEAT DISCLAIMER
===================================================== */

.eeat-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 25px;
    padding: 19px 19px;

    border: 1px solid rgba(0, 190, 130, .35);
    border-radius: 12px;

    background:
        rgba(0, 38, 25, .48);

    color: #92a7b8;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.eeat-disclaimer strong {
    color: #f4f7f6;
    font-weight: 700;
}

.eeat-icon {
    flex: 0 0 auto;

    color: #00c58b;

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

.eeat-disclaimer a {
    color: #00c58b;
    text-decoration: none;
    white-space: nowrap;
}

.eeat-disclaimer a:hover {
    color: #32e0aa;
    text-decoration: underline;
}


/* =====================================================
   PLAN COMPARISON GRID
===================================================== */

.plan-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    margin-top: 23px;
}


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

.definition-plan-card {
    min-height: 174px;

    padding: 19px;

    border: 1px solid rgba(38, 91, 67, .32);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            rgba(7, 40, 26, .95),
            rgba(5, 34, 22, .92));

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

.definition-plan-card:hover {
    transform: translateY(-3px);

    border-color: rgba(0, 195, 135, .42);

    background:
        linear-gradient(145deg,
            rgba(8, 47, 30, .98),
            rgba(6, 39, 25, .96));
}


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

.plan-card-icon {
    width: 40px;
    height: 40px;

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

    margin-bottom: 11px;

    border-radius: 10px;

    font-size: 17px;
}


/* STAIRSTEP */

.stairstep-icon {
    color: #00c98b;

    background: rgba(0, 190, 130, .13);
    border: 1px solid rgba(0, 190, 130, .25);
}


/* BINARY */

.binary-icon {
    color: #a786ff;

    background: rgba(111, 88, 215, .15);
    border: 1px solid rgba(111, 88, 215, .27);
}


/* MATRIX */

.matrix-icon {
    color: #35a9ff;

    background: rgba(24, 137, 214, .15);
    border: 1px solid rgba(24, 137, 214, .28);
}


/* UNILEVEL */

.unilevel-icon {
    color: #00c99a;

    background: rgba(0, 185, 145, .14);
    border: 1px solid rgba(0, 185, 145, .25);
}


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

.definition-plan-card h4 {
    margin: 0 0 7px;

    color: #f3f6f5;

    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.definition-plan-card p {
    margin: 0;

    color: #91a6b7;

    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    line-height: 1.65;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1200px) {

    .definition-section {
        padding-top: 95px;
    }

    .definition-header h2 {
        font-size: 40px;
    }

    .definition-content {
        padding: 0 3px;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .definition-section {
        padding: 75px 0;
    }

    .definition-header {
        margin-bottom: 45px;
    }

    .definition-header h2 {
        font-size: 35px;
    }

    .definition-column h3 {
        font-size: 21px;
    }

    .definition-column p {
        font-size: 14px;
    }

    .eeat-disclaimer {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .definition-section {
        padding: 60px 0;
    }

    .definition-header {
        margin-bottom: 38px;
    }

    .definition-badge {
        font-size: 10px;
        padding: 6px 12px;
    }

    .definition-header h2 {
        margin-top: 15px;

        font-size: 30px;
        line-height: 1.25;
    }

    .definition-header>p {
        font-size: 13px;
        line-height: 1.7;
    }

    .definition-column h3 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .definition-column p {
        font-size: 13px;
        line-height: 1.7;
    }

    .eeat-disclaimer {
        padding: 16px;

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

    .plan-comparison-grid {
        gap: 10px;
    }

    .definition-plan-card {
        min-height: 160px;
        padding: 15px;
    }

    .definition-plan-card p {
        font-size: 11px;
    }
}


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

@media (max-width: 480px) {

    .definition-header h2 {
        font-size: 27px;
    }

    .definition-header>p {
        font-size: 12px;
    }

    .plan-comparison-grid {
        grid-template-columns: 1fr;
    }

    .definition-plan-card {
        min-height: auto;
    }

    .eeat-disclaimer {
        align-items: flex-start;
    }
}

/* =====================================================
   WORKFLOW SECTION
===================================================== */

.workflow-section {
    position: relative;

    padding: 95px 0 100px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(0, 190, 130, 0.035),
            transparent 35%),
        #00180e;

    color: #fff;
}


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

.workflow-header {
    max-width: 850px;

    margin: 0 auto 58px;

    text-align: center;
}


/* BADGE */

.workflow-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 16px;

    border: 1px solid rgba(0, 195, 135, .32);
    border-radius: 30px;

    background: rgba(0, 190, 130, .06);

    color: #00c58b;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: .6px;
}

.workflow-badge i {
    font-size: 12px;
}


/* HEADING */

.workflow-header h2 {
    margin: 18px 0 15px;

    color: #f5f7f6;

    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: -.8px;
}

.workflow-header h2 span {
    color: #08bf87;
}


/* DESCRIPTION */

.workflow-header>p {
    max-width: 780px;

    margin: 0 auto;

    color: #91a5b7;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.75;
}


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

.workflow-grid {
    display: grid;

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

    gap: 24px;
}


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

.workflow-card {
    position: relative;

    min-height: 320px;

    padding: 28px 28px 25px;

    border: 1px solid rgba(0, 190, 130, .27);
    border-radius: 18px;

    background:
        linear-gradient(145deg,
            rgba(4, 31, 20, .97),
            rgba(3, 25, 16, .96));

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

.workflow-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0, 195, 135, .46);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .18);
}


/* =====================================================
   STEP NUMBER
===================================================== */

.step-number {
    width: 37px;
    height: 37px;

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

    margin-bottom: 17px;

    border-radius: 50%;

    background: #08b982;

    color: #fff;

    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 700;

    box-shadow:
        0 6px 18px rgba(0, 190, 130, .15);
}


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

.workflow-card h3 {
    margin: 0 0 9px;

    color: #f3f6f5;

    font-family: "Outfit", sans-serif;
    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;
}


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

.workflow-card p {
    margin: 0;

    color: #91a6b7;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.72;
}


/* =====================================================
   TAGS
===================================================== */

.workflow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 18px;
}

.workflow-tags span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 10px;

    border-radius: 20px;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    line-height: 1;

    font-weight: 600;
}

.workflow-tags i {
    font-size: 10px;
}


/* GREEN */

.tag-green {
    color: #00c995;

    background: rgba(0, 190, 130, .07);

    border: 1px solid rgba(0, 190, 130, .35);
}


/* YELLOW */

.tag-yellow {
    color: #ffc21a;

    background: rgba(255, 190, 0, .07);

    border: 1px solid rgba(255, 190, 0, .30);
}


/* PURPLE */

.tag-purple {
    color: #aa88ff;

    background: rgba(130, 92, 240, .08);

    border: 1px solid rgba(130, 92, 240, .35);
}


/* BLUE */

.tag-blue {
    color: #39aefc;

    background: rgba(30, 145, 220, .08);

    border: 1px solid rgba(30, 145, 220, .35);
}


/* ORANGE */

.tag-orange {
    color: #ffb51c;

    background: rgba(255, 145, 0, .08);

    border: 1px solid rgba(255, 145, 0, .34);
}


/* RED */

.tag-red {
    color: #ff6680;

    background: rgba(255, 70, 95, .07);

    border: 1px solid rgba(255, 70, 95, .34);
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1200px) {

    .workflow-card {
        min-height: 330px;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .workflow-section {
        padding: 75px 0;
    }

    .workflow-header {
        margin-bottom: 45px;
    }

    .workflow-header h2 {
        font-size: 35px;
    }

    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .workflow-card {
        min-height: auto;
    }

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

    .workflow-card p {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .workflow-section {
        padding: 60px 0;
    }

    .workflow-header {
        margin-bottom: 35px;
    }

    .workflow-badge {
        font-size: 10px;
        padding: 6px 12px;
    }

    .workflow-header h2 {
        margin-top: 15px;
        font-size: 30px;
        line-height: 1.25;
    }

    .workflow-header>p {
        font-size: 13px;
        line-height: 1.7;
    }

    .workflow-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .workflow-card {
        min-height: auto;

        padding: 22px 20px;
    }

    .step-number {
        width: 35px;
        height: 35px;

        font-size: 15px;
    }

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

    .workflow-card p {
        font-size: 13px;
        line-height: 1.7;
    }

    .workflow-tags {
        margin-top: 15px;
    }

    .workflow-tags span {
        font-size: 10px;
    }
}


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

@media (max-width: 480px) {

    .workflow-header h2 {
        font-size: 27px;
    }

    .workflow-header>p {
        font-size: 12px;
    }

    .workflow-card {
        padding: 20px 17px;
        border-radius: 15px;
    }

    .workflow-card p {
        font-size: 12px;
    }
}

/* =========================================================
   PLAN DETAILS SECTION
========================================================= */

.plan-details-section {
    background: #020e09;
    padding: 92px 0 100px;
    color: #ffffff;
}

.plan-details-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.plan-details-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 58px;
}

.plan-details-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;
    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    margin-bottom: 16px;
}

.plan-details-badge i {
    font-size: 12px;
}

.plan-details-header h2 {
    margin: 0;
    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.plan-details-header h2 span {
    color: #08bf87;
}

.plan-details-header p {
    margin: 18px auto 0;
    max-width: 780px;
    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* ================= TABLE ================= */

.plan-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #03150d;
    border: 1px solid rgba(0, 191, 132, 0.20);
    border-radius: 18px;
    scrollbar-width: none;
}

.plan-table-wrapper::-webkit-scrollbar {
    display: none;
}

.plan-details-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
}

.plan-details-table thead th {
    background: #0a2a1b;
    color: #f1f5f4;
    padding: 17px 17px;
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 191, 132, 0.22);
}

.plan-details-table thead th:first-child {
    border-top-left-radius: 17px;
}

.plan-details-table thead th:last-child {
    border-top-right-radius: 17px;
}

.plan-details-table tbody td {
    padding: 16px 17px;
    color: #91a5b7;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 191, 132, 0.12);
}

.plan-details-table tbody tr:last-child td {
    border-bottom: 0;
}

.plan-details-table tbody tr:hover {
    background: rgba(8, 191, 135, 0.035);
}

.plan-details-table .rank-name {
    color: #08bf87;
    font-weight: 700;
}

.plan-details-table .percentage {
    color: #08bf87;
    font-weight: 700;
}

.plan-details-table .highlight-earning {
    color: #ffb400;
    font-weight: 700;
}


/* ================= DISCLAIMER ================= */

.income-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 24px 4px 0;
    padding: 18px 20px;
    border: 1px solid rgba(255, 180, 0, 0.28);
    background: rgba(255, 180, 0, 0.045);
    border-radius: 13px;
    color: #91a5b7;
    font-size: 15px;
    line-height: 1.7;
}

.disclaimer-icon {
    color: #ffb400;
    font-size: 15px;
    flex-shrink: 0;
    padding-top: 3px;
}

.income-disclaimer strong {
    color: #f2f4f3;
    font-weight: 700;
}

.income-disclaimer b {
    color: #ffffff;
}


/* ================= TABS ================= */

.plan-feature-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(0, 191, 132, 0.15);
    margin: 0 0 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.plan-feature-tabs::-webkit-scrollbar {
    display: none;
}

.plan-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    padding: 9px 19px;
    border: 0;
    border-radius: 11px 11px 0 0;
    background: transparent;
    color: #91a5b7;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
}

.plan-tab i {
    font-size: 15px;
}

.plan-tab:hover {
    color: #08bf87;
    background: rgba(8, 191, 135, 0.045);
}

.plan-tab.active {
    color: #08bf87;
    background: #062318;
    border: 1px solid rgba(0, 191, 132, 0.20);
    border-bottom-color: #062318;
    margin-bottom: -1px;
}

.plan-tab.active i {
    color: #08bf87;
}


/* ================= TAB CONTENT ================= */

.plan-tab-content {
    display: none;
}

.plan-tab-content.active {
    display: block;
    animation: planTabFade 0.3s ease;
}

@keyframes planTabFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


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

.plan-feature-card {
    height: 330px;
    min-height: 330px;
    padding: 21px 20px 20px;
    background: #092a1b;
    border: 1px solid rgba(0, 191, 132, 0.12);
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
    box-sizing: border-box;
}

.plan-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 191, 135, 0.32);
    background: #0b3020;
}

.plan-feature-card:nth-child(n + 6) {
    margin-top: 0;
}

.feature-icon {
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1;
}

.feature-icon.green {
    color: #08bf87;
}

.feature-icon.yellow {
    color: #ffb000;
}

.feature-icon.purple {
    color: #9b7aff;
}

.feature-icon.blue {
    color: #35b9ff;
}

.feature-icon.orange {
    color: #ff9138;
}

.feature-icon.pink {
    color: #ff6587;
}

.plan-feature-card h3 {
    margin: 0 0 7px;
    color: #f2f5f4;
    font-family: "Outfit", sans-serif;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.plan-feature-card p {
    margin: 0;
    color: #91a5b7;
    font-size: 14px;
    line-height: 1.65;
}


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

@media (max-width: 1199px) {

    .feature-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .plan-details-header h2 {
        font-size: 36px;
    }

    .plan-feature-card {
        height: 330px;
        min-height: 330px;
    }
}


@media (max-width: 991px) {

    .plan-details-section {
        padding: 75px 0 80px;
    }

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

    .plan-details-header {
        margin-bottom: 45px;
    }

    .plan-details-header h2 {
        font-size: 32px;
    }

    .income-disclaimer {
        font-size: 14px;
    }

    .plan-feature-card {
        height: 330px;
        min-height: 330px;
    }
}


@media (max-width: 767px) {

    .plan-details-section {
        padding: 65px 0 70px;
    }

    .plan-details-header h2 {
        font-size: 29px;
    }

    .plan-details-header p {
        font-size: 14px;
    }

    .feature-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .plan-feature-card {
        height: 330px;
        min-height: 330px;
    }

    .plan-feature-tabs {
        margin-bottom: 22px;
    }

    .plan-tab {
        padding: 9px 14px;
        font-size: 13px;
    }

    .income-disclaimer {
        padding: 15px 16px;
        margin-top: 18px;
    }
}


@media (max-width: 575px) {

    .plan-details-section {
        padding: 55px 0 60px;
    }

    .plan-details-header {
        margin-bottom: 35px;
    }

    .plan-details-header h2 {
        font-size: 26px;
    }

    .plan-details-badge {
        font-size: 11px;
    }

    .feature-cards-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .plan-feature-card {
        height: 330px;
        min-height: 330px;
        padding: 20px 18px;
    }

    .plan-feature-card h3 {
        font-size: 17px;
    }

    .plan-feature-card p {
        font-size: 14px;
    }

    .income-disclaimer {
        align-items: flex-start;
        font-size: 13px;
        line-height: 1.65;
    }
}

/* =========================================================
   INCOME STREAMS SECTION
========================================================= */

.income-streams-section {
    background: #02160e;
    padding: 100px 0 95px;
    color: #ffffff;
}

.income-streams-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.income-streams-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.income-streams-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 16px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.income-streams-badge i {
    font-size: 12px;
}

.income-streams-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.income-streams-header h2 span {
    color: #08bf87;
}

.income-streams-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


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

.income-streams-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


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

.income-stream-card {
    min-height: 315px;
    padding: 24px 20px 22px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.22);
    border-radius: 17px;

    text-align: center;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.income-stream-card:hover {
    transform: translateY(-5px);

    background: #08251a;
    border-color: rgba(8, 191, 135, 0.42);
}


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

.income-icon {
    width: 56px;
    height: 56px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    font-size: 23px;
}

.income-icon.retail {
    color: #08d49a;
    background: rgba(0, 191, 132, 0.16);
}

.income-icon.override {
    color: #20d9b0;
    background: rgba(0, 191, 132, 0.15);
}

.income-icon.breakaway {
    color: #ffe174;
    background: rgba(194, 173, 0, 0.18);
}

.income-icon.leadership {
    color: #9b7aff;
    background: rgba(111, 92, 190, 0.20);
}

.income-icon.recruitment {
    color: #55a9ff;
    background: rgba(35, 120, 190, 0.18);
}

.income-icon.achievement {
    color: #ff6d88;
    background: rgba(190, 69, 80, 0.18);
}

.income-icon.lifestyle {
    color: #ffb51b;
    background: rgba(190, 147, 0, 0.18);
}


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

.income-stream-card h3 {
    margin: 0 0 10px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.income-value {
    margin-bottom: 10px;

    color: #08bf87;
    font-family: "Outfit", sans-serif;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}

.income-stream-card p {
    margin: 0;

    color: #91a5b7;
    font-size: 13.5px;
    line-height: 1.58;
}


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

@media (max-width: 1199px) {

    .income-streams-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .income-streams-header h2 {
        font-size: 36px;
    }

    .income-stream-card {
        min-height: 315px;
    }
}


@media (max-width: 991px) {

    .income-streams-section {
        padding: 80px 0;
    }

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

    .income-streams-header {
        margin-bottom: 45px;
    }

    .income-streams-header h2 {
        font-size: 32px;
    }

    .income-stream-card {
        min-height: 315px;
    }
}


@media (max-width: 767px) {

    .income-streams-section {
        padding: 65px 0 70px;
    }

    .income-streams-header h2 {
        font-size: 29px;
    }

    .income-streams-header p {
        font-size: 14px;
    }

    .income-streams-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .income-stream-card {
        min-height: 315px;
        padding: 22px 17px 20px;
    }
}


@media (max-width: 575px) {

    .income-streams-section {
        padding: 55px 0 60px;
    }

    .income-streams-header {
        margin-bottom: 35px;
    }

    .income-streams-header h2 {
        font-size: 26px;
    }

    .income-streams-badge {
        font-size: 11px;
    }

    .income-streams-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .income-stream-card {
        min-height: 290px;
        padding: 22px 20px;
    }

    .income-stream-card h3 {
        font-size: 17px;
    }

    .income-value {
        font-size: 25px;
    }

    .income-stream-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================
   BENEFITS SECTION
========================================= */

.benefits-section {
    background: #020e09;
    padding: 105px 0 95px;
    color: #ffffff;
}

.benefits-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


/* HEADER */

.benefits-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.benefits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 16px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.benefits-badge i {
    font-size: 12px;
}

.benefits-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.benefits-header h2 span {
    color: #08bf87;
}

.benefits-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* GRID */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;

    align-items: stretch;
}


/* CARD */

.benefit-card {
    min-height: 344px;
    padding: 24px 24px 22px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.24);
    border-radius: 17px;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);

    background: #08251a;
    border-color: rgba(8, 191, 135, 0.45);
}


/* ICON */

.benefit-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 20px;

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

    border-radius: 12px;

    font-size: 22px;
}

.benefit-icon.green {
    color: #08d49a;
    background: rgba(0, 191, 132, 0.16);
}

.benefit-icon.teal {
    color: #20d9c0;
    background: rgba(0, 191, 132, 0.15);
}

.benefit-icon.purple {
    color: #9b7aff;
    background: rgba(111, 92, 190, 0.20);
}

.benefit-icon.blue {
    color: #62adff;
    background: rgba(35, 120, 190, 0.18);
}

.benefit-icon.yellow {
    color: #ffe174;
    background: rgba(194, 173, 0, 0.18);
}

.benefit-icon.red {
    color: #ff6d88;
    background: rgba(190, 69, 80, 0.18);
}


/* TITLE */

.benefit-card h3 {
    margin: 0 0 9px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}


/* DESCRIPTION */

.benefit-card p {
    margin: 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.65;
}


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

@media (max-width: 1199px) {

    .benefits-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 17px;
    }

    .benefit-card {
        padding: 22px 19px;
    }

    .benefit-card p {
        font-size: 15px;
    }
}


@media (max-width: 991px) {

    .benefits-section {
        padding: 80px 0;
    }

    .benefits-header {
        margin-bottom: 45px;
    }

    .benefits-header h2 {
        font-size: 34px;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .benefit-card {
        min-height: 330px;
    }
}


@media (max-width: 767px) {

    .benefits-section {
        padding: 65px 0 70px;
    }

    .benefits-header h2 {
        font-size: 30px;
    }

    .benefits-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .benefit-card {
        min-height: 320px;
        padding: 21px 17px;
    }

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

    .benefit-card p {
        font-size: 14px;
        line-height: 1.6;
    }
}


@media (max-width: 575px) {

    .benefits-section {
        padding: 55px 0 60px;
    }

    .benefits-header {
        margin-bottom: 35px;
    }

    .benefits-header h2 {
        font-size: 27px;
    }

    .benefits-badge {
        font-size: 11px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .benefit-card {
        min-height: 0;
        padding: 22px 20px;
    }

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

    .benefit-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================
   STAIRSTEP COMMISSION CALCULATOR
========================================= */

.calculator-section {
    background: #04160e;
    padding: 105px 0 95px;
    color: #ffffff;
}

.calculator-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


/* HEADER */

.calculator-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.calculator-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 16px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.calculator-badge i {
    font-size: 12px;
}

.calculator-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.calculator-header h2 span {
    color: #08bf87;
}

.calculator-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* MAIN BOX */

.calculator-box {
    width: 100%;
    padding: 37px 36px 36px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.28);
    border-radius: 24px;

    box-sizing: border-box;
}


/* CONTROLS */

.calculator-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.calculator-control label {
    display: block;

    margin-bottom: 16px;

    color: #91a5b7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}


/* RANGE SLIDER */

.calculator-control input[type="range"] {
    width: 100%;
    height: 4px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: #6e7074;
    border-radius: 10px;

    outline: none;
    cursor: pointer;
}


/* Chrome / Edge / Safari */

.calculator-control input[type="range"]::-webkit-slider-thumb {
    width: 15px;
    height: 15px;

    appearance: none;
    -webkit-appearance: none;

    background: #08bf87;
    border: none;
    border-radius: 50%;

    cursor: pointer;
}


/* Firefox */

.calculator-control input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;

    background: #08bf87;
    border: none;
    border-radius: 50%;

    cursor: pointer;
}


/* VALUE */

.control-value {
    margin-top: 13px;

    color: #08bf87;
    font-family: "Outfit", sans-serif;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
}


/* RESULT CARDS */

.calculator-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin-top: 32px;
}

.calculator-result-card {
    min-height: 96px;

    padding: 19px 15px;

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

    background: #092a1b;
    border: 1px solid rgba(0, 191, 132, 0.15);
    border-radius: 11px;

    text-align: center;
    box-sizing: border-box;
}

.result-value {
    color: #08bf87;

    font-family: "Outfit", sans-serif;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
}

.result-label {
    margin-top: 9px;

    color: #91a5b7;
    font-size: 13px;
    line-height: 1.3;
}


/* BREAKDOWN */

.calculator-breakdown {
    margin-top: 27px;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 17px;

    margin-bottom: 14px;
}

.breakdown-row:last-child {
    margin-bottom: 0;
}

.breakdown-row>span {
    color: #91a5b7;
    font-size: 13px;
    white-space: nowrap;
}

.breakdown-track {
    width: 100%;
    height: 8px;

    background: #123524;
    border-radius: 20px;
    overflow: hidden;
}

.breakdown-fill {
    width: 0;
    height: 100%;

    border-radius: 20px;

    transition: width 0.35s ease;
}

.override-fill {
    background: #08bf87;
}

.differential-fill {
    background: #f5a400;
}

.leadership-fill {
    background: #9b72f2;
}

.breakdown-row strong {
    color: #08bf87;
    font-size: 13px;
    text-align: right;
}


/* DISCLAIMER */

.calculator-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin-top: 25px;

    color: #657d8d;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.calculator-disclaimer i {
    color: #71859a;
    font-size: 12px;
    flex-shrink: 0;
}


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

@media (max-width: 991px) {

    .calculator-section {
        padding: 80px 0;
    }

    .calculator-header h2 {
        font-size: 34px;
    }

    .calculator-box {
        padding: 30px 25px;
    }

    .calculator-controls {
        gap: 20px;
    }

    .calculator-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .calculator-section {
        padding: 65px 0 70px;
    }

    .calculator-header h2 {
        font-size: 30px;
    }

    .calculator-header p {
        font-size: 14px;
    }

    .calculator-box {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .calculator-controls {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .calculator-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .breakdown-row {
        grid-template-columns: 115px minmax(0, 1fr) 40px;
        gap: 10px;
    }
}


@media (max-width: 575px) {

    .calculator-section {
        padding: 55px 0 60px;
    }

    .calculator-header {
        margin-bottom: 35px;
    }

    .calculator-header h2 {
        font-size: 27px;
    }

    .calculator-badge {
        font-size: 11px;
    }

    .calculator-box {
        padding: 23px 16px;
    }

    .calculator-results {
        grid-template-columns: 1fr 1fr;
    }

    .calculator-result-card {
        min-height: 90px;
    }

    .result-value {
        font-size: 19px;
    }

    .result-label {
        font-size: 12px;
    }

    .breakdown-row {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 17px;
    }

    .breakdown-row>span {
        font-size: 12px;
    }

    .breakdown-track {
        height: 7px;
    }

    .breakdown-row strong {
        display: none;
    }

    .calculator-disclaimer {
        align-items: flex-start;
        font-size: 12px;
    }
}

/* =========================================
   ADVANCED TECHNOLOGY
========================================= */

.advanced-tech-section {
    background: #020e09;
    padding: 105px 0 95px;
    color: #ffffff;
}

.advanced-tech-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


/* HEADER */

.advanced-tech-header {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.advanced-tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.advanced-tech-badge i {
    font-size: 12px;
}

.advanced-tech-header h2 {
    max-width: 650px;
    margin: 0 auto;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.18;
    font-weight: 700;
}

.advanced-tech-header h2 span {
    color: #08bf87;
}

.advanced-tech-header p {
    max-width: 760px;
    margin: 20px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* MAIN GRID */

.advanced-tech-grid {
    display: grid;
    grid-template-columns: 1.03fr 1fr;
    gap: 22px;

    align-items: start;
}


/* LEFT COLUMN */

.tech-engine-column {
    min-width: 0;
}

.tech-engine-column>h3,
.tech-performance-column>h3 {
    margin: 0 0 20px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.tech-engine-column>p {
    margin: 0 0 18px;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.65;
}

.tech-engine-column>p strong {
    color: #f1f5f4;
    font-weight: 700;
}


/* CODE BOX */

.tech-code-box {
    margin-top: 22px;
    padding: 20px 24px;

    background: #03150c;
    border: 1px solid rgba(0, 191, 132, 0.30);
    border-radius: 12px;

    box-sizing: border-box;
    overflow: hidden;
}

.tech-code-box pre {
    margin: 0;
    padding: 0;

    color: #edf4f1;
    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;

    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: normal;
}

.tech-code-box code {
    font-family: "Courier New", monospace;
    color: #edf4f1;
}

.code-comment {
    color: #60796d;
    font-style: italic;
    font-weight: 500;
}

.code-keyword {
    color: #f2f5f3;
    font-weight: 700;
}

.code-function {
    color: #f2f5f3;
    font-weight: 700;
}


/* Mobile */
@media (max-width: 767px) {

    .tech-code-box {
        padding: 17px 16px;
        border-radius: 11px;
    }

    .tech-code-box pre {
        font-size: 12px;
        line-height: 1.65;
    }
}

/* RIGHT COLUMN */

.tech-performance-column {
    min-width: 0;
}

.tech-performance-column>h3 {
    margin-bottom: 20px;
}


/* FEATURE CARD */

.tech-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    min-height: 116px;

    margin-bottom: 16px;
    padding: 18px 20px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.26);
    border-radius: 17px;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.tech-feature-card:last-child {
    margin-bottom: 0;
}

.tech-feature-card:hover {
    transform: translateY(-3px);

    background: #08251a;
    border-color: rgba(8, 191, 135, 0.43);
}


/* ICON */

.tech-feature-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 50%;

    font-size: 15px;
}

.tech-feature-icon.green {
    color: #f4f7f6;
    background: #08b982;
}


/* CONTENT */

.tech-feature-content {
    min-width: 0;
}

.tech-feature-content h4 {
    margin: 1px 0 6px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

.tech-feature-content p {
    margin: 0;

    color: #91a5b7;
    font-size: 14px;
    line-height: 1.55;
}


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

@media (max-width: 991px) {

    .advanced-tech-section {
        padding: 80px 0;
    }

    .advanced-tech-header {
        margin-bottom: 50px;
    }

    .advanced-tech-header h2 {
        font-size: 35px;
    }

    .advanced-tech-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .tech-feature-card {
        min-height: 110px;
    }
}


@media (max-width: 767px) {

    .advanced-tech-section {
        padding: 65px 0 70px;
    }

    .advanced-tech-header h2 {
        font-size: 30px;
    }

    .advanced-tech-header p {
        font-size: 14px;
    }

    .tech-engine-column>h3,
    .tech-performance-column>h3 {
        font-size: 20px;
    }

    .tech-engine-column>p {
        font-size: 14px;
        line-height: 1.65;
    }

    .tech-code-box {
        padding: 17px;
    }

    .tech-code-box pre {
        font-size: 12px;
    }

    .tech-feature-content h4 {
        font-size: 17px;
    }

    .tech-feature-content p {
        font-size: 13px;
    }
}


@media (max-width: 575px) {

    .advanced-tech-section {
        padding: 55px 0 60px;
    }

    .advanced-tech-header {
        margin-bottom: 40px;
    }

    .advanced-tech-header h2 {
        font-size: 27px;
    }

    .advanced-tech-badge {
        font-size: 11px;
    }

    .advanced-tech-grid {
        gap: 35px;
    }

    .tech-feature-card {
        gap: 13px;
        padding: 17px 15px;
        border-radius: 14px;
    }

    .tech-feature-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 14px;
    }

    .tech-feature-content h4 {
        font-size: 16px;
    }

    .tech-feature-content p {
        font-size: 13px;
        line-height: 1.55;
    }
}

/* =========================================
   WHY US SECTION
========================================= */

.whyus-section {
    background: #02140c;
    padding: 105px 0 95px;
    color: #ffffff;
}

.whyus-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


/* HEADER */

.whyus-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.whyus-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.whyus-badge i {
    font-size: 12px;
}

.whyus-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.whyus-header h2 span {
    color: #08bf87;
}

.whyus-header p {
    max-width: 780px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* GRID */

.whyus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 24px;

    align-items: stretch;
}


/* CARD */

.whyus-card {
    min-height: 350px;

    padding: 28px 27px 26px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.25);
    border-radius: 17px;

    box-sizing: border-box;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.whyus-card:hover {
    transform: translateY(-5px);

    background: #08251a;
    border-color: rgba(8, 191, 135, 0.45);
}


/* ICON */

.whyus-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 20px;

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

    border-radius: 12px;

    font-size: 24px;
}

.whyus-icon.green {
    color: #2de0ad;
    background: rgba(0, 191, 132, 0.16);
}

.whyus-icon.teal {
    color: #25d9c1;
    background: rgba(0, 191, 132, 0.15);
}

.whyus-icon.purple {
    color: #a17cff;
    background: rgba(111, 92, 190, 0.20);
}

.whyus-icon.blue {
    color: #64aaff;
    background: rgba(35, 120, 190, 0.18);
}

.whyus-icon.yellow {
    color: #ffe174;
    background: rgba(194, 173, 0, 0.18);
}

.whyus-icon.red {
    color: #ff6d88;
    background: rgba(190, 69, 80, 0.18);
}


/* TITLE */

.whyus-card h3 {
    margin: 0 0 10px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}


/* DESCRIPTION */

.whyus-card p {
    margin: 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.65;
}


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

@media (max-width: 991px) {

    .whyus-section {
        padding: 80px 0;
    }

    .whyus-header {
        margin-bottom: 45px;
    }

    .whyus-header h2 {
        font-size: 34px;
    }

    .whyus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .whyus-card {
        min-height: 330px;
        padding: 24px 21px;
    }

    .whyus-card p {
        font-size: 15px;
    }
}


@media (max-width: 767px) {

    .whyus-section {
        padding: 65px 0 70px;
    }

    .whyus-header h2 {
        font-size: 30px;
    }

    .whyus-header p {
        font-size: 14px;
    }

    .whyus-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .whyus-card {
        min-height: 320px;
        padding: 21px 17px;
    }

    .whyus-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 18px;
        font-size: 22px;
    }

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

    .whyus-card p {
        font-size: 14px;
        line-height: 1.6;
    }
}


@media (max-width: 575px) {

    .whyus-section {
        padding: 55px 0 60px;
    }

    .whyus-header {
        margin-bottom: 35px;
    }

    .whyus-header h2 {
        font-size: 27px;
    }

    .whyus-badge {
        font-size: 11px;
    }

    .whyus-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .whyus-card {
        min-height: 0;
        padding: 22px 20px;
    }

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

    .whyus-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================
   CASE STUDY SECTION
========================================= */

.case-study-section {
    background: #020e09;
    padding: 105px 0 95px;
    color: #ffffff;
}

.case-study-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.case-study-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.case-study-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.case-study-badge i {
    font-size: 12px;
}

.case-study-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.case-study-header h2 span {
    color: #08bf87;
}

.case-study-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   COMPANY BADGE
========================================= */

.case-study-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    margin: 0 0 20px;

    color: #08bf87;
    background: rgba(0, 191, 132, 0.07);
    border: 1px solid rgba(0, 191, 132, 0.30);
    border-radius: 30px;

    font-size: 12px;
    font-weight: 600;
}

.case-study-company i {
    font-size: 11px;
}


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

.case-study-grid {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 48px;

    align-items: start;
}


/* =========================================
   LEFT CONTENT
========================================= */

.case-study-content h3 {
    margin: 0 0 13px;

    color: #f4f7f6;
    font-family: "Outfit", sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.case-study-content h3:not(:first-child) {
    margin-top: 28px;
}

.case-study-content p {
    margin: 0 0 20px;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.65;
}

.case-study-content p:last-child {
    margin-bottom: 0;
}


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

.case-study-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


/* RESULT CARD */

.case-result-card {
    min-height: 124px;

    padding: 20px 18px;

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

    background: #092a1b;
    border: 1px solid rgba(0, 191, 132, 0.28);
    border-radius: 12px;

    box-sizing: border-box;
    text-align: center;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.case-result-card:hover {
    transform: translateY(-4px);

    background: #0b3020;
    border-color: rgba(8, 191, 135, 0.45);
}


/* VALUE */

.case-result-value {
    color: #08bf87;

    font-family: "Outfit", sans-serif;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;
}


/* DESCRIPTION */

.case-result-card p {
    max-width: 220px;

    margin: 10px 0 0;

    color: #91a5b7;
    font-size: 13px;
    line-height: 1.55;
}


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

@media (max-width: 991px) {

    .case-study-section {
        padding: 80px 0;
    }

    .case-study-header {
        margin-bottom: 45px;
    }

    .case-study-header h2 {
        font-size: 35px;
    }

    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .case-study-content h3 {
        font-size: 21px;
    }
}


@media (max-width: 767px) {

    .case-study-section {
        padding: 65px 0 70px;
    }

    .case-study-header h2 {
        font-size: 30px;
    }

    .case-study-header p {
        font-size: 14px;
    }

    .case-study-grid {
        gap: 30px;
    }

    .case-study-content h3 {
        font-size: 19px;
    }

    .case-study-content p {
        font-size: 14px;
        line-height: 1.65;
    }

    .case-study-results {
        gap: 13px;
    }

    .case-result-card {
        min-height: 115px;
    }

    .case-result-value {
        font-size: 24px;
    }

    .case-result-card p {
        font-size: 12px;
    }
}


@media (max-width: 575px) {

    .case-study-section {
        padding: 55px 0 60px;
    }

    .case-study-header {
        margin-bottom: 35px;
    }

    .case-study-header h2 {
        font-size: 27px;
    }

    .case-study-badge {
        font-size: 11px;
    }

    .case-study-company {
        font-size: 11px;
    }

    .case-study-results {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .case-result-card {
        min-height: 110px;
        padding: 17px 12px;
    }

    .case-result-value {
        font-size: 22px;
    }

    .case-result-card p {
        margin-top: 8px;
        font-size: 11.5px;
        line-height: 1.45;
    }
}

/* =========================================
   COMPARISON SECTION
========================================= */

.comparison-section {
    background: #03120c;
    padding: 105px 0 95px;
    color: #ffffff;
}

.comparison-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.comparison-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.comparison-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.comparison-badge i {
    font-size: 12px;
}

.comparison-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.comparison-header h2 span {
    color: #08bf87;
}

.comparison-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   TABLE WRAPPER
========================================= */

.comparison-table-wrapper {
    width: 100%;

    border: 1px solid rgba(0, 191, 132, 0.20);
    border-radius: 17px;

    overflow-x: auto;
    overflow-y: hidden;

    background: #03150c;

    -webkit-overflow-scrolling: touch;
}


/* =========================================
   TABLE
========================================= */

.comparison-table {
    width: 100%;
    min-width: 900px;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: fixed;

    font-size: 14px;
}


/* HEADER */

.comparison-table thead th {
    height: 52px;

    padding: 0 18px;

    color: #f1f5f3;
    background: #092a1b;

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-align: center;

    border-bottom: 1px solid rgba(0, 191, 132, 0.18);
}

.comparison-table thead th:first-child {
    width: 235px;
    text-align: left;
}

.comparison-table thead th:first-child {
    border-top-left-radius: 16px;
}

.comparison-table thead th:last-child {
    border-top-right-radius: 16px;
}


/* BODY */

.comparison-table tbody td {
    height: 48px;

    padding: 10px 18px;

    color: #91a5b7;

    border-bottom: 1px solid rgba(0, 191, 132, 0.11);

    text-align: center;

    vertical-align: middle;

    box-sizing: border-box;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}


/* FEATURE COLUMN */

.comparison-table tbody td:first-child {
    color: #f0f4f2;

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-align: left;

    background: #03140c;
}


/* STAIRSTEP COLUMN */

.comparison-table tbody td:nth-child(2) {
    background: rgba(7, 42, 27, 0.72);
}


/* ICONS */

.comparison-table td i {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 700;
}

.comparison-table .positive {
    color: #91a5b7;
}

.comparison-table .positive i {
    color: #08bf87;
}

.comparison-table .negative i {
    color: #ff4444;
}

.comparison-table .neutral i {
    color: #f4b000;
}


/* BEST FOR */

.comparison-table .best-for-row td {
    height: 48px;

    color: #91a5b7;
    background: #092a1b;

    border-bottom: none;

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

.comparison-table .best-for-row td:first-child {
    color: #f1f5f3;
    background: #092a1b;
    font-weight: 700;
}

.comparison-table .best-for-row td:nth-child(2) {
    background: #092a1b;
}


/* =========================================
   HOVER
========================================= */

.comparison-table tbody tr:not(.best-for-row):hover td {
    background: rgba(8, 191, 135, 0.035);
}

.comparison-table tbody tr:not(.best-for-row):hover td:nth-child(2) {
    background: rgba(8, 191, 135, 0.075);
}


/* =========================================
   TABLE SCROLLBAR
========================================= */

.comparison-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.comparison-table-wrapper::-webkit-scrollbar-track {
    background: #061d12;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb {
    background: #08a978;
    border-radius: 10px;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #08bf87;
}


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

@media (max-width: 991px) {

    .comparison-section {
        padding: 80px 0;
    }

    .comparison-header {
        margin-bottom: 45px;
    }

    .comparison-header h2 {
        font-size: 35px;
    }

    .comparison-table {
        min-width: 900px;
    }
}


@media (max-width: 767px) {

    .comparison-section {
        padding: 65px 0 70px;
    }

    .comparison-header h2 {
        font-size: 30px;
    }

    .comparison-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .comparison-table-wrapper {
        border-radius: 14px;
    }

    .comparison-table {
        min-width: 880px;
        font-size: 13px;
    }

    .comparison-table thead th {
        height: 50px;
        padding: 0 14px;
        font-size: 13px;
    }

    .comparison-table thead th:first-child {
        width: 210px;
    }

    .comparison-table tbody td {
        height: 47px;
        padding: 9px 14px;
        font-size: 13px;
    }

    .comparison-table tbody td:first-child {
        font-size: 13px;
    }

    .comparison-table .best-for-row td {
        font-size: 12.5px;
    }
}


@media (max-width: 575px) {

    .comparison-section {
        padding: 55px 0 60px;
    }

    .comparison-header {
        margin-bottom: 35px;
    }

    .comparison-header h2 {
        font-size: 27px;
    }

    .comparison-badge {
        font-size: 11px;
    }

    .comparison-table-wrapper {
        border-radius: 12px;
    }

    .comparison-table {
        min-width: 850px;
    }

    .comparison-table thead th {
        height: 48px;
        padding: 0 12px;
        font-size: 12px;
    }

    .comparison-table thead th:first-child {
        width: 190px;
    }

    .comparison-table tbody td {
        height: 46px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .comparison-table tbody td:first-child {
        font-size: 12px;
    }

    .comparison-table td i {
        font-size: 11px;
    }

    .comparison-table .best-for-row td {
        height: 55px;
        font-size: 11.5px;
    }
}

/* =========================================
   COMPLIANCE & SECURITY
========================================= */

.compliance-section {
    background: #02160e;
    padding: 105px 0 95px;
    color: #ffffff;
}

.compliance-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.compliance-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.compliance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.compliance-badge i {
    font-size: 12px;
}

.compliance-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.compliance-header h2 span {
    color: #08bf87;
}

.compliance-header p {
    max-width: 790px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


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

.compliance-grid {
    display: grid;

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

    gap: 16px 20px;

    align-items: stretch;
}


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

.compliance-card {
    min-width: 0;
    height: 420px;

    padding: 27px 22px 24px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.25);
    border-radius: 12px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.compliance-card:hover {
    transform: translateY(-4px);

    background: #08251a;
    border-color: rgba(8, 191, 135, 0.45);
}


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

.compliance-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 17px;

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

    font-size: 22px;
    line-height: 1;

    flex-shrink: 0;
}


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

.compliance-card h3 {
    margin: 0 0 10px;

    color: #f4f7f6;

    font-family: "Outfit", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}


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

.compliance-card p {
    margin: 0;

    color: #91a5b7;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================
   SECOND ROW
========================================= */

.compliance-card:nth-child(6) {
    grid-column: 1 / 2;
}

.compliance-card:nth-child(7) {
    grid-column: 2 / 3;
}


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

@media (max-width: 1199px) {

    .compliance-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .compliance-card {
        height: 400px;
    }

    .compliance-card:nth-child(6),
    .compliance-card:nth-child(7) {
        grid-column: auto;
    }
}


@media (max-width: 991px) {

    .compliance-section {
        padding: 80px 0;
    }

    .compliance-header {
        margin-bottom: 45px;
    }

    .compliance-header h2 {
        font-size: 35px;
    }

    .compliance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .compliance-card {
        height: 385px;
        padding: 24px 20px;
    }

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

    .compliance-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}


@media (max-width: 767px) {

    .compliance-section {
        padding: 65px 0 70px;
    }

    .compliance-header h2 {
        font-size: 30px;
    }

    .compliance-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .compliance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .compliance-card {
        height: 350px;
        padding: 22px 17px;
    }

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

    .compliance-card p {
        font-size: 14px;
        line-height: 1.6;
    }
}


@media (max-width: 575px) {

    .compliance-section {
        padding: 55px 0 60px;
    }

    .compliance-header {
        margin-bottom: 35px;
    }

    .compliance-header h2 {
        font-size: 27px;
    }

    .compliance-badge {
        font-size: 11px;
    }

    .compliance-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .compliance-card {
        height: auto;
        min-height: 0;

        padding: 23px 20px;
    }

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

    .compliance-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================
   CLIENT REVIEWS
========================================= */

.client-reviews-section {
    background: #020e09;
    padding: 105px 0 95px;
    color: #ffffff;
    overflow: hidden;
}

.client-reviews-section .container {
    max-width: 1220px;
    margin: 0 auto;
}


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

.client-reviews-header {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.client-reviews-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 191, 132, 0.30);
    background: rgba(0, 191, 132, 0.06);
    border-radius: 30px;

    color: #08bf87;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.client-reviews-badge i {
    font-size: 11px;
}

.client-reviews-header h2 {
    margin: 0;

    color: #f5f8f7;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.client-reviews-header h2 span {
    color: #08bf87;
}

.client-reviews-header p {
    max-width: 760px;
    margin: 18px auto 0;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   SLIDER
========================================= */

.reviews-slider {
    width: 100%;
    overflow: hidden;
}

.reviews-track {
    display: flex;

    width: 100%;

    transition: transform 0.45s ease;
}

.review-slide {
    min-width: 100%;
    width: 100%;

    padding: 0;
    box-sizing: border-box;
}


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

.review-card {
    width: 100%;
    min-height: 225px;

    padding: 45px 40px 38px;

    background: #061d12;
    border: 1px solid rgba(0, 191, 132, 0.25);
    border-radius: 23px;

    box-sizing: border-box;
}


/* STARS */

.review-stars {
    margin-bottom: 21px;

    color: #ffb000;

    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1;
}


/* TEXT */

.review-text {
    margin: 0;

    color: #91a5b7;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.75;
    font-style: italic;

    white-space: normal;
}


/* AUTHOR */

.review-author {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 25px;
}

.review-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: #08b982;
    border-radius: 50%;

    color: #ffffff;

    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.review-author-info h3 {
    margin: 0 0 3px;

    color: #f4f7f6;

    font-family: "Outfit", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.review-author-info span {
    display: block;

    color: #91a5b7;

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


/* =========================================
   CONTROLS
========================================= */

.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 28px;
}


/* ARROWS */

.review-arrow {
    width: 40px;
    height: 40px;

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

    padding: 0;

    color: #08bf87;
    background: transparent;

    border: 1px solid rgba(0, 191, 132, 0.28);
    border-radius: 50%;

    font-size: 16px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.review-arrow:hover {
    background: rgba(0, 191, 132, 0.10);
    border-color: #08bf87;
    transform: scale(1.05);
}


/* DOTS */

.review-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

.review-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    background: #103b29;

    border: 1px solid rgba(0, 191, 132, 0.20);
    border-radius: 50%;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.review-dot.active {
    width: 20px;

    background: #08bf87;
    border-color: #08bf87;

    border-radius: 20px;
}


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

@media (max-width: 991px) {

    .client-reviews-section {
        padding: 80px 0;
    }

    .client-reviews-header {
        margin-bottom: 45px;
    }

    .client-reviews-header h2 {
        font-size: 35px;
    }

    .review-card {
        min-height: 220px;
        padding: 35px 30px;
    }
}


@media (max-width: 767px) {

    .client-reviews-section {
        padding: 65px 0 70px;
    }

    .client-reviews-header h2 {
        font-size: 30px;
    }

    .client-reviews-header p {
        font-size: 14px;
    }

    .review-card {
        min-height: 240px;

        padding: 27px 22px;
        border-radius: 17px;
    }

    .review-stars {
        margin-bottom: 17px;
        font-size: 14px;
    }

    .review-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .review-author {
        margin-top: 21px;
    }
}


@media (max-width: 575px) {

    .client-reviews-section {
        padding: 55px 0 60px;
    }

    .client-reviews-header {
        margin-bottom: 35px;
    }

    .client-reviews-header h2 {
        font-size: 27px;
    }

    .client-reviews-badge {
        font-size: 11px;
    }

    .review-card {
        min-height: 265px;

        padding: 24px 18px;
        border-radius: 15px;
    }

    .review-text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .review-avatar {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 14px;
    }

    .review-author-info h3 {
        font-size: 15px;
    }

    .review-author-info span {
        font-size: 12px;
    }

    .reviews-controls {
        gap: 13px;
        margin-top: 22px;
    }

    .review-arrow {
        width: 38px;
        height: 38px;
    }
}

/* ===========================
   STAIRSTEP FAQ SECTION
=========================== */

.stairstep-faq-section {
    background: #02120b;
    padding: 95px 0 105px;
    font-family: "Poppins", sans-serif;
}

.stairstep-faq-section .container {
    max-width: 930px;
}

/* Header */
.stairstep-faq-header {
    text-align: center;
    margin-bottom: 58px;
}

.stairstep-faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 33px;
    padding: 6px 15px;

    color: #09c78d;
    background: rgba(0, 193, 132, 0.09);
    border: 1px solid rgba(0, 193, 132, 0.27);
    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 18px;
}

.stairstep-faq-badge i {
    font-size: 12px;
}

.stairstep-faq-header h2 {
    margin: 0 0 13px;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.7px;
}

.stairstep-faq-header h2 span {
    color: #06bd84;
}

.stairstep-faq-header p {
    max-width: 800px;
    margin: 0 auto;
    color: #91a5b7;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
}

/* FAQ List */
.stairstep-faq-list {
    width: 100%;
}

.stairstep-faq-item {
    width: 100%;
    margin-bottom: 12px;

    background: #031d11;
    border: 1px solid rgba(0, 190, 127, 0.27);
    border-radius: 12px;

    overflow: hidden;
    transition: border-color .25s ease, background .25s ease;
}

.stairstep-faq-item:last-child {
    margin-bottom: 0;
}

.stairstep-faq-item:hover {
    border-color: rgba(0, 196, 137, 0.45);
}

/* Question */
.stairstep-faq-question {
    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 15px 22px;

    border: 0;
    outline: 0;
    background: transparent;

    color: #f4f7f5;
    text-align: left;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;

    cursor: pointer;
}

.stairstep-faq-question span {
    display: block;
    flex: 1;
}

.stairstep-faq-question i {
    flex: 0 0 auto;
    color: #00c58b;
    font-size: 15px;
    transition: transform .3s ease;
}

/* Answer animation */
.stairstep-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.stairstep-faq-answer-inner {
    min-height: 0;
    overflow: hidden;

    color: #91a5b7;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 400;
}

/* OPEN STATE */
.stairstep-faq-item.active {
    background: #031d11;
}

.stairstep-faq-item.active .stairstep-faq-question {
    color: #00c58b;
    background: rgba(5, 61, 37, 0.42);
}

.stairstep-faq-item.active .stairstep-faq-question i {
    transform: rotate(180deg);
}

.stairstep-faq-item.active .stairstep-faq-answer {
    grid-template-rows: 1fr;
}

.stairstep-faq-item.active .stairstep-faq-answer-inner {
    padding: 0 22px 18px;
}

.stairstep-faq-answer-inner strong {
    color: #ffffff;
    font-weight: 600;
}

.faq-green {
    color: #00c58b;
}

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

@media (max-width: 991px) {

    .stairstep-faq-section {
        padding: 80px 0 90px;
    }

    .stairstep-faq-section .container {
        max-width: 850px;
    }

    .stairstep-faq-header h2 {
        font-size: 38px;
    }
}

@media (max-width: 767px) {

    .stairstep-faq-section {
        padding: 65px 0 70px;
    }

    .stairstep-faq-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .stairstep-faq-header {
        margin-bottom: 38px;
    }

    .stairstep-faq-badge {
        margin-bottom: 16px;
    }

    .stairstep-faq-header h2 {
        font-size: 32px;
        letter-spacing: -0.4px;
    }

    .stairstep-faq-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .stairstep-faq-item {
        margin-bottom: 10px;
        border-radius: 11px;
    }

    .stairstep-faq-question {
        min-height: 60px;
        padding: 15px 17px;
        gap: 15px;
        font-size: 13px;
        line-height: 1.55;
    }

    .stairstep-faq-answer-inner {
        font-size: 13px;
        line-height: 1.75;
    }

    .stairstep-faq-item.active .stairstep-faq-answer-inner {
        padding: 0 17px 17px;
    }
}

@media (max-width: 575px) {

    .stairstep-faq-section {
        padding: 55px 0 60px;
    }

    .stairstep-faq-header h2 {
        font-size: 29px;
    }

    .stairstep-faq-header p {
        font-size: 13px;
    }

    .stairstep-faq-question {
        padding: 14px 15px;
    }

    .stairstep-faq-item.active .stairstep-faq-answer-inner {
        padding: 0 15px 16px;
    }
}

/* ===========================
   STAIRSTEP FINAL CTA
=========================== */

.stairstep-cta-section {
    width: 100%;
    background: #031b10;
    padding: 75px 20px 70px;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

.stairstep-cta-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Badge */
.stairstep-cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 33px;
    padding: 6px 15px;

    color: #08c68b;
    background: rgba(0, 193, 132, 0.08);
    border: 1px solid rgba(0, 193, 132, 0.28);
    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1;

    margin-bottom: 21px;
}

.stairstep-cta-badge i {
    font-size: 12px;
}

/* Heading */
.stairstep-cta-section h2 {
    margin: 0 0 14px;

    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.7px;
}

.stairstep-cta-section h2 span {
    color: #08bd85;
}

/* Description */
.stairstep-cta-description {
    margin: 0 auto;

    color: #91a5b7;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
}

/* Feature badges */
.stairstep-cta-features {
    max-width: 1020px;
    margin: 35px auto 30px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
}

.cta-feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 7px 14px;

    color: #08c58a;
    background: rgba(0, 190, 128, 0.07);
    border: 1px solid rgba(0, 190, 128, 0.28);
    border-radius: 50px;

    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cta-feature i {
    font-size: 12px;
    font-weight: 700;
}

/* Buttons */
.stairstep-cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    margin-top: 29px;
}

.cta-btn {
    min-width: 162px;
    height: 59px;

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

    padding: 0 22px;

    border-radius: 11px;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

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

.cta-btn i {
    font-size: 16px;
}

/* Primary */
.cta-btn-primary {
    min-width: 270px;

    color: #ffffff;
    background: #10b987;
    border: 1px solid #10b987;

    box-shadow: 0 8px 24px rgba(0, 190, 130, 0.14);
}

.cta-btn-primary:hover {
    color: #ffffff;
    background: #0eaa7d;
    border-color: #0eaa7d;
    transform: translateY(-2px);
}

/* Email */
.cta-btn-email {
    color: #f0f5f3;
    background: transparent;
    border: 2px solid #5b6863;
}

.cta-btn-email:hover {
    color: #ffffff;
    border-color: #08bd85;
    background: rgba(0, 190, 128, 0.05);
    transform: translateY(-2px);
}

/* Features */
.cta-btn-features {
    min-width: 210px;

    color: #08c58a;
    background: transparent;
    border: 2px solid #00b982;
}

.cta-btn-features:hover {
    color: #ffffff;
    background: rgba(0, 190, 128, 0.08);
    transform: translateY(-2px);
}

/* ===========================
   TABLET
=========================== */

@media (max-width: 991px) {

    .stairstep-cta-section {
        padding: 70px 20px 65px;
    }

    .stairstep-cta-section h2 {
        font-size: 36px;
    }

    .stairstep-cta-description {
        font-size: 15px;
    }

    .stairstep-cta-features {
        max-width: 800px;
    }
}

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

@media (max-width: 767px) {

    .stairstep-cta-section {
        padding: 60px 18px 60px;
    }

    .stairstep-cta-section h2 {
        font-size: 31px;
        line-height: 1.25;
        letter-spacing: -0.4px;
    }

    .stairstep-cta-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .stairstep-cta-features {
        margin-top: 28px;
        gap: 8px;
    }

    .cta-feature {
        min-height: 34px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .stairstep-cta-buttons {
        flex-direction: column;
        width: 100%;
        margin-top: 27px;
        gap: 10px;
    }

    .cta-btn,
    .cta-btn-primary,
    .cta-btn-features {
        width: 100%;
        min-width: 0;
        height: 56px;
    }
}

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

@media (max-width: 575px) {

    .stairstep-cta-section {
        padding: 52px 15px 55px;
    }

    .stairstep-cta-section h2 {
        font-size: 28px;
    }

    .stairstep-cta-description {
        font-size: 13px;
    }

    .cta-feature {
        font-size: 11px;
    }
}


/* ================================== BINARY HERO SECTION ======================================== */
/* =========================================================
   BINARY MLM HERO SECTION
========================================================= */

.binary-hero {
    position: relative;
    min-height: 760px;
    padding: 110px 0 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 25%, rgba(93, 52, 190, .22), transparent 28%),
        radial-gradient(circle at 15% 70%, rgba(25, 76, 170, .10), transparent 30%),
        #10082d;
}

/* Grid background */
.binary-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 58px 58px;
}

/* Glow */
.binary-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: 5%;
    top: 5%;
    border-radius: 50%;
    background: rgba(104, 54, 220, .10);
    filter: blur(100px);
    pointer-events: none;
}

.binary-hero-container {
    position: relative;
    z-index: 2;
    width: min(1240px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 65px;
    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.binary-hero-content {
    min-width: 0;
}

.binary-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 17px;
    margin-bottom: 25px;

    border: 1px solid rgba(124, 92, 252, .55);
    border-radius: 30px;

    background: rgba(83, 47, 177, .13);

    color: #9d87e5;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

.binary-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #24d46b;
    box-shadow: 0 0 12px rgba(36, 212, 107, .8);
}

.binary-hero h1 {
    margin: 0 0 23px;

    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(52px, 5.2vw, 72px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -2px;
}

.binary-hero h1 span {
    color: #fff;
}

.binary-hero-desc {
    max-width: 555px;
    margin: 0;

    color: #a99bc8;
    font-size: 18px;
    line-height: 1.78;
    font-weight: 400;
}

.binary-hero-desc strong {
    color: #fff;
    font-weight: 700;
}


/* =========================================================
   BUTTONS
========================================================= */

.binary-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;
}

.binary-btn {
    min-height: 57px;
    padding: 0 26px;

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

    border-radius: 35px;

    text-decoration: none !important;

    font-size: 16px;
    font-weight: 700;

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

.binary-btn svg {
    width: 18px;
    height: 18px;
}

.binary-btn:hover {
    transform: translateY(-3px);
}

.binary-btn-primary {
    color: #fff !important;
    background: linear-gradient(100deg, #6040ef, #13b9ef);
    box-shadow: 0 12px 32px rgba(47, 111, 255, .28);
}

.binary-btn-primary:hover {
    box-shadow: 0 16px 40px rgba(47, 111, 255, .42);
}

.binary-btn-outline {
    color: #fff !important;

    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .025);
}

.binary-btn-outline:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .07);
}

.binary-btn-cyan {
    flex-basis: auto;

    color: #071424 !important;
    background: #08c9ef;

    box-shadow: 0 12px 32px rgba(8, 201, 239, .22);
}

.binary-btn-cyan:hover {
    box-shadow: 0 16px 40px rgba(8, 201, 239, .35);
}


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

.binary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 40px;
    padding-top: 27px;

    border-top: 1px solid rgba(255, 255, 255, .11);
}

.binary-stat {
    min-width: 0;
}

.binary-stat strong {
    display: block;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.5px;
}

.binary-stat span {
    display: block;

    margin-top: 8px;

    color: #9d90bd;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   BINARY TREE CARD
========================================================= */

.binary-tree-card {
    position: relative;

    min-height: 610px;
    padding: 32px 38px 25px;

    border-radius: 30px;

    background: #0b081b;
    border: 1px solid rgba(124, 92, 252, .16);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, .28),
        inset 0 0 50px rgba(82, 46, 164, .035);

    overflow: hidden;
}

.binary-tree-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;

    left: 50%;
    top: 20px;

    transform: translateX(-50%);

    background: rgba(92, 54, 229, .08);
    filter: blur(70px);

    pointer-events: none;
}

.binary-tree-title {
    position: relative;
    z-index: 2;

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

    color: #9d91bd;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.binary-tree-title svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   NODES
========================================================= */

.binary-root {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 25px;
}

.binary-node {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    flex-shrink: 0;
}

.binary-node svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.7;
}

.binary-root-node {
    width: 68px;
    height: 68px;

    background: linear-gradient(145deg, #6847f7, #0bb8ed);

    box-shadow:
        0 0 28px rgba(81, 80, 255, .5),
        0 0 55px rgba(12, 192, 239, .18);
}

.binary-root>span {
    margin-top: 6px;

    color: #a196bd;
    font-size: 11px;
    text-transform: uppercase;
}

.binary-root>b {
    margin-top: 2px;

    color: #00d4ff;
    font-size: 11px;
}


/* =========================================================
   LEG LABELS
========================================================= */

.binary-leg-labels {
    position: relative;
    z-index: 2;

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

    margin: 34px 68px 8px;
}

.binary-leg-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 13px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}

.binary-leg-label svg {
    width: 13px;
    height: 13px;
}

.binary-leg-label.left {
    color: #9275ff;
    border: 1px solid rgba(116, 76, 250, .4);
    background: rgba(95, 55, 210, .10);
}

.binary-leg-label.right {
    color: #27cf78;
    border: 1px solid rgba(34, 195, 108, .35);
    background: rgba(27, 170, 91, .08);
}


/* =========================================================
   LEVEL 1
========================================================= */

.binary-level {
    position: relative;
    z-index: 2;

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

.binary-level-one {
    justify-content: space-between;

    margin: 7px 82px 20px;
}

.binary-member {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.binary-member .binary-node {
    width: 56px;
    height: 56px;
}

.binary-left-node {
    background: #6338ed;
    box-shadow: 0 0 24px rgba(99, 56, 237, .42);
}

.binary-right-node {
    background: #13b75a;
    box-shadow: 0 0 24px rgba(19, 183, 90, .36);
}

.binary-member strong {
    margin-top: 7px;

    color: #a99dc2;
    font-size: 10px;
}

.binary-member span {
    margin-top: 2px;

    font-size: 9px;
    font-weight: 600;
}

.left-member span {
    color: #8062ed;
}

.right-member span {
    color: #24c96c;
}


/* =========================================================
   LEVEL 2 / LEVEL 3
========================================================= */

.binary-level-two {
    justify-content: space-between;
    margin: 13px 110px 28px;
}

.binary-level-three {
    justify-content: space-between;
    margin: 0 67px 26px;
}

.binary-small-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.binary-small-member .binary-node {
    width: 49px;
    height: 49px;
}

.binary-cyan-node {
    background: #09b9dc;
    box-shadow: 0 0 18px rgba(9, 185, 220, .30);
}

.binary-purple-node {
    width: 39px !important;
    height: 39px !important;

    background: #29458e;
    border: 1px solid #6141c7;

    box-shadow: 0 0 13px rgba(79, 57, 180, .25);
}

.binary-small-member span {
    color: #968aad;
    font-size: 9px;
}


/* =========================================================
   STRUCTURE
========================================================= */

.binary-structure {
    position: relative;
    z-index: 2;

    min-height: 36px;
    padding: 8px 15px;

    margin: 0 auto;

    width: 92%;

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

    border-radius: 11px;

    background: rgba(79, 50, 150, .15);

    color: #9789b7;

    font-family: monospace;
    font-size: 11px;
}

.binary-structure i {
    width: 1px;
    height: 15px;

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


/* =========================================================
   LEGEND
========================================================= */

.binary-tree-divider {
    height: 1px;

    margin: 23px 0 19px;

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

.binary-legend {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 21px;

    color: #9589b3;
    font-size: 11px;
}

.binary-legend>div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.legend-dot.root {
    background: #673bed;
}

.legend-dot.left {
    background: #5c35e4;
}

.legend-dot.right {
    background: #14b45a;
}

.legend-dot.level2 {
    background: #0dbbdc;
}

.legend-dot.level3 {
    background: #4632a0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .binary-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .binary-hero-content {
        max-width: 800px;
        margin: auto;
        text-align: center;
    }

    .binary-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .binary-hero-actions {
        justify-content: center;
    }

    .binary-tree-card {
        max-width: 760px;
        width: 100%;
        margin: auto;
    }

    .binary-stats {
        text-align: left;
    }
}


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

@media (max-width: 650px) {

    .binary-hero {
        padding: 85px 0 -2px 0;
    }

    .binary-hero-container {
        width: 92%;
    }

    .binary-badge {
        font-size: 11px;
        padding: 8px 12px;
    }

    .binary-hero h1 {
        font-size: 46px;
        letter-spacing: -1.5px;
    }

    .binary-hero-desc {
        font-size: 15px;
        line-height: 1.7;
    }

    .binary-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .binary-btn {
        min-height: 52px;
        padding: 0 13px;
        font-size: 13px;
    }

    .binary-btn-cyan {
        grid-column: 1 / -1;
    }

    .binary-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 15px;
    }

    .binary-stat strong {
        font-size: 26px;
    }

    .binary-stat span {
        font-size: 12px;
    }

    .binary-tree-card {
        min-height: auto;
        padding: 27px 13px 22px;
        border-radius: 23px;
    }

    .binary-tree-title {
        font-size: 10px;
    }

    .binary-leg-labels {
        margin-left: 35px;
        margin-right: 35px;
    }

    .binary-level-one {
        margin-left: 45px;
        margin-right: 45px;
    }

    .binary-level-two {
        margin-left: 35px;
        margin-right: 35px;
    }

    .binary-level-three {
        margin-left: 8px;
        margin-right: 8px;
    }

    .binary-small-member .binary-node {
        width: 40px;
        height: 40px;
    }

    .binary-purple-node {
        width: 31px !important;
        height: 31px !important;
    }

    .binary-small-member span {
        font-size: 8px;
    }

    .binary-structure {
        width: 100%;
        font-size: 8px;
        gap: 7px;
        padding: 8px 5px;
    }

    .binary-legend {
        gap: 10px 12px;
        font-size: 9px;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
    }
}


/* EXTRA SMALL */
@media (max-width: 400px) {

    .binary-hero h1 {
        font-size: 40px;
    }

    .binary-level-three {
        margin-left: 2px;
        margin-right: 2px;
    }

    .binary-small-member .binary-node {
        width: 34px;
        height: 34px;
    }

    .binary-purple-node {
        width: 27px !important;
        height: 27px !important;
    }

    .binary-level-three {
        gap: 2px;
    }
}

/* =========================================================
   FLOATING BACKGROUND PARTICLES
========================================================= */

.binary-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.binary-particles span {
    position: absolute;

    bottom: -15px;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #17d5ff;

    box-shadow:
        0 0 7px rgba(23, 213, 255, .9),
        0 0 14px rgba(23, 213, 255, .35);

    opacity: 0;

    animation: binaryParticleFloat linear infinite;
}

.binary-particles span:nth-child(3n) {
    width: 2px;
    height: 2px;
    background: #24d46b;

    box-shadow:
        0 0 7px rgba(36, 212, 107, .9);
}

.binary-particles span:nth-child(5n) {
    background: #8b5cf6;

    box-shadow:
        0 0 8px rgba(139, 92, 246, .9);
}

.binary-particles span:nth-child(7n) {
    width: 4px;
    height: 4px;
    background: #f5b52e;

    box-shadow:
        0 0 9px rgba(245, 181, 46, .85);
}

@keyframes binaryParticleFloat {

    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    50% {
        opacity: 1;
    }

    90% {
        opacity: .55;
    }

    100% {
        transform: translateY(-850px) translateX(35px);
        opacity: 0;
    }

}

/* =========================================================
   BINARY FEATURE MARQUEE
========================================================= */

.binary-marquee {
    position: relative;
    width: 100%;

    height: 58px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #0c0820;

    border-top: 1px solid rgba(124, 92, 252, .14);
    border-bottom: 1px solid rgba(124, 92, 252, .14);

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


/* LEFT / RIGHT FADE */

.binary-marquee::before,
.binary-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 3;

    pointer-events: none;
}

.binary-marquee::before {
    left: 0;

    background: linear-gradient(90deg,
            #0c0820,
            transparent);
}

.binary-marquee::after {
    right: 0;

    background: linear-gradient(270deg,
            #0c0820,
            transparent);
}


/* MOVING TRACK */

.binary-marquee-track {
    display: flex;
    align-items: center;

    width: max-content;

    white-space: nowrap;

    animation: binaryMarqueeMove 30s linear infinite;
}


/* ITEM */

.binary-marquee-item {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 0 31px;

    color: #9d91bd;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;

    letter-spacing: .15px;
}


/* DOT */

.marquee-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #7041f5;

    box-shadow:
        0 0 7px rgba(112, 65, 245, .8);
}


/* DIFFERENT DOT COLORS */

.binary-marquee-item:nth-child(3n) .marquee-dot {
    background: #10c8ef;

    box-shadow:
        0 0 8px rgba(16, 200, 239, .8);
}

.binary-marquee-item:nth-child(5n) .marquee-dot {
    background: #20ca72;

    box-shadow:
        0 0 8px rgba(32, 202, 114, .8);
}


/* HOVER */

.binary-marquee:hover .binary-marquee-track {
    animation-play-state: paused;
}

.binary-marquee-item:hover {
    color: #c0b4dc;
}


/* ANIMATION */

@keyframes binaryMarqueeMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .binary-marquee {
        height: 52px;
    }

    .binary-marquee-item {
        padding: 0 20px;

        font-size: 11px;
        gap: 8px;
    }

    .marquee-dot {
        width: 5px;
        height: 5px;
    }

    .binary-marquee::before,
    .binary-marquee::after {
        width: 45px;
    }

}

/* =========================================================
   BINARY HIGHLIGHT STATS
========================================================= */

.binary-highlight-stats {
    position: relative;

    padding: 50px 0;

    background: #0d091e;
}

.binary-highlight-box {
    width: min(1200px, 89%);
    min-height: 154px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;

    padding: 28px 45px;

    border-radius: 25px;

    background:
        linear-gradient(110deg,
            rgba(48, 25, 92, .25),
            rgba(20, 28, 66, .38));

    border: 1px solid rgba(98, 67, 205, .32);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 20px 60px rgba(0, 0, 0, .15);
}

.binary-highlight-item {
    min-width: 0;

    text-align: center;
}

.binary-highlight-item strong {
    display: block;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 42px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -.8px;
}

.binary-highlight-item span {
    display: block;

    margin-top: 10px;

    color: #9b8ebd;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.4;
}

.binary-highlight-divider {
    width: 1px;
    height: 58px;

    background: rgba(103, 68, 210, .30);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .binary-highlight-box {
        padding: 25px 20px;
    }

    .binary-highlight-item strong {
        font-size: 34px;
    }

    .binary-highlight-item span {
        font-size: 11px;
    }

}


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

@media (max-width: 600px) {

    .binary-highlight-stats {
        padding: 35px 0;
    }

    .binary-highlight-box {
        width: 92%;

        grid-template-columns: 1fr 1fr;

        gap: 25px 10px;

        padding: 28px 12px;

        border-radius: 20px;
    }

    .binary-highlight-divider {
        display: none;
    }

    .binary-highlight-item strong {
        font-size: 28px;
    }

    .binary-highlight-item span {
        margin-top: 7px;

        font-size: 10px;
        line-height: 1.45;
    }

}

/* =========================================================
   WHAT IS BINARY MLM SOFTWARE
========================================================= */

.binary-about {
    position: relative;

    padding: 95px 0 85px;

    background: #090512;

    overflow: hidden;
}

.binary-about-container {
    position: relative;
    z-index: 2;

    width: min(1145px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


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

.binary-about-left {
    min-width: 0;
}

.binary-about-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 20px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .42);

    background: rgba(0, 174, 219, .08);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-about-badge svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   HEADING
========================================================= */

.binary-about-left>h2 {
    margin: 0 0 32px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1.4px;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.binary-about-left>p {
    margin: 0 0 20px;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;
}

.binary-about-left>p strong {
    color: #fff;

    font-weight: 700;
}


/* =========================================================
   DIVIDER
========================================================= */

.binary-about-divider {
    width: 100%;

    height: 1px;

    margin: 32px 0;

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


/* =========================================================
   COMPARISON
========================================================= */

.binary-about-left>h3 {
    margin: 0 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}

.binary-comparison {
    display: flex;

    flex-direction: column;

    gap: 14px;

    width: 100%;
}

.binary-comparison-row {
    display: flex;

    align-items: flex-start;

    width: 100%;

    gap: 0;

    min-width: 0;
}


/* GREEN CHECK */

.comparison-check {
    flex: 0 0 23px;

    color: #20d879;

    font-size: 19px;

    line-height: 1.55;

    font-weight: 700;
}


/* LABEL */

.binary-comparison-row strong {
    flex: 0 1 auto;

    width: auto;

    max-width: 175px;

    margin: 0 13px 0 0;

    padding: 0;

    color: #eeeafa;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 700;
}


/* DESCRIPTION */

.binary-comparison-row p {
    flex: 1 1 auto;

    min-width: 0;

    width: auto;

    margin: 0;

    padding: 0;

    color: #9e91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   CORE CONCEPT
========================================================= */

.binary-core-concept {
    position: relative;

    margin-top: 25px;

    padding: 17px 20px 18px 24px;

    border-radius: 12px;

    background: rgba(50, 24, 91, .17);

    border: 1px solid rgba(119, 77, 245, .30);

    border-left: 3px solid #7241f4;
}

.binary-core-concept h4 {
    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0 0 8px;

    color: #9b5cff;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    font-weight: 700;
}

.binary-core-concept h4 svg {
    width: 16px;
    height: 16px;
}

.binary-core-concept p {
    margin: 0;

    color: #9f91bf;

    font-size: 16px;

    line-height: 1.75;
}

.binary-core-concept p strong {
    color: #fff;
}

.binary-core-concept p em {
    color: #a99bc5;

    font-style: italic;
}


/* =========================================================
   RIGHT CONCEPT CARD
========================================================= */

.binary-about-right {
    min-width: 0;

    padding-top: 270px;
}

.binary-concepts-card {
    position: relative;

    padding: 20px 24px 23px;

    border-radius: 25px;

    background: #0d081e;

    border: 1px solid rgba(111, 70, 221, .36);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .20),
        inset 0 0 35px rgba(90, 48, 160, .035);
}


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

.binary-concepts-title {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 14px;

    color: #9e91bc;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .7px;
}

.binary-concepts-title svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   CONCEPT ITEM
========================================================= */

.binary-concept-item {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 16px;

    border-radius: 12px;

    background: rgba(25, 15, 52, .72);

    border: 1px solid rgba(105, 66, 203, .30);

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

.binary-concept-item:hover {
    transform: translateY(-2px);

    border-color: rgba(123, 79, 239, .52);

    background: rgba(32, 19, 65, .85);
}


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

.binary-concept-icon {
    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: linear-gradient(135deg,
            #6040ef,
            #0bbfe9);

    box-shadow:
        0 0 18px rgba(57, 104, 240, .25);
}

.binary-concept-icon svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   CONTENT
========================================================= */

.binary-concept-content {
    min-width: 0;
}

.binary-concept-content h4 {
    margin: 0 0 4px;

    color: #f4f1fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;
}

.binary-concept-content p {
    margin: 0;

    color: #9588b3;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   ARROWS
========================================================= */

.binary-concept-arrow {
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.binary-concept-arrow svg {
    width: 17px;

    height: 17px;

    color: #08c9ef;

    filter:
        drop-shadow(0 0 5px rgba(8, 201, 239, .45));
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .binary-about-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .binary-about-right {
        padding-top: 0;
    }

}


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

@media (max-width: 600px) {

    .binary-about {
        padding: 70px 0 60px;
    }

    .binary-about-container {
        width: 92%;

        gap: 38px;
    }

    .binary-about-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-about-left>h2 {
        font-size: 38px;

        letter-spacing: -1px;

        margin-bottom: 24px;
    }

    .binary-about-left>p {
        font-size: 14px;

        line-height: 1.75;
    }

    .binary-about-left>h3 {
        font-size: 18px;
    }


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

    .binary-comparison {
        gap: 13px;
    }

    .binary-comparison-row {
        display: flex;

        align-items: flex-start;

        width: 100%;

        gap: 0;
    }

    .comparison-check {
        flex: 0 0 21px;

        font-size: 18px;

        line-height: 1.55;
    }

    .binary-comparison-row strong {
        flex: 0 1 auto;

        max-width: 125px;

        margin-right: 8px;

        font-size: 12px;

        line-height: 1.55;
    }

    .binary-comparison-row p {
        flex: 1 1 auto;

        min-width: 0;

        font-size: 12px;

        line-height: 1.65;
    }


    /* CORE CONCEPT */

    .binary-core-concept {
        padding: 15px 16px 16px 19px;
    }

    .binary-core-concept p {
        font-size: 13px;
    }


    /* RIGHT CARD */

    .binary-concepts-card {
        padding: 17px 12px 18px;

        border-radius: 20px;
    }

    .binary-concept-item {
        gap: 11px;

        padding: 13px;
    }

    .binary-concept-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .binary-concept-content h4 {
        font-size: 14px;
    }

    .binary-concept-content p {
        font-size: 11px;
    }

}

/* =========================================================
   HOW BINARY MLM SOFTWARE WORKS
========================================================= */

.binary-how-section {
    position: relative;

    padding: 90px 0 85px;

    background: #0b071b;

    overflow: hidden;
}

.binary-how-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 90%);

    margin: 0 auto;
}


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

.binary-how-header {
    text-align: center;

    max-width: 760px;

    margin: 0 auto 68px;
}

.binary-section-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    margin-bottom: 17px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .42);

    background: rgba(0, 174, 219, .08);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-section-badge svg {
    width: 15px;

    height: 15px;
}

.binary-how-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.4px;
}

.binary-how-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   PROCESS
========================================================= */

.binary-process {
    position: relative;

    display: grid;

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

    gap: 30px;

    margin-bottom: 70px;
}


/* CONNECTING LINE */

.binary-process::before {
    content: "";

    position: absolute;

    top: 35px;

    left: 12%;

    right: 12%;

    height: 2px;

    background:
        linear-gradient(90deg,
            #6336ed,
            #6640f2,
            #07bde9);

    opacity: .85;

    z-index: 0;
}


/* PROCESS ITEM */

.binary-process-item {
    position: relative;

    z-index: 2;

    text-align: center;
}

.binary-process-number {
    width: 72px;

    height: 72px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 2px solid #693cff;

    background: #0b071b;

    color: #815aff;

    font-family: 'Outfit', sans-serif;

    font-size: 20px;

    font-weight: 700;

    box-shadow:
        0 0 22px rgba(99, 57, 242, .18);
}

.binary-process-item h3 {
    margin: 0 0 8px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}

.binary-process-item p {
    margin: 0;

    color: #9b8ebc;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


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

.binary-earnings-card {
    position: relative;

    padding: 32px;

    border-radius: 27px;

    background:
        linear-gradient(110deg,
            rgba(27, 17, 58, .78),
            rgba(20, 27, 61, .78));

    border: 1px solid rgba(105, 70, 213, .35);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .18),
        inset 0 0 45px rgba(87, 53, 166, .035);
}


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

.binary-earnings-header {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;
}

.binary-earnings-icon {
    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(135deg,
            #6040ef,
            #0bbfe9);

    box-shadow:
        0 0 25px rgba(43, 136, 241, .22);
}

.binary-earnings-icon svg {
    width: 22px;

    height: 22px;
}

.binary-earnings-header h3 {
    margin: 0 0 3px;

    color: #f7f4fc;

    font-family: 'Outfit', sans-serif;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 700;
}

.binary-earnings-header p {
    margin: 0;

    color: #9c90ba;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   STRONG / WEAK LEG
========================================================= */

.binary-leg-comparison {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 62px 1fr;

    align-items: center;

    gap: 0;

    margin-bottom: 28px;
}

.binary-earning-leg {
    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 22px;

    border-radius: 12px;

    background: #0b071b;
}

.binary-strong-leg {
    border: 1px solid rgba(23, 202, 109, .48);
}

.binary-weak-leg {
    border: 1px solid rgba(242, 171, 0, .45);
}

.binary-leg-chart-icon {
    margin-bottom: 12px;
}

.binary-leg-chart-icon svg {
    width: 27px;

    height: 27px;
}

.binary-strong-leg .binary-leg-chart-icon {
    color: #20d878;
}

.binary-weak-leg .binary-leg-chart-icon {
    color: #f3ad08;
}

.binary-earning-leg h4 {
    margin: 0 0 9px;

    color: #f4f1fa;

    font-size: 14px;

    font-weight: 700;
}

.binary-earning-leg>strong {
    display: block;

    font-family: 'Outfit', sans-serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 700;
}

.binary-strong-leg>strong {
    color: #20d878;
}

.binary-weak-leg>strong {
    color: #f3ad08;
}

.binary-earning-leg p {
    margin: 11px 0 0;

    color: #9d91bb;

    font-size: 12px;

    line-height: 1.5;
}

.binary-vs {
    color: #6f628e;

    text-align: center;

    font-family: 'Outfit', sans-serif;

    font-size: 20px;

    font-weight: 700;
}


/* =========================================================
   SUMMARY BOXES
========================================================= */

.binary-earning-summary {
    display: grid;

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

    gap: 16px;

    margin-bottom: 24px;
}

.binary-summary-box {
    min-height: 118px;

    padding: 17px 18px;

    text-align: center;

    border-radius: 12px;

    background: #0d081e;

    border: 1px solid rgba(103, 67, 199, .27);
}

.binary-summary-title {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-bottom: 12px;

    color: #988bb6;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .6px;
}

.binary-summary-title svg {
    width: 13px;

    height: 13px;
}

.binary-summary-box>strong {
    display: block;

    margin-bottom: 8px;

    color: #f5f1fc;

    font-family: 'Outfit', sans-serif;

    font-size: 24px;

    line-height: 1;

    font-weight: 700;
}

.binary-summary-box>span {
    display: block;

    color: #9588b1;

    font-size: 11px;

    line-height: 1.5;
}


/* INCOME */

.binary-income-box {
    border-color: rgba(101, 62, 218, .52);

    background:
        linear-gradient(135deg,
            rgba(53, 28, 107, .20),
            rgba(22, 16, 51, .75));
}

.binary-income-box>strong {
    color: #8a5cff;
}


/* =========================================================
   CARRY FORWARD
========================================================= */

.binary-carry-forward {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    padding: 16px 19px;

    border-radius: 11px;

    border: 1px solid rgba(22, 188, 119, .28);

    background: rgba(16, 118, 88, .13);
}

.binary-carry-forward>svg {
    flex: 0 0 auto;

    width: 15px;

    height: 15px;

    margin-top: 3px;

    color: #20d878;
}

.binary-carry-forward p {
    margin: 0;

    color: #9d91bb;

    font-size: 13px;

    line-height: 1.7;
}

.binary-carry-forward strong {
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .binary-process {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 45px;
    }

    .binary-process::before {
        display: none;
    }

    .binary-earnings-card {
        padding: 25px;
    }

}


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

@media (max-width: 600px) {

    .binary-how-section {
        padding: 70px 0 60px;
    }

    .binary-how-container {
        width: 92%;
    }

    .binary-how-header {
        margin-bottom: 45px;
    }

    .binary-how-header h2 {
        font-size: 36px;

        letter-spacing: -1px;
    }

    .binary-how-header p {
        font-size: 14px;

        line-height: 1.7;
    }

    .binary-process {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 50px;
    }

    .binary-process-item {
        max-width: 430px;

        margin: 0 auto;
    }

    .binary-process-number {
        width: 62px;

        height: 62px;

        font-size: 18px;
    }

    .binary-process-item h3 {
        font-size: 15px;
    }

    .binary-process-item p {
        font-size: 12px;
    }


    /* EARNINGS */

    .binary-earnings-card {
        padding: 18px;

        border-radius: 21px;
    }

    .binary-earnings-header {
        align-items: flex-start;
    }

    .binary-earnings-icon {
        width: 42px;

        height: 42px;

        flex-basis: 42px;
    }

    .binary-earnings-header h3 {
        font-size: 15px;
    }

    .binary-earnings-header p {
        font-size: 10px;
    }


    /* LEGS */

    .binary-leg-comparison {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .binary-earning-leg {
        min-height: 155px;

        padding: 18px;
    }

    .binary-vs {
        font-size: 15px;
    }


    /* SUMMARY */

    .binary-earning-summary {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .binary-summary-box {
        min-height: 105px;
    }

    .binary-carry-forward {
        padding: 13px 14px;
    }

    .binary-carry-forward p {
        font-size: 11px;
    }

}

/* =========================================================
   BINARY PLAN EARNING BREAKDOWN
========================================================= */

.binary-earning-breakdown {
    position: relative;

    padding: 90px 0 80px;

    background: #080411;

    overflow: hidden;
}

.binary-breakdown-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 90%);

    margin: 0 auto;
}


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

.binary-breakdown-header {
    max-width: 800px;

    margin: 0 auto 75px;

    text-align: center;
}

.binary-breakdown-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 17px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .42);

    background: rgba(0, 174, 219, .08);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-breakdown-badge svg {
    width: 14px;

    height: 14px;
}

.binary-breakdown-header h2 {
    margin: 0 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-breakdown-header p {
    max-width: 720px;

    margin: 0 auto;

    color: #9e91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   TABLE
========================================================= */

.binary-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border-radius: 0 0 18px 18px;
}

.binary-earning-table {
    width: 100%;

    min-width: 900px;

    border-collapse: separate;

    border-spacing: 0;

    color: #9f91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
}


/* TABLE HEAD */

.binary-earning-table thead th {
    padding: 17px 20px;

    text-align: left;

    color: #f4f1fb;

    background:
        linear-gradient(100deg,
            #261653,
            #082538);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    border-bottom: 1px solid rgba(109, 69, 211, .30);
}

.binary-earning-table thead th:first-child {
    border-radius: 18px 0 0 0;
}

.binary-earning-table thead th:last-child {
    border-radius: 0 18px 0 0;
}

.binary-earning-table th i {
    width: 15px;

    height: 15px;

    margin-right: 5px;

    vertical-align: -3px;
}


/* TABLE BODY */

.binary-earning-table tbody td {
    padding: 13px 20px;

    height: 48px;

    border-bottom: 1px solid rgba(255, 255, 255, .055);

    white-space: nowrap;

    font-size: 14px;
}

.binary-earning-table tbody tr {
    background: transparent;

    transition: background .2s ease;
}

.binary-earning-table tbody tr:hover {
    background: rgba(70, 42, 130, .08);
}


/* LEVEL NAME */

.binary-earning-table .level-name {
    color: #eeeafa;

    font-weight: 700;
}

.binary-earning-table .level-name svg {
    width: 15px;

    height: 15px;

    margin-right: 4px;

    vertical-align: -2px;
}


/* INCOME */

.binary-earning-table .income {
    color: #16d96c;

    font-weight: 700;

    font-family: 'Outfit', sans-serif;
}

.binary-earning-table .income-zero {
    color: #16d96c;
}


/* HIGHLIGHT */

.binary-earning-table .highlight-row {
    background: rgba(49, 31, 100, .17);
}


/* TOTAL */

.binary-earning-table .total-row td {
    padding: 16px 20px;

    color: #f5f2fb;

    background: #120b29;

    border-bottom: 0;

    font-family: 'Outfit', sans-serif;

    font-size: 16px;

    font-weight: 700;
}

.binary-earning-table .total-row td:first-child {
    border-radius: 0 0 0 18px;
}

.binary-earning-table .total-row td:last-child {
    border-radius: 0 0 18px 0;
}


/* =========================================================
   IMPORTANT NOTES
========================================================= */

.binary-earning-notes {
    margin-top: 48px;

    padding: 20px 24px 21px;

    border-radius: 12px;

    background: rgba(43, 20, 82, .17);

    border: 1px solid rgba(113, 72, 226, .32);

    border-left: 3px solid #7640f5;
}

.binary-earning-notes h3 {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0 0 11px;

    color: #985cff;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;
}

.binary-earning-notes h3 svg {
    width: 16px;

    height: 16px;
}

.binary-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 9px;
}

.binary-note>span {
    flex: 0 0 14px;

    color: #1dd974;

    font-size: 17px;

    line-height: 1.45;

    font-weight: 700;
}

.binary-note p {
    margin: 0;

    color: #9e91bd;

    font-size: 14px;

    line-height: 1.65;
}

.binary-note p strong {
    color: #fff;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .binary-breakdown-header {
        margin-bottom: 50px;
    }

    .binary-breakdown-header h2 {
        font-size: 40px;
    }

    .binary-table-wrapper {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

}


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

@media (max-width: 600px) {

    .binary-earning-breakdown {
        padding: 70px 0 60px;
    }

    .binary-breakdown-container {
        width: 92%;
    }

    .binary-breakdown-header {
        margin-bottom: 40px;
    }

    .binary-breakdown-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-breakdown-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .binary-breakdown-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-table-wrapper {
        overflow-x: auto;

        border-radius: 0 0 14px 14px;
    }

    .binary-earning-table {
        min-width: 850px;

        font-size: 12px;
    }

    .binary-earning-table thead th {
        padding: 13px 14px;

        font-size: 11px;
    }

    .binary-earning-table tbody td {
        padding: 11px 14px;

        font-size: 12px;
    }

    .binary-earning-table .total-row td {
        padding: 14px;

        font-size: 14px;
    }

    .binary-earning-notes {
        margin-top: 35px;

        padding: 16px 15px 17px;
    }

    .binary-earning-notes h3 {
        font-size: 14px;
    }

    .binary-note p {
        font-size: 11px;

        line-height: 1.65;
    }

}

/* =========================================================
   TYPES OF COMMISSION IN BINARY MLM SOFTWARE
========================================================= */

.binary-commission-section {
    position: relative;

    padding: 90px 0 85px;

    background: #0b071b;

    overflow: hidden;
}

.binary-commission-container {
    position: relative;

    z-index: 2;

    width: min(1145px, 90%);

    margin: 0 auto;
}


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

.binary-commission-header {
    max-width: 820px;

    margin: 0 auto 55px;

    text-align: center;
}

.binary-commission-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 17px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-commission-badge svg {
    width: 14px;

    height: 14px;
}

.binary-commission-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-commission-header p {
    max-width: 730px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


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

.binary-commission-grid {
    display: grid;

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

    gap: 14px;
}


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

.binary-commission-card {
    position: relative;

    min-width: 0;

    min-height: 385px;

    padding: 20px 20px 19px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .90),
            rgba(23, 15, 49, .92));

    border: 1px solid rgba(102, 65, 198, .30);

    box-shadow:
        inset 0 0 35px rgba(93, 52, 169, .035);

    overflow: hidden;

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

.binary-commission-card:hover {
    transform: translateY(-4px);

    border-color: rgba(110, 67, 226, .55);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20),
        0 0 25px rgba(90, 49, 190, .08);
}


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

.binary-commission-icon {
    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    border-radius: 12px;

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

.binary-commission-icon svg {
    width: 23px;

    height: 23px;
}


/* PURPLE */

.icon-purple {
    color: #9561ff;

    background: rgba(105, 56, 213, .13);

    border-color: rgba(116, 66, 225, .35);
}


/* CYAN */

.icon-cyan {
    color: #09c7ef;

    background: rgba(0, 174, 219, .12);

    border-color: rgba(0, 185, 231, .30);
}


/* GREEN */

.icon-green {
    color: #20d878;

    background: rgba(26, 178, 100, .12);

    border-color: rgba(27, 191, 107, .30);
}


/* ORANGE */

.icon-orange {
    color: #ffad0a;

    background: rgba(213, 131, 0, .12);

    border-color: rgba(226, 139, 0, .30);
}


/* PINK */

.icon-pink {
    color: #f24a9a;

    background: rgba(215, 41, 129, .12);

    border-color: rgba(225, 49, 139, .30);
}


/* BLUE */

.icon-blue {
    color: #62a6ff;

    background: rgba(44, 106, 214, .12);

    border-color: rgba(57, 116, 225, .30);
}


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

.binary-commission-card h3 {
    margin: 0 0 8px;

    color: #f7f4fc;

    font-family: 'Outfit', sans-serif;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;
}

.binary-commission-card p {
    margin: 0 0 14px;

    color: #9d90bd;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.68;
}


/* =========================================================
   BOTTOM PILL
========================================================= */

.binary-commission-pill {
    display: inline-flex;

    align-items: center;

    max-width: 100%;

    margin-top: auto;

    padding: 6px 11px;

    border-radius: 20px;

    color: #9360ff;

    background: rgba(104, 59, 212, .11);

    border: 1px solid rgba(112, 65, 222, .34);

    font-family: monospace;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   BOTTOM HOVER LINE
========================================================= */

.binary-commission-line {
    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(90deg,
            #6840f5,
            #08c9ef);

    border-radius: 0 4px 4px 0;

    transition: width .55s cubic-bezier(.22, .61, .36, 1);
}

.binary-commission-card:hover .binary-commission-line {
    width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .binary-commission-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .binary-commission-card {
        min-height: 360px;
    }

}


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

@media (max-width: 600px) {

    .binary-commission-section {
        padding: 70px 0 60px;
    }

    .binary-commission-container {
        width: 92%;
    }

    .binary-commission-header {
        margin-bottom: 40px;
    }

    .binary-commission-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-commission-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .binary-commission-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-commission-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .binary-commission-card {
        min-height: auto;

        padding: 18px;

        border-radius: 17px;
    }

    .binary-commission-icon {
        width: 46px;

        height: 46px;

        flex-basis: 46px;

        margin-bottom: 14px;
    }

    .binary-commission-card h3 {
        font-size: 15px;
    }

    .binary-commission-card p {
        font-size: 12px;

        line-height: 1.7;
    }

    .binary-commission-pill {
        font-size: 10px;

        white-space: normal;
    }

}

/* =========================================================
   BENEFITS OF BINARY MLM SOFTWARE
========================================================= */

.binary-benefits-section {
    position: relative;

    padding: 90px 0 85px;

    background: #080411;

    overflow: hidden;
}

.binary-benefits-container {
    position: relative;

    z-index: 2;

    width: min(1145px, 90%);

    margin: 0 auto;
}


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

.binary-benefits-header {
    max-width: 820px;

    margin: 0 auto 54px;

    text-align: center;
}

.binary-benefits-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 17px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-benefits-badge svg {
    width: 14px;

    height: 14px;
}

.binary-benefits-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-benefits-header p {
    max-width: 730px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


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

.binary-benefits-grid {
    display: grid;

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

    gap: 14px;
}


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

.binary-benefit-card {
    position: relative;

    min-width: 0;

    min-height: 330px;

    padding: 24px 24px 25px;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .90),
            rgba(23, 15, 49, .92));

    border: 1px solid rgba(102, 65, 198, .30);

    box-shadow:
        inset 0 0 35px rgba(93, 52, 169, .035);

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

.binary-benefit-card:hover {
    transform: translateY(-4px);

    border-color: rgba(110, 67, 226, .50);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20),
        0 0 25px rgba(90, 49, 190, .08);
}


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

.binary-benefit-icon {
    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    border-radius: 12px;

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

.binary-benefit-icon svg {
    width: 24px;

    height: 24px;
}


/* PURPLE */

.benefit-purple {
    color: #9861ff;

    background: rgba(105, 56, 213, .13);

    border-color: rgba(116, 66, 225, .35);
}


/* CYAN */

.benefit-cyan {
    color: #08c9ef;

    background: rgba(0, 174, 219, .12);

    border-color: rgba(0, 185, 231, .30);
}


/* GREEN */

.benefit-green {
    color: #20d878;

    background: rgba(26, 178, 100, .12);

    border-color: rgba(27, 191, 107, .30);
}


/* ORANGE */

.benefit-orange {
    color: #ffae0a;

    background: rgba(213, 131, 0, .12);

    border-color: rgba(226, 139, 0, .30);
}


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

.binary-benefit-card h3 {
    margin: 0 0 8px;

    color: #f7f4fc;

    font-family: 'Outfit', sans-serif;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 700;
}

.binary-benefit-card p {
    margin: 0;

    color: #9e91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.68;

    font-weight: 400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .binary-benefits-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .binary-benefit-card {
        min-height: 300px;
    }

}


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

@media (max-width: 600px) {

    .binary-benefits-section {
        padding: 70px 0 60px;
    }

    .binary-benefits-container {
        width: 92%;
    }

    .binary-benefits-header {
        margin-bottom: 40px;
    }

    .binary-benefits-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-benefits-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .binary-benefits-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-benefits-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .binary-benefit-card {
        min-height: auto;

        padding: 19px;

        border-radius: 17px;
    }

    .binary-benefit-icon {
        width: 47px;

        height: 47px;

        margin-bottom: 14px;
    }

    .binary-benefit-card h3 {
        font-size: 17px;
    }

    .binary-benefit-card p {
        font-size: 13px;

        line-height: 1.7;
    }

}

/* =========================================================
   ADVANCED FEATURES OF BINARY MLM SOFTWARE
========================================================= */

.binary-features-section {
    position: relative;

    padding: 90px 0 85px;

    background: #0b071b;

    overflow: hidden;
}

.binary-features-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 90%);

    margin: 0 auto;
}


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

.binary-features-header {
    max-width: 820px;

    margin: 0 auto 50px;

    text-align: center;
}

.binary-features-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 17px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-features-badge svg {
    width: 14px;

    height: 14px;
}

.binary-features-header h2 {
    margin: 0 0 19px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-features-header p {
    max-width: 720px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   TABS
========================================================= */

.binary-feature-tabs {
    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    max-width: 100%;

    margin: 0 auto 30px;

    padding: 4px;

    border-radius: 30px;

    background: #0e0920;

    border: 1px solid rgba(104, 64, 198, .35);

    overflow-x: auto;

    scrollbar-width: none;
}

.binary-feature-tabs::-webkit-scrollbar {
    display: none;
}

.binary-feature-tab {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 38px;

    padding: 8px 18px;

    border: 0;

    border-radius: 22px;

    background: transparent;

    color: #9b8dbb;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

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

.binary-feature-tab svg {
    width: 15px;

    height: 15px;
}

.binary-feature-tab:hover {
    color: #eeeafa;
}

.binary-feature-tab.active {
    color: #fff;

    background:
        linear-gradient(100deg,
            #6740f2,
            #08c8ee);

    box-shadow:
        0 5px 18px rgba(77, 91, 240, .25);
}


/* =========================================================
   PANELS
========================================================= */

.binary-feature-panel {
    display: none;

    animation: binaryFeatureFade .35s ease;
}

.binary-feature-panel.active {
    display: block;
}

@keyframes binaryFeatureFade {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   CORE ENGINE GRID
========================================================= */

.binary-core-feature-grid {
    display: grid;

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

    gap: 16px;
}

.binary-core-feature-card {
    min-width: 0;

    min-height: 245px;

    padding: 20px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .90),
            rgba(23, 15, 49, .92));

    border: 1px solid rgba(102, 65, 198, .30);

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

.binary-core-feature-card:hover {
    transform: translateY(-3px);

    border-color: rgba(113, 71, 224, .55);

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


/* CORE ICON */

.binary-core-icon {
    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    border-radius: 12px;

    color: #9360ff;

    background: rgba(99, 54, 214, .12);

    border: 1px solid rgba(109, 62, 218, .35);
}

.binary-core-icon svg {
    width: 25px;

    height: 25px;
}

.binary-core-feature-card h3 {
    margin: 0 0 8px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}

.binary-core-feature-card p {
    margin: 0;

    color: #9d90bd;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   TWO COLUMN PANELS
========================================================= */

.binary-feature-two-column {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    padding: 4px 6px 0;
}

.binary-feature-column {
    min-width: 0;
}

.binary-feature-column h2 {
    margin: 0 0 17px;

    color: #f7f4fc;

    font-family: 'Outfit', sans-serif;

    font-size: 29px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.5px;
}

.binary-feature-intro {
    margin: 0 0 4px;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.binary-feature-column ul {
    list-style: none;

    margin: 0;

    padding: 0;
}

.binary-feature-column li {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin: 0;

    padding: 8px 0;

    color: #9e91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.55;
}

.binary-feature-column li::before {
    content: "✓";

    flex: 0 0 13px;

    color: #20d878;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .binary-core-feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .binary-feature-two-column {
        gap: 35px;
    }

}


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

@media (max-width: 650px) {

    .binary-features-section {
        padding: 70px 0 60px;
    }

    .binary-features-container {
        width: 92%;
    }

    .binary-features-header {
        margin-bottom: 40px;
    }

    .binary-features-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-features-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .binary-features-header p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* TABS */

    .binary-feature-tabs {
        width: 100%;

        justify-content: flex-start;

        margin-bottom: 25px;

        border-radius: 17px;
    }

    .binary-feature-tab {
        flex: 0 0 auto;

        padding: 8px 13px;

        font-size: 11px;
    }

    .binary-feature-tab svg {
        width: 13px;

        height: 13px;
    }


    /* CORE */

    .binary-core-feature-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .binary-core-feature-card {
        min-height: auto;

        padding: 19px;

        border-radius: 17px;
    }

    .binary-core-icon {
        width: 48px;

        height: 48px;

        margin-bottom: 13px;
    }

    .binary-core-feature-card h3 {
        font-size: 15px;
    }

    .binary-core-feature-card p {
        font-size: 12px;

        line-height: 1.7;
    }


    /* TWO COLUMN */

    .binary-feature-two-column {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 0;
    }

    .binary-feature-column h2 {
        font-size: 25px;
    }

    .binary-feature-intro {
        font-size: 13px;
    }

    .binary-feature-column li {
        font-size: 12px;

        padding: 7px 0;
    }

}

/* =========================================================
   ADVANCED BINARY COMPENSATION LOGIC
========================================================= */

.binary-logic-section {
    position: relative;

    padding: 90px 0 85px;

    background: #080411;

    overflow: hidden;
}

.binary-logic-container {
    position: relative;

    z-index: 2;

    width: min(1160px, 90%);

    margin: 0 auto;
}


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

.binary-logic-header {
    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;
}

.binary-logic-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-logic-badge svg {
    width: 14px;

    height: 14px;
}

.binary-logic-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-logic-header p {
    max-width: 720px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


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

.binary-logic-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px 30px;
}


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

.binary-logic-card {
    position: relative;

    min-width: 0;

    padding: 24px 24px 25px;

    border-radius: 19px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .92),
            rgba(24, 16, 50, .94));

    border: 1px solid rgba(105, 66, 203, .36);

    box-shadow:
        inset 0 0 35px rgba(94, 51, 170, .035);

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

.binary-logic-card:hover {
    border-color: rgba(115, 72, 226, .52);

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


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

.binary-logic-card-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;
}

.binary-logic-card-icon {
    width: 36px;

    height: 36px;

    flex: 0 0 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    color: #9860ff;

    background: rgba(91, 46, 204, .11);

    border: 1px solid rgba(103, 57, 217, .34);
}

.binary-logic-card-icon svg {
    width: 18px;

    height: 18px;
}

.binary-logic-card-title h3 {
    margin: 0;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   INNER NUMBERED CARDS
========================================================= */

.binary-logic-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* EACH 1 / 2 / 3 IS AN INNER CARD */

.binary-logic-item {
    display: grid;

    grid-template-columns: 22px 1fr;

    gap: 10px;

    align-items: start;

    padding: 13px 12px;

    border-radius: 7px;

    background: transparent;

    border: 1px solid transparent;

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


/* =========================================================
   INNER CARD HOVER
========================================================= */

.binary-logic-item:hover {
    background: rgba(51, 27, 96, .20);

    border-color: rgba(103, 61, 202, .28);

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .12);
}


/* =========================================================
   NUMBER
========================================================= */

.binary-logic-number {
    width: 21px;

    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 2px;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(135deg,
            #6848f5,
            #09c7ef);

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    box-shadow:
        0 0 10px rgba(63, 119, 242, .25);

    flex-shrink: 0;
}


/* =========================================================
   INNER CARD TEXT
========================================================= */

.binary-logic-item p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.7;
}

.binary-logic-item p strong {
    color: #f2eff9;

    font-weight: 700;
}


/* =========================================================
   OLD HIGHLIGHT CLASS
   NOW NORMAL — HIGHLIGHTS ONLY ON HOVER
========================================================= */

.binary-logic-highlight {
    padding: 13px 12px;

    border-radius: 7px;

    background: transparent;

    border: 1px solid transparent;

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

.binary-logic-highlight:hover {
    background: rgba(51, 27, 96, .20);

    border-color: rgba(103, 61, 202, .28);

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .12);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .binary-logic-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}


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

@media (max-width: 600px) {

    .binary-logic-section {
        padding: 70px 0 60px;
    }

    .binary-logic-container {
        width: 92%;
    }

    .binary-logic-header {
        margin-bottom: 40px;
    }

    .binary-logic-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-logic-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .binary-logic-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-logic-card {
        padding: 19px;

        border-radius: 17px;
    }

    .binary-logic-card-title {
        gap: 10px;

        margin-bottom: 19px;
    }

    .binary-logic-card-icon {
        width: 33px;

        height: 33px;

        flex-basis: 33px;
    }

    .binary-logic-card-title h3 {
        font-size: 15px;
    }

    .binary-logic-list {
        gap: 8px;
    }

    .binary-logic-item {
        grid-template-columns: 21px 1fr;

        gap: 8px;

        padding: 11px 10px;

        border-radius: 6px;
    }

    .binary-logic-item p {
        font-size: 12px;

        line-height: 1.7;
    }

    .binary-logic-number {
        width: 20px;

        height: 20px;

        font-size: 9px;
    }

}

/* =========================================================
   WHY CHOOSE MLM MIND
========================================================= */

.why-mlm-section {
    position: relative;

    padding: 90px 0 85px;

    background: #0b041a;

    overflow: hidden;
}

.why-mlm-container {
    position: relative;

    z-index: 2;

    width: min(1240px, 92%);

    margin: 0 auto;
}


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

.why-mlm-header {
    max-width: 820px;

    margin: 0 auto 52px;

    text-align: center;
}

.why-mlm-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.why-mlm-badge svg {
    width: 14px;

    height: 14px;
}

.why-mlm-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.why-mlm-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


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

.why-mlm-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 42px;

    align-items: start;
}


/* =========================================================
   LEFT FEATURES
========================================================= */

.why-mlm-features {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

.why-mlm-feature {
    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 12px;

    align-items: start;

    padding: 16px;

    margin: 0;

    border-radius: 11px;

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


/* =========================================================
   ALL FEATURE CARDS HOVER
========================================================= */

.why-mlm-feature:hover {
    background: rgba(31, 20, 64, .55);

    border-color: rgba(105, 66, 203, .40);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .12);
}


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

.why-mlm-feature-icon {
    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: #a16cff;

    background: rgba(89, 45, 198, .13);

    border: 1px solid rgba(102, 57, 216, .38);

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


/* ICON HOVER */

.why-mlm-feature:hover .why-mlm-feature-icon {
    background: rgba(89, 45, 198, .22);

    border-color: rgba(128, 82, 245, .55);

    box-shadow:
        0 0 18px rgba(108, 65, 230, .18);
}

.why-mlm-feature-icon svg {
    width: 20px;

    height: 20px;
}

.why-mlm-feature h3 {
    margin: 0 0 3px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}

.why-mlm-feature p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.75;
}

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

.why-mlm-feature-icon {
    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: #a16cff;

    background: rgba(89, 45, 198, .13);

    border: 1px solid rgba(102, 57, 216, .38);
}

.why-mlm-feature-icon svg {
    width: 20px;

    height: 20px;
}

.why-mlm-feature h3 {
    margin: 0 0 3px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}

.why-mlm-feature p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   RIGHT PERFORMANCE CARD
========================================================= */

.why-mlm-performance {
    padding: 31px 36px 32px;

    border-radius: 25px;

    background: #0d081e;

    border: 1px solid rgba(111, 70, 221, .36);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .20),
        inset 0 0 35px rgba(90, 48, 160, .035);
}

.why-performance-title {
    margin: 0 0 25px;

    color: #9e91bc;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .7px;
}


/* =========================================================
   PERFORMANCE ITEM
========================================================= */

.why-performance-item {
    margin-bottom: 18px;
}

.why-performance-label {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}

.why-performance-label span {
    color: #ddd8ed;

    font-size: 13px;

    line-height: 1.4;
}

.why-performance-label strong {
    color: #08c9ef;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.why-performance-bar {
    width: 100%;

    height: 8px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(77, 43, 143, .22);
}

.why-performance-bar span {
    display: block;

    width: 0;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            #7040f4 0%,
            #3d78ef 55%,
            #08c9ef 100%);

    animation:
        whyBarFill 1.4s cubic-bezier(.22, .61, .36, 1) forwards;

    animation-delay: .25s;
}


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

@keyframes whyBarFill {

    from {
        width: 0;
    }

    to {
        width: var(--bar-width);
    }

}


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

.why-performance-stats {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-top: 22px;
}

.why-performance-stat {
    min-height: 126px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 18px;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .92),
            rgba(24, 16, 50, .94));

    border: 1px solid rgba(105, 66, 203, .34);

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

.why-performance-stat:hover {
    transform: translateY(-3px);

    border-color: rgba(105, 66, 203, .55);
}

.why-performance-stat svg {
    width: 22px;

    height: 22px;

    margin-bottom: 10px;

    color: #8d5cff;
}

.why-performance-stat:nth-child(2) svg {
    color: #08c9ef;
}

.why-performance-stat strong {
    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;
}

.why-performance-stat span {
    margin-top: 5px;

    color: #9f91bf;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .why-mlm-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .why-mlm-performance {
        max-width: 700px;

        width: 100%;

        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .why-mlm-section {
        padding: 70px 0 60px;
    }

    .why-mlm-container {
        width: 92%;
    }

    .why-mlm-header {
        margin-bottom: 40px;
    }

    .why-mlm-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .why-mlm-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .why-mlm-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .why-mlm-content {
        gap: 30px;
    }

    .why-mlm-feature {
        grid-template-columns: 42px 1fr;

        gap: 10px;
    }

    .why-mlm-feature-icon {
        width: 40px;

        height: 40px;
    }

    .why-mlm-feature h3 {
        font-size: 14px;
    }

    .why-mlm-feature p {
        font-size: 12px;

        line-height: 1.7;
    }

    .why-mlm-performance {
        padding: 23px 18px;

        border-radius: 20px;
    }

    .why-performance-title {
        font-size: 12px;

        margin-bottom: 22px;
    }

    .why-performance-label span,
    .why-performance-label strong {
        font-size: 11px;
    }

    .why-performance-item {
        margin-bottom: 16px;
    }

    .why-performance-bar {
        height: 7px;
    }

    .why-performance-stats {
        gap: 10px;
    }

    .why-performance-stat {
        min-height: 105px;

        padding: 14px;

        border-radius: 16px;
    }

    .why-performance-stat strong {
        font-size: 19px;
    }

}

/* =========================================================
   REAL BINARY MLM CASE STUDY
========================================================= */

.case-study-section {
    position: relative;

    padding: 90px 0 85px;

    background: #080411;

    overflow: hidden;
}

.case-study-container {
    position: relative;

    z-index: 2;

    width: min(1150px, 92%);

    margin: 0 auto;
}


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

.case-study-header {
    max-width: 800px;

    margin: 0 auto 48px;

    text-align: center;
}

.case-study-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.case-study-badge svg {
    width: 14px;

    height: 14px;
}

.case-study-header h2 {
    margin: 0 0 14px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.4px;
}

.case-study-header p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   MAIN CASE STUDY CARD
========================================================= */

.case-study-card {
    display: grid;

    grid-template-columns: 280px 1fr;

    min-width: 0;

    margin-bottom: 34px;

    overflow: hidden;

    border-radius: 27px;

    background:
        linear-gradient(135deg,
            rgba(29, 19, 62, .96),
            rgba(20, 14, 43, .96));

    border: 1px solid rgba(104, 66, 201, .38);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .16);

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

.case-study-card:hover {
    border-color: rgba(116, 75, 222, .55);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .22);
}


/* =========================================================
   INFO PANEL
========================================================= */

.case-study-info {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    min-width: 0;

    padding: 35px 24px;

    background:
        linear-gradient(145deg,
            rgba(48, 31, 100, .70),
            rgba(24, 31, 69, .88));
}

.case-study-number {
    margin-bottom: 12px;

    color: #6156ff;

    font-family: 'Outfit', sans-serif;

    font-size: 64px;

    line-height: .95;

    font-weight: 700;

    letter-spacing: -2px;

    text-shadow:
        0 0 20px rgba(86, 73, 255, .18);
}


/* =========================================================
   TAG
========================================================= */

.case-study-tag {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 6px;

    padding: 5px 10px;

    margin-bottom: 17px;

    border-radius: 20px;

    border: 1px solid rgba(0, 201, 239, .32);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;
}

.case-study-tag svg {
    width: 12px;

    height: 12px;
}


/* =========================================================
   INFO TITLE
========================================================= */

.case-study-info h3 {
    margin: 0;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -.3px;
}

.case-study-meta {
    margin: 20px 0 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   DETAILS AREA
========================================================= */

.case-study-details {
    min-width: 0;

    padding: 4px 0 18px;
}


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

.case-study-description {
    padding: 0 0 0 0;
}

.case-study-description p {
    margin: 0 0 14px;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.75;
}

.case-study-description p strong {
    color: #f5f2fb;

    font-weight: 700;
}

.case-study-description h4 {
    margin: 10px 0 16px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 14px;

    font-weight: 700;
}


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

.case-study-results {
    display: grid;

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

    gap: 16px;

    padding: 0;
}


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

.case-result-card {
    min-width: 0;

    min-height: 108px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 14px 12px;

    text-align: center;

    border-radius: 12px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 65, .92),
            rgba(25, 17, 52, .94));

    border: 1px solid rgba(105, 66, 203, .32);

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

.case-result-card:hover {
    transform: translateY(-3px);

    border-color: rgba(112, 70, 220, .55);

    background:
        linear-gradient(135deg,
            rgba(38, 24, 78, .96),
            rgba(27, 18, 58, .96));
}

.case-result-card strong {
    margin-bottom: 6px;

    font-family: 'Outfit', sans-serif;

    font-size: 25px;

    line-height: 1.1;

    font-weight: 700;
}

.result-green {
    color: #20d879;
}

.result-cyan {
    color: #08c9ef;
}

.result-purple {
    color: #9762ff;
}

.case-result-card h5 {
    margin: 0 0 5px;

    color: #f4f1fb;

    font-family: 'Outfit', sans-serif;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 700;
}

.case-result-card span {
    color: #9386b2;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   DETAILS PADDING
========================================================= */

.case-study-one .case-study-details {
    padding: 5px 0 18px;
}

.case-study-one .case-study-description {
    padding: 0 0 0 0;
}

.case-study-one .case-study-description p,
.case-study-one .case-study-description h4 {
    margin-left: 0;

    margin-right: 0;
}

.case-study-one .case-study-results {
    padding: 0;
}


/* =========================================================
   SECOND CASE STUDY
========================================================= */

.case-study-two {
    grid-template-columns: 1fr 280px;
}

.case-study-two .case-study-info {
    order: 2;
}

.case-study-two .case-study-details {
    order: 1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .case-study-card,
    .case-study-two {
        grid-template-columns: 230px 1fr;
    }

    .case-study-two {
        grid-template-columns: 1fr 230px;
    }

    .case-study-info {
        padding: 30px 20px;
    }

    .case-study-number {
        font-size: 55px;
    }

    .case-study-info h3 {
        font-size: 17px;
    }

    .case-study-description p {
        font-size: 13px;
    }

    .case-study-results {
        gap: 10px;
    }

}


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

@media (max-width: 700px) {

    .case-study-section {
        padding: 70px 0 60px;
    }

    .case-study-container {
        width: 92%;
    }

    .case-study-header {
        margin-bottom: 38px;
    }

    .case-study-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .case-study-header h2 {
        font-size: 35px;

        letter-spacing: -1px;
    }

    .case-study-header p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* ALL CARDS STACK */

    .case-study-card,
    .case-study-two {
        display: flex;

        flex-direction: column;

        margin-bottom: 25px;

        border-radius: 20px;
    }


    /* INFO ALWAYS TOP */

    .case-study-info,
    .case-study-two .case-study-info {
        order: 1;

        padding: 25px 20px;

        width: 100%;
    }

    .case-study-details,
    .case-study-two .case-study-details {
        order: 2;

        width: 100%;

        padding: 20px;
    }


    .case-study-number {
        font-size: 50px;

        margin-bottom: 10px;
    }

    .case-study-tag {
        font-size: 9px;

        padding: 5px 9px;

        margin-bottom: 13px;
    }

    .case-study-info h3 {
        font-size: 17px;
    }

    .case-study-meta {
        margin-top: 15px;

        font-size: 11px;
    }


    /* DESCRIPTION */

    .case-study-description p {
        font-size: 12px;

        line-height: 1.7;

        margin-bottom: 13px;
    }

    .case-study-description h4 {
        font-size: 13px;

        margin-top: 10px;
    }


    /* RESULT CARDS */

    .case-study-results {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .case-result-card {
        min-height: 95px;

        padding: 15px;
    }

    .case-result-card strong {
        font-size: 23px;
    }

    .case-result-card h5 {
        font-size: 12px;
    }

    .case-result-card span {
        font-size: 10px;
    }

}

/* =========================================================
   PLAN COMPARISON
========================================================= */

.plan-comparison-section {
    position: relative;

    padding: 90px 0 85px;

    background: #140b2a;

    overflow: hidden;
}

.plan-comparison-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 92%);

    margin: 0 auto;
}


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

.plan-comparison-header {
    max-width: 850px;

    margin: 0 auto 48px;

    text-align: center;
}

.plan-comparison-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.plan-comparison-badge svg {
    width: 14px;

    height: 14px;
}

.plan-comparison-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.14;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.plan-comparison-header p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.plan-table-wrap {
    width: 100%;

    overflow-x: auto;

    border-radius: 16px 16px 0 0;

    scrollbar-width: thin;

    scrollbar-color: #37215e transparent;
}

.plan-table-wrap::-webkit-scrollbar {
    height: 5px;
}

.plan-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.plan-table-wrap::-webkit-scrollbar-thumb {
    background: #37215e;

    border-radius: 10px;
}


/* =========================================================
   TABLE
========================================================= */

.plan-comparison-table {
    width: 100%;

    min-width: 900px;

    border-collapse: separate;

    border-spacing: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
}


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

.plan-comparison-table thead th {
    height: 55px;

    padding: 0 19px;

    color: #eeeafa;

    font-family: 'Outfit', sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    background:
        linear-gradient(90deg,
            #27185b,
            #172c46);

    border: 0;
}

.plan-comparison-table thead th:first-child {
    border-radius: 15px 0 0 0;
}

.plan-comparison-table thead th:last-child {
    border-radius: 0 15px 0 0;
}

.plan-comparison-table thead th:not(:first-child) {
    text-align: center;
}

.plan-comparison-table thead th svg {
    width: 14px;

    height: 14px;

    vertical-align: -2px;

    margin-right: 4px;
}


/* BINARY HEADER */

.plan-comparison-table thead .binary-column {
    color: #08c9ef;

    background:
        linear-gradient(90deg,
            #3b247d,
            #30206e);
}


/* =========================================================
   TABLE BODY
========================================================= */

.plan-comparison-table tbody td {
    height: 56px;

    padding: 13px 19px;

    color: #9f91bf;

    text-align: center;

    border-bottom: 1px solid rgba(255, 255, 255, .065);

    background: rgba(9, 5, 18, .35);
}

.plan-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}


/* FEATURE COLUMN */

.plan-comparison-table tbody .feature-name {
    width: 285px;

    color: #e8e4f1;

    font-family: 'Outfit', sans-serif;

    font-weight: 700;

    text-align: left;

    white-space: nowrap;
}


/* BINARY COLUMN */

.plan-comparison-table tbody .binary-cell {
    color: #9f91bf;

    background:
        rgba(50, 30, 98, .22);
}


/* =========================================================
   ROW HOVER
========================================================= */

.plan-comparison-table tbody tr {
    transition:
        background .2s ease;
}

.plan-comparison-table tbody tr:hover td {
    background:
        rgba(40, 25, 76, .35);
}

.plan-comparison-table tbody tr:hover .binary-cell {
    background:
        rgba(59, 36, 112, .38);
}


/* =========================================================
   STATUS COLORS
========================================================= */

.plan-comparison-table .positive {
    color: #20d879;
}

.plan-comparison-table .positive span {
    color: #9f91bf;
}

.plan-comparison-table .negative {
    color: #ff5151;
}

.plan-comparison-table .negative span {
    color: #9f91bf;
}

.plan-comparison-table .highlight-green {
    color: #20d879;

    font-weight: 700;
}

.plan-comparison-table .normal-text {
    color: #9f91bf;

    font-weight: 400;
}

.plan-comparison-table .na {
    color: #e5b72e;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.plan-comparison-note {
    margin-top: 25px;

    padding: 18px 24px 20px;

    border-radius: 11px;

    background:
        rgba(39, 20, 78, .18);

    border: 1px solid rgba(105, 66, 203, .34);

    border-left: 3px solid #7444f4;
}

.plan-comparison-note h3 {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0 0 8px;

    color: #9a5cff;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    font-weight: 700;
}

.plan-comparison-note h3 svg {
    width: 16px;

    height: 16px;
}

.plan-comparison-note p {
    margin: 0;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;
}

.plan-comparison-note a {
    color: #08c9ef;

    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}

.plan-comparison-note a:hover {
    color: #55ddff;

    text-decoration: underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .plan-comparison-section {
        padding: 75px 0 65px;
    }

    .plan-comparison-header h2 {
        font-size: 40px;
    }

    .plan-comparison-header p {
        font-size: 15px;
    }

    .plan-comparison-note p {
        font-size: 14px;
    }

}


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

@media (max-width: 600px) {

    .plan-comparison-section {
        padding: 70px 0 60px;
    }

    .plan-comparison-container {
        width: 92%;
    }

    .plan-comparison-header {
        margin-bottom: 35px;
    }

    .plan-comparison-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .plan-comparison-header h2 {
        font-size: 34px;

        line-height: 1.15;

        letter-spacing: -1px;
    }

    .plan-comparison-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .desktop-only {
        display: none;
    }

    .plan-table-wrap {
        border-radius: 13px 13px 0 0;
    }

    .plan-comparison-table {
        min-width: 850px;

        font-size: 12px;
    }

    .plan-comparison-table thead th {
        height: 52px;

        padding: 0 14px;

        font-size: 12px;
    }

    .plan-comparison-table tbody td {
        height: 54px;

        padding: 11px 14px;

        font-size: 12px;
    }

    .plan-comparison-table tbody .feature-name {
        width: 230px;

        font-size: 12px;
    }

    .plan-comparison-note {
        padding: 16px 17px 17px;

        margin-top: 20px;
    }

    .plan-comparison-note h3 {
        font-size: 14px;
    }

    .plan-comparison-note p {
        font-size: 12px;

        line-height: 1.75;
    }

}

/* =========================================================
   PLAN COMPARISON
========================================================= */

.plan-comparison-section {
    position: relative;

    padding: 105px 0 90px;

    background: #0e0720;

    overflow: hidden;
}

.plan-comparison-container {
    position: relative;

    z-index: 2;

    width: min(1198px, 92%);

    margin: 0 auto;
}


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

.plan-comparison-header {
    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;
}

.plan-comparison-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .42);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .9px;
}

.plan-comparison-badge svg {
    width: 14px;

    height: 14px;
}

.plan-comparison-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.13;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.plan-comparison-header p {
    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.plan-table-wrap {
    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    border-radius: 17px 17px 0 0;

    scrollbar-width: thin;

    scrollbar-color: #4b25a0 transparent;
}


/* =========================================================
   TABLE
========================================================= */

.plan-comparison-table {
    width: 100%;

    min-width: 900px;

    border-collapse: separate;

    border-spacing: 0;

    color: #9e91bd;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    table-layout: fixed;
}


/* =========================================================
   COLUMN WIDTH
========================================================= */

.plan-comparison-table th:first-child,
.plan-comparison-table td:first-child {
    width: 24%;
}

.plan-comparison-table th:not(:first-child),
.plan-comparison-table td:not(:first-child) {
    width: 25.333%;
}


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

.plan-comparison-table thead th {
    height: 56px;

    padding: 0 19px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 700;

    text-align: center;

    white-space: nowrap;

    background:
        linear-gradient(100deg,
            #21154c,
            #102238);

    border-bottom: 1px solid rgba(104, 66, 203, .18);
}

.plan-comparison-table thead th:first-child {
    text-align: left;

    border-radius: 17px 0 0 0;
}

.plan-comparison-table thead th:last-child {
    border-radius: 0 17px 0 0;
}


/* HEADER ICON */

.plan-comparison-table thead th svg {
    width: 14px;

    height: 14px;

    margin-right: 4px;

    vertical-align: -2px;
}


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

.plan-comparison-table thead .binary-heading {
    color: #08c9ef;

    background:
        linear-gradient(100deg,
            #39217f,
            #35216f);
}


/* =========================================================
   BODY
========================================================= */

.plan-comparison-table tbody td {
    height: 56px;

    padding: 13px 19px;

    color: #9e91bd;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

    text-align: center;

    vertical-align: middle;

    border-bottom: 1px solid rgba(255, 255, 255, .055);

    background: rgba(9, 5, 18, .35);
}


/* =========================================================
   FEATURE NAME
========================================================= */

.plan-comparison-table tbody .feature-name {
    color: #e8e3f3;

    font-family: 'Outfit', sans-serif;

    font-size: 13px;

    font-weight: 700;

    text-align: left;

    white-space: nowrap;
}


/* =========================================================
   BINARY COLUMN
========================================================= */
.plan-comparison-table,
.plan-comparison-table th,
.plan-comparison-table td {
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
}

.plan-comparison-table tbody .binary-column {
    color: #a095bb;

    background:
        rgba(43, 27, 86, .30);

    border-left: 1px solid rgba(105, 66, 203, .05);

    border-right: 1px solid rgba(105, 66, 203, .05);
}


/* =========================================================
   ROW HOVER
========================================================= */

.plan-comparison-table tbody tr {
    transition: background .22s ease;
}

.plan-comparison-table tbody tr:hover td {
    background:
        rgba(30, 19, 59, .52);
}

.plan-comparison-table tbody tr:hover .binary-column {
    background:
        rgba(53, 33, 104, .42);
}


/* =========================================================
   LAST ROW
========================================================= */

.plan-comparison-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   COLORS
========================================================= */

.plan-check {
    color: #20d879;

    font-size: 17px;

    font-weight: 700;

    margin-right: 2px;
}

.plan-cross {
    color: #ff4c59;

    font-size: 16px;

    font-weight: 700;

    margin-right: 2px;
}

.plan-na {
    color: #e2ae27;

    font-size: 14px;

    font-weight: 700;

    margin-right: 2px;
}

.plan-green {
    color: #20d879;

    font-weight: 700;
}


/* =========================================================
   BOTTOM PLAN BOX
========================================================= */

.plan-choice-box {
    position: relative;

    margin-top: 25px;

    padding: 17px 25px 19px;

    border-radius: 11px;

    background:
        rgba(42, 23, 82, .23);

    border: 1px solid rgba(108, 67, 216, .34);

    border-left: 3px solid #7545f5;

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

.plan-choice-box:hover {
    background:
        rgba(50, 28, 96, .32);

    border-color:
        rgba(119, 76, 231, .55);

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

    transform: translateY(-2px);
}


/* =========================================================
   BOX TITLE
========================================================= */

.plan-choice-box h3 {
    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0 0 8px;

    color: #9b5cff;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;
}

.plan-choice-box h3 svg {
    width: 16px;

    height: 16px;
}


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

.plan-choice-box p {
    margin: 0 0 5px;

    color: #a096bd;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 400;
}

.plan-choice-box p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CONSULTATION LINK
========================================================= */

.plan-choice-box a {
    color: #08c9ef;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.plan-choice-box a:hover {
    color: #55ddff;

    text-decoration: underline;

    text-shadow:
        0 0 12px rgba(8, 201, 239, .25);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .plan-comparison-section {
        padding: 80px 0 70px;
    }

    .plan-comparison-header h2 {
        font-size: 42px;
    }

    .plan-comparison-header p {
        font-size: 15px;
    }

}


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

@media (max-width: 600px) {

    .plan-comparison-section {
        padding: 70px 0 60px;
    }

    .plan-comparison-container {
        width: 92%;
    }

    .plan-comparison-header {
        margin-bottom: 35px;
    }

    .plan-comparison-badge {
        padding: 8px 13px;

        font-size: 10px;
    }

    .plan-comparison-header h2 {
        font-size: 34px;

        line-height: 1.17;

        letter-spacing: -1px;
    }

    .plan-comparison-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .desktop-break {
        display: none;
    }


    /* TABLE */

    .plan-table-wrap {
        overflow-x: auto;

        border-radius: 13px 13px 0 0;

        -webkit-overflow-scrolling: touch;
    }

    .plan-comparison-table {
        min-width: 900px;

        font-size: 12px;
    }

    .plan-comparison-table thead th {
        height: 52px;

        padding: 0 14px;

        font-size: 12px;
    }

    .plan-comparison-table tbody td {
        height: 54px;

        padding: 12px 14px;

        font-size: 12px;
    }

    .plan-comparison-table tbody .feature-name {
        font-size: 12px;
    }

    .plan-check {
        font-size: 15px;
    }

    .plan-cross {
        font-size: 14px;
    }


    /* BOTTOM BOX */

    .plan-choice-box {
        margin-top: 18px;

        padding: 16px 16px 17px;

        border-radius: 10px;
    }

    .plan-choice-box h3 {
        font-size: 14px;
    }

    .plan-choice-box p {
        font-size: 12px;

        line-height: 1.75;
    }

}

/* =========================================================
   CLIENT TESTIMONIALS
========================================================= */

.binary-testimonials {
    position: relative;

    padding: 85px 0 70px;

    background: #080411;

    overflow: hidden;
}

.binary-testimonials-container {
    position: relative;

    z-index: 2;

    width: min(1175px, 90%);

    margin: 0 auto;
}


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

.binary-testimonials-header {
    max-width: 850px;

    margin: 0 auto 48px;

    text-align: center;
}

.binary-testimonials-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 18px;

    border-radius: 25px;

    border: 1px solid rgba(0, 201, 239, .40);

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .9px;
}

.binary-testimonials-badge svg {
    width: 14px;

    height: 14px;
}

.binary-testimonials-header h2 {
    margin: 0 0 17px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.binary-testimonials-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   SLIDER
========================================================= */

.binary-testimonial-slider {
    position: relative;

    width: 100%;

    min-height: 285px;
}

.binary-testimonial-slide {
    display: none;

    width: 100%;

    min-height: 285px;

    padding: 42px 48px 38px;

    border-radius: 27px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .95),
            rgba(25, 17, 50, .97));

    border: 1px solid rgba(105, 66, 203, .38);

    box-shadow:
        inset 0 0 35px rgba(94, 51, 170, .035);

    animation: binaryTestimonialFade .35s ease;
}

.binary-testimonial-slide.active {
    display: block;
}

@keyframes binaryTestimonialFade {

    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   STARS
========================================================= */

.binary-testimonial-stars {
    margin-bottom: 18px;

    color: #ffb000;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =========================================================
   QUOTE
========================================================= */

.binary-testimonial-quote {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 5px;

    margin-bottom: 28px;
}

.binary-testimonial-quote .quote-mark {
    flex: 0 0 auto;

    margin-top: -8px;

    color: #7545ff;

    font-family: Georgia, serif;

    font-size: 47px;

    line-height: 1;

    font-weight: 700;
}

.binary-testimonial-quote p {
    margin: 0;

    color: #d8d1e8;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.7;

    font-style: italic;

    font-weight: 500;
}


/* =========================================================
   AUTHOR
========================================================= */

.binary-testimonial-author {
    display: flex;

    align-items: center;

    gap: 14px;
}

.binary-testimonial-avatar {
    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #6548f5,
            #08bfe9);

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    box-shadow:
        0 0 18px rgba(43, 130, 255, .20);
}

.binary-testimonial-author h3 {
    margin: 0 0 2px;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;
}

.binary-testimonial-author p {
    margin: 0;

    color: #9689b5;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   CONTROLS
========================================================= */

.binary-testimonial-controls {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 31px;
}

.binary-testimonial-arrow {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border-radius: 50%;

    border: 1px solid rgba(112, 69, 232, .40);

    background: rgba(20, 12, 42, .80);

    color: #fff;

    cursor: pointer;

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

.binary-testimonial-arrow svg {
    width: 21px;

    height: 21px;
}

.binary-testimonial-arrow:hover {
    transform: translateY(-2px);

    border-color: #7445ff;

    background: rgba(41, 24, 78, .95);
}


/* =========================================================
   DOTS
========================================================= */

.binary-testimonial-dots {
    display: flex;

    align-items: center;

    gap: 8px;
}

.binary-testimonial-dot {
    width: 8px;

    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #66577f;

    cursor: pointer;

    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease;
}

.binary-testimonial-dot.active {
    width: 24px;

    border-radius: 8px;

    background:
        linear-gradient(90deg,
            #6845f5,
            #08c8ef);
}


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

@media (max-width: 600px) {

    .binary-testimonials {
        padding: 70px 0 55px;
    }

    .binary-testimonials-container {
        width: 92%;
    }

    .binary-testimonials-header {
        margin-bottom: 35px;
    }

    .binary-testimonials-badge {
        font-size: 10px;

        padding: 8px 13px;
    }

    .binary-testimonials-header h2 {
        font-size: 35px;

        line-height: 1.15;

        letter-spacing: -1px;
    }

    .binary-testimonials-header p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-testimonial-slider {
        min-height: 360px;
    }

    .binary-testimonial-slide {
        min-height: 360px;

        padding: 28px 22px;

        border-radius: 21px;
    }

    .binary-testimonial-stars {
        margin-bottom: 15px;

        font-size: 12px;
    }

    .binary-testimonial-quote {
        gap: 3px;

        margin-bottom: 25px;
    }

    .binary-testimonial-quote .quote-mark {
        font-size: 37px;
    }

    .binary-testimonial-quote p {
        font-size: 13px;

        line-height: 1.7;
    }

    .binary-testimonial-avatar {
        width: 42px;

        height: 42px;

        flex-basis: 42px;

        font-size: 15px;
    }

    .binary-testimonial-author h3 {
        font-size: 14px;
    }

    .binary-testimonial-author p {
        font-size: 11px;
    }

    .binary-testimonial-controls {
        margin-top: 25px;

        gap: 13px;
    }

    .binary-testimonial-arrow {
        width: 42px;

        height: 42px;
    }

}

/* =========================================================
   BINARY FAQ SECTION
========================================================= */

.binary-faq-section {
    position: relative;
    padding: 95px 0 80px;
    background: #0d051e;
    overflow: hidden;
}

.binary-faq-container {
    width: min(1160px, 90%);
    margin: 0 auto;
}


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

.binary-faq-header {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.binary-faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 17px;
    margin-bottom: 18px;

    border: 1px solid rgba(0, 201, 239, .40);
    border-radius: 25px;

    background: rgba(0, 174, 219, .07);

    color: #08c8ef;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .9px;
}

.binary-faq-badge span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #08c8ef;
    color: #080411;

    font-size: 9px;
    font-weight: 800;
}

.binary-faq-header h2 {
    margin: 0 0 18px;

    color: #fff;

    font-family: 'Outfit', sans-serif;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.binary-faq-header p {
    margin: 0 auto;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
========================================================= */

.binary-faq-list {
    width: min(860px, 100%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.binary-faq-item {
    overflow: hidden;

    border: 1px solid rgba(105, 66, 203, .36);
    border-radius: 12px;

    background:
        linear-gradient(135deg,
            rgba(31, 20, 64, .90),
            rgba(24, 16, 50, .94));

    box-shadow:
        inset 0 0 35px rgba(94, 51, 170, .025);

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

.binary-faq-item:hover {
    border-color: rgba(115, 72, 226, .55);

    box-shadow:
        0 12px 35px rgba(55, 27, 120, .12);
}


/* =========================================================
   SUMMARY
========================================================= */

.binary-faq-item summary {
    position: relative;

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

    min-height: 64px;

    padding: 0 24px;

    cursor: pointer;

    list-style: none;

    color: #f5f2fb;

    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;

    user-select: none;
}

.binary-faq-item summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   PLUS / CLOSE BUTTON
========================================================= */

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border: 1px solid #7b4dff;
    border-radius: 50%;

    color: #a56cff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;

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


/* =========================================================
   OPEN STATE
========================================================= */

.binary-faq-item[open] {
    border-color: rgba(115, 72, 226, .65);

    box-shadow:
        0 0 28px rgba(91, 46, 204, .10);
}

.binary-faq-item[open] .faq-icon {
    transform: rotate(180deg);

    background:
        linear-gradient(135deg,
            #6848f5,
            #09c7ef);

    border-color: transparent;

    color: #fff;

    font-size: 0;
}

.binary-faq-item[open] .faq-icon::after {
    content: "×";

    font-size: 16px;
    line-height: 1;
}


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

.binary-faq-answer {
    padding: 0 24px 24px;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.8;

    animation: faqAnswer .35s ease both;
}

@keyframes faqAnswer {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 600px) {

    .binary-faq-section {
        padding: 70px 0 60px;
    }

    .binary-faq-container {
        width: 92%;
    }

    .binary-faq-header {
        margin-bottom: 38px;
    }

    .binary-faq-badge {
        padding: 8px 13px;
        font-size: 10px;
    }

    .binary-faq-header h2 {
        font-size: 34px;
        line-height: 1.18;
        letter-spacing: -1px;
    }

    .binary-faq-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .faq-desktop {
        display: none;
    }

    .binary-faq-list {
        gap: 10px;
    }

    .binary-faq-item {
        border-radius: 11px;
    }

    .binary-faq-item summary {
        min-height: 60px;
        padding: 0 16px;

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

    .faq-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;

        font-size: 15px;
    }

    .binary-faq-answer {
        padding: 0 16px 19px;

        font-size: 12px;
        line-height: 1.75;
    }

}

/* =========================================================
   BINARY MLM CTA SECTION
========================================================= */

.binary-cta-section {
    position: relative;

    padding: 25px 0 55px;

    background: #080411;

    overflow: hidden;
}

.binary-cta-container {
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* =========================================================
   MAIN CTA CARD
========================================================= */

.binary-cta-content {
    position: relative;

    padding: 65px 35px 66px;

    overflow: hidden;

    text-align: center;

    border-radius: 27px;

    border: 1px solid rgba(105, 66, 203, .45);

    background:
        radial-gradient(circle at 0% 0%,
            rgba(104, 72, 245, .13),
            transparent 38%),
        radial-gradient(circle at 100% 100%,
            rgba(0, 199, 239, .08),
            transparent 38%),
        linear-gradient(135deg,
            #17102f,
            #0c1729);

    box-shadow:
        inset 0 0 50px rgba(94, 51, 170, .035);
}


/* =========================================================
   MINI TITLE
========================================================= */

.binary-cta-mini-title {
    display: flex;

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

    gap: 5px;

    margin-bottom: 8px;

    color: #d8d1e8;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 500;
}

.binary-cta-mini-title span {
    font-size: 15px;
}


/* =========================================================
   HEADING
========================================================= */

.binary-cta-content h2 {
    margin: 0 0 16px;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1.5px;
}


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

.binary-cta-content>p {
    margin: 0 auto;

    color: #a294c1;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   BUTTON AREA
========================================================= */

.binary-cta-buttons {
    display: flex;

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

    gap: 12px;

    margin-top: 33px;
}


/* =========================================================
   COMMON BUTTON
========================================================= */

.binary-cta-btn {
    display: inline-flex;

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

    gap: 9px;

    min-width: 235px;

    height: 60px;

    padding: 0 28px;

    border-radius: 32px;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

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

.binary-cta-btn span {
    font-size: 15px;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.binary-cta-primary {
    color: #fff;

    border: 0;

    background:
        linear-gradient(100deg,
            #6848f5,
            #09c7ef);

    box-shadow:
        0 10px 30px rgba(70, 83, 245, .32);
}

.binary-cta-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(70, 83, 245, .45);
}


/* =========================================================
   PHONE BUTTON
========================================================= */

.binary-cta-phone {
    color: #f4f1fa;

    border: 1px solid rgba(170, 166, 184, .38);

    background: rgba(10, 15, 29, .40);
}

.binary-cta-phone:hover {
    color: #fff;

    transform: translateY(-3px);

    border-color: rgba(140, 132, 170, .65);

    background: rgba(25, 25, 45, .65);
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.binary-cta-whatsapp {
    color: #071019;

    border: 0;

    background:
        linear-gradient(100deg,
            #08c8ef,
            #06d5ee);

    box-shadow:
        0 10px 30px rgba(0, 201, 239, .23);
}

.binary-cta-whatsapp:hover {
    color: #071019;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 201, 239, .38);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.binary-cta-trust {
    display: flex;

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

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 32px;
}

.binary-cta-trust div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #9f91bf;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1.5;

    white-space: nowrap;
}

.binary-cta-trust span {
    display: inline-flex;

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

    width: 14px;
    height: 14px;

    border-radius: 50%;

    color: #071019;

    background: #20c875;

    font-size: 10px;

    font-weight: 800;
}


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

@media (max-width: 900px) {

    .binary-cta-content {
        padding: 55px 25px;
    }

    .binary-cta-content h2 {
        font-size: 38px;
    }

    .binary-cta-buttons {
        flex-wrap: wrap;
    }

    .binary-cta-btn {
        min-width: 220px;
    }

    .binary-cta-trust {
        gap: 15px 22px;
    }

}


@media (max-width: 600px) {

    .binary-cta-section {
        padding: 20px 0 50px;
    }

    .binary-cta-container {
        width: 92%;
    }

    .binary-cta-content {
        padding: 45px 18px 42px;

        border-radius: 20px;
    }

    .binary-cta-mini-title {
        font-size: 13px;
    }

    .binary-cta-content h2 {
        font-size: 32px;

        line-height: 1.18;

        letter-spacing: -1px;
    }

    .binary-cta-content>p {
        font-size: 13px;

        line-height: 1.75;
    }

    .binary-cta-desktop {
        display: none;
    }

    .binary-cta-buttons {
        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 27px;
    }

    .binary-cta-btn {
        width: 100%;

        min-width: 0;

        height: 54px;

        padding: 0 20px;

        font-size: 13px;
    }

    .binary-cta-trust {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 13px 10px;

        margin-top: 27px;
    }

    .binary-cta-trust div {
        justify-content: flex-start;

        font-size: 10px;

        white-space: normal;
    }

}

/* =========================================================
   CONTACT INFO SECTION
========================================================= */

.binary-contact-section {
    position: relative;

    padding: 48px 0 55px;

    background: #0c091b;

    overflow: hidden;
}

.binary-contact-container {
    width: min(1200px, 90%);

    min-height: 116px;

    margin: 0 auto;

    padding: 25px 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1.65fr 1.35fr;

    align-items: center;

    gap: 25px;

    border: 1px solid rgba(105, 66, 203, .36);

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            rgba(13, 9, 32, .96),
            rgba(11, 8, 27, .98));

    box-shadow:
        inset 0 0 35px rgba(94, 51, 170, .025);
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.binary-contact-item {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 13px;
}


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

.binary-contact-icon {
    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    border: 1px solid rgba(112, 70, 222, .48);

    background:
        rgba(92, 52, 180, .14);

    color: #e5dcff;

    font-size: 18px;

    font-weight: 700;

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

.binary-contact-item:hover .binary-contact-icon {
    transform: translateY(-2px);

    border-color: rgba(126, 79, 235, .7);

    background:
        rgba(105, 66, 203, .22);
}


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

.binary-contact-text {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.binary-contact-text span {
    color: #9387b2;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 500;

    letter-spacing: .5px;
}

.binary-contact-text strong {
    color: #f4f1fa;

    font-family: 'Outfit', sans-serif;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 700;
}


/* =========================================================
   ADDRESS
========================================================= */

.binary-contact-address {
    padding-left: 2px;
}


/* =========================================================
   SUPPORT
========================================================= */

.binary-contact-support {
    padding-left: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .binary-contact-container {
        grid-template-columns: 1fr 1fr;

        gap: 25px 35px;

        padding: 28px;
    }

}


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

@media (max-width: 600px) {

    .binary-contact-section {
        padding: 35px 0 45px;
    }

    .binary-contact-container {
        width: 92%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 22px;

        padding: 23px 20px;

        border-radius: 17px;
    }

    .binary-contact-item {
        gap: 12px;
    }

    .binary-contact-icon {
        width: 38px;

        height: 38px;

        flex-basis: 38px;

        font-size: 16px;
    }

    .binary-contact-text span {
        font-size: 10px;
    }

    .binary-contact-text strong {
        font-size: 13px;

        line-height: 1.45;
    }

}

/* =========================================== BOARD MLM HERO ===================================== */

.board-hero {
    position: relative;
    min-height: 720px;
    padding: 95px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 45%, rgba(255, 170, 0, 0.055), transparent 28%),
        linear-gradient(180deg, #100c00 0%, #0b0800 100%);
    color: #fff;
}

/* BACKGROUND PLUS GRID */

.board-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .32;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255, 166, 0, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 166, 0, .025) 1px, transparent 1px);

    background-size: 45px 45px;
}

.board-hero-grid::after {
    content: "+ + + + + + + + + + + + + + + + + +";
    position: absolute;
    inset: 0;
    color: rgba(255, 166, 0, .07);
    font-size: 17px;
    letter-spacing: 28px;
    line-height: 45px;
    overflow: hidden;
}


/* CONTAINER */

.board-hero-container {
    position: relative;
    z-index: 2;
    width: min(1190px, 90%);
    margin: auto;

    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 55px;
    align-items: center;
}


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

.board-hero-content {
    padding-top: 5px;
}


/* BADGE */

.board-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 20px;
    margin-bottom: 27px;

    border: 1px solid rgba(255, 166, 0, .45);
    border-radius: 30px;

    background: rgba(255, 166, 0, .055);

    color: #f7a600;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;

    box-shadow:
        inset 0 0 18px rgba(255, 166, 0, .025),
        0 0 25px rgba(255, 166, 0, .035);
}

.badge-trophy {
    font-size: 14px;
}


/* MAIN HEADING */

.board-hero-title {
    margin: 0;

    color: #fff2c2;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(42px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.8px;
}


/* SMALL LINE */

.board-hero-line {
    width: 55px;
    height: 6px;
    margin: 34px 0 34px;

    background: #fff0bc;
}


/* MAIN ORANGE HEADING */

.board-hero-main-title {
    margin: 0 0 25px;

    font-family: 'Outfit', sans-serif;
    font-size: clamp(42px, 4.15vw, 57px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.7px;
}

.board-hero-main-title span {
    display: block;
    color: #ff9d16;
}

.board-hero-main-title strong {
    display: block;
    color: #fff0c0;
    font-weight: 700;
}


/* DESCRIPTION */

.board-hero-description {
    max-width: 600px;
    margin: 0;

    color: #b9a77b;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
}

.board-hero-description b {
    color: #c9b982;
    font-weight: 700;
}


/* =========================================================
   BUTTONS
========================================================= */

.board-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    margin-top: 30px;
}

.board-btn {
    min-height: 61px;
    padding: 0 28px;

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

    border-radius: 32px;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

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

.board-btn svg {
    width: 18px;
    height: 18px;
}


/* PRIMARY */

.board-btn-primary {
    color: #080500;
    background: linear-gradient(135deg, #ffb01b, #ff8f12);

    box-shadow:
        0 12px 30px rgba(255, 153, 0, .22);
}

.board-btn-primary:hover {
    color: #080500;
    transform: translateY(-3px);
    box-shadow:
        0 17px 35px rgba(255, 153, 0, .34);
}


/* SECONDARY */

.board-btn-secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
}

.board-btn-secondary:hover {
    color: #fff;
    transform: translateY(-3px);
    border-color: rgba(255, 166, 0, .45);
    background: rgba(255, 166, 0, .09);
}


/* LEARN */

.board-btn-learn {
    min-height: 51px;
    padding: 0 22px;

    color: #e7a000;

    border: 1px solid rgba(255, 166, 0, .35);
    background: rgba(255, 166, 0, .055);

    font-size: 14px;
}

.board-btn-learn:hover {
    color: #ffb21b;
    transform: translateY(-3px);
    background: rgba(255, 166, 0, .11);
}


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

.board-hero-stats {
    display: flex;
    align-items: flex-start;
    gap: 58px;

    margin-top: 45px;
}

.board-stat {
    min-width: 70px;
}

.board-stat-number {
    color: #ffa300;

    font-family: 'Outfit', sans-serif;
    font-size: 29px;
    font-weight: 800;
    line-height: 1;
}

.board-stat-label {
    margin-top: 13px;

    color: #a99565;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
}


/* =========================================================
   RIGHT BOARD CARD
========================================================= */

.board-hero-visual {
    position: relative;
    padding-top: 18px;
}

.board-diagram {
    position: relative;

    min-height: 480px;
    padding: 34px 25px 26px;

    border-radius: 24px;

    background:
        radial-gradient(circle at 50% 20%, rgba(255, 163, 0, .045), transparent 40%),
        rgba(28, 22, 5, .92);

    border: 1px solid rgba(255, 166, 0, .22);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .25),
        inset 0 0 35px rgba(255, 166, 0, .025);
}


/* SLA */

.board-sla {
    position: absolute;
    z-index: 5;

    top: 4px;
    right: 17px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 13px;

    border-radius: 20px;
    border: 1px solid rgba(0, 230, 160, .38);

    background: rgba(0, 70, 43, .45);

    color: #00d99a;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.sla-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #00d99a;

    box-shadow: 0 0 8px rgba(0, 217, 154, .8);
}


/* TITLE */

.board-diagram-title {
    text-align: center;

    color: #f6a500;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
}


/* LEVEL COMMON */

.board-level {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.board-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.board-member span,
.board-level-sp>span {
    color: #9d895c;

    font-family: 'Poppins', sans-serif;
    font-size: 10px;
}


/* NODES */

.board-node {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    color: #f3a000;

    border: 2px solid rgba(255, 164, 0, .65);
    background: rgba(43, 31, 4, .9);

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;

    transition: .3s ease;
}

.board-node:hover {
    transform: scale(1.08);
    background: rgba(255, 164, 0, .1);
    box-shadow: 0 0 20px rgba(255, 164, 0, .15);
}


/* SP */

.board-level-sp {
    flex-direction: column;
    align-items: center;

    margin-top: 26px;
}

.board-node-sp {
    width: 54px;
    height: 54px;

    color: #1b1100;
    border: none;

    background: linear-gradient(135deg, #ffb51b, #ff9410);

    box-shadow:
        0 8px 22px rgba(255, 160, 0, .2);
}


/* LEVEL 2 */

.board-level-2 {
    gap: 100px;
    margin-top: 45px;
}


/* LEVEL 3 */

.board-level-3 {
    gap: 18px;
    margin-top: 28px;
}


/* LEVEL 4 */

.board-level-4 {
    gap: 8px;
    margin-top: 33px;
}

.board-small-node {
    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    color: #a77aff;

    border: 1px solid rgba(146, 86, 255, .75);
    background: rgba(56, 25, 100, .16);

    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 600;
}


/* CYCLE MESSAGE */

.board-cycle-message {
    width: 90%;
    margin: 26px auto 0;

    padding: 10px 14px;

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

    border-radius: 25px;

    color: #00d99a;

    background: rgba(18, 73, 44, .32);
    border: 1px solid rgba(0, 217, 154, .32);

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;

    text-align: center;
}

.cycle-check {
    font-size: 11px;
}


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

.board-counter {
    display: inline-block;
    min-width: 1ch;
}


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

@media (max-width: 1100px) {

    .board-hero-container {
        gap: 35px;
    }

    .board-hero-main-title {
        font-size: 46px;
    }

    .board-hero-title {
        font-size: 48px;
    }

    .board-level-2 {
        gap: 75px;
    }

    .board-level-3 {
        gap: 12px;
    }

    .board-level-4 {
        gap: 5px;
    }

}


@media (max-width: 991px) {

    .board-hero {
        padding: 80px 0 65px;
    }

    .board-hero-container {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .board-hero-content {
        text-align: center;
    }

    .board-hero-description {
        margin: auto;
    }

    .board-hero-buttons,
    .board-hero-stats {
        justify-content: center;
    }

    .board-hero-visual {
        max-width: 650px;
        width: 100%;
        margin: 25px auto 0;
    }

}


@media (max-width: 600px) {

    .board-hero {
        padding: 65px 0 55px;
    }

    .board-hero-container {
        width: 92%;
    }

    .board-hero-badge {
        padding: 8px 13px;
        font-size: 10px;
    }

    .board-hero-title {
        font-size: 38px;
    }

    .board-hero-line {
        width: 45px;
        height: 5px;
        margin: 25px auto;
    }

    .board-hero-main-title {
        font-size: 34px;
        line-height: 1.15;
    }

    .board-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .board-hero-buttons {
        gap: 10px;
    }

    .board-btn {
        min-height: 53px;
        padding: 0 20px;
        font-size: 13px;
    }

    .board-btn-learn {
        width: 100%;
    }

    .board-hero-stats {
        gap: 27px;
        margin-top: 35px;
    }

    .board-stat-number {
        font-size: 24px;
    }

    .board-stat-label {
        font-size: 11px;
    }

    .board-diagram {
        min-height: 430px;
        padding: 27px 10px 20px;
        border-radius: 20px;
    }

    .board-diagram-title {
        font-size: 10px;
    }

    .board-level-2 {
        gap: 60px;
    }

    .board-level-3 {
        gap: 7px;
    }

    .board-node {
        width: 40px;
        height: 40px;
        font-size: 9px;
    }

    .board-node-sp {
        width: 48px;
        height: 48px;
    }

    .board-level-4 {
        gap: 3px;
    }

    .board-small-node {
        width: 30px;
        height: 30px;
        font-size: 7px;
    }

    .board-cycle-message {
        width: 96%;
        font-size: 9px;
        padding: 9px 5px;
    }

    .board-sla {
        right: 10px;
        font-size: 9px;
        padding: 5px 9px;
    }

}


@media (max-width: 390px) {

    .board-hero-title {
        font-size: 34px;
    }

    .board-hero-main-title {
        font-size: 30px;
    }

    .board-level-2 {
        gap: 45px;
    }

    .board-level-3 {
        gap: 4px;
    }

    .board-small-node {
        width: 27px;
        height: 27px;
    }

}

/* =========================================================
   BOARD STATS SECTION
========================================================= */

.board-stats-section {
    position: relative;
    padding: 36px 0 34px;

    background:
        linear-gradient(180deg,
            #100c00 0%,
            #120d00 50%,
            #0d0900 100%);

    border-top: 1px solid rgba(255, 166, 0, .08);
    border-bottom: 1px solid rgba(255, 166, 0, .14);

    overflow: hidden;
}


/* subtle top glow */

.board-stats-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 166, 0, .25),
            transparent);
}


/* subtle background pattern */

.board-stats-section::after {
    content: "+   +   +   +   +   +   +   +   +   +   +";
    position: absolute;
    inset: 0;

    color: rgba(255, 166, 0, .045);

    font-size: 13px;
    letter-spacing: 25px;
    line-height: 45px;

    pointer-events: none;
}


/* CONTAINER */

.board-stats-container {
    position: relative;
    z-index: 2;

    width: min(1190px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}


/* STAT */

.board-stat-box {
    padding: 0 40px;

    text-align: center;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

/* NUMBER */

.board-stat-value {
    color: #ffa313;

    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.5px;

    text-shadow:
        0 0 18px rgba(255, 158, 0, .08);
}


/* LABEL */

.board-stat-text {
    margin-top: 15px;

    color: #a99667;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   COUNTER
========================================================= */

.board-section-counter {
    display: inline-block;
    min-width: 1ch;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .board-stats-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .board-stat-box {
        padding: 0 25px;
    }

}


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

@media (max-width: 575px) {

    .board-stats-section {
        padding: 30px 0;
    }

    .board-stats-container {
        width: 88%;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }

    .board-stat-box {
        padding: 0 8px;
    }

    .board-stat-value {
        font-size: 27px;
    }

    .board-stat-text {
        margin-top: 9px;
        font-size: 11px;
    }

}

/* =========================================================
   BOARD MLM DEFINITION SECTION
========================================================= */

.board-definition-section {
    position: relative;

    padding: 90px 0 82px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 166, 0, .025),
            transparent 35%),
        #0b0800;

    overflow: hidden;
}


/* TOP BORDER */

.board-definition-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(255, 166, 0, .12);
}


/* CONTAINER */

.board-definition-container {
    position: relative;
    z-index: 2;

    width: min(1160px, 90%);
    margin: 0 auto;
}


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

.board-definition-header {
    max-width: 850px;

    margin-bottom: 48px;
}


/* BADGE */

.board-definition-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 13px;

    margin-bottom: 20px;

    border-radius: 20px;

    border: 1px solid rgba(255, 166, 0, .45);

    background: rgba(255, 166, 0, .055);

    color: #f5a000;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.board-definition-badge svg {
    width: 13px;
    height: 13px;
}


/* HEADING */

.board-definition-header h2 {
    margin: 0;

    color: #fff0c2;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(38px, 4vw, 48px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1.2px;
}

.board-definition-header h2 span {
    color: #ff9d13;
}


/* SUBTITLE */

.board-definition-header>p {
    max-width: 690px;

    margin: 14px 0 0;

    color: #ae9a68;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   DEFINITION COLUMNS
========================================================= */

.board-definition-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 55px;

    margin-top: 40px;

    align-items: start;
}


/* COLUMN */

.board-definition-column {
    min-width: 0;
}


/* COLUMN TITLE */

.board-definition-column h3 {
    margin: 0 0 17px;

    color: #fff1c2;

    font-family: 'Outfit', sans-serif;

    font-size: 29px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.5px;
}


/* TEXT */

.board-definition-column p {
    margin: 0 0 16px;

    color: #bda970;

    font-family: 'Poppins', sans-serif;

    font-size: 15.5px;

    font-weight: 400;

    line-height: 1.75;
}

.board-definition-column p:last-child {
    margin-bottom: 0;
}


/* STRONG */

.board-definition-column strong {
    color: #cdb982;

    font-weight: 700;
}


/* ITALIC */

.board-definition-column em {
    color: #c3ae76;

    font-style: italic;
}


/* =========================================================
   COMPARISON CARDS
========================================================= */

.board-definition-comparison {
    display: grid;

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

    gap: 16px;

    max-width: 555px;

    /*
     CARDS KO DESKTOP PAR UPAR LAAYA GAYA HAI
  */
    margin: -62px 0 0 auto;

    position: relative;
    z-index: 3;
}


/* CARD */

.board-compare-card {
    position: relative;

    min-height: 125px;

    padding: 19px 19px 17px;

    border-radius: 16px;

    background: rgba(30, 22, 4, .82);

    border: 1px solid rgba(255, 166, 0, .25);

    overflow: hidden;

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


/* BOTTOM GLOW LINE */

.board-compare-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;
}


/* HOVER */

.board-compare-card:hover {
    transform: translateY(-5px);

    background: rgba(43, 31, 5, .95);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .22);
}

.board-compare-card:hover::after {
    transform: scaleX(1);
}


/* LABEL */

.board-compare-label {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 20px;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 12px;
}

.board-compare-label svg {
    width: 13px;
    height: 13px;
}


/* CARD TEXT */

.board-compare-card p {
    margin: 0;

    color: #bda970;

    font-family: 'Poppins', sans-serif;

    font-size: 13.5px;

    line-height: 1.65;
}


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

/* BOARD */

.board-card-orange {
    border-color: rgba(255, 166, 0, .30);
}

.board-card-orange .board-compare-label {
    color: #ffb21b;
    background: rgba(255, 166, 0, .12);
}

.board-card-orange::after {
    background: #ff9d13;
}

.board-card-orange:hover {
    border-color: rgba(255, 166, 0, .55);
}


/* MATRIX */

.board-card-blue {
    border-color: rgba(70, 151, 255, .28);
}

.board-card-blue .board-compare-label {
    color: #4fa7ff;
    background: rgba(70, 151, 255, .11);
}

.board-card-blue::after {
    background: #4fa7ff;
}

.board-card-blue:hover {
    border-color: rgba(70, 151, 255, .5);
}


/* BINARY */

.board-card-green {
    border-color: rgba(38, 215, 150, .28);
}

.board-card-green .board-compare-label {
    color: #27d89b;
    background: rgba(38, 215, 150, .11);
}

.board-card-green::after {
    background: #27d89b;
}

.board-card-green:hover {
    border-color: rgba(38, 215, 150, .5);
}


/* UNILEVEL */

.board-card-purple {
    border-color: rgba(151, 87, 255, .30);
}

.board-card-purple .board-compare-label {
    color: #a26aff;
    background: rgba(151, 87, 255, .12);
}

.board-card-purple::after {
    background: #9a61ff;
}

.board-card-purple:hover {
    border-color: rgba(151, 87, 255, .55);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .board-definition-section {
        padding: 75px 0;
    }

    .board-definition-grid {
        gap: 40px;
    }

    .board-definition-column h3 {
        font-size: 26px;
    }

    .board-definition-column p {
        font-size: 14px;
    }

    .board-definition-comparison {
        max-width: 100%;

        /* tablet par normal position */
        margin: 35px 0 0;
    }

}


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

@media (max-width: 700px) {

    .board-definition-section {
        padding: 65px 0;
    }

    .board-definition-container {
        width: 90%;
    }

    .board-definition-header {
        margin-bottom: 38px;
    }

    .board-definition-header h2 {
        font-size: 34px;
    }

    .board-definition-header>p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .board-definition-grid {
        grid-template-columns: 1fr;

        gap: 42px;

        margin-top: 35px;
    }

    .board-definition-column h3 {
        font-size: 25px;
    }

    .board-definition-column p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .board-definition-comparison {
        grid-template-columns: 1fr;

        gap: 13px;

        /* mobile par cards normal flow mein */
        margin-top: 35px;
    }

    .board-compare-card {
        min-height: auto;
    }

}

/* =========================================================
   BOARD MLM PROCESS SECTION
========================================================= */

.board-process-section {
    width: 100%;
    background: #1e1601;
    padding: 65px 0 70px;
    overflow: hidden;
}

/* ---------- HEADER ---------- */

.board-process-header {
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 20px;
}

.board-process-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 157, 19, 0.35);
    border-radius: 30px;
    background: rgba(255, 157, 19, 0.06);

    color: #ff9d13;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.board-process-badge i {
    font-size: 12px;
}

.board-process-header h2 {
    margin: 18px 0 10px;

    color: #fff0c2;
    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
}

.board-process-header h2 span {
    color: #ff9d13;
}

.board-process-header p {
    margin: 0;

    color: #bda970;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}


/* ---------- GRID ---------- */

.board-process-grid {
    width: calc(100% - 146px);
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


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

.board-process-card {
    position: relative;

    min-height: 329px;
    padding: 29px 28px 27px;

    background: #171000;
    border: 1px solid rgba(255, 157, 19, 0.22);
    border-radius: 15px;

    overflow: hidden;

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


/* ---------- HOVER TOP LINE ---------- */

.board-process-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #ff9d13;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}


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

.board-process-card:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 157, 19, 0.45);

    background: #1b1300;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        0 0 25px rgba(255, 157, 19, 0.05);
}

.board-process-card:hover::before {
    transform: scaleX(1);
}


/* ---------- NUMBER ---------- */

.board-process-number {
    width: 39px;
    height: 39px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    background: #ff9d13;
    color: #171000;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;

    transition: transform 0.3s ease;
}

.board-process-card:hover .board-process-number {
    transform: scale(1.08);
}


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

.board-process-card h3 {
    margin: 0 0 5px;

    color: #fff0c2;

    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;

    line-height: 1.18;
    letter-spacing: -0.5px;
}


/* ---------- DESCRIPTION ---------- */

.board-process-card p {
    margin: 0;

    color: #c9ae75;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
}

.board-process-card p em {
    color: #d5bd88;
}

.board-process-card p strong {
    color: #d5bd88;
    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .board-process-grid {
        width: calc(100% - 50px);
        gap: 18px;
    }

    .board-process-card {
        padding: 26px 22px;
        min-height: 320px;
    }

    .board-process-card h3 {
        font-size: 24px;
    }

    .board-process-card p {
        font-size: 13px;
        line-height: 1.65;
    }
}


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

@media (max-width: 768px) {

    .board-process-section {
        padding: 55px 0 60px;
    }

    .board-process-header {
        margin-bottom: 32px;
    }

    .board-process-header h2 {
        font-size: 32px;
    }

    .board-process-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .board-process-header p br {
        display: none;
    }

    .board-process-grid {
        width: calc(100% - 32px);

        grid-template-columns: 1fr;
        gap: 16px;
    }

    .board-process-card {
        min-height: auto;
        padding: 25px 22px;
    }

    .board-process-card h3 {
        font-size: 24px;
    }

    .board-process-card p {
        font-size: 13px;
    }
}


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

@media (max-width: 480px) {

    .board-process-section {
        padding: 45px 0 50px;
    }

    .board-process-header {
        padding: 0 15px;
    }

    .board-process-header h2 {
        font-size: 27px;
        letter-spacing: -0.5px;
    }

    .board-process-header p {
        font-size: 13px;
    }

    .board-process-grid {
        width: calc(100% - 24px);
    }

    .board-process-card {
        padding: 22px 19px;
        border-radius: 13px;
    }

    .board-process-number {
        width: 37px;
        height: 37px;
        margin-bottom: 16px;
        font-size: 13px;
    }

    .board-process-card h3 {
        font-size: 22px;
        line-height: 1.2;
    }

    .board-process-card p {
        font-size: 13px;
        line-height: 1.65;
    }
}

/* =========================================================
   BOARD PLAN EXAMPLE & REAL EARNINGS
========================================================= */

.board-earnings-section {
    width: 100%;
    background: #0b0800;
    padding: 65px 0 75px;
    overflow: hidden;
}


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

.board-earnings-header {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

.board-earnings-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(255, 157, 19, 0.35);
    border-radius: 30px;

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

    color: #ff9d13;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: .7px;
}

.board-earnings-badge i {
    font-size: 11px;
}


.board-earnings-header h2 {
    margin: 18px 0 12px;

    color: #fff0c2;

    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -1px;
}

.board-earnings-header h2 span {
    color: #ff9d13;
}


.board-earnings-header p {
    margin: 0;

    color: #bda970;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.board-earnings-table-wrap {
    width: calc(100% - 146px);
    max-width: 1152px;

    margin: 0 auto;

    overflow-x: auto;

    border-radius: 17px;

    scrollbar-width: none;
}

.board-earnings-table-wrap::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   TABLE
========================================================= */

.board-earnings-table {
    width: 100%;

    min-width: 950px;

    border-collapse: separate;
    border-spacing: 0;

    background: #171000;

    overflow: hidden;

    border-radius: 17px;

    font-family: 'Poppins', sans-serif;
}


/* ---------- HEAD ---------- */

.board-earnings-table thead th {
    padding: 19px 18px;

    background: #513200;

    color: #fff0c2;

    font-size: 13px;
    font-weight: 800;

    text-align: left;
    white-space: nowrap;

    border-right: 1px solid rgba(255, 157, 19, 0.06);
}

.board-earnings-table thead th:first-child {
    border-top-left-radius: 17px;
}

.board-earnings-table thead th:last-child {
    border-top-right-radius: 17px;
}


/* ---------- BODY ---------- */

.board-earnings-table tbody td {
    padding: 14px 18px;

    color: #c9ae75;

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

    white-space: nowrap;

    border-bottom: 1px solid rgba(255, 157, 19, 0.13);

    background: #171000;
}

.board-earnings-table tbody tr {
    transition: background .25s ease;
}

.board-earnings-table tbody tr:hover td {
    background: #1d1500;
}


/* ---------- LEVEL BADGES ---------- */

.level-badge {
    display: inline-flex;

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

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;
}


/* Level 1 */
.level-1 {
    color: #ffbd00;
    background: rgba(255, 189, 0, .13);
}


/* Level 2 */
.level-2 {
    color: #ff8d19;
    background: rgba(255, 141, 25, .13);
}


/* Level 3 */
.level-3 {
    color: #a889ff;
    background: rgba(168, 137, 255, .13);
}


/* Level 4 */
.level-4 {
    color: #51a8ff;
    background: rgba(81, 168, 255, .12);
}


/* ---------- EARNING ---------- */

.earning-value {
    color: #ffae00 !important;
    font-weight: 800 !important;
}


/* =========================================================
   TABLE FOOTER
========================================================= */

.board-earnings-table tfoot td {
    padding: 18px;

    background: #1d1500;

    color: #fff0c2;

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

    border: 0;
}

.board-earnings-table tfoot td:first-child {
    border-bottom-left-radius: 17px;
}

.board-earnings-table tfoot td:last-child {
    border-bottom-right-radius: 17px;
}

.board-earnings-table .total-pool {
    color: #ff9d13;
    font-size: 16px;
}


/* =========================================================
   REAL EARNING + SIMULATOR GRID
========================================================= */

.board-real-earnings-grid {
    width: calc(100% - 130px);
    max-width: 1175px;

    margin: 55px auto 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 47px;

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.board-real-earning-content h2,
.earnings-simulator h2 {
    margin: 0 0 20px;

    color: #fff0c2;

    font-family: 'Outfit', sans-serif;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.7px;
}


.board-real-earning-content>p {
    margin: 0 0 20px;

    color: #c9ae75;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;

    line-height: 1.75;
}

.board-real-earning-content>p strong {
    color: #d9bd83;
}


/* =========================================================
   EARNING BULLETS
========================================================= */

.earning-points {
    margin: 0;
    padding-left: 21px;

    color: #c9ae75;

    font-family: 'Poppins', sans-serif;

    font-size: 15px;
    line-height: 1.9;
}

.earning-points li {
    padding-left: 2px;
}

.earning-points li::marker {
    color: #fff0c2;
    font-size: 10px;
}

.earning-points strong {
    color: #d9bd83;
}


/* =========================================================
   RAJIV TOTAL BOX
========================================================= */

.rajiv-total-box {
    margin-top: 17px;

    padding: 30px 32px 28px;

    border: 1px solid rgba(255, 157, 19, .35);

    border-radius: 15px;

    background: #171000;

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

    transition: .3s ease;
}

.rajiv-total-box:hover {
    border-color: rgba(255, 157, 19, .6);

    transform: translateY(-3px);

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


.rajiv-total-box h4 {
    margin: 0 0 10px;

    color: #fff0c2;

    font-family: 'Outfit', sans-serif;

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


.rajiv-total-amount {
    color: #ff9d13;

    font-family: 'Outfit', sans-serif;

    font-size: 34px;
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 8px;
}


.rajiv-total-box p {
    margin: 0;

    color: #c9ae75;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;
}


/* =========================================================
   SIMULATOR
========================================================= */

.earnings-simulator h2 {
    margin-bottom: 20px;
}


.simulator-card {
    padding: 42px 40px 39px;

    border: 1px solid rgba(255, 157, 19, .27);

    border-radius: 22px;

    background: #171000;

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


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

.simulator-input-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 22px;
    row-gap: 25px;
}


.simulator-field label {
    display: block;

    margin-bottom: 8px;

    color: #bda970;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;
    font-weight: 600;
}


.simulator-field input,
.simulator-field select {
    width: 100%;

    height: 40px;

    padding: 0 13px;

    border: 1px solid rgba(255, 157, 19, .25);

    border-radius: 10px;

    outline: none;

    background: #211700;

    color: #e8d29c;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    transition: .25s ease;
}


.simulator-field input:focus,
.simulator-field select:focus {
    border-color: #ff9d13;

    box-shadow:
        0 0 0 3px rgba(255, 157, 19, .08);
}


.simulator-field select {
    cursor: pointer;
}


/* =========================================================
   RESULT BOXES
========================================================= */

.simulator-results {
    display: grid;

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

    gap: 16px;

    margin-top: 32px;
}


.simulator-result-box {
    min-height: 122px;

    padding: 24px 12px 18px;

    border: 1px solid rgba(255, 157, 19, .25);

    border-radius: 16px;

    background: #1c1400;

    text-align: center;

    transition: .3s ease;
}


.simulator-result-box:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 157, 19, .5);

    background: #211700;
}


.simulator-result-box strong {
    display: block;

    color: #ff9d13;

    font-family: 'Outfit', sans-serif;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 12px;
}


.simulator-result-box span {
    display: block;

    color: #a99462;

    font-family: 'Poppins', sans-serif;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   SIMULATOR NOTE
========================================================= */

.simulator-note {
    margin: 15px 0 0;

    color: #9f8a5c;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    font-style: italic;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .board-earnings-table-wrap {
        width: calc(100% - 50px);
    }

    .board-real-earnings-grid {
        width: calc(100% - 50px);

        gap: 30px;
    }

    .simulator-card {
        padding: 30px 25px;
    }

    .board-real-earning-content h2,
    .earnings-simulator h2 {
        font-size: 27px;
    }

}


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

@media (max-width: 768px) {

    .board-earnings-section {
        padding: 55px 0 60px;
    }

    .board-earnings-header {
        margin-bottom: 35px;
    }

    .board-earnings-header h2 {
        font-size: 32px;
    }

    .board-earnings-header p {
        font-size: 14px;
    }

    .board-earnings-header p br {
        display: none;
    }


    .board-earnings-table-wrap {
        width: calc(100% - 28px);
    }


    .board-real-earnings-grid {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        gap: 42px;

        margin-top: 45px;
    }


    .board-real-earning-content h2,
    .earnings-simulator h2 {
        font-size: 27px;
    }


    .board-real-earning-content>p,
    .earning-points {
        font-size: 14px;
    }


    .simulator-card {
        padding: 30px 20px;
        border-radius: 17px;
    }

}


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

@media (max-width: 480px) {

    .board-earnings-header h2 {
        font-size: 27px;
    }

    .board-earnings-header p {
        font-size: 13px;
    }


    .board-real-earnings-grid {
        width: calc(100% - 22px);
    }


    .board-real-earning-content h2,
    .earnings-simulator h2 {
        font-size: 24px;
    }


    .rajiv-total-box {
        padding: 25px 22px;
    }


    .rajiv-total-amount {
        font-size: 31px;
    }


    .simulator-input-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .simulator-results {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .simulator-result-box {
        min-height: auto;
        padding: 20px;
    }


    .simulator-result-box strong {
        font-size: 25px;
    }

}

/* =========================================================
   BOARD COMMISSION TYPES SECTION
========================================================= */

.board-commission-section {
    position: relative;

    padding: 88px 0 82px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 166, 0, .025),
            transparent 35%),
        #0d0900;

    overflow: hidden;
}


/* TOP / BOTTOM BORDER */

.board-commission-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(255, 166, 0, .08);
}


/* =========================================================
   CONTAINER
========================================================= */

.board-commission-container {
    position: relative;
    z-index: 2;

    width: min(1165px, 90%);
    margin: 0 auto;
}


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

.board-commission-header {
    max-width: 820px;

    margin: 0 auto 42px;

    text-align: center;
}


/* BADGE */

.board-commission-badge {
    display: inline-flex;

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

    gap: 7px;

    padding: 7px 13px;

    margin-bottom: 18px;

    border-radius: 20px;

    border: 1px solid rgba(255, 166, 0, .45);

    background: rgba(255, 166, 0, .055);

    color: #f5a000;

    font-family: 'Poppins', sans-serif;

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

    letter-spacing: .4px;
}

.board-commission-badge svg {
    width: 13px;
    height: 13px;
}


/* HEADING */

.board-commission-header h2 {
    margin: 0;

    color: #fff0c0;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(37px, 4vw, 45px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1.1px;
}

.board-commission-header h2 span {
    color: #ff9d13;
}


/* DESCRIPTION */

.board-commission-header p {
    max-width: 670px;

    margin: 14px auto 0;

    color: #ad9865;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


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

.board-commission-grid {
    display: grid;

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

    gap: 20px 23px;
}


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

.board-commission-card {
    position: relative;

    min-height: 320px;

    padding: 32px 32px 28px;

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(31, 23, 4, .96),
            rgba(25, 18, 3, .96));

    border: 1px solid rgba(255, 166, 0, .25);

    overflow: hidden;

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


/* CARD INNER GLOW */

.board-commission-card::before {
    content: "";

    position: absolute;

    top: -70px;
    right: -70px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(255, 166, 0, .045);

    filter: blur(25px);

    opacity: 0;

    transition: opacity .35s ease;
}


/* BOTTOM LINE */

.board-commission-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: linear-gradient(90deg,
            #ff9d13,
            #ffc14a);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .4s ease;
}


/* HOVER */

.board-commission-card:hover {
    transform: translateY(-7px);

    border-color: rgba(255, 166, 0, .48);

    background:
        linear-gradient(145deg,
            rgba(40, 29, 5, .98),
            rgba(29, 21, 3, .98));

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .25),
        0 0 25px rgba(255, 166, 0, .035);
}

.board-commission-card:hover::before {
    opacity: 1;
}

.board-commission-card:hover::after {
    transform: scaleX(1);
}


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

.board-commission-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 21px;

    border-radius: 10px;
}

.board-commission-icon svg {
    width: 27px;
    height: 27px;
}


/* ORANGE */

.board-commission-icon.orange {
    color: #ffa313;
    background: rgba(255, 166, 0, .12);
}


/* ORANGE DARK */

.board-commission-icon.orange-dark {
    color: #ff9840;
    background: rgba(255, 145, 40, .10);
}


/* PURPLE */

.board-commission-icon.purple {
    color: #a36cff;
    background: rgba(157, 90, 255, .11);
}


/* BLUE */

.board-commission-icon.blue {
    color: #398cff;
    background: rgba(55, 135, 255, .10);
}


/* GREEN */

.board-commission-icon.green {
    color: #19d58d;
    background: rgba(25, 213, 141, .10);
}


/* TEAL */

.board-commission-icon.teal {
    color: #13bfa9;
    background: rgba(19, 191, 169, .10);
}


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

.board-commission-card h3 {
    margin: 0 0 10px;

    color: #fff0c0;

    font-family: 'Outfit', sans-serif;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -.25px;
}


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

.board-commission-card p {
    margin: 0;

    color: #bba66f;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;
}

.board-commission-card p strong {
    color: #cdb982;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .board-commission-section {
        padding: 75px 0;
    }

    .board-commission-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }

    .board-commission-card {
        min-height: 290px;

        padding: 27px 26px 25px;
    }

}


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

@media (max-width: 650px) {

    .board-commission-section {
        padding: 65px 0;
    }

    .board-commission-container {
        width: 90%;
    }

    .board-commission-header {
        margin-bottom: 35px;
    }

    .board-commission-header h2 {
        font-size: 33px;
    }

    .board-commission-header p {
        font-size: 13.5px;
    }

    .board-commission-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .board-commission-card {
        min-height: auto;

        padding: 25px 23px 24px;
    }

    .board-commission-card h3 {
        font-size: 18px;
    }

    .board-commission-card p {
        font-size: 13px;
        line-height: 1.7;
    }

}

/* ===== COMMISSION CARD HOVER FIX ===== */

.board-commission-card {
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.board-commission-card::after {
    display: none !important;
    content: none !important;
}

.board-commission-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 166, 35, 0.75);
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.12);
}

/* No extra bottom line on hover */
.board-commission-card:hover::after {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* =========================================================
   BOARD BENEFITS SECTION
========================================================= */

.board-benefits-section {
    position: relative;
    width: 100%;
    padding: 80px 0 85px;
    background: #080600;
    overflow: hidden;
}

.board-benefits-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.board-benefits-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 48px;
}

.board-benefits-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 14px;
    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: 30px;

    background: rgba(245, 166, 35, 0.08);

    color: #f5a623;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;

    margin-bottom: 18px;
}

.board-benefits-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.8;
}


.board-benefits-header h2 {
    margin: 0;

    color: #fff7df;

    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.board-benefits-header h2 span {
    color: #f5a623;
}


.board-benefits-header p {
    max-width: 700px;
    margin: 18px auto 0;

    color: #a99368;

    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
}


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

.board-benefits-grid {
    display: grid;

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

    gap: 24px;
}


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

.board-benefit-card {
    position: relative;

    min-height: 344px;
    padding: 32px 32px 28px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, 0.38);
    border-radius: 15px;

    overflow: hidden;

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


/* Hover — clean, NO bottom line */
.board-benefit-card:hover {
    transform: translateY(-5px);

    background: #211802;

    border-color: rgba(245, 166, 35, 0.72);

    box-shadow:
        0 14px 35px rgba(245, 166, 35, 0.10),
        0 0 22px rgba(245, 166, 35, 0.05);
}


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

.board-benefit-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 10px;

    margin-bottom: 22px;
}

.board-benefit-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.5;
}


/* Icon colors */

.icon-yellow {
    color: #ffae00;
    background: rgba(255, 174, 0, 0.12);
}

.icon-orange {
    color: #ff9635;
    background: rgba(255, 150, 53, 0.12);
}

.icon-green {
    color: #00d98b;
    background: rgba(0, 217, 139, 0.12);
}

.icon-purple {
    color: #a66cff;
    background: rgba(166, 108, 255, 0.13);
}

.icon-blue {
    color: #4e91ff;
    background: rgba(78, 145, 255, 0.12);
}

.icon-gold {
    color: #ffae00;
    background: rgba(255, 174, 0, 0.12);
}

.icon-orange-light {
    color: #ff8b3d;
    background: rgba(255, 139, 61, 0.12);
}

.icon-teal {
    color: #00b8a9;
    background: rgba(0, 184, 169, 0.12);
}


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

.board-benefit-card h3 {
    margin: 0 0 10px;

    color: #fff3d0;

    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.3px;
}

.board-benefit-card p {
    margin: 0;

    color: #c2a975;

    font-size: 15px;
    line-height: 1.58;
    font-weight: 400;
}


/* ================= TABLET ================= */

@media (max-width: 1100px) {

    .board-benefits-container {
        width: min(940px, calc(100% - 40px));
    }

    .board-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .board-benefit-card {
        min-height: 320px;
    }
}


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

@media (max-width: 700px) {

    .board-benefits-section {
        padding: 65px 0;
    }

    .board-benefits-container {
        width: calc(100% - 30px);
    }

    .board-benefits-header {
        margin-bottom: 35px;
    }

    .board-benefits-header h2 {
        font-size: 30px;
        letter-spacing: -.7px;
    }

    .board-benefits-header p {
        font-size: 14px;
        line-height: 1.55;
    }

    .board-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .board-benefit-card {
        min-height: auto;
        padding: 25px 23px;
    }

    .board-benefit-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .board-benefit-card h3 {
        font-size: 18px;
    }

    .board-benefit-card p {
        font-size: 14px;
    }
}

/* =========================================================
   ADVANCED BOARD MLM FEATURES
========================================================= */

.board-advanced-section {
    position: relative;
    width: 100%;
    padding: 82px 0 88px;
    background: #1a1401;
    overflow: hidden;
}

.board-advanced-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.board-advanced-header {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 50px;
}

.board-advanced-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 14px;

    border: 1px solid rgba(245, 166, 35, .45);
    border-radius: 30px;

    background: rgba(245, 166, 35, .08);

    color: #f5a623;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;

    margin-bottom: 18px;
}

.board-advanced-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.7;
}


.board-advanced-header h2 {
    margin: 0;

    color: #fff5d7;

    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -1px;
}

.board-advanced-header h2 span {
    color: #f5a623;
}


.board-advanced-header p {
    max-width: 650px;

    margin: 16px auto 0;

    color: #a9956b;

    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   TABS
========================================================= */

.board-feature-tabs {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 5px;

    margin-bottom: 30px;

    border: 1px solid rgba(177, 122, 0, .38);
    border-radius: 30px;

    background: rgba(16, 12, 2, .85);

    overflow-x: auto;

    scrollbar-width: none;
}

.board-feature-tabs::-webkit-scrollbar {
    display: none;
}


.board-feature-tab {
    flex: 1;

    min-width: 145px;

    border: 0;
    outline: none;

    background: transparent;

    color: #9d895f;

    padding: 10px 18px;

    border-radius: 25px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

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


.board-feature-tab:hover {
    color: #f4d99b;
}


.board-feature-tab.active {
    color: #120d03;

    background: linear-gradient(135deg,
            #f5a623,
            #ff942d);

    box-shadow:
        0 5px 15px rgba(245, 166, 35, .25);
}


/* =========================================================
   CONTENT
========================================================= */

.board-feature-content {
    display: none;

    animation: boardFeatureFade .35s ease;
}

.board-feature-content.active {
    display: block;
}

@keyframes boardFeatureFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.board-feature-grid {
    display: grid;

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

    gap: 24px;
}


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

.board-feature-card {
    position: relative;

    min-height: 294px;

    padding: 32px 32px 28px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .38);

    border-radius: 15px;

    overflow: hidden;

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


/* Clean hover — no bottom line */

.board-feature-card:hover {
    transform: translateY(-5px);

    background: #211802;

    border-color: rgba(245, 166, 35, .72);

    box-shadow:
        0 14px 35px rgba(245, 166, 35, .10),
        0 0 22px rgba(245, 166, 35, .05);
}


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

.board-feature-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 10px;

    margin-bottom: 22px;
}

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

    stroke-width: 2.5;
}


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

.icon-yellow {
    color: #ffae00;
    background: rgba(255, 174, 0, .12);
}

.icon-orange {
    color: #ff9635;
    background: rgba(255, 150, 53, .12);
}

.icon-green {
    color: #00d98b;
    background: rgba(0, 217, 139, .12);
}

.icon-purple {
    color: #a66cff;
    background: rgba(166, 108, 255, .13);
}

.icon-blue {
    color: #4e91ff;
    background: rgba(78, 145, 255, .12);
}

.icon-teal {
    color: #00b8a9;
    background: rgba(0, 184, 169, .12);
}


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

.board-feature-card h3 {
    margin: 0 0 10px;

    color: #fff2cf;

    font-size: 19px;
    line-height: 1.28;
    font-weight: 800;

    letter-spacing: -.3px;
}


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

    color: #c3aa76;

    font-size: 15px;
    line-height: 1.58;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .board-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .board-feature-card {
        min-height: 310px;
    }

}


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

@media (max-width: 700px) {

    .board-advanced-section {
        padding: 65px 0 70px;
    }

    .board-advanced-container {
        width: calc(100% - 30px);
    }

    .board-advanced-header {
        margin-bottom: 35px;
    }

    .board-advanced-header h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .board-advanced-header p {
        font-size: 14px;
    }


    .board-feature-tabs {
        justify-content: flex-start;

        margin-bottom: 20px;

        border-radius: 18px;
    }

    .board-feature-tab {
        flex: 0 0 auto;

        min-width: auto;

        padding: 10px 17px;

        font-size: 13px;
    }


    .board-feature-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .board-feature-card {
        min-height: auto;

        padding: 25px 23px;
    }

    .board-feature-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 18px;
    }

    .board-feature-card h3 {
        font-size: 18px;
    }

    .board-feature-card p {
        font-size: 14px;
        line-height: 1.58;
    }

}

/* =========================================================
   ADVANCED BOARD LOGIC
========================================================= */

.board-logic-section {
    position: relative;
    width: 100%;
    padding: 82px 0 90px;
    background: #080600;
    overflow: hidden;
}

.board-logic-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.board-logic-header {
    text-align: center;
    max-width: 1050px;
    margin: 0 auto 50px;
}

.board-logic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 14px;

    border: 1px solid rgba(245, 166, 35, .45);
    border-radius: 30px;

    background: rgba(245, 166, 35, .08);

    color: #f5a623;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;

    margin-bottom: 18px;
}

.board-logic-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.7;
}


.board-logic-header h2 {
    margin: 0;

    color: #fff4d3;

    font-size: clamp(32px, 4vw, 41px);
    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.1px;
}

.board-logic-header h2 span {
    color: #f5a623;
}


.board-logic-header p {
    max-width: 680px;

    margin: 16px auto 0;

    color: #a89467;

    font-size: 17px;
    line-height: 1.65;
}


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

.board-logic-grid {
    display: grid;

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

    gap: 24px;
}


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

.board-logic-card {
    position: relative;

    padding: 32px 32px 34px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .42);

    border-radius: 15px;

    overflow: hidden;

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


/* Clean hover — same style as previous sections */

.board-logic-card:hover {
    transform: translateY(-5px);

    background: #211802;

    border-color: rgba(245, 166, 35, .72);

    box-shadow:
        0 14px 35px rgba(245, 166, 35, .10),
        0 0 22px rgba(245, 166, 35, .05);
}


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

.board-logic-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 10px;

    margin-bottom: 21px;
}

.board-logic-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 2.5;
}


/* Icon colors */

.logic-yellow {
    color: #ffae00;
    background: rgba(255, 174, 0, .12);
}

.logic-orange {
    color: #ff9635;
    background: rgba(255, 150, 53, .12);
}

.logic-purple {
    color: #a66cff;
    background: rgba(166, 108, 255, .13);
}

.logic-green {
    color: #00d98b;
    background: rgba(0, 217, 139, .12);
}


/* =========================================================
   HEADINGS
========================================================= */

.board-logic-card h3 {
    margin: 0 0 10px;

    color: #fff1cd;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -.35px;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.board-logic-card p {
    margin: 0 0 15px;

    color: #c2a975;

    font-size: 15px;
    line-height: 1.58;
}

.board-logic-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LISTS
========================================================= */

.board-logic-card ul,
.board-logic-card ol {
    margin: 0 0 17px;

    padding-left: 24px;

    color: #c5ab77;

    font-size: 15px;
    line-height: 1.58;
}


/* Ordered list numbering */

.board-logic-card ol {
    padding-left: 24px;
}

.board-logic-card li {
    padding-left: 4px;
    margin-bottom: 5px;
}

.board-logic-card li:last-child {
    margin-bottom: 0;
}


/* Bold text */

.board-logic-card strong {
    color: #d8bf89;
    font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .board-logic-grid {
        grid-template-columns: 1fr;
    }

    .board-logic-card {
        padding: 30px;
    }

}


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

@media (max-width: 700px) {

    .board-logic-section {
        padding: 65px 0 70px;
    }

    .board-logic-container {
        width: calc(100% - 30px);
    }

    .board-logic-header {
        margin-bottom: 35px;
    }

    .board-logic-header h2 {
        font-size: 29px;
        line-height: 1.22;
        letter-spacing: -.7px;
    }

    .board-logic-header p {
        font-size: 14px;
        line-height: 1.55;
    }

    .board-logic-grid {
        gap: 16px;
    }

    .board-logic-card {
        padding: 25px 23px 27px;
    }

    .board-logic-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .board-logic-icon svg {
        width: 23px;
        height: 23px;
    }

    .board-logic-card h3 {
        font-size: 18px;
    }

    .board-logic-card p,
    .board-logic-card ul,
    .board-logic-card ol {
        font-size: 14px;
        line-height: 1.58;
    }

}

/* =========================================================
   WHY MLM MIND / WHY US
========================================================= */

.board-why-section {
    position: relative;
    width: 100%;
    padding: 84px 0 88px;

    background: #201700;

    overflow: hidden;
}

.board-why-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.board-why-header {
    text-align: center;

    max-width: 900px;

    margin: 0 auto 48px;
}


.board-why-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 14px;

    border: 1px solid rgba(245, 166, 35, .45);
    border-radius: 30px;

    background: rgba(245, 166, 35, .08);

    color: #f5a623;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .5px;

    margin-bottom: 18px;
}

.board-why-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.7;
}


.board-why-header h2 {
    margin: 0;

    color: #fff4d3;

    font-size: clamp(32px, 4vw, 41px);

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.1px;
}

.board-why-header h2 span {
    color: #f5a623;
}


.board-why-header p {
    max-width: 650px;

    margin: 17px auto 0;

    color: #a89467;

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.board-why-layout {
    display: grid;

    grid-template-columns: 1.02fr 1.18fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   LEFT CARDS
========================================================= */

.board-why-cards {
    display: grid;

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

    gap: 20px;
}


.board-why-card {
    position: relative;

    min-height: 294px;

    padding: 25px 23px 24px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .42);

    border-radius: 15px;

    overflow: hidden;

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


/* Clean hover */

.board-why-card:hover {
    transform: translateY(-5px);

    background: #211802;

    border-color: rgba(245, 166, 35, .72);

    box-shadow:
        0 14px 35px rgba(245, 166, 35, .10),
        0 0 22px rgba(245, 166, 35, .05);
}


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

.board-why-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 10px;

    margin-bottom: 21px;
}


.board-why-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 2.5;
}


/* Icon colors */

.why-yellow {
    color: #ffae00;
    background: rgba(255, 174, 0, .12);
}

.why-orange {
    color: #ff9635;
    background: rgba(255, 150, 53, .12);
}

.why-green {
    color: #00d98b;
    background: rgba(0, 217, 139, .12);
}

.why-purple {
    color: #a66cff;
    background: rgba(166, 108, 255, .13);
}


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

.board-why-card h3 {
    margin: 0 0 10px;

    color: #fff1cd;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.3px;
}


.board-why-card p {
    margin: 0;

    color: #c2a975;

    font-size: 15px;

    line-height: 1.58;
}


/* =========================================================
   KPI AREA
========================================================= */

.board-kpi-area {
    padding-top: 26px;
}


.board-kpi-title {
    margin: 0 0 23px;

    color: #fff3d1;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.8px;
}


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

.board-kpi-card {
    display: flex;

    align-items: center;

    gap: 22px;

    min-height: 106px;

    padding: 15px 19px;

    margin-bottom: 16px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .38);

    border-radius: 11px;

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


.board-kpi-card:last-child {
    margin-bottom: 0;
}


.board-kpi-card:hover {
    transform: translateX(4px);

    background: #211802;

    border-color: rgba(245, 166, 35, .68);

    box-shadow:
        0 8px 22px rgba(245, 166, 35, .08);
}


/* =========================================================
   KPI NUMBER
========================================================= */

.board-kpi-number {
    flex: 0 0 auto;

    min-width: 82px;

    color: #f5a623;

    font-size: 27px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.7px;
}


/* =========================================================
   KPI INFO
========================================================= */

.board-kpi-info {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.board-kpi-info span {
    color: #a99569;

    font-size: 13px;

    line-height: 1.2;
}


.board-kpi-info strong {
    color: #eee1bd;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .board-why-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .board-kpi-area {
        padding-top: 0;
    }

}


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

@media (max-width: 700px) {

    .board-why-section {
        padding: 65px 0 70px;
    }

    .board-why-container {
        width: calc(100% - 30px);
    }


    .board-why-header {
        margin-bottom: 35px;
    }


    .board-why-header h2 {
        font-size: 29px;

        line-height: 1.22;

        letter-spacing: -.7px;
    }


    .board-why-header p {
        font-size: 14px;

        line-height: 1.55;
    }


    .board-why-cards {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .board-why-card {
        min-height: auto;

        padding: 25px 23px;
    }


    .board-why-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 18px;
    }


    .board-why-card h3 {
        font-size: 18px;
    }


    .board-why-card p {
        font-size: 14px;
    }


    .board-kpi-title {
        font-size: 26px;
    }


    .board-kpi-card {
        gap: 15px;

        min-height: 82px;

        padding: 14px 15px;
    }


    .board-kpi-number {
        min-width: 72px;

        font-size: 23px;
    }


    .board-kpi-info span {
        font-size: 12px;
    }


    .board-kpi-info strong {
        font-size: 13px;
    }

}

/* =========================================================
    CASE STUDY SECTION
 ========================================================= */

.board-case-section {
    position: relative;
    width: 100%;
    padding: 82px 0 90px;

    background: #080600;

    overflow: hidden;
}

.board-case-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}


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

.board-case-header {
    max-width: 1000px;
    margin: 0 auto 48px;

    text-align: center;
}

.board-case-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 14px;

    border: 1px solid rgba(245, 166, 35, .45);
    border-radius: 30px;

    background: rgba(245, 166, 35, .08);

    color: #f5a623;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .5px;

    margin-bottom: 18px;
}

.board-case-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.6;
}


.board-case-header h2 {
    margin: 0;

    color: #fff3d0;

    font-size: clamp(32px, 4vw, 40px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1px;
}

.board-case-header h2 span {
    color: #f5a623;
}


.board-case-header p {
    max-width: 680px;

    margin: 16px auto 0;

    color: #a89467;

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   MAIN TWO COLUMN
========================================================= */

.board-case-layout {
    display: grid;

    grid-template-columns: 1.02fr 1fr;

    gap: 52px;

    align-items: start;
}


/* =========================================================
   LEFT STORY
========================================================= */

.board-case-left {
    min-width: 0;
}


.board-case-story-badge {
    display: inline-flex;

    padding: 8px 15px;

    border: 1px solid rgba(166, 108, 255, .45);

    border-radius: 30px;

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

    color: #a66cff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;

    margin-bottom: 24px;
}


/* =========================================================
   STORY BLOCK
========================================================= */

.board-case-block {
    margin-bottom: 25px;
}

.board-case-block h3,
.board-case-results h3 {
    margin: 0 0 15px;

    color: #fff1cc;

    font-size: 29px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.7px;
}


.board-case-block p {
    margin: 0;

    color: #c3aa76;

    font-size: 16px;

    line-height: 1.7;
}


.board-case-block ul {
    margin: 14px 0 0;

    padding-left: 22px;

    color: #c3aa76;

    font-size: 16px;

    line-height: 1.7;
}

.board-case-block li {
    padding-left: 3px;
    margin-bottom: 4px;
}


/* =========================================================
   RESULTS
========================================================= */

.board-case-results {
    margin-top: 27px;
}


.board-case-results h3 {
    margin-bottom: 23px;
}


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

.board-result-card {
    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 84px;

    padding: 13px 19px;

    margin-bottom: 15px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .40);

    border-radius: 10px;

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

.board-result-card:hover {
    transform: translateX(4px);

    background: #211802;

    border-color: rgba(245, 166, 35, .70);

    box-shadow:
        0 8px 22px rgba(245, 166, 35, .08);
}


.board-result-value {
    flex: 0 0 auto;

    min-width: 76px;

    color: #f5a623;

    font-size: 27px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.7px;
}


.board-result-info {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.board-result-info span {
    color: #a99569;

    font-size: 13px;

    line-height: 1.2;
}

.board-result-info strong {
    color: #eee0bb;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   RIGHT — GROWTH METRICS
========================================================= */

.board-case-right {
    min-width: 0;
}


.board-growth-card {
    padding: 41px 40px 40px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .45);

    border-radius: 22px;

    margin-bottom: 32px;

    box-shadow:
        0 12px 35px rgba(245, 166, 35, .04);
}


.board-growth-card h4 {
    margin: 0 0 35px;

    text-align: center;

    color: #f5a623;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .5px;
}


.board-growth-grid {
    display: grid;

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

    gap: 23px;
}


.board-growth-item {
    min-height: 123px;

    padding: 25px 15px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    background: rgba(27, 20, 2, .75);

    border: 1px solid rgba(177, 122, 0, .38);

    border-radius: 16px;
}


.board-growth-item strong {
    display: block;

    color: #f5a623;

    font-size: 30px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.7px;

    margin-bottom: 15px;
}


.board-growth-item span {
    color: #a99569;

    font-size: 13px;

    line-height: 1.3;
}


/* =========================================================
   TESTIMONIAL
========================================================= */

.board-case-testimonial {
    position: relative;

    padding: 34px 35px 30px;

    background: #1b1402;

    border: 1px solid rgba(177, 122, 0, .42);

    border-radius: 22px;

    overflow: hidden;

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

.board-case-testimonial:hover {
    transform: translateY(-4px);

    border-color: rgba(245, 166, 35, .68);

    box-shadow:
        0 12px 30px rgba(245, 166, 35, .08);
}


.board-quote-mark {
    position: absolute;

    top: 14px;
    left: 32px;

    color: rgba(245, 166, 35, .22);

    font-size: 62px;

    line-height: 1;

    font-family: Georgia, serif;

    font-weight: 900;
}


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

@media (max-width: 600px) {

    .board-quote-mark {
        top: 10px;
        left: 18px;
        font-size: 48px;
    }

}


@media (max-width: 400px) {

    .board-quote-mark {
        top: 8px;
        left: 15px;
        font-size: 42px;
    }

}


.board-stars {
    position: relative;

    color: #f5a623;

    font-size: 17px;

    letter-spacing: 1px;

    margin-bottom: 27px;
}


.board-case-testimonial p {
    position: relative;

    margin: 0 0 28px;

    color: #eee1bd;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 600;
}


/* =========================================================
   USER
========================================================= */

.board-testimonial-user {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;
}


.board-user-avatar {
    width: 53px;
    height: 53px;

    flex: 0 0 53px;

    display: flex;

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

    border-radius: 50%;

    background: #f5a623;

    color: #160f00;

    font-size: 16px;

    font-weight: 800;
}


.board-user-info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.board-user-info strong {
    color: #eee2bd;

    font-size: 15px;

    font-weight: 800;
}


.board-user-info span {
    color: #a99569;

    font-size: 13px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .board-case-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .board-case-right {
        order: 2;
    }

    .board-case-left {
        order: 1;
    }

}


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

@media (max-width: 700px) {

    .board-case-section {
        padding: 65px 0 70px;
    }

    .board-case-container {
        width: calc(100% - 30px);
    }


    .board-case-header {
        margin-bottom: 35px;
    }


    .board-case-header h2 {
        font-size: 29px;

        line-height: 1.22;

        letter-spacing: -.7px;
    }


    .board-case-header p {
        font-size: 14px;

        line-height: 1.55;
    }


    .board-case-story-badge {
        font-size: 11px;

        padding: 7px 12px;
    }


    .board-case-block h3,
    .board-case-results h3 {
        font-size: 25px;
    }


    .board-case-block p,
    .board-case-block ul {
        font-size: 14px;

        line-height: 1.65;
    }


    .board-result-card {
        gap: 13px;

        min-height: 78px;

        padding: 12px 14px;
    }


    .board-result-value {
        min-width: 72px;

        font-size: 22px;
    }


    .board-result-info span {
        font-size: 11px;
    }


    .board-result-info strong {
        font-size: 12px;
    }


    .board-growth-card {
        padding: 30px 20px;

        border-radius: 18px;
    }


    .board-growth-card h4 {
        margin-bottom: 25px;

        font-size: 12px;
    }


    .board-growth-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .board-growth-item {
        min-height: 95px;

        padding: 20px;
    }


    .board-growth-item strong {
        font-size: 27px;

        margin-bottom: 9px;
    }


    .board-case-testimonial {
        padding: 30px 23px 27px;

        border-radius: 18px;
    }


    .board-case-testimonial p {
        font-size: 14px;

        line-height: 1.65;
    }

}

/* =========================================
   BOARD REVIEWS SECTION
========================================= */

.board-reviews-section {
    width: 100%;
    background: #201600;
    padding: 78px 20px 70px;
    position: relative;
    overflow: hidden;
}

.board-reviews-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}


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

.board-reviews-header {
    text-align: center;
    margin-bottom: 45px;
}

.board-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(245, 166, 35, 0.42);
    border-radius: 30px;
    background: rgba(245, 166, 35, 0.055);
    color: #f5a623;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-bottom: 18px;
}

.board-reviews-badge span {
    font-size: 15px;
    line-height: 1;
}

.board-reviews-header h2 {
    margin: 0;
    color: #fff1c9;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.board-reviews-header h2 span {
    color: #f5a623;
}


/* =========================================
   SLIDER
========================================= */

.board-review-slider {
    width: 100%;
    position: relative;
}

.board-review-slide {
    display: none;
    width: 100%;
    animation: boardReviewFade 0.45s ease;
}

.board-review-slide.active {
    display: block;
}

@keyframes boardReviewFade {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


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

.board-review-card {
    width: 100%;
    min-height: 325px;
    padding: 45px 55px 38px;
    border: 1px solid rgba(245, 166, 35, 0.28);
    border-radius: 25px;
    background: #171000;
    position: relative;
    text-align: center;
    transition: all 0.35s ease;
}

.board-review-card:hover {
    border-color: rgba(245, 166, 35, 0.5);
    box-shadow: 0 18px 45px rgba(245, 166, 35, 0.08);
}


/* Big Quote */

.board-review-quote {
    position: absolute;
    left: 32px;
    top: 17px;
    color: rgba(245, 166, 35, 0.20);
    font-family: Georgia, serif;
    font-size: 67px;
    line-height: 1;
    font-weight: 700;
}


/* Stars */

.board-review-stars {
    color: #f5a623;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 27px;
}


/* Text */

.board-review-text {
    max-width: 720px;
    margin: 0 auto;
    color: #f2e5bd;
    font-size: 17px;
    line-height: 1.72;
    font-weight: 500;
}


/* =========================================
   USER
========================================= */

.board-review-user {
    margin-top: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.board-review-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: #f5a623;
    color: #120d02;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}

.board-review-info {
    text-align: left;
}

.board-review-info h4 {
    margin: 0 0 4px;
    color: #fff1c9;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.board-review-info p {
    margin: 0;
    color: #9e8750;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================
   CONTROLS
========================================= */

.board-review-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 31px;
}

.board-review-arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(245, 166, 35, 0.35);
    background: rgba(245, 166, 35, 0.025);
    color: #a8883f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.board-review-arrow svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.board-review-arrow:hover {
    color: #f5a623;
    border-color: rgba(245, 166, 35, 0.65);
    background: rgba(245, 166, 35, 0.08);
    transform: translateY(-2px);
}


/* =========================================
   DOTS
========================================= */

.board-review-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.board-review-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid #8d7849;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.board-review-dot.active {
    width: 24px;
    background: #f5a623;
    border-color: #f5a623;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.28);
}


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

@media (max-width: 900px) {

    .board-reviews-section {
        padding: 65px 18px 60px;
    }

    .board-reviews-header h2 {
        font-size: 35px;
    }

    .board-review-card {
        padding: 42px 38px 35px;
    }

    .board-review-text {
        font-size: 16px;
    }
}


@media (max-width: 600px) {

    .board-reviews-section {
        padding: 55px 14px 50px;
    }

    .board-reviews-header {
        margin-bottom: 32px;
    }

    .board-reviews-header h2 {
        font-size: 29px;
        letter-spacing: -0.7px;
    }

    .board-reviews-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    .board-review-card {
        min-height: auto;
        padding: 38px 20px 30px;
        border-radius: 20px;
    }

    .board-review-quote {
        left: 20px;
        top: 13px;
        font-size: 54px;
    }

    .board-review-stars {
        font-size: 16px;
        margin-bottom: 21px;
    }

    .board-review-text {
        font-size: 14px;
        line-height: 1.65;
    }

    .board-review-user {
        margin-top: 23px;
        gap: 11px;
    }

    .board-review-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 15px;
    }

    .board-review-info h4 {
        font-size: 14px;
    }

    .board-review-info p {
        font-size: 11px;
    }

    .board-review-controls {
        margin-top: 25px;
        gap: 13px;
    }

    .board-review-arrow {
        width: 38px;
        height: 38px;
    }
}

/* =========================================
   BOARD COMPARISON SECTION
========================================= */

.board-comparison-section {
    width: 100%;
    background: #0b0802;
    padding: 78px 20px 72px;
    position: relative;
    overflow: hidden;
}

.board-comparison-container {
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
}


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

.board-comparison-header {
    text-align: center;
    margin-bottom: 48px;
}

.board-comparison-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: 30px;

    background: rgba(245, 166, 35, 0.06);

    color: #f5a623;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;

    margin-bottom: 19px;
}

.board-comparison-badge span {
    font-size: 14px;
}


.board-comparison-header h2 {
    margin: 0;

    color: #fff2cb;

    font-size: 40px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -1.2px;
}


.board-comparison-header h2 span {
    color: #f5a623;
}


.board-comparison-header p {
    max-width: 690px;

    margin: 15px auto 0;

    color: #9d8750;

    font-size: 16px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================
   TABLE WRAPPER
========================================= */

.board-comparison-table-wrap {
    width: 100%;

    border-radius: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    background: #171000;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);
}


/* =========================================
   TABLE
========================================= */

.board-comparison-table {
    width: 100%;
    min-width: 980px;

    border-collapse: separate;
    border-spacing: 0;

    color: #d9c596;

    font-size: 15px;
}


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

.board-comparison-table thead th {
    height: 55px;

    padding: 0 18px;

    background: #4b3007;

    color: #f9edcb;

    text-align: left;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    border-bottom: 1px solid rgba(245, 166, 35, 0.24);
}


/* First Header */

.board-comparison-table thead th:first-child {
    width: 200px;

    border-top-left-radius: 17px;
}


/* Last Header */

.board-comparison-table thead th:last-child {
    border-top-right-radius: 17px;
}


/* Board Header */

.board-comparison-table thead .board-highlight-head {
    background: #573705;
    color: #fff0c7;

    border-left: 1px solid rgba(245, 166, 35, 0.18);
    border-right: 1px solid rgba(245, 166, 35, 0.18);
}


/* =========================================
   TABLE BODY
========================================= */

.board-comparison-table tbody td {
    height: 53px;

    padding: 12px 18px;

    background: #1a1303;

    border-bottom: 1px solid rgba(245, 166, 35, 0.10);

    color: #bca878;

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

    white-space: nowrap;

    transition: background 0.25s ease;
}


/* Last Row */

.board-comparison-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================
   FEATURE COLUMN
========================================= */

.board-comparison-table .board-feature-name {
    color: #dfcda4;

    font-weight: 800;

    background: #1c1403;

    border-right: 1px solid rgba(245, 166, 35, 0.28);
}


/* =========================================
   BOARD HIGHLIGHT COLUMN
========================================= */

.board-comparison-table tbody .board-highlight-cell {
    background: #211802;

    border-left: 1px solid rgba(245, 166, 35, 0.28);
    border-right: 1px solid rgba(245, 166, 35, 0.28);

    color: #cbb27a;
}


/* =========================================
   ROW HOVER
========================================= */

.board-comparison-table tbody tr:hover td {
    background: #211804;
}

.board-comparison-table tbody tr:hover .board-highlight-cell {
    background: #291d04;
}


/* =========================================
   POSITIVE / NEGATIVE
========================================= */

.board-comparison-table .board-positive {
    color: #00d5a3;
    font-size: 16px;
}

.board-comparison-table .board-negative {
    color: #ff4545;
    font-size: 16px;
}

.board-comparison-table .board-moderate {
    color: #f5a623;
    font-size: 16px;
}


/* =========================================
   RATING
========================================= */

.board-rating {
    font-size: 15px !important;
    letter-spacing: 0.3px;
}

.board-rating span {
    margin-left: 3px;
    letter-spacing: 0;
}

.board-rating-green {
    color: #00cfa2 !important;
}

.board-rating-orange {
    color: #f5a623 !important;
}


/* =========================================
   BEST FOR PILLS
========================================= */

.board-best-pill {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    border-radius: 18px;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}


/* Gold */

.board-pill-gold {
    color: #f4b400;
    background: rgba(245, 166, 35, 0.13);
}


/* Blue */

.board-pill-blue {
    color: #55a9ff;
    background: rgba(63, 144, 225, 0.13);
}


/* Green */

.board-pill-green {
    color: #00c995;
    background: rgba(0, 201, 149, 0.13);
}


/* Purple */

.board-pill-purple {
    color: #c477ff;
    background: rgba(176, 79, 235, 0.13);
}


/* =========================================
   BOTTOM NOTE
========================================= */

.board-comparison-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 7px;

    max-width: 1080px;

    margin: 25px auto 0;

    color: #9f8954;

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

    text-align: center;
}


.board-note-star {
    color: #d6b26c;

    font-size: 14px;

    flex-shrink: 0;
}


.board-comparison-note a {
    color: #f5a623;

    text-decoration: none;

    transition: color 0.25s ease;
}

.board-comparison-note a:hover {
    color: #ffc45e;
    text-decoration: underline;
}


/* =========================================
   SCROLLBAR
========================================= */

.board-comparison-table-wrap::-webkit-scrollbar {
    height: 7px;
}

.board-comparison-table-wrap::-webkit-scrollbar-track {
    background: #110d03;
}

.board-comparison-table-wrap::-webkit-scrollbar-thumb {
    background: #5e420d;
    border-radius: 10px;
}

.board-comparison-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #8a6113;
}


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

@media (max-width: 900px) {

    .board-comparison-section {
        padding: 65px 16px 60px;
    }

    .board-comparison-header h2 {
        font-size: 34px;
    }

    .board-comparison-header p {
        font-size: 15px;
    }

    .board-comparison-table {
        min-width: 930px;
    }
}


@media (max-width: 600px) {

    .board-comparison-section {
        padding: 55px 12px 50px;
    }

    .board-comparison-header {
        margin-bottom: 32px;
    }

    .board-comparison-header h2 {
        font-size: 29px;
        line-height: 1.25;
        letter-spacing: -0.6px;
    }

    .board-comparison-header p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    .board-comparison-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    .board-comparison-table-wrap {
        border-radius: 14px;
    }

    .board-comparison-table {
        min-width: 920px;
    }

    .board-comparison-table thead th {
        height: 52px;
        padding: 0 15px;
        font-size: 12px;
    }

    .board-comparison-table tbody td {
        height: 50px;
        padding: 11px 15px;
        font-size: 13px;
    }

    .board-comparison-note {
        font-size: 12px;
        line-height: 1.6;
        padding: 0 4px;
    }
}

/* =========================================
   SUSTAINABILITY SECTION
========================================= */

.board-sustainability-section {
    width: 100%;
    background: #1e1400;
    padding: 82px 20px 70px;
    position: relative;
    overflow: hidden;
}

.board-sustainability-container {
    width: 100%;
    max-width: 1165px;
    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.board-sustainability-header {
    text-align: center;
    margin-bottom: 43px;
}

.board-sustainability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(245, 166, 35, .42);
    border-radius: 30px;

    background: rgba(245, 166, 35, .055);

    color: #f5a623;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;

    margin-bottom: 18px;
}

.board-sustainability-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}


.board-sustainability-header h2 {
    margin: 0;

    color: #fff1c9;

    font-size: 40px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -1.2px;
}

.board-sustainability-header h2 span {
    color: #f5a623;
}


.board-sustainability-header p {
    max-width: 700px;

    margin: 15px auto 0;

    color: #a38b55;

    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   GRID
========================================= */

.board-sustainability-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* =========================================
   CARD
========================================= */

.board-sustainability-card {
    min-height: 365px;

    padding: 32px 32px 29px;

    border: 1px solid rgba(245, 166, 35, .24);
    border-radius: 16px;

    background: #181100;

    position: relative;
    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.board-sustainability-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 166, 35, .55);

    background: #1b1301;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, .24),
        0 0 25px rgba(245, 166, 35, .06);
}


/* =========================================
   ICON
========================================= */

.board-sustainability-icon {
    width: 52px;
    height: 52px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 21px;
}


.board-sustainability-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 2.4;
}


/* Orange */

.board-icon-orange {
    color: #f5a623;
    background: rgba(245, 166, 35, .12);
}


/* Warning */

.board-icon-warning {
    color: #ff9d45;
    background: rgba(255, 157, 69, .12);
}


/* Green */

.board-icon-green {
    color: #00d1a0;
    background: rgba(0, 209, 160, .11);
}


/* Purple */

.board-icon-purple {
    color: #a66cff;
    background: rgba(166, 108, 255, .11);
}


/* Blue */

.board-icon-blue {
    color: #428cff;
    background: rgba(66, 140, 255, .11);
}


/* Teal */

.board-icon-teal {
    color: #00bfae;
    background: rgba(0, 191, 174, .11);
}


/* =========================================
   CARD CONTENT
========================================= */

.board-sustainability-card h3 {
    margin: 0 0 12px;

    color: #fff0c6;

    font-size: 18px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -.35px;
}


.board-sustainability-card p {
    margin: 0;

    color: #c1a96f;

    font-size: 15px;
    line-height: 1.68;
    font-weight: 500;
}


.board-sustainability-card strong {
    color: #e8d49e;
    font-weight: 800;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .board-sustainability-section {
        padding: 70px 18px 60px;
    }

    .board-sustainability-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .board-sustainability-card {
        min-height: 330px;
    }

    .board-sustainability-header h2 {
        font-size: 35px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .board-sustainability-section {
        padding: 58px 15px 50px;
    }

    .board-sustainability-header {
        margin-bottom: 32px;
    }

    .board-sustainability-header h2 {
        font-size: 29px;
        line-height: 1.25;
        letter-spacing: -.7px;
    }

    .board-sustainability-header p {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 12px;
    }

    .board-sustainability-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    .board-sustainability-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .board-sustainability-card {
        min-height: auto;
        padding: 25px 22px 24px;
        border-radius: 14px;
    }

    .board-sustainability-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .board-sustainability-icon svg {
        width: 23px;
        height: 23px;
    }

    .board-sustainability-card h3 {
        font-size: 17px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .board-sustainability-card p {
        font-size: 14px;
        line-height: 1.65;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .board-sustainability-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .board-sustainability-header h2 {
        font-size: 26px;
    }

    .board-sustainability-card {
        padding: 23px 19px;
    }

    .board-sustainability-card h3 {
        font-size: 16px;
    }

    .board-sustainability-card p {
        font-size: 13px;
    }

}

/* =========================================
   BOARD FAQ SECTION
========================================= */

.board-faq-section {
    width: 100%;
    background: #0b0802;

    padding: 82px 20px 75px;

    position: relative;
    overflow: hidden;
}


.board-faq-container {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.board-faq-header {
    text-align: center;

    margin-bottom: 48px;
}


.board-faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 15px;

    border: 1px solid rgba(245, 166, 35, .45);
    border-radius: 30px;

    background: rgba(245, 166, 35, .055);

    color: #f5a623;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .6px;

    margin-bottom: 18px;
}


.board-faq-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


.board-faq-header h2 {
    margin: 0;

    color: #fff1c9;

    font-size: 40px;
    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.2px;
}


.board-faq-header h2 span {
    color: #f5a623;
}


.board-faq-header p {
    max-width: 760px;

    margin: 15px auto 0;

    color: #a48c55;

    font-size: 16px;
    line-height: 1.7;

    font-weight: 500;
}


/* =========================================
   FAQ LIST
========================================= */

.board-faq-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================
   FAQ ITEM
========================================= */

.board-faq-item {
    width: 100%;

    border: 1px solid rgba(245, 166, 35, .28);

    border-radius: 16px;

    background: #1a1303;

    overflow: hidden;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.board-faq-item:hover {
    border-color: rgba(245, 166, 35, .45);
}


/* Active */

.board-faq-item.active {
    border-color: rgba(245, 166, 35, .65);

    background: #1c1403;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .16);
}


/* =========================================
   QUESTION
========================================= */

.board-faq-question {
    width: 100%;

    min-height: 63px;

    padding: 15px 22px;

    border: 0;

    background: transparent;

    color: #f5ebcc;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    text-align: left;

    cursor: pointer;

    font-family: inherit;
}


.board-faq-question>span:first-child {
    font-size: 15px;
    line-height: 1.45;

    font-weight: 800;

    transition: color .25s ease;
}


.board-faq-item.active .board-faq-question>span:first-child {
    color: #f5a623;
}


/* =========================================
   PLUS / CLOSE ICON
========================================= */

.board-faq-icon {
    width: 28px;
    height: 28px;

    min-width: 28px;

    border-radius: 50%;

    background: rgba(245, 166, 35, .12);

    color: #f5a623;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .3s ease,
        background .3s ease;
}


.board-faq-icon svg {
    width: 15px;
    height: 15px;

    stroke-width: 2.5;
}


.board-faq-item.active .board-faq-icon {
    background: rgba(245, 166, 35, .18);

    transform: rotate(0deg);
}


/* =========================================
   ANSWER
========================================= */

.board-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .4s ease,
        padding .4s ease;

    padding: 0 22px;
}


.board-faq-answer p {
    overflow: hidden;

    margin: 0;

    color: #aa9157;

    font-size: 15px;

    line-height: 1.72;

    font-weight: 500;
}


.board-faq-item.active .board-faq-answer {
    grid-template-rows: 1fr;

    padding-top: 0;
    padding-bottom: 21px;
}


.board-faq-item.active .board-faq-answer p {
    padding-top: 0;
}


.board-faq-answer strong {
    color: #bca46d;

    font-weight: 800;
}


.board-faq-answer em {
    color: #bca46d;
}


.faq-orange-text {
    color: #f5a623 !important;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .board-faq-section {
        padding: 70px 18px 60px;
    }

    .board-faq-header h2 {
        font-size: 35px;
    }

    .board-faq-header p {
        font-size: 15px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .board-faq-section {
        padding: 58px 14px 50px;
    }

    .board-faq-header {
        margin-bottom: 32px;
    }

    .board-faq-header h2 {
        font-size: 28px;

        line-height: 1.25;

        letter-spacing: -.7px;
    }

    .board-faq-header p {
        margin-top: 12px;

        font-size: 14px;

        line-height: 1.6;
    }

    .board-faq-badge {
        font-size: 11px;

        padding: 6px 12px;
    }

    .board-faq-list {
        gap: 11px;
    }

    .board-faq-item {
        border-radius: 13px;
    }

    .board-faq-question {
        min-height: 59px;

        padding: 14px 15px;

        gap: 12px;
    }

    .board-faq-question>span:first-child {
        font-size: 13px;

        line-height: 1.45;
    }

    .board-faq-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .board-faq-icon svg {
        width: 14px;
        height: 14px;
    }

    .board-faq-answer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .board-faq-answer p {
        font-size: 13px;

        line-height: 1.7;
    }

    .board-faq-item.active .board-faq-answer {
        padding-bottom: 17px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .board-faq-section {
        padding-left: 11px;
        padding-right: 11px;
    }

    .board-faq-header h2 {
        font-size: 25px;
    }

    .board-faq-question {
        padding-left: 13px;
        padding-right: 13px;
    }

    .board-faq-question>span:first-child {
        font-size: 12.5px;
    }

    .board-faq-answer {
        padding-left: 13px;
        padding-right: 13px;
    }

    .board-faq-answer p {
        font-size: 12.5px;
    }

}

/* =========================================
   FINAL CTA SECTION
========================================= */

.board-final-cta-section {
    width: 100%;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(245, 166, 35, .13),
            transparent 38%),
        #0b0802;

    padding: 96px 20px 84px;
}


/* =========================================
   SUBTLE DOT / GRID BACKGROUND
========================================= */

.board-final-cta-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(rgba(245, 166, 35, .13) 1px,
            transparent 1px);

    background-size: 40px 40px;

    opacity: .38;
}


.board-final-cta-section::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 350px;

    left: 50%;
    top: -180px;

    transform: translateX(-50%);

    background: rgba(245, 166, 35, .07);

    filter: blur(100px);

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.board-final-cta-container {
    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    position: relative;
    z-index: 2;

    text-align: center;
}


/* =========================================
   BADGE
========================================= */

.board-final-cta-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 17px;

    border-radius: 30px;

    border: 1px solid rgba(245, 166, 35, .55);

    background: rgba(245, 166, 35, .075);

    color: #f5a623;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .55px;

    margin-bottom: 27px;
}


.board-final-cta-badge svg {
    width: 14px;
    height: 14px;

    stroke-width: 2.5;
}


/* =========================================
   HEADING
========================================= */

.board-final-cta-container h2 {
    max-width: 1080px;

    margin: 0 auto;

    color: #fff1c9;

    font-size: 48px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.board-final-cta-container h2 span {
    color: #f5a623;
}


/* =========================================
   DESCRIPTION
========================================= */

.board-final-cta-description {
    max-width: 720px;

    margin: 21px auto 0;

    color: #a58d55;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================
   BUTTONS
========================================= */

.board-final-cta-buttons {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 16px;

    margin-top: 30px;
}


.board-cta-primary,
.board-cta-secondary {
    min-width: 180px;

    min-height: 60px;

    padding: 0 27px;

    border-radius: 32px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.board-cta-primary svg,
.board-cta-secondary svg {
    width: 17px;
    height: 17px;

    stroke-width: 2.5;
}


/* Primary */

.board-cta-primary {
    color: #120c02;

    background: linear-gradient(135deg,
            #f5a623,
            #ff9c27);

    border: 1px solid #f5a623;

    box-shadow:
        0 8px 25px rgba(245, 166, 35, .24);
}


.board-cta-primary:hover {
    color: #120c02;

    transform: translateY(-3px);

    box-shadow:
        0 13px 35px rgba(245, 166, 35, .36);
}


/* Secondary */

.board-cta-secondary {
    color: #f4ead0;

    background: rgba(255, 255, 255, .045);

    border: 1px solid rgba(255, 255, 255, .24);
}


.board-cta-secondary:hover {
    color: #fff;

    background: rgba(255, 255, 255, .08);

    border-color: rgba(245, 166, 35, .45);

    transform: translateY(-3px);
}


/* =========================================
   TRUST POINTS
========================================= */

.board-final-cta-points {
    margin-top: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 18px 27px;
}


.board-cta-point {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #9e8750;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

    white-space: nowrap;
}


.board-cta-point svg {
    width: 14px;
    height: 14px;

    color: #00c994;

    fill: #00c994;

    stroke: #0b0802;

    stroke-width: 3;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .board-final-cta-section {
        padding: 80px 18px 70px;
    }

    .board-final-cta-container h2 {
        font-size: 40px;
    }

    .board-final-cta-description {
        font-size: 16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .board-final-cta-section {
        padding: 65px 15px 58px;
    }

    .board-final-cta-badge {
        font-size: 10px;

        padding: 7px 12px;

        margin-bottom: 22px;
    }

    .board-final-cta-container h2 {
        font-size: 30px;

        line-height: 1.28;

        letter-spacing: -.7px;
    }

    .board-final-cta-description {
        margin-top: 16px;

        font-size: 14px;

        line-height: 1.65;
    }

    .board-final-cta-buttons {
        flex-direction: column;

        width: 100%;

        gap: 12px;

        margin-top: 25px;
    }

    .board-cta-primary,
    .board-cta-secondary {
        width: 100%;

        max-width: 270px;

        min-height: 54px;

        font-size: 14px;
    }

    .board-final-cta-points {
        margin-top: 31px;

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 14px 10px;
    }

    .board-cta-point {
        justify-content: flex-start;

        font-size: 11px;

        white-space: normal;

        text-align: left;
    }

    .board-cta-point svg {
        min-width: 14px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .board-final-cta-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .board-final-cta-container h2 {
        font-size: 27px;
    }

    .board-final-cta-description {
        font-size: 13px;
    }

    .board-final-cta-points {
        grid-template-columns: 1fr;
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
    }

}

/*============================ Force Matrix MLM Software =====================================*/
/* =========================================================
   FORCE MATRIX HERO
========================================================= */

.fm-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 0 55px;
    background:
        radial-gradient(circle at 86% 48%, rgba(0, 190, 145, .11), transparent 30%),
        linear-gradient(110deg, #07111f 0%, #081624 48%, #061a18 100%);
    color: #fff;
    margin-top: 90px;
}

.fm-hero .container {
    position: relative;
    z-index: 2;
}

.fm-hero-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .16;
    pointer-events: none;
}

.fm-glow-left {
    left: -220px;
    top: 100px;
    background: #00c895;
}

.fm-glow-right {
    right: -180px;
    bottom: -100px;
    background: #00d9a0;
}


/* GRID */

.fm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, .98fr);
    gap: 58px;
    align-items: center;
}


/* BADGE */

.fm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    margin-bottom: 21px;

    border: 1px solid rgba(0, 203, 153, .38);
    border-radius: 30px;

    background: rgba(0, 166, 128, .08);
    color: #00c99a;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}

.fm-hero-badge i {
    font-size: 13px;
}


/* HEADING */

.fm-hero-content h1 {
    margin: 0;
    max-width: 650px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: clamp(42px, 4.15vw, 60px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -2.2px;
}


/* DESCRIPTION */

.fm-hero-description {
    max-width: 620px;
    margin: 25px 0 0;

    color: #91a1b7;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.68;
    font-weight: 400;
}

.fm-hero-description strong {
    color: #aab8c9;
    font-weight: 700;
}


/* BUTTONS */

.fm-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.fm-btn {
    min-height: 60px;
    padding: 0 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 35px;

    text-decoration: none !important;

    font-size: 16px;
    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.fm-btn:hover {
    transform: translateY(-3px);
}


/* DEMO */

.fm-btn-demo {
    background: #10bf86;
    color: #fff;
    box-shadow: 0 12px 30px rgba(16, 191, 134, .16);
}

.fm-btn-demo:hover {
    background: #0fce90;
    color: #fff;
    box-shadow: 0 15px 35px rgba(16, 191, 134, .28);
}


/* PRICING */

.fm-btn-price {
    background: #09afd0;
    color: #fff;
    box-shadow: 0 12px 30px rgba(9, 175, 208, .13);
}

.fm-btn-price:hover {
    background: #10badb;
    color: #fff;
    box-shadow: 0 15px 35px rgba(9, 175, 208, .24);
}


/* LEARN MORE */

.fm-btn-more {
    flex-basis: 181px;

    background: rgba(255, 255, 255, .05);
    border: 2px solid rgba(176, 185, 198, .55);

    color: #fff;
}

.fm-btn-more:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}


/* =========================================================
   HERO COUNTERS
========================================================= */

.fm-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 56px;

    margin-top: 43px;
}

.fm-stat {
    min-width: 84px;
}

.fm-stat-number {
    color: #08c995;

    font-family: "Poppins", sans-serif;
    font-size: 27px;
    line-height: 1;
    font-weight: 800;
}

.fm-stat-label {
    margin-top: 12px;

    color: #65758d;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .65px;
    white-space: nowrap;
}


/* =========================================================
   MATRIX CARD
========================================================= */

.fm-matrix-wrapper {
    display: flex;
    justify-content: center;
}

.fm-matrix-card {
    width: 100%;
    max-width: 570px;

    min-height: 545px;
    padding: 30px 24px 25px;

    position: relative;

    border: 1px solid rgba(0, 211, 160, .22);
    border-radius: 28px;

    background:
        linear-gradient(145deg,
            rgba(17, 33, 52, .98),
            rgba(9, 27, 43, .98));

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


/* MATRIX TITLE */

.fm-matrix-card h3 {
    margin: 0;

    text-align: center;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.fm-matrix-subtitle {
    margin-top: 8px;

    text-align: center;

    color: #00c994;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .35px;
}


/* LEVELS */

.fm-level {
    display: flex;
    justify-content: center;
}

.level-zero {
    margin-top: 23px;
}

.level-one {
    margin-top: 19px;
}

.level-two {
    margin-top: 17px;
}

.level-three {
    margin-top: 15px;
}


/* USER */

.fm-user-node {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(145deg, #12cf91, #00a978);
    border: 1px solid rgba(0, 255, 188, .35);

    color: #fff;
    font-size: 20px;

    box-shadow: 0 5px 18px rgba(0, 211, 154, .20);
}

.fm-you {
    position: absolute;
    margin-top: 53px;

    color: #65758a;
    font-size: 10px;
}

.fm-level-tag {
    position: absolute;
    margin-top: 71px;

    padding: 2px 7px;

    border-radius: 10px;

    color: #00c993;
    background: rgba(0, 199, 147, .12);

    font-size: 9px;
    font-weight: 700;
}


/* NODE GROUP */

.fm-node-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
}

.fm-four {
    gap: 9px;
}

.fm-eight {
    gap: 8px;
}


/* NODE ITEM */

.fm-node-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.fm-node-item>span {
    margin-top: 4px;
    color: #66778d;
    font-size: 9px;
}

.fm-node-item>b {
    margin-top: 6px;
    padding: 2px 6px;

    border-radius: 9px;

    background: rgba(0, 196, 145, .11);
    color: #00c995;

    font-size: 8px;
    font-weight: 700;
}


/* NODE */

.fm-node {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 2px solid rgba(0, 196, 151, .30);
    background: rgba(67, 96, 118, .40);

    color: #8797a9;

    font-size: 12px;
    font-weight: 700;
}


/* SPILLOVER */

.spill-node .fm-node {
    border-color: #00c9ef;
    color: #00c9ef;
    background: rgba(0, 165, 196, .12);
}

.spill-node small {
    position: absolute;
    top: 60px;

    width: 65px;

    color: #00d3b0;
    font-size: 7px;
    text-align: center;
    white-space: nowrap;
}


/* MATRIX MORE */

.fm-more-dots {
    margin-top: 7px;

    text-align: center;

    color: #00c993;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: 3px;
}

.fm-continues {
    margin-top: 1px;

    text-align: center;

    color: #68788c;

    font-size: 11px;
}


/* =========================================================
   MATRIX INFO
========================================================= */

.fm-matrix-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;

    margin-top: 22px;
}

.fm-info-box {
    min-height: 62px;
    padding: 11px 5px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: rgba(17, 39, 59, .72);
}

.fm-info-box span {
    color: #65768b;

    font-size: 8px;
    font-weight: 600;
    text-align: center;
}

.fm-info-box strong {
    margin-top: 5px;

    color: #00c995;

    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}


/* FEATURES */

.fm-matrix-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;

    margin-top: 14px;
}

.fm-matrix-features span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 10px;

    border: 1px solid rgba(0, 201, 149, .23);
    border-radius: 20px;

    background: rgba(0, 201, 149, .05);

    color: #00c995;

    font-size: 9px;
    font-weight: 600;
}

.fm-matrix-features i {
    font-size: 9px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .fm-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .fm-hero-content h1 {
        font-size: 43px;
    }

    .fm-hero-description {
        font-size: 15px;
    }

    .fm-hero-stats {
        gap: 25px;
    }

    .fm-matrix-card {
        transform: scale(.96);
    }
}


@media (max-width: 991px) {

    .fm-hero {
        padding-top: 35px;
    }

    .fm-hero-grid {
        grid-template-columns: 1fr;
    }

    .fm-hero-content {
        text-align: center;
    }

    .fm-hero-content h1,
    .fm-hero-description {
        margin-left: auto;
        margin-right: auto;
    }



    .fm-hero-stats {
        justify-content: center;
    }

    .fm-matrix-wrapper {
        margin-top: 15px;
    }
}


@media (max-width: 767px) {

    .fm-hero {
        padding: 28px 0 45px;
    }

    .fm-hero-badge {
        font-size: 11px;
        padding: 8px 13px;
    }

    .fm-hero-content h1 {
        font-size: 34px;
        line-height: 1.16;
        letter-spacing: -1.3px;
    }

    .fm-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }


    .fm-btn {
        min-height: 52px;
        padding: 0 21px;
        font-size: 14px;
    }

    .fm-btn-more {
        flex-basis: auto;
    }

    .fm-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 10px;
        margin-top: 35px;
    }

    .fm-stat {
        text-align: center;
    }

    .fm-stat-number {
        font-size: 25px;
    }

    .fm-stat-label {
        font-size: 10px;
    }

    .fm-matrix-card {
        min-height: auto;
        padding: 25px 10px 20px;
        border-radius: 22px;
        transform: none;
    }

    .fm-matrix-card h3 {
        font-size: 16px;
    }

    .fm-matrix-subtitle {
        font-size: 9px;
    }

    .fm-node-group {
        gap: 8px;
    }

    .fm-four {
        gap: 5px;
    }

    .fm-eight {
        gap: 3px;
    }

    .fm-node {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }

    .fm-matrix-info {
        gap: 4px;
    }

    .fm-info-box {
        min-height: 58px;
    }

    .fm-info-box span {
        font-size: 7px;
    }

    .fm-info-box strong {
        font-size: 16px;
    }

    .fm-matrix-features span {
        font-size: 8px;
        padding: 5px 7px;
    }
}


@media (max-width: 420px) {

    .fm-hero-content h1 {
        font-size: 29px;
    }


    .fm-btn {
        width: 100%;
    }

    .fm-node {
        width: 30px;
        height: 30px;
        font-size: 9px;
    }

    .fm-node-group {
        gap: 4px;
    }

    .fm-four {
        gap: 2px;
    }

    .fm-eight {
        gap: 1px;
    }
}

@media (max-width: 767px) {

    .fm-hero-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .fm-btn {
        width: auto;
        min-height: 52px;
        padding: 0 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    .fm-btn-more {
        flex-basis: auto;
    }
}

/* =========================================================
   FORCE MATRIX STATS
========================================================= */

.fm-stats-section {
    position: relative;
    overflow: hidden;

    padding: 34px 0 31px;

    background: #0b1b2d;

    border-top: 1px solid rgba(255, 255, 255, .025);
    border-bottom: 1px solid rgba(255, 255, 255, .025);
}

.fm-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}

.fm-stat-box {
    text-align: center;
    position: relative;
}

.fm-stat-value {
    color: #08c995;

    font-family: "Poppins", sans-serif;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 800;
}

.fm-stat-title {
    margin-top: 12px;

    color: #64758c;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .55px;
}


/* ================= MOBILE ================= */

@media (max-width: 767px) {

    .fm-stats-section {
        padding: 28px 0;
    }

    .fm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }

    .fm-stat-box:last-child {
        grid-column: 1 / -1;
    }

    .fm-stat-value {
        font-size: 23px;
    }

    .fm-stat-title {
        margin-top: 9px;
        font-size: 9px;
    }
}

/* =========================================================
   FORCE MATRIX — UNDERSTANDING
========================================================= */

.fm-understanding {
    position: relative;
    overflow: hidden;

    padding: 50px 0 72px;

    background: #020711;
    color: #fff;
}


/* subtle bottom glow */

.fm-understanding::after {
    content: "";
    position: absolute;

    right: -180px;
    bottom: -220px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(0, 205, 151, .07);
    filter: blur(100px);

    pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.fm-under-head {
    position: relative;
    z-index: 2;

    max-width: 760px;
    margin: 0 auto 58px;

    text-align: center;
}

.fm-under-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;

    border: 1px solid rgba(0, 201, 149, .38);
    border-radius: 30px;

    background: rgba(0, 201, 149, .07);

    color: #00c995;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .65px;
}

.fm-under-badge i {
    font-size: 12px;
}

.fm-under-head h2 {
    margin: 17px 0 18px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 39px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.fm-under-head h2 span {
    color: #08c995;
}

.fm-under-head>p {
    max-width: 690px;
    margin: 0 auto;

    color: #91a1b7;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.fm-under-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 48px;

    max-width: 1200px;
    margin: 0 auto;
}

.fm-under-column {
    min-width: 0;
}

.fm-under-column h3 {
    margin: 0 0 7px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.7px;
}

.fm-under-column p {
    margin: 0 0 20px;

    color: #92a2b7;

    font-size: 16px;
    line-height: 1.68;
}

.fm-under-column p strong {
    color: #9caabe;
    font-weight: 700;
}

.fm-under-column p em {
    color: #91a2b8;
}


/* =========================================================
   WHY POWERFUL BOX
========================================================= */

.fm-power-box {
    margin-top: 23px;
    padding: 17px 19px 16px;

    border: 1px solid rgba(0, 201, 149, .30);
    border-left: 2px solid #00c995;

    border-radius: 11px;

    background: rgba(0, 201, 149, .045);
}

.fm-power-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: #00c995;

    font-size: 13px;
    font-weight: 800;
}

.fm-power-title i {
    font-size: 13px;
}

.fm-power-box p {
    margin: 0;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   COMPARISON
========================================================= */

.fm-comparison-title {
    margin: 26px 0 13px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
}

.fm-comparison-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fm-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.fm-compare-item>i {
    flex: 0 0 auto;

    margin-top: 4px;

    color: #00d19b;

    font-size: 18px;
    font-weight: 900;
}

.fm-compare-item p {
    margin: 0;

    color: #eef2f7;

    font-size: 15px;
    line-height: 1.55;
}

.fm-compare-item p strong {
    color: #fff;
}


/* FINAL TEXT */

.fm-final-description {
    margin-top: 23px !important;

    color: #8fa0b5 !important;
}

.fm-final-description strong {
    color: #9daabd !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .fm-understanding {
        padding: 45px 0 60px;
    }

    .fm-under-head {
        margin-bottom: 42px;
    }

    .fm-under-head h2 {
        font-size: 34px;
    }

    .fm-under-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .fm-under-column h3 {
        font-size: 24px;
    }
}


@media (max-width: 767px) {

    .fm-understanding {
        padding: 38px 0 50px;
    }

    .fm-under-head {
        margin-bottom: 35px;
    }

    .fm-under-badge {
        font-size: 10px;
        padding: 7px 12px;
    }

    .fm-under-head h2 {
        margin-top: 14px;
        font-size: 29px;
        letter-spacing: -.8px;
    }

    .fm-under-head>p {
        font-size: 14px;
        line-height: 1.65;
    }

    .fm-under-grid {
        gap: 38px;
    }

    .fm-under-column h3 {
        font-size: 22px;
    }

    .fm-under-column p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .fm-power-box {
        padding: 15px;
    }

    .fm-power-box p {
        font-size: 13px;
    }

    .fm-comparison-title {
        font-size: 18px;
    }

    .fm-compare-item p {
        font-size: 14px;
    }
}


@media (max-width: 420px) {

    .fm-under-head h2 {
        font-size: 26px;
    }

    .fm-under-column h3 {
        font-size: 20px;
    }

    .fm-under-column p {
        font-size: 13px;
    }
}

/* =========================================================
   FORCE MATRIX — CORE MECHANICS
========================================================= */

.fm-core-mechanics {
    width: 100%;
    margin-top: 38px;
    padding: 38px 39px 34px;

    border: 1px solid rgba(0, 201, 149, .32);
    border-radius: 25px;

    background:
        linear-gradient(135deg,
            rgba(7, 29, 39, .96),
            rgba(4, 22, 31, .96));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .015),
        0 15px 45px rgba(0, 0, 0, .10);
}


/* TITLE */

.fm-core-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #f5f7fa;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

.fm-core-title i {
    color: #08c995;
    font-size: 18px;
}


/* GRID */

.fm-core-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 70px;
}


/* COLUMN */

.fm-core-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* ITEM */

.fm-core-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 19px;
}

.fm-core-item i {
    flex: 0 0 auto;

    color: #08c995;

    font-size: 14px;
}

.fm-core-item span {
    color: #8fa1b6;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}


/* =========================================================
   HOVER
========================================================= */

.fm-core-item {
    transition: transform .2s ease;
}

.fm-core-item:hover {
    transform: translateX(4px);
}

.fm-core-item:hover span {
    color: #a9b7c8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .fm-core-mechanics {
        padding: 30px 28px;
    }

    .fm-core-grid {
        column-gap: 35px;
    }
}


@media (max-width: 767px) {

    .fm-core-mechanics {
        margin-top: 30px;
        padding: 26px 20px;
        border-radius: 18px;
    }

    .fm-core-title {
        font-size: 16px;
        margin-bottom: 22px;
    }

    .fm-core-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fm-core-column {
        gap: 14px;
    }

    .fm-core-item span {
        font-size: 13px;
    }
}


@media (max-width: 420px) {

    .fm-core-mechanics {
        padding: 23px 16px;
    }

    .fm-core-title {
        font-size: 15px;
    }

    .fm-core-item {
        align-items: flex-start;
    }

    .fm-core-item i {
        margin-top: 2px;
        font-size: 13px;
    }

    .fm-core-item span {
        font-size: 13px;
    }
}

/* =========================================================
   FORCE MATRIX — OPERATIONAL FLOW
========================================================= */

.fm-operational-flow {
    position: relative;
    overflow: hidden;

    padding: 78px 0 78px;

    background: #081628;
    color: #fff;
}


/* =========================================================
   HEADER
========================================================= */

.fm-flow-header {
    max-width: 800px;
    margin: 0 auto 51px;

    text-align: center;
}

.fm-flow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(0, 201, 149, .35);
    border-radius: 30px;

    background: rgba(0, 201, 149, .06);

    color: #00c995;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .55px;
}

.fm-flow-badge i {
    font-size: 12px;
}

.fm-flow-header h2 {
    margin: 18px 0 17px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.fm-flow-header h2 span {
    color: #08c995;
}

.fm-flow-header>p {
    max-width: 670px;
    margin: 0 auto;

    color: #92a2b7;

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   SIX FLOW CARDS
========================================================= */

.fm-flow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    max-width: 1200px;
    margin: 0 auto;
}

.fm-flow-card {
    min-height: 263px;

    padding: 24px 20px 21px;

    border: 1px solid rgba(28, 67, 91, .75);
    border-radius: 17px;

    background: rgba(7, 20, 36, .68);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* HOVER */

.fm-flow-card:hover {
    transform: translateY(-6px);

    border-color: #00c995;

    background: rgba(7, 28, 42, .95);

    box-shadow:
        0 12px 35px rgba(0, 201, 149, .13),
        0 0 25px rgba(0, 201, 149, .05);
}


/* NUMBER */

.fm-step-number {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: linear-gradient(145deg,
            #12c993,
            #00a879);

    color: #fff;

    font-size: 16px;
    font-weight: 800;

    box-shadow: 0 7px 20px rgba(0, 201, 149, .17);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.fm-flow-card:hover .fm-step-number {
    transform: scale(1.08);

    box-shadow:
        0 8px 25px rgba(0, 201, 149, .28);
}


/* CARD TEXT */

.fm-flow-card h3 {
    margin: 0 0 9px;

    color: #f5f7fa;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}

.fm-flow-card p {
    margin: 0;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.6;
}

.fm-flow-card p strong {
    color: #aab7c7;
}


/* =========================================================
   DETAILS SECTION
========================================================= */

.fm-flow-details {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 48px;

    max-width: 1200px;
    margin: 65px auto 0;
}


/* HEADINGS */

.fm-algorithm h3,
.fm-spillover h3 {
    margin: 0 0 5px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.8px;
}

.fm-detail-intro {
    margin: 0 0 17px;

    color: #91a2b7;

    font-size: 16px;
    line-height: 1.65;
}

.fm-detail-intro strong {
    color: #9fabbc;
}


/* =========================================================
   ALGORITHM BOX
========================================================= */

.fm-algorithm-box {
    padding: 22px 20px 20px;

    border-radius: 12px;

    background: #effcf5;

    color: #173d4b;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
}

.fm-algorithm-title {
    margin-bottom: 14px;

    color: #24495a;

    font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: 700;
}

.fm-algorithm-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;

    color: #24495a;

    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

.fm-algorithm-result {
    margin-top: 14px;

    color: #00b984;

    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.fm-algorithm-bottom {
    margin: 19px 20px 0;

    color: #91a2b7;

    font-size: 16px;
    line-height: 1.68;
}

.fm-algorithm-bottom strong {
    color: #aab8c8;
}


/* =========================================================
   SPILLOVER CARDS
========================================================= */

.fm-spillover {
    min-width: 0;
}

.fm-spill-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 12px;
    padding: 14px 16px;

    border: 1px solid rgba(31, 66, 89, .85);
    border-radius: 12px;

    background: rgba(13, 36, 55, .90);

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}


/* HOVER */

.fm-spill-card:hover {
    transform: translateX(5px);

    border-color: rgba(0, 201, 149, .55);

    background: rgba(14, 43, 59, .98);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .13);
}


/* ICON */

.fm-spill-icon {
    width: 41px;
    height: 41px;

    flex: 0 0 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0, 196, 220, .28);
    border-radius: 6px;

    background: rgba(0, 176, 205, .08);

    color: #00c7dc;

    font-size: 17px;

    transition:
        background .28s ease,
        color .28s ease;
}

.fm-spill-card:hover .fm-spill-icon {
    background: rgba(0, 201, 149, .12);
    color: #00d09c;
}


/* TEXT */

.fm-spill-card h4 {
    margin: 2px 0 7px;

    color: #f1f4f7;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
}

.fm-spill-card p {
    margin: 0;

    color: #8e9fb4;

    font-size: 13px;
    line-height: 1.55;
}

.fm-spill-card p strong {
    color: #a8b5c5;
}


/* =========================================================
   HIGHLIGHT CARD
========================================================= */

.fm-spill-highlight {
    margin-top: 19px;
    padding: 17px 18px;

    border: 1px solid rgba(0, 201, 149, .28);
    border-left: 3px solid #00c995;

    border-radius: 12px;

    background: rgba(0, 201, 149, .045);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.fm-spill-highlight:hover {
    transform: translateY(-3px);

    background: rgba(0, 201, 149, .075);

    box-shadow: 0 10px 28px rgba(0, 201, 149, .08);
}

.fm-highlight-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: #00c995;

    font-size: 13px;
    font-weight: 800;
}

.fm-highlight-title i {
    font-size: 13px;
}

.fm-spill-highlight p {
    margin: 0;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.65;
}

.fm-spill-highlight p strong {
    color: #aab8c8;
}


/* =========================================================
   FORCE MATRIX OPERATIONAL FLOW
   FINAL MOBILE RESPONSIVE FIX
========================================================= */

@media (max-width: 767px) {

    .fm-operational-flow {
        width: 100%;
        overflow: hidden;
        padding: 45px 0 50px;
    }

    .fm-operational-flow .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }


    /* ================= HEADER ================= */

    .fm-flow-header {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 32px;
        padding: 0 5px;
    }

    .fm-flow-badge {
        max-width: 100%;
        padding: 7px 12px;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .fm-flow-header h2 {
        width: 100%;
        margin: 15px 0 14px;

        font-size: 27px;
        line-height: 1.22;
        letter-spacing: -.6px;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .fm-flow-header>p {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.65;
    }


    /* ================= SIX CARDS ================= */

    .fm-flow-steps {
        width: 100%;
        max-width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;
        margin: 0;
    }

    .fm-flow-card {
        width: 100%;
        min-width: 0;
        min-height: auto;

        padding: 20px 17px 21px;

        border-radius: 15px;

        box-sizing: border-box;
    }

    .fm-flow-card:hover {
        transform: translateY(-3px);
    }

    .fm-step-number {
        width: 38px;
        height: 38px;

        margin-bottom: 15px;

        font-size: 14px;
    }

    .fm-flow-card h3 {
        width: 100%;

        margin-bottom: 8px;

        font-size: 15px;
        line-height: 1.35;
    }

    .fm-flow-card p {
        width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.65;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* ================= DETAILS ================= */

    .fm-flow-details {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        gap: 38px;

        margin: 42px 0 0;
    }

    .fm-algorithm,
    .fm-spillover {
        width: 100%;
        min-width: 0;
    }


    /* ================= DETAIL HEADINGS ================= */

    .fm-algorithm h3,
    .fm-spillover h3 {
        width: 100%;

        margin-bottom: 7px;

        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -.4px;

        overflow-wrap: break-word;
    }

    .fm-detail-intro {
        width: 100%;

        margin-bottom: 15px;

        font-size: 13px;
        line-height: 1.65;
    }


    /* ================= ALGORITHM BOX ================= */

    .fm-algorithm-box {
        width: 100%;
        max-width: 100%;

        padding: 17px 15px;

        border-radius: 11px;

        box-sizing: border-box;

        /* IMPORTANT:
           no horizontal page overflow */
        overflow: hidden;
    }

    .fm-algorithm-title {
        width: 100%;

        margin-bottom: 13px;

        font-size: 12px;
        line-height: 1.5;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .fm-algorithm-lines {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 9px;

        font-size: 11px;
        line-height: 1.55;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .fm-algorithm-result {
        width: 100%;

        margin-top: 14px;

        font-size: 11px;
        line-height: 1.55;

        white-space: normal;
        overflow-wrap: anywhere;
    }


    /* ================= ALGORITHM BOTTOM TEXT ================= */

    .fm-algorithm-bottom {
        width: 100%;

        margin: 17px 0 0;

        font-size: 13px;
        line-height: 1.7;

        overflow-wrap: break-word;
    }


    /* ================= SPILLOVER CARDS ================= */

    .fm-spill-card {
        width: 100%;
        min-width: 0;

        display: flex;
        align-items: flex-start;

        gap: 11px;

        margin-bottom: 10px;
        padding: 13px;

        box-sizing: border-box;

        border-radius: 11px;
    }

    .fm-spill-card:hover {
        transform: translateX(3px);
    }

    .fm-spill-icon {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        font-size: 15px;
    }

    .fm-spill-card>div:last-child {
        min-width: 0;
        flex: 1;
    }

    .fm-spill-card h4 {
        margin: 1px 0 6px;

        font-size: 13px;
        line-height: 1.35;
    }

    .fm-spill-card p {
        margin: 0;

        font-size: 12px;
        line-height: 1.6;

        overflow-wrap: break-word;
    }


    /* ================= HIGHLIGHT ================= */

    .fm-spill-highlight {
        width: 100%;

        margin-top: 15px;
        padding: 15px;

        box-sizing: border-box;

        border-radius: 11px;
    }

    .fm-highlight-title {
        margin-bottom: 8px;

        font-size: 12px;
        line-height: 1.4;
    }

    .fm-spill-highlight p {
        font-size: 12px;
        line-height: 1.65;

        overflow-wrap: break-word;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .fm-operational-flow {
        padding: 38px 0 45px;
    }

    .fm-operational-flow .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .fm-flow-header {
        padding: 0 3px;
    }

    .fm-flow-badge {
        font-size: 9px;
        padding: 7px 10px;
    }

    .fm-flow-header h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .fm-flow-header>p {
        font-size: 12px;
    }


    .fm-flow-card {
        padding: 18px 15px 19px;
    }

    .fm-step-number {
        width: 36px;
        height: 36px;

        margin-bottom: 13px;

        font-size: 13px;
    }

    .fm-flow-card h3 {
        font-size: 14px;
    }

    .fm-flow-card p {
        font-size: 12px;
        line-height: 1.65;
    }


    .fm-flow-details {
        margin-top: 36px;
        gap: 34px;
    }

    .fm-algorithm h3,
    .fm-spillover h3 {
        font-size: 20px;
    }

    .fm-detail-intro {
        font-size: 12px;
    }


    .fm-algorithm-box {
        padding: 15px 13px;
    }

    .fm-algorithm-title,
    .fm-algorithm-lines,
    .fm-algorithm-result {
        font-size: 10px;
    }


    .fm-spill-card {
        padding: 12px;
    }

    .fm-spill-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;

        font-size: 14px;
    }

    .fm-spill-card h4 {
        font-size: 12px;
    }

    .fm-spill-card p {
        font-size: 11px;
    }

    .fm-spill-highlight {
        padding: 14px;
    }

    .fm-highlight-title {
        font-size: 11px;
    }

    .fm-spill-highlight p {
        font-size: 11px;
    }
}

/* =========================================================
   FORCE MATRIX — EARNINGS
========================================================= */

.fm-earnings {
    position: relative;
    overflow: hidden;

    padding: 78px 0 85px;

    background: #020711;
    color: #fff;
}


/* ================= HEADER ================= */

.fm-earnings-header {
    max-width: 850px;
    margin: 0 auto 52px;

    text-align: center;
}

.fm-earnings-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(245, 160, 0, .35);
    border-radius: 30px;

    background: rgba(245, 160, 0, .08);

    color: #f5a000;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .55px;
}

.fm-earnings-header h2 {
    margin: 18px 0 17px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.fm-earnings-header h2 span {
    color: #08c995;
}

.fm-earnings-header>p {
    max-width: 700px;
    margin: 0 auto;

    color: #91a2b7;

    font-size: 17px;
    line-height: 1.65;
}


/* ================= EXAMPLE ================= */

.fm-earnings-example {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 48px;

    max-width: 1145px;
    margin: 0 auto;
}

.fm-matrix-example h3,
.fm-single-cycle h3 {
    margin: 0 0 23px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.8px;
}


/* ================= TABLE ================= */

.fm-table-wrap {
    overflow: hidden;

    border: 1px solid rgba(31, 66, 89, .55);
    border-radius: 12px;

    background: #030a13;
}

.fm-matrix-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 14px;
}

.fm-matrix-table thead {
    background: #112a3d;
}

.fm-matrix-table th {
    padding: 16px 15px;

    color: #8798aa;

    font-size: 11px;
    font-weight: 800;
    text-align: left;
    letter-spacing: .5px;
}

.fm-matrix-table td {
    padding: 14px 15px;

    border-top: 1px solid rgba(31, 66, 89, .35);

    color: #93a3b7;

    font-size: 14px;
}

.fm-matrix-table td:first-child {
    color: #9daabd;
    font-weight: 700;
}

.fm-matrix-table td strong {
    color: #00c995;
}


/* ================= WHY BOX ================= */

.fm-why-box {
    margin-top: 21px;
    padding: 17px 19px;

    border: 1px solid rgba(0, 201, 149, .30);
    border-left: 2px solid #00c995;

    border-radius: 11px;

    background: rgba(0, 201, 149, .045);
}

.fm-why-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;

    color: #00c995;

    font-size: 13px;
    font-weight: 800;
}

.fm-why-box p {
    margin: 0;

    color: #91a2b7;

    font-size: 13px;
    line-height: 1.65;
}


/* ================= INCOME CARD ================= */

.fm-income-card {
    padding: 27px 28px 20px;

    border: 1px solid rgba(28, 66, 90, .65);
    border-radius: 18px;

    background: #09192b;
}

.fm-income-label {
    margin-bottom: 20px;

    color: #00bdd8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .65px;
}

.fm-income-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(111, 135, 155, .16);

    color: #9aa8b9;

    font-size: 15px;
    font-weight: 600;
}

.fm-income-row strong {
    color: #00bdda;

    font-size: 15px;
    white-space: nowrap;
}

.fm-income-row.fm-bonus-row strong {
    color: #f5a000;
}

.fm-income-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-top: 15px;

    color: #fff;

    font-size: 20px;
    font-weight: 800;
}

.fm-income-total strong {
    color: #08c995;

    font-size: 21px;
    white-space: nowrap;
}

.fm-reentry-text {
    margin: 20px 0 0;

    color: #718399;

    font-size: 14px;
    line-height: 1.65;
}

.fm-reentry-text strong {
    color: #77899f;
}


/* =========================================================
   CALCULATOR
========================================================= */

.fm-calculator {
    max-width: 1205px;
    margin: 65px auto 0;

    padding: 38px 53px 39px;

    border: 1px solid rgba(31, 68, 91, .65);
    border-radius: 24px;

    background: #09192b;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .12);
}

.fm-calculator-heading h3 {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 10px;

    color: #fff;

    font-size: 19px;
    font-weight: 800;
}

.fm-calculator-heading h3 i {
    color: #00c995;
}

.fm-calculator-heading p {
    margin: 0;

    color: #687b91;

    font-size: 14px;
    line-height: 1.6;
}


/* PARAMETERS */

.fm-calculator-params {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-top: 29px;
}

.fm-param {
    min-height: 125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 15px;

    border: 1px solid rgba(28, 66, 90, .65);
    border-radius: 11px;

    background: #0d2539;

    text-align: center;
}

.fm-param>span {
    color: #687c92;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.fm-param>strong {
    margin-top: 14px;

    color: #08c995;

    font-size: 24px;
    line-height: 1;
    font-weight: 800;
}

.fm-param small {
    margin-top: 12px;

    color: #64778d;

    font-size: 10px;
}


/* CONTROLS */

.fm-calculator-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    margin-top: 22px;
}

.fm-control label {
    display: block;

    margin-bottom: 7px;

    color: #8394a8;

    font-size: 11px;
    font-weight: 700;
}

.fm-control select,
.fm-control input {
    width: 100%;
    height: 43px;

    padding: 0 12px;

    border: 1px solid rgba(35, 76, 101, .8);
    border-radius: 7px;

    outline: none;

    background: #0c2235;
    color: #dce4eb;

    font-size: 13px;
}

.fm-control select:focus,
.fm-control input:focus {
    border-color: #00c995;
}


/* RESULT */

.fm-calculator-result {
    margin-top: 27px;

    padding: 18px 20px;

    border-radius: 12px;

    background: #10283d;
}

.fm-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 43px;

    border-bottom: 1px solid rgba(113, 137, 158, .15);

    color: #8ea0b4;

    font-size: 14px;
}

.fm-result-row strong {
    color: #00bdda;
    white-space: nowrap;
}

.fm-result-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 18px;

    color: #fff;

    font-size: 18px;
    font-weight: 800;
}

.fm-result-total strong {
    color: #08c995;

    font-size: 22px;
}


/* NOTE */

.fm-calculator-note {
    margin-top: 15px;
    padding: 13px 15px;

    border-radius: 9px;

    background: #10263a;

    color: #687b91;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .fm-earnings {
        padding: 60px 0;
    }

    .fm-earnings-header h2 {
        font-size: 34px;
    }

    .fm-earnings-example {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .fm-calculator {
        padding: 30px;
    }

    .fm-calculator-params,
    .fm-calculator-controls {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 767px) {

    .fm-earnings {
        padding: 45px 0 55px;
        overflow: hidden;
    }

    .fm-earnings .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .fm-earnings-header {
        margin-bottom: 35px;
    }

    .fm-earnings-badge {
        font-size: 10px;
        padding: 7px 12px;
    }

    .fm-earnings-header h2 {
        margin: 15px 0;

        font-size: 27px;
        line-height: 1.25;
        letter-spacing: -.6px;
    }

    .fm-earnings-header>p {
        font-size: 13px;
        line-height: 1.65;
    }


    .fm-earnings-example {
        width: 100%;
        gap: 35px;
    }

    .fm-matrix-example h3,
    .fm-single-cycle h3 {
        font-size: 21px;
        margin-bottom: 18px;
    }


    /* TABLE */

    .fm-table-wrap {
        overflow-x: auto;
    }

    .fm-matrix-table {
        min-width: 520px;
    }


    /* INCOME */

    .fm-income-card {
        padding: 21px 16px 17px;
        border-radius: 14px;
    }

    .fm-income-label {
        font-size: 10px;
    }

    .fm-income-row {
        padding: 12px 0;
        font-size: 12px;
    }

    .fm-income-row strong {
        font-size: 12px;
    }

    .fm-income-total {
        font-size: 16px;
    }

    .fm-income-total strong {
        font-size: 18px;
    }

    .fm-reentry-text {
        font-size: 12px;
    }


    /* CALCULATOR */

    .fm-calculator {
        width: 100%;

        margin-top: 45px;
        padding: 25px 15px 23px;

        border-radius: 18px;
    }

    .fm-calculator-heading h3 {
        font-size: 17px;
    }

    .fm-calculator-heading p {
        font-size: 12px;
    }

    .fm-calculator-params {
        grid-template-columns: repeat(2, 1fr);

        gap: 9px;

        margin-top: 22px;
    }

    .fm-param {
        min-height: 105px;
        padding: 10px;
    }

    .fm-param>span {
        font-size: 8px;
    }

    .fm-param>strong {
        font-size: 20px;
        margin-top: 11px;
    }

    .fm-param small {
        font-size: 8px;
        margin-top: 9px;
    }


    /* CONTROLS */

    .fm-calculator-controls {
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        margin-top: 18px;
    }

    .fm-control label {
        font-size: 10px;
    }

    .fm-control select,
    .fm-control input {
        height: 40px;
        font-size: 12px;
    }


    /* RESULT */

    .fm-calculator-result {
        margin-top: 20px;
        padding: 14px;
    }

    .fm-result-row {
        min-height: 42px;
        font-size: 12px;
    }

    .fm-result-total {
        padding-top: 15px;
        font-size: 15px;
    }

    .fm-result-total strong {
        font-size: 19px;
    }

    .fm-calculator-note {
        font-size: 10px;
    }
}


@media (max-width: 420px) {

    .fm-earnings {
        padding-top: 38px;
    }

    .fm-earnings-header h2 {
        font-size: 24px;
    }

    .fm-matrix-example h3,
    .fm-single-cycle h3 {
        font-size: 19px;
    }

    .fm-income-row {
        font-size: 11px;
    }

    .fm-income-row strong {
        font-size: 11px;
    }

    .fm-calculator-params {
        gap: 7px;
    }

    .fm-param {
        min-height: 98px;
    }

    .fm-param>strong {
        font-size: 18px;
    }

    .fm-calculator-controls {
        grid-template-columns: 1fr;
    }

    .fm-result-row {
        font-size: 11px;
    }

    .fm-result-total {
        font-size: 14px;
    }

    .fm-result-total strong {
        font-size: 17px;
    }
}

/* =====================================================
   FORCE MATRIX EARNINGS - PREMIUM HOVER
   PASTE THIS AT THE VERY END OF CSS
===================================================== */

/* ---------- ALL EARNINGS CARDS ---------- */

.fm-earnings .card,
.fm-earnings [class*="card"] {
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease !important;
}

/* Card hover */
@media (hover: hover) {

    .fm-earnings .card:hover,
    .fm-earnings [class*="card"]:hover {
        transform: translateY(-7px) !important;

        border-color: #00c995 !important;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.45),
            0 0 25px rgba(0, 201, 149, 0.16) !important;
    }

    /* Inner cards */
    .fm-earnings .card:hover h3,
    .fm-earnings .card:hover h4,
    .fm-earnings .card:hover h5,
    .fm-earnings .card:hover .fw-bold {
        color: #00c995 !important;
    }


    /* =================================================
       TABLE ROW HOVER
    ================================================= */

    .fm-earnings table tbody tr {
        transition: all 0.25s ease !important;
    }

    .fm-earnings table tbody tr:hover {
        background: rgba(0, 201, 149, 0.08) !important;
        box-shadow: inset 4px 0 0 #00c995 !important;
    }

    .fm-earnings table tbody tr:hover td {
        background: rgba(0, 201, 149, 0.08) !important;
        color: #ffffff !important;
        border-color: rgba(0, 201, 149, 0.30) !important;
    }

    /* First column */
    .fm-earnings table tbody tr:hover td:first-child {
        color: #00c995 !important;
        font-weight: 700 !important;
    }

    /* Last column */
    .fm-earnings table tbody tr:hover td:last-child {
        color: #00c995 !important;
        font-weight: 700 !important;
    }


    /* =================================================
       TABLE HEADER
    ================================================= */

    .fm-earnings table thead th {
        transition: all 0.25s ease !important;
    }

    .fm-earnings table thead th:hover {
        color: #00c995 !important;
    }


    /* =================================================
       INCOME SCENARIO ROW
    ================================================= */

    .fm-earnings table tbody tr td {
        transition:
            background 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease !important;
    }


    /* =================================================
       WHY 2x5 / INFO BOX
    ================================================= */

    .fm-earnings .fm-why,
    .fm-earnings [class*="why"] {
        transition: all 0.35s ease !important;
    }

    .fm-earnings .fm-why:hover,
    .fm-earnings [class*="why"]:hover {
        transform: translateY(-5px) !important;
        border-color: #00c995 !important;
        box-shadow: 0 12px 30px rgba(0, 201, 149, 0.12) !important;
    }


    /* =================================================
       CALCULATOR INPUT / SELECT
    ================================================= */

    .fm-earnings select,
    .fm-earnings input {
        transition: all 0.25s ease !important;
    }

    .fm-earnings select:hover,
    .fm-earnings input:hover {
        border-color: #00c995 !important;
        box-shadow: 0 0 0 3px rgba(0, 201, 149, 0.08) !important;
    }

    .fm-earnings select:focus,
    .fm-earnings input:focus {
        border-color: #00c995 !important;
        box-shadow: 0 0 0 3px rgba(0, 201, 149, 0.12) !important;
        outline: none !important;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .fm-earnings .card:hover,
    .fm-earnings [class*="card"]:hover {
        transform: translateY(-3px) !important;
    }

}

/* =========================================================
   FORCE MATRIX EARNINGS
   FINAL MOBILE RESPONSIVE FIX
========================================================= */

/* Prevent every earnings element from forcing page width */
.fm-earnings,
.fm-earnings * {
    box-sizing: border-box;
}

.fm-earnings {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.fm-earnings .container {
    width: 100%;
    max-width: 1200px;
}


/* =========================================================
   DESKTOP LAYOUT
========================================================= */

.fm-earnings .row {
    width: 100%;
}

.fm-earnings .row>[class*="col-"] {
    min-width: 0;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.fm-earnings .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Section */
    .fm-earnings {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .fm-earnings .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin: 0 auto !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .fm-earnings h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 25px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        word-break: normal !important;
    }

    .fm-earnings>.container>p,
    .fm-earnings .section-subtitle {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        text-align: center !important;
    }


    /* =====================================================
       MAIN TWO COLUMNS → ONE COLUMN
    ===================================================== */

    .fm-earnings .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .fm-earnings .row>[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 18px !important;
        min-width: 0 !important;
    }


    /* =====================================================
       ALL CARDS
    ===================================================== */

    .fm-earnings .card,
    .fm-earnings .fm-earn-card,
    .fm-earnings .fm-why-card,
    .fm-earnings .fm-calc-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .fm-earnings .card-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 17px !important;
    }


    /* =====================================================
       2 × 5 MATRIX TABLE
    ===================================================== */

    .fm-earnings .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .fm-earnings .table-responsive table {
        width: 100% !important;
        min-width: 460px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .fm-earnings table th,
    .fm-earnings table td {
        font-size: 12px !important;
        padding: 10px 9px !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       WHY 2×5 BOX
    ===================================================== */

    .fm-earnings .fm-why-card,
    .fm-earnings [class*="why"] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px !important;
        margin-top: 14px !important;
    }


    /* =====================================================
       INCOME SCENARIO
    ===================================================== */

    .fm-earnings .fm-income-table {
        min-width: 430px !important;
        width: 430px !important;
    }


    /* =====================================================
       CALCULATOR
    ===================================================== */

    .fm-earnings .fm-calc-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .fm-earnings .fm-calc-card>* {
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       PARAMETER GRID
    ===================================================== */

    .fm-earnings .fm-param-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .fm-earnings .fm-param-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 9px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .fm-earnings .fm-param-card * {
        max-width: 100% !important;
    }


    /* =====================================================
       CALCULATOR CONTROLS
    ===================================================== */

    .fm-earnings .fm-controls,
    .fm-earnings .calculator-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .fm-earnings select,
    .fm-earnings input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        font-size: 13px !important;
    }


    /* =====================================================
       RESULT ROW
    ===================================================== */

    .fm-earnings .fm-result-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
        padding: 12px !important;
        margin: 0 0 8px !important;
    }

    .fm-earnings .fm-result-label {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .fm-earnings .fm-result-value {
        flex: 0 0 auto !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .fm-earnings button {
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 13px !important;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .fm-earnings .fm-note {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        font-size: 11.5px !important;
        line-height: 1.65 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   320px - 400px
========================================================= */

@media (max-width: 400px) {

    .fm-earnings .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .fm-earnings h2 {
        font-size: 23px !important;
    }

    .fm-earnings .card-body {
        padding: 14px !important;
    }

    .fm-earnings .fm-param-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fm-earnings .fm-param-card {
        padding: 11px 7px !important;
    }

    .fm-earnings .fm-param-card strong,
    .fm-earnings .fm-param-card h4 {
        font-size: 14px !important;
    }

    .fm-earnings table th,
    .fm-earnings table td {
        font-size: 11px !important;
        padding: 9px 7px !important;
    }
}

/* =========================================================
   FORCE MATRIX EARNINGS - FINAL MOBILE RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    /* MAIN SECTION */
    .fm-earnings {
        width: 100%;
        max-width: 100%;
        padding: 42px 0 55px;
        overflow-x: hidden;
    }

    .fm-earnings * {
        box-sizing: border-box;
    }


    /* HEADER */
    .fm-earnings-header {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 auto 32px;
    }

    .fm-earnings-badge {
        padding: 7px 11px;
        font-size: 10px;
    }

    .fm-earnings-header h2 {
        margin: 14px 0;
        font-size: 25px;
        line-height: 1.3;
        letter-spacing: -.5px;
    }

    .fm-earnings-header>p {
        width: 100%;
        font-size: 13px;
        line-height: 1.7;
    }


    /* =====================================================
       EXAMPLE SECTION
    ===================================================== */

    .fm-earnings-example {
        display: block;
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 auto;
    }

    .fm-matrix-example,
    .fm-single-cycle {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .fm-single-cycle {
        margin-top: 32px;
    }

    .fm-matrix-example h3,
    .fm-single-cycle h3 {
        font-size: 20px;
        line-height: 1.35;
        margin-bottom: 15px;
    }


    /* =====================================================
       MATRIX TABLE
    ===================================================== */

    .fm-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 11px;
    }

    .fm-matrix-table {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: fixed;
        font-size: 11px;
    }

    .fm-matrix-table th {
        padding: 10px 5px;
        font-size: 8px;
        line-height: 1.3;
        letter-spacing: 0;
        white-space: normal;
    }

    .fm-matrix-table td {
        padding: 10px 5px;
        font-size: 11px;
        line-height: 1.3;
        white-space: normal;
    }

    .fm-matrix-table th:nth-child(1),
    .fm-matrix-table td:nth-child(1) {
        width: 24%;
    }

    .fm-matrix-table th:nth-child(2),
    .fm-matrix-table td:nth-child(2) {
        width: 24%;
    }

    .fm-matrix-table th:nth-child(3),
    .fm-matrix-table td:nth-child(3) {
        width: 26%;
    }

    .fm-matrix-table th:nth-child(4),
    .fm-matrix-table td:nth-child(4) {
        width: 26%;
    }


    /* =====================================================
       WHY BOX
    ===================================================== */

    .fm-why-box {
        width: 100%;
        margin-top: 14px;
        padding: 14px;
    }

    .fm-why-title {
        font-size: 12px;
    }

    .fm-why-box p {
        font-size: 12px;
        line-height: 1.65;
    }


    /* =====================================================
       INCOME CARD
    ===================================================== */

    .fm-income-card {
        width: 100%;
        max-width: 100%;
        padding: 18px 15px;
        border-radius: 14px;
    }

    .fm-income-label {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .fm-income-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        padding: 11px 0;
        font-size: 12px;
    }

    .fm-income-row strong {
        flex-shrink: 0;
        font-size: 12px;
    }

    .fm-income-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding-top: 13px;
        font-size: 15px;
    }

    .fm-income-total strong {
        flex-shrink: 0;
        font-size: 17px;
    }

    .fm-reentry-text {
        margin-top: 15px;
        font-size: 11px;
        line-height: 1.65;
    }


    /* =====================================================
       CALCULATOR
    ===================================================== */

    .fm-calculator {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 38px auto 0;
        padding: 20px 14px;
        border-radius: 17px;
    }

    .fm-calculator-heading h3 {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        font-size: 16px;
        line-height: 1.4;
    }

    .fm-calculator-heading p {
        font-size: 11px;
        line-height: 1.6;
    }


    /* =====================================================
       PARAMETERS - 2 COLUMNS
    ===================================================== */

    .fm-calculator-params {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 18px;
    }

    .fm-param {
        width: 100%;
        min-width: 0;
        min-height: 95px;
        padding: 10px 6px;
        border-radius: 10px;
    }

    .fm-param>span {
        font-size: 8px;
        line-height: 1.35;
        text-align: center;
    }

    .fm-param>strong {
        margin-top: 9px;
        font-size: 19px;
    }

    .fm-param small {
        margin-top: 8px;
        font-size: 8px;
        line-height: 1.3;
    }


    /* =====================================================
       CONTROLS - 2 COLUMNS
    ===================================================== */

    .fm-calculator-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        width: 100%;
        margin-top: 17px;
    }

    .fm-control {
        width: 100%;
        min-width: 0;
    }

    .fm-control label {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .fm-control select,
    .fm-control input {
        width: 100%;
        min-width: 0;
        height: 40px;
        padding: 0 8px;
        font-size: 11px;
    }


    /* =====================================================
       RESULT
    ===================================================== */

    .fm-calculator-result {
        width: 100%;
        margin-top: 18px;
        padding: 12px;
        border-radius: 10px;
    }

    .fm-result-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        min-height: 40px;
        gap: 8px;
        font-size: 11px;
    }

    .fm-result-row span {
        min-width: 0;
        line-height: 1.4;
    }

    .fm-result-row strong {
        flex-shrink: 0;
        font-size: 11px;
        white-space: nowrap;
    }

    .fm-result-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding-top: 14px;
        font-size: 14px;
    }

    .fm-result-total strong {
        flex-shrink: 0;
        font-size: 17px;
        white-space: nowrap;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .fm-calculator-note {
        width: 100%;
        margin-top: 11px;
        padding: 10px 11px;
        font-size: 9px;
        line-height: 1.65;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .fm-earnings-header {
        width: calc(100% - 20px);
    }

    .fm-earnings-example {
        width: calc(100% - 20px);
    }

    .fm-calculator {
        width: calc(100% - 20px);
    }

    .fm-earnings-header h2 {
        font-size: 23px;
    }

    .fm-matrix-example h3,
    .fm-single-cycle h3 {
        font-size: 18px;
    }

    .fm-matrix-table th {
        padding: 9px 4px;
        font-size: 7px;
    }

    .fm-matrix-table td {
        padding: 9px 4px;
        font-size: 10px;
    }

    .fm-income-row {
        font-size: 11px;
    }

    .fm-income-row strong {
        font-size: 11px;
    }

    .fm-income-total {
        font-size: 14px;
    }

    .fm-income-total strong {
        font-size: 16px;
    }

    .fm-calculator {
        padding: 18px 10px;
    }

    .fm-param {
        min-height: 90px;
    }

    .fm-param>strong {
        font-size: 17px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 340px) {

    .fm-calculator-controls {
        grid-template-columns: 1fr;
    }

    .fm-calculator-params {
        gap: 6px;
    }

    .fm-param {
        min-height: 85px;
        padding: 8px 4px;
    }

    .fm-param>strong {
        font-size: 16px;
    }
}

/* =========================================================
   FORCE MATRIX — TYPES OF COMMISSION
========================================================= */

.fm-commission {
    position: relative;
    padding: 78px 0 82px;
    background: #081528;
    color: #fff;
    overflow: hidden;
}


/* ================= HEADER ================= */

.fm-commission-header {
    width: min(100% - 30px, 1000px);
    margin: 0 auto 48px;
    text-align: center;
}

.fm-commission-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(0, 201, 149, .35);
    border-radius: 30px;

    background: rgba(0, 201, 149, .07);

    color: #00c995;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
}

.fm-commission-badge i {
    font-size: 12px;
}


.fm-commission-header h2 {
    margin: 18px 0 17px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.fm-commission-header h2 span {
    color: #08c995;
}


.fm-commission-header p {
    max-width: 760px;
    margin: 0 auto;

    color: #91a2b7;

    font-size: 17px;
    line-height: 1.65;
}


/* ================= GRID ================= */

.fm-commission-grid {
    width: min(100% - 30px, 1200px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 27px 28px;
}


/* ================= CARD ================= */

.fm-commission-card {
    position: relative;

    min-height: 323px;

    padding: 28px 23px 25px;

    border: 1px solid rgba(28, 66, 90, .62);
    border-radius: 17px;

    background: #081528;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* subtle top glow */

.fm-commission-card::before {
    content: "";

    position: absolute;

    top: -70px;
    left: 50%;

    width: 150px;
    height: 150px;

    transform: translateX(-50%);

    background: radial-gradient(circle,
            rgba(0, 201, 149, .10),
            transparent 70%);

    opacity: 0;

    transition: opacity .35s ease;
}


/* ================= HOVER ================= */

.fm-commission-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0, 201, 149, .65);

    background: #09192b;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .35),
        0 0 28px rgba(0, 201, 149, .09);
}

.fm-commission-card:hover::before {
    opacity: 1;
}


/* ================= ICON ================= */

.fm-commission-icon {
    position: relative;
    z-index: 1;

    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 11px;

    font-size: 19px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* Green */

.fm-commission-icon.green {
    border: 1px solid rgba(0, 201, 149, .30);
    background: rgba(0, 201, 149, .09);
    color: #00c995;
}


/* Cyan */

.fm-commission-icon.cyan {
    border: 1px solid rgba(0, 189, 218, .30);
    background: rgba(0, 189, 218, .09);
    color: #00bdd8;
}


/* Orange */

.fm-commission-icon.orange {
    border: 1px solid rgba(245, 160, 0, .30);
    background: rgba(245, 160, 0, .10);
    color: #f5a000;
}


.fm-commission-card:hover .fm-commission-icon {
    transform: translateY(-2px) scale(1.05);
}

.fm-commission-card:hover .fm-commission-icon.green {
    box-shadow: 0 0 20px rgba(0, 201, 149, .18);
}

.fm-commission-card:hover .fm-commission-icon.cyan {
    box-shadow: 0 0 20px rgba(0, 189, 218, .18);
}

.fm-commission-card:hover .fm-commission-icon.orange {
    box-shadow: 0 0 20px rgba(245, 160, 0, .18);
}


/* ================= CARD TEXT ================= */

.fm-commission-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 15px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;

    transition: color .3s ease;
}

.fm-commission-card:hover h3 {
    color: #00c995;
}


.fm-commission-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.68;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fm-commission {
        padding: 60px 0 65px;
    }

    .fm-commission-header h2 {
        font-size: 34px;
    }

    .fm-commission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .fm-commission-card {
        min-height: 310px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fm-commission {
        width: 100%;
        padding: 45px 0 55px;
        overflow: hidden;
    }

    .fm-commission-header {
        width: calc(100% - 30px);
        margin-bottom: 32px;
    }

    .fm-commission-badge {
        padding: 7px 12px;
        font-size: 10px;
    }

    .fm-commission-header h2 {
        margin: 15px 0 13px;

        font-size: 27px;
        line-height: 1.28;
        letter-spacing: -.6px;
    }

    .fm-commission-header p {
        font-size: 13px;
        line-height: 1.65;
    }

    .fm-desktop {
        display: none;
    }


    /* 1 CARD PER ROW */

    .fm-commission-grid {
        width: calc(100% - 30px);

        grid-template-columns: minmax(0, 1fr);

        gap: 16px;
    }


    .fm-commission-card {
        min-height: auto;

        padding: 21px 18px 22px;

        border-radius: 15px;
    }

    .fm-commission-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 16px;

        font-size: 18px;
    }

    .fm-commission-card h3 {
        margin-bottom: 11px;
        font-size: 16px;
    }

    .fm-commission-card p {
        font-size: 13px;
        line-height: 1.68;
    }

    /* Mobile par hover transform nahi — touch friendly */
    .fm-commission-card:hover {
        transform: none;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .fm-commission-header {
        width: calc(100% - 20px);
    }

    .fm-commission-grid {
        width: calc(100% - 20px);
    }

    .fm-commission-header h2 {
        font-size: 24px;
    }

    .fm-commission-card {
        padding: 19px 16px 20px;
    }

    .fm-commission-card p {
        font-size: 12px;
        line-height: 1.65;
    }
}

/* =========================================================
   COMMISSION CALCULATION PRIORITY
========================================================= */

.fm-priority {
    width: min(100% - 30px, 1190px);
    margin: 62px auto 0;
}

.fm-priority h3 {
    margin: 0 0 27px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;

    text-align: center;
    letter-spacing: -.7px;
}


/* ================= TABLE WRAPPER ================= */

.fm-priority-table-wrap {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    border: 1px solid rgba(28, 66, 90, .60);
    border-radius: 12px;

    background: #081528;

    -webkit-overflow-scrolling: touch;
}


/* ================= TABLE ================= */

.fm-priority-table {
    width: 100%;
    min-width: 850px;

    border-collapse: separate;
    border-spacing: 0;

    font-family: "Poppins", sans-serif;
}


/* ================= HEADER ================= */

.fm-priority-table thead {
    background: #10283c;
}

.fm-priority-table th {
    padding: 16px 15px;

    color: #899bad;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;

    text-align: left;
    letter-spacing: .35px;

    border-bottom: 1px solid rgba(31, 66, 89, .55);
}


/* ================= BODY ================= */

.fm-priority-table td {
    padding: 16px 15px;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.4;

    border-bottom: 1px solid rgba(31, 66, 89, .42);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


/* First column */

.fm-priority-table tbody td:first-child {
    color: #95a6b9;
    font-weight: 700;
}


/* Payment */

.fm-priority-table .fm-speed {
    color: #00c995;
    font-weight: 700;
}


/* Last row */

.fm-priority-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   TABLE HOVER
========================================================= */

@media (hover: hover) {

    .fm-priority-table tbody tr {
        transition:
            background .25s ease,
            transform .25s ease;
    }

    .fm-priority-table tbody tr:hover td {
        background: rgba(0, 201, 149, .065);

        color: #dce5ed;

        border-bottom-color: rgba(0, 201, 149, .22);
    }

    .fm-priority-table tbody tr:hover td:first-child {
        color: #00c995;
    }

    .fm-priority-table tbody tr:hover .fm-speed {
        color: #08dca5;
    }

    /* left green indicator */
    .fm-priority-table tbody tr:hover td:first-child {
        box-shadow: inset 3px 0 0 #00c995;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fm-priority {
        width: calc(100% - 30px);
        margin-top: 50px;
    }

    .fm-priority h3 {
        font-size: 24px;
    }

    .fm-priority-table th {
        padding: 14px 13px;
    }

    .fm-priority-table td {
        padding: 14px 13px;
        font-size: 13px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fm-priority {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 42px auto 0;
    }

    .fm-priority h3 {
        margin-bottom: 18px;

        font-size: 20px;
        line-height: 1.35;
        letter-spacing: -.3px;
    }

    .fm-priority-table-wrap {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        border-radius: 11px;
    }

    .fm-priority-table {
        min-width: 760px;
    }

    .fm-priority-table th {
        padding: 12px 11px;
        font-size: 9px;
        white-space: nowrap;
    }

    .fm-priority-table td {
        padding: 13px 11px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* touch devices don't get sticky hover */
    .fm-priority-table tbody tr:hover td {
        background: transparent;
        color: #91a2b7;
    }

    .fm-priority-table tbody td:first-child {
        color: #95a6b9;
    }

    .fm-priority-table .fm-speed {
        color: #00c995;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .fm-priority {
        width: calc(100% - 20px);
        margin-top: 36px;
    }

    .fm-priority h3 {
        font-size: 18px;
    }

    .fm-priority-table {
        min-width: 720px;
    }

    .fm-priority-table th {
        padding: 11px 9px;
        font-size: 8px;
    }

    .fm-priority-table td {
        padding: 12px 9px;
        font-size: 10px;
    }
}

/* =========================================================
   FORCE MATRIX — COMMISSION CALCULATION PRIORITY
========================================================= */

.fm-priority {
    width: 100%;
    padding: 0 0 82px;

    background: #081528;
    color: #fff;

    overflow: hidden;
}


/* ================= CONTAINER ================= */

.fm-priority-container {
    width: min(100% - 30px, 1190px);
    max-width: 1190px;

    margin: 0 auto;
}


/* ================= HEADING ================= */

.fm-priority-container h2 {
    margin: 0 0 28px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;

    text-align: center;
    letter-spacing: -.7px;
}


/* ================= TABLE WRAPPER ================= */

.fm-priority-table-wrap {
    width: 100%;

    border: 1px solid rgba(28, 66, 90, .55);
    border-radius: 12px;

    background: #081528;

    overflow: hidden;
}


/* ================= TABLE ================= */

.fm-priority-table {
    width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    table-layout: fixed;

    font-family: "Poppins", sans-serif;
}


/* ================= HEADER ================= */

.fm-priority-table thead {
    background: #10283b;
}

.fm-priority-table th {
    height: 48px;

    padding: 0 15px;

    color: #8798aa;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;

    text-align: left;
    letter-spacing: .35px;

    border-bottom: 1px solid rgba(31, 66, 89, .45);
}


/* Column widths */

.fm-priority-table th:nth-child(1) {
    width: 25%;
}

.fm-priority-table th:nth-child(2) {
    width: 31%;
}

.fm-priority-table th:nth-child(3) {
    width: 24%;
}

.fm-priority-table th:nth-child(4) {
    width: 20%;
}


/* ================= BODY ================= */

.fm-priority-table tbody tr {
    background: #081528;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.fm-priority-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(31, 66, 89, .38);
}


.fm-priority-table td {
    height: 50px;

    padding: 0 15px;

    color: #91a2b7;

    font-size: 14px;
    font-weight: 500;

    vertical-align: middle;

    transition:
        color .25s ease,
        background .25s ease;
}


/* First column */

.fm-priority-table td:first-child {
    color: #93a3b7;
    font-weight: 700;
}


/* ================= PAYMENT COLORS ================= */

.fm-priority-table .fm-speed-fast {
    color: #00c995;
    font-weight: 700;
}

.fm-priority-table .fm-speed-normal {
    color: #a3adba;
    font-weight: 500;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .fm-priority-table tbody tr:hover {
        background: rgba(0, 201, 149, .055);

        box-shadow:
            inset 3px 0 0 #00c995,
            inset -3px 0 0 rgba(0, 201, 149, .18);
    }

    .fm-priority-table tbody tr:hover td {
        background: rgba(0, 201, 149, .045);
        color: #e5edf3;
    }

    .fm-priority-table tbody tr:hover td:first-child {
        color: #00c995;
    }

    .fm-priority-table tbody tr:hover .fm-speed-fast {
        color: #20e0aa;
    }

    .fm-priority-table tbody tr:hover .fm-speed-normal {
        color: #dce5ec;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fm-priority {
        padding-bottom: 65px;
    }

    .fm-priority-container {
        width: calc(100% - 30px);
    }

    .fm-priority-container h2 {
        font-size: 24px;
    }

    .fm-priority-table th,
    .fm-priority-table td {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fm-priority {
        width: 100%;
        padding: 0 0 55px;

        overflow-x: hidden;
    }

    .fm-priority-container {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 auto;
    }


    /* Heading */

    .fm-priority-container h2 {
        margin-bottom: 20px;

        font-size: 21px;
        line-height: 1.35;

        letter-spacing: -.4px;
    }


    /* Table wrapper becomes the only scroll area */

    .fm-priority-table-wrap {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        border-radius: 11px;
    }


    /* Keep table readable */

    .fm-priority-table {
        width: 700px;
        min-width: 700px;
        max-width: none;

        table-layout: fixed;
    }


    .fm-priority-table th {
        height: 46px;

        padding: 0 13px;

        font-size: 9px;
        white-space: nowrap;
    }

    .fm-priority-table td {
        height: 48px;

        padding: 0 13px;

        font-size: 12px;
        white-space: nowrap;
    }


    /* Keep column proportions */

    .fm-priority-table th:nth-child(1) {
        width: 25%;
    }

    .fm-priority-table th:nth-child(2) {
        width: 31%;
    }

    .fm-priority-table th:nth-child(3) {
        width: 24%;
    }

    .fm-priority-table th:nth-child(4) {
        width: 20%;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .fm-priority-container {
        width: calc(100% - 20px);
    }

    .fm-priority-container h2 {
        font-size: 19px;
        line-height: 1.35;
    }

    .fm-priority-table {
        width: 680px;
        min-width: 680px;
    }

    .fm-priority-table th {
        padding: 0 11px;
        font-size: 8.5px;
    }

    .fm-priority-table td {
        padding: 0 11px;
        font-size: 11px;
    }
}

/* =========================================================
   FORCE MATRIX — BENEFITS
========================================================= */

.fm-benefits {
    position: relative;

    width: 100%;
    padding: 78px 0 85px;

    background: #020711;
    color: #fff;

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.fm-benefits-header {
    width: min(100% - 30px, 950px);

    margin: 0 auto 48px;

    text-align: center;
}


.fm-benefits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(0, 189, 218, .38);
    border-radius: 30px;

    background: rgba(0, 189, 218, .07);

    color: #00bdd8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .55px;
}


.fm-benefits-badge i {
    font-size: 13px;
}


.fm-benefits-header h2 {
    margin: 18px 0 17px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: -1.4px;
}


.fm-benefits-header h2 span {
    color: #08c995;
}


.fm-benefits-header p {
    max-width: 760px;

    margin: 0 auto;

    color: #91a2b7;

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   BENEFIT GRID
========================================================= */

.fm-benefits-grid {
    width: min(100% - 30px, 1120px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 27px 28px;
}


/* =========================================================
   BENEFIT CARD
========================================================= */

.fm-benefit-card {
    position: relative;

    min-height: 368px;

    padding: 28px 24px 27px;

    border: 1px solid rgba(28, 66, 90, .60);
    border-radius: 17px;

    background: #09192b;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* Top glow */

.fm-benefit-card::before {
    content: "";

    position: absolute;

    top: -80px;
    left: 50%;

    width: 180px;
    height: 180px;

    transform: translateX(-50%);

    background: radial-gradient(circle,
            rgba(0, 201, 149, .11),
            transparent 70%);

    opacity: 0;

    transition: opacity .35s ease;

    pointer-events: none;
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .fm-benefit-card:hover {
        transform: translateY(-7px);

        border-color: rgba(0, 201, 149, .62);

        background: #0a1c30;

        box-shadow:
            0 18px 42px rgba(0, 0, 0, .35),
            0 0 28px rgba(0, 201, 149, .10);
    }

    .fm-benefit-card:hover::before {
        opacity: 1;
    }

    .fm-benefit-card:hover h3 {
        color: #00c995;
    }

}


/* =========================================================
   ICON
========================================================= */

.fm-benefit-icon {
    position: relative;
    z-index: 1;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 19px;

    border-radius: 11px;

    font-size: 19px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* Green */

.fm-benefit-icon.green {
    border: 1px solid rgba(0, 201, 149, .30);

    background: rgba(0, 201, 149, .08);

    color: #00c995;
}


/* Cyan */

.fm-benefit-icon.cyan {
    border: 1px solid rgba(0, 189, 218, .30);

    background: rgba(0, 189, 218, .08);

    color: #00bdd8;
}


/* Orange */

.fm-benefit-icon.orange {
    border: 1px solid rgba(245, 160, 0, .30);

    background: rgba(245, 160, 0, .10);

    color: #f5a000;
}


/* IMPORTANT:
   Second screenshot card has no icon.
   Keep the box, but no icon. */

.fm-benefit-icon-empty {
    color: transparent;
}


/* Icon hover */

@media (hover: hover) and (pointer: fine) {

    .fm-benefit-card:hover .fm-benefit-icon {
        transform: translateY(-2px) scale(1.05);
    }

    .fm-benefit-card:hover .fm-benefit-icon.green {
        box-shadow:
            0 0 20px rgba(0, 201, 149, .17);
    }

    .fm-benefit-card:hover .fm-benefit-icon.cyan {
        box-shadow:
            0 0 20px rgba(0, 189, 218, .17);
    }

    .fm-benefit-card:hover .fm-benefit-icon.orange {
        box-shadow:
            0 0 20px rgba(245, 160, 0, .17);
    }

}


/* =========================================================
   CARD TEXT
========================================================= */

.fm-benefit-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 14px;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;

    transition: color .3s ease;
}


.fm-benefit-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #91a2b7;

    font-size: 14px;
    line-height: 1.68;
}


.fm-benefit-card p strong {
    color: #b9c6d3;
    font-weight: 800;
}


/* =========================================================
   BOTTOM SECTION
========================================================= */

.fm-benefits-bottom {
    width: min(100% - 30px, 1220px);

    margin: 66px auto 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 48px;
}


/* =========================================================
   BOTTOM HEADINGS
========================================================= */

.fm-performance h2,
.fm-comparison h2 {
    margin: 0 0 27px;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 27px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: -.7px;
}


/* =========================================================
   PERFORMANCE METRICS
========================================================= */

.fm-metric {
    margin-bottom: 18px;
}


.fm-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}


.fm-metric-head span {
    color: #91a2b7;

    font-size: 13px;
    font-weight: 700;
}


.fm-metric-head strong {
    flex-shrink: 0;

    color: #08c995;

    font-size: 13px;
    font-weight: 800;
}


/* Bar */

.fm-metric-bar {
    width: 100%;
    height: 7px;

    border-radius: 20px;

    background: #10283d;

    overflow: hidden;
}


.fm-metric-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            #08c995,
            #00bdd8);

    box-shadow:
        0 0 8px rgba(0, 201, 149, .10);
}


/* =========================================================
   COMPARISON TABLE
========================================================= */

.fm-comparison-wrap {
    width: 100%;

    border: 1px solid rgba(28, 66, 90, .55);
    border-radius: 12px;

    background: #081528;

    overflow: hidden;
}


.fm-comparison-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


.fm-comparison-table thead {
    background: #10283d;
}


.fm-comparison-table th {
    height: 49px;

    padding: 0 15px;

    color: #8798aa;

    font-size: 10px;
    font-weight: 800;

    text-align: left;

    letter-spacing: .35px;

    border-bottom:
        1px solid rgba(31, 66, 89, .45);
}


.fm-comparison-table th:nth-child(1) {
    width: 31%;
}

.fm-comparison-table th:nth-child(2) {
    width: 29%;
}

.fm-comparison-table th:nth-child(3) {
    width: 40%;
}


.fm-comparison-table tbody tr {
    transition:
        background .25s ease,
        box-shadow .25s ease;
}


.fm-comparison-table tbody tr:not(:last-child) {
    border-bottom:
        1px solid rgba(31, 66, 89, .35);
}


.fm-comparison-table td {
    height: 50px;

    padding: 0 15px;

    color: #91a2b7;

    font-size: 13px;

    transition:
        background .25s ease,
        color .25s ease;
}


.fm-comparison-table td:first-child {
    font-weight: 500;
}


.fm-comparison-table .fm-before {
    color: #ff4242;
}


.fm-comparison-table .fm-after {
    color: #08c995;
    font-weight: 700;
}


/* =========================================================
   TABLE HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .fm-comparison-table tbody tr:hover {
        background: rgba(0, 201, 149, .045);

        box-shadow:
            inset 3px 0 0 #00c995;
    }

    .fm-comparison-table tbody tr:hover td {
        background: rgba(0, 201, 149, .035);
        color: #e2eaf0;
    }

    .fm-comparison-table tbody tr:hover .fm-before {
        color: #ff5b5b;
    }

    .fm-comparison-table tbody tr:hover .fm-after {
        color: #20dfaa;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fm-benefits {
        padding: 60px 0 70px;
    }

    .fm-benefits-header h2 {
        font-size: 34px;
    }

    .fm-benefits-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .fm-benefit-card {
        min-height: 350px;
    }

    .fm-benefits-bottom {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fm-benefits {
        width: 100%;

        padding: 45px 0 55px;

        overflow-x: hidden;
    }

    .fm-benefits-header {
        width: calc(100% - 30px);

        margin-bottom: 32px;
    }

    .fm-benefits-badge {
        padding: 7px 12px;

        font-size: 10px;
    }

    .fm-benefits-header h2 {
        margin: 15px 0 13px;

        font-size: 27px;
        line-height: 1.28;

        letter-spacing: -.5px;
    }

    .fm-benefits-header p {
        font-size: 13px;
        line-height: 1.65;
    }

    .fm-benefits-desktop {
        display: none;
    }


    /* CARDS */

    .fm-benefits-grid {
        width: calc(100% - 30px);

        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;
    }


    .fm-benefit-card {
        width: 100%;
        min-height: auto;

        padding: 21px 18px 22px;

        border-radius: 15px;
    }


    .fm-benefit-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 16px;

        font-size: 18px;
    }


    .fm-benefit-card h3 {
        margin-bottom: 11px;

        font-size: 16px;
    }


    .fm-benefit-card p {
        font-size: 13px;
        line-height: 1.68;
    }


    /* Don't move cards on touch */
    .fm-benefit-card:hover {
        transform: none;
    }


    /* BOTTOM */

    .fm-benefits-bottom {
        width: calc(100% - 30px);

        margin-top: 45px;

        grid-template-columns: 1fr;

        gap: 42px;
    }


    .fm-performance h2,
    .fm-comparison h2 {
        margin-bottom: 20px;

        font-size: 21px;
        line-height: 1.3;
    }


    /* METRICS */

    .fm-metric {
        margin-bottom: 16px;
    }

    .fm-metric-head {
        gap: 10px;
        margin-bottom: 8px;
    }

    .fm-metric-head span {
        font-size: 11px;
        line-height: 1.4;
    }

    .fm-metric-head strong {
        font-size: 11px;
    }

    .fm-metric-bar {
        height: 6px;
    }


    /* COMPARISON TABLE */

    .fm-comparison-wrap {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .fm-comparison-table {
        width: 650px;
        min-width: 650px;
    }

    .fm-comparison-table th {
        height: 45px;

        padding: 0 11px;

        font-size: 9px;
    }

    .fm-comparison-table td {
        height: 46px;

        padding: 0 11px;

        font-size: 11px;

        white-space: nowrap;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .fm-benefits-header {
        width: calc(100% - 20px);
    }

    .fm-benefits-grid {
        width: calc(100% - 20px);
    }

    .fm-benefits-header h2 {
        font-size: 24px;
    }

    .fm-benefit-card {
        padding: 19px 16px 20px;
    }

    .fm-benefit-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .fm-benefits-bottom {
        width: calc(100% - 20px);
    }

    .fm-performance h2,
    .fm-comparison h2 {
        font-size: 19px;
    }

    .fm-metric-head span,
    .fm-metric-head strong {
        font-size: 10px;
    }

}

/* =========================================================
   FORCE MATRIX BENEFITS
   FINAL MOBILE FIX — PASTE AT VERY END
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.fm-benefits,
.fm-benefits * {
    box-sizing: border-box;
}

.fm-benefits {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 991px) {

    .fm-benefits-grid {
        width: calc(100% - 40px);
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .fm-benefit-card {
        width: 100%;
        min-width: 0 !important;
        min-height: 350px;
    }

    .fm-benefits-bottom {
        width: calc(100% - 40px);
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 45px;
    }
}


/* =========================================================
   MOBILE — 767px
========================================================= */

@media screen and (max-width: 767px) {

    /* SECTION */
    .fm-benefits {
        width: 100%;
        max-width: 100%;
        padding: 42px 0 55px;
        overflow-x: hidden !important;
    }


    /* HEADER */
    .fm-benefits-header {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 auto 32px;
        padding: 0;
        text-align: center;
    }

    .fm-benefits-badge {
        max-width: 100%;
        padding: 7px 12px;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .fm-benefits-header h2 {
        width: 100%;
        max-width: 100%;
        margin: 15px 0 13px;

        font-size: 27px;
        line-height: 1.28;
        letter-spacing: -.5px;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .fm-benefits-header p {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;

        font-size: 13px;
        line-height: 1.65;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* =====================================================
       CARDS — ONE COLUMN
    ===================================================== */

    .fm-benefits-grid {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 0 auto;

        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 16px;

        align-items: stretch;
    }


    /* IMPORTANT:
       Remove desktop/tablet placement */
    .fm-benefit-card,
    .fm-benefit-card:nth-child(1),
    .fm-benefit-card:nth-child(2),
    .fm-benefit-card:nth-child(3),
    .fm-benefit-card:nth-child(4),
    .fm-benefit-card:nth-child(5),
    .fm-benefit-card:nth-child(6) {

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        min-height: auto !important;

        margin: 0;

        padding: 21px 18px 22px;

        border-radius: 15px;

        overflow: hidden;
    }


    /* CARD ICON */
    .fm-benefit-icon {
        width: 46px;
        height: 46px;

        min-width: 46px;
        max-width: 46px;

        margin: 0 0 16px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 10px;

        font-size: 18px;

        flex-shrink: 0;
    }


    /* CARD TITLE */
    .fm-benefit-card h3 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 11px;

        font-size: 16px;
        line-height: 1.4;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* CARD TEXT */
    .fm-benefit-card p {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.68;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* REMOVE HOVER MOVEMENT ON TOUCH */
    .fm-benefit-card:hover {
        transform: none !important;
    }


    /* =====================================================
       BOTTOM — PERFORMANCE + COMPARISON
    ===================================================== */

    .fm-benefits-bottom {
        width: calc(100% - 30px);
        max-width: 100%;

        margin: 45px auto 0;

        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 42px;
    }


    /* HEADINGS */
    .fm-performance h2,
    .fm-comparison h2 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 20px;

        font-size: 21px;
        line-height: 1.3;
        letter-spacing: -.3px;

        overflow-wrap: break-word;
    }


    /* =====================================================
       METRICS
    ===================================================== */

    .fm-metric {
        width: 100%;
        max-width: 100%;

        margin: 0 0 16px;
    }

    .fm-metric-head {
        width: 100%;
        max-width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        margin-bottom: 8px;
    }

    .fm-metric-head span {
        min-width: 0;
        max-width: 80%;

        font-size: 11px;
        line-height: 1.4;

        overflow-wrap: break-word;
    }

    .fm-metric-head strong {
        min-width: max-content;

        font-size: 11px;
        white-space: nowrap;
    }

    .fm-metric-bar {
        width: 100%;
        height: 6px;
    }


    /* =====================================================
       COMPARISON TABLE
    ===================================================== */

    .fm-comparison-wrap {
        width: 100%;
        max-width: 100%;

        display: block;

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        border-radius: 12px;
    }

    .fm-comparison-table {
        width: 650px !important;
        min-width: 650px !important;
        max-width: none !important;

        table-layout: fixed;
    }

    .fm-comparison-table th {
        height: 45px;
        padding: 0 11px;

        font-size: 9px;
        line-height: 1.2;

        white-space: nowrap;
    }

    .fm-comparison-table td {
        height: 46px;
        padding: 0 11px;

        font-size: 11px;
        line-height: 1.3;

        white-space: nowrap;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media screen and (max-width: 480px) {

    .fm-benefits {
        padding: 38px 0 50px;
    }

    .fm-benefits-header {
        width: calc(100% - 24px);
    }

    .fm-benefits-header h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .fm-benefits-header p {
        font-size: 13px;
        line-height: 1.65;
    }

    .fm-benefits-grid {
        width: calc(100% - 24px);
        gap: 14px;
    }

    .fm-benefit-card,
    .fm-benefit-card:nth-child(1),
    .fm-benefit-card:nth-child(2),
    .fm-benefit-card:nth-child(3),
    .fm-benefit-card:nth-child(4),
    .fm-benefit-card:nth-child(5),
    .fm-benefit-card:nth-child(6) {

        padding: 19px 16px 20px;
    }

    .fm-benefit-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;
        max-width: 44px;

        margin-bottom: 14px;

        font-size: 17px;
    }

    .fm-benefit-card h3 {
        font-size: 15px;
        line-height: 1.4;
    }

    .fm-benefit-card p {
        font-size: 13px;
        line-height: 1.65;
    }

    .fm-benefits-bottom {
        width: calc(100% - 24px);
        margin-top: 38px;
    }

    .fm-performance h2,
    .fm-comparison h2 {
        font-size: 19px;
    }

    .fm-metric-head span,
    .fm-metric-head strong {
        font-size: 10px;
    }
}


/* =========================================================
   VERY SMALL PHONE — 360px
========================================================= */

@media screen and (max-width: 360px) {

    .fm-benefits-header {
        width: calc(100% - 20px);
    }

    .fm-benefits-grid {
        width: calc(100% - 20px);
        gap: 13px;
    }

    .fm-benefits-header h2 {
        font-size: 22px;
    }

    .fm-benefits-header p {
        font-size: 12px;
    }

    .fm-benefit-card {
        padding: 18px 14px 19px !important;
    }

    .fm-benefit-card h3 {
        font-size: 15px;
    }

    .fm-benefit-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .fm-benefit-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        max-width: 42px;
        font-size: 16px;
    }

    .fm-benefits-bottom {
        width: calc(100% - 20px);
    }
}

/*==================================== Board MLM Software =====================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/* ============ BINARY PAGE — EXTRA STYLES ============ */

.tree-wrap {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
}

.tree-wrap .tw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.tree-wrap .tw-head span {
    font-family: 'Outfit', sans-serif;
    font-size: .84rem;
    color: var(--text-dim);
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.tree-legend span {
    font-size: .72rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.feature-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feature-tagcloud span {
    font-size: .72rem;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
}

/* earnings scenario card */
.earn-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}

.earn-legs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.leg-box {
    text-align: center;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
}

.leg-box.strong {
    background: rgba(124, 92, 252, .07);
    border-color: rgba(124, 92, 252, .25);
}

.leg-box.weak {
    background: rgba(38, 217, 232, .07);
    border-color: rgba(38, 217, 232, .25);
}

.leg-box .ll-label {
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 8px;
}

.leg-box .ll-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.leg-box .ll-sub {
    font-size: .76rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .8rem;
}

.earn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.earn-stats .es-box {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 18px 10px;
}

.earn-stats .es-box b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    color: #fff;
}

.earn-stats .es-box.highlight b {
    color: var(--green);
}

.earn-stats .es-box span {
    font-size: .72rem;
    color: var(--text-faint);
}

.earn-note {
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.8;
    background: rgba(38, 217, 232, .06);
    border: 1px solid rgba(38, 217, 232, .2);
    border-radius: 12px;
    padding: 16px 18px;
}

.earn-note strong {
    color: #fff;
}

@media(max-width:600px) {
    .earn-legs {
        grid-template-columns: 1fr;
    }

    .vs-badge {
        margin: 0 auto;
    }
}

/* commission stream card */
.stream-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.stream-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.stream-card p {
    font-size: .86rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.stream-range {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .25);
    padding: 5px 12px;
    border-radius: 999px;
}

/* logic groups */
.logic-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.logic-panel h5 {
    font-size: 1.02rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.logic-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.logic-row .ln {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    color: var(--violet-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.logic-row p {
    margin: 0;
    font-size: .83rem;
    line-height: 1.7;
    color: var(--text-dim);
}

.logic-row strong {
    color: #fff;
}

/* perf stat bars */
.perf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .86rem;
}

.perf-row:last-child {
    border-bottom: none;
}

.perf-row span:first-child {
    color: var(--text-dim);
}

.perf-row b {
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

/* ============ RECYCLE PAGE — EXTRA STYLES ============ */
.disclaimer-box {
    background: rgba(255, 182, 72, .06);
    border: 1px solid rgba(255, 182, 72, .25);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: .82rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.disclaimer-box strong {
    color: var(--amber);
}

.disclaimer-box.critical {
    background: rgba(255, 107, 107, .06);
    border-color: rgba(255, 107, 107, .25);
}

.disclaimer-box.critical strong {
    color: var(--red);
}

.cycle-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 2px 16px;
}

.cycle-node {
    flex-shrink: 0;
    text-align: center;
    min-width: 82px;
}

.cycle-node .cn-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
}

.cycle-node .cn-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.cycle-node.final .cn-icon {
    background: var(--grad);
    border-color: transparent;
}

.cycle-node.final .cn-icon i {
    color: #05070d;
}

.cycle-node .cn-label {
    font-size: .68rem;
    color: var(--text-dim);
    font-weight: 500;
    line-height: 1.4;
}

.cycle-arrow2 {
    flex-shrink: 0;
    color: var(--text-faint);
    width: 14px;
    height: 14px;
}

/* ============ CUSTOM MLM PAGE — EXTRA STYLES ============ */
.module-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.module-chip {
    font-size: .78rem;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
    font-family: 'Outfit', sans-serif;
}

.module-chip.selected {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
    font-weight: 600;
}

.config-summary {
    background: rgba(124, 92, 252, .07);
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .82rem;
    color: var(--text-dim);
    margin-top: 14px;
}

.config-summary b {
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.module-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    transition: .2s;
}

.module-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-2px);
}

.module-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.module-card p {
    font-size: .82rem;
    margin: 0;
    line-height: 1.6;
}

/*=================================== Book MLM Demo ====================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/*==================================== Contect =====================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/*============================== Custom MLM Software ============================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/* ============ BINARY PAGE — EXTRA STYLES ============ */

.tree-wrap {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
}

.tree-wrap .tw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.tree-wrap .tw-head span {
    font-family: 'Outfit', sans-serif;
    font-size: .84rem;
    color: var(--text-dim);
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.tree-legend span {
    font-size: .72rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.feature-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feature-tagcloud span {
    font-size: .72rem;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
}

/* earnings scenario card */
.earn-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}

.earn-legs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.leg-box {
    text-align: center;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
}

.leg-box.strong {
    background: rgba(124, 92, 252, .07);
    border-color: rgba(124, 92, 252, .25);
}

.leg-box.weak {
    background: rgba(38, 217, 232, .07);
    border-color: rgba(38, 217, 232, .25);
}

.leg-box .ll-label {
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 8px;
}

.leg-box .ll-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.leg-box .ll-sub {
    font-size: .76rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .8rem;
}

.earn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.earn-stats .es-box {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 18px 10px;
}

.earn-stats .es-box b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    color: #fff;
}

.earn-stats .es-box.highlight b {
    color: var(--green);
}

.earn-stats .es-box span {
    font-size: .72rem;
    color: var(--text-faint);
}

.earn-note {
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.8;
    background: rgba(38, 217, 232, .06);
    border: 1px solid rgba(38, 217, 232, .2);
    border-radius: 12px;
    padding: 16px 18px;
}

.earn-note strong {
    color: #fff;
}

@media(max-width:600px) {
    .earn-legs {
        grid-template-columns: 1fr;
    }

    .vs-badge {
        margin: 0 auto;
    }
}

/* commission stream card */
.stream-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.stream-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.stream-card p {
    font-size: .86rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.stream-range {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .25);
    padding: 5px 12px;
    border-radius: 999px;
}

/* logic groups */
.logic-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.logic-panel h5 {
    font-size: 1.02rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.logic-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.logic-row .ln {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    color: var(--violet-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.logic-row p {
    margin: 0;
    font-size: .83rem;
    line-height: 1.7;
    color: var(--text-dim);
}

.logic-row strong {
    color: #fff;
}

/* perf stat bars */
.perf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .86rem;
}

.perf-row:last-child {
    border-bottom: none;
}

.perf-row span:first-child {
    color: var(--text-dim);
}

.perf-row b {
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

/* ============ RECYCLE PAGE — EXTRA STYLES ============ */
.disclaimer-box {
    background: rgba(255, 182, 72, .06);
    border: 1px solid rgba(255, 182, 72, .25);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: .82rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.disclaimer-box strong {
    color: var(--amber);
}

.disclaimer-box.critical {
    background: rgba(255, 107, 107, .06);
    border-color: rgba(255, 107, 107, .25);
}

.disclaimer-box.critical strong {
    color: var(--red);
}

.cycle-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 2px 16px;
}

.cycle-node {
    flex-shrink: 0;
    text-align: center;
    min-width: 82px;
}

.cycle-node .cn-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
}

.cycle-node .cn-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.cycle-node.final .cn-icon {
    background: var(--grad);
    border-color: transparent;
}

.cycle-node.final .cn-icon i {
    color: #05070d;
}

.cycle-node .cn-label {
    font-size: .68rem;
    color: var(--text-dim);
    font-weight: 500;
    line-height: 1.4;
}

.cycle-arrow2 {
    flex-shrink: 0;
    color: var(--text-faint);
    width: 14px;
    height: 14px;
}

/* ============ CUSTOM MLM PAGE — EXTRA STYLES ============ */
.module-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.module-chip {
    font-size: .78rem;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
    font-family: 'Outfit', sans-serif;
}

.module-chip.selected {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
    font-weight: 600;
}

.config-summary {
    background: rgba(124, 92, 252, .07);
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .82rem;
    color: var(--text-dim);
    margin-top: 14px;
}

.config-summary b {
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.module-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    transition: .2s;
}

.module-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-2px);
}

.module-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.module-card p {
    font-size: .82rem;
    margin: 0;
    line-height: 1.6;
}

/*================================== Faq =================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/*===================================== monoline MLM Software =================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/* ============ BINARY PAGE — EXTRA STYLES ============ */

.tree-wrap {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
}

.tree-wrap .tw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.tree-wrap .tw-head span {
    font-family: 'Outfit', sans-serif;
    font-size: .84rem;
    color: var(--text-dim);
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.tree-legend span {
    font-size: .72rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.feature-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feature-tagcloud span {
    font-size: .72rem;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
}

/* earnings scenario card */
.earn-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}

.earn-legs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.leg-box {
    text-align: center;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
}

.leg-box.strong {
    background: rgba(124, 92, 252, .07);
    border-color: rgba(124, 92, 252, .25);
}

.leg-box.weak {
    background: rgba(38, 217, 232, .07);
    border-color: rgba(38, 217, 232, .25);
}

.leg-box .ll-label {
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 8px;
}

.leg-box .ll-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.leg-box .ll-sub {
    font-size: .76rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .8rem;
}

.earn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.earn-stats .es-box {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 18px 10px;
}

.earn-stats .es-box b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    color: #fff;
}

.earn-stats .es-box.highlight b {
    color: var(--green);
}

.earn-stats .es-box span {
    font-size: .72rem;
    color: var(--text-faint);
}

.earn-note {
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.8;
    background: rgba(38, 217, 232, .06);
    border: 1px solid rgba(38, 217, 232, .2);
    border-radius: 12px;
    padding: 16px 18px;
}

.earn-note strong {
    color: #fff;
}

@media(max-width:600px) {
    .earn-legs {
        grid-template-columns: 1fr;
    }

    .vs-badge {
        margin: 0 auto;
    }
}

/* commission stream card */
.stream-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.stream-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.stream-card p {
    font-size: .86rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.stream-range {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .25);
    padding: 5px 12px;
    border-radius: 999px;
}

/* logic groups */
.logic-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.logic-panel h5 {
    font-size: 1.02rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.logic-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.logic-row .ln {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    color: var(--violet-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.logic-row p {
    margin: 0;
    font-size: .83rem;
    line-height: 1.7;
    color: var(--text-dim);
}

.logic-row strong {
    color: #fff;
}

/* perf stat bars */
.perf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .86rem;
}

.perf-row:last-child {
    border-bottom: none;
}

.perf-row span:first-child {
    color: var(--text-dim);
}

.perf-row b {
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

/* ============ MONOLINE PAGE — QUEUE VISUAL ============ */
.queue-track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 4px 18px;
}

.queue-node {
    flex-shrink: 0;
    text-align: center;
    min-width: 78px;
}

.queue-node .qn-circle {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    margin: 0 auto 8px;
    border: 2px solid var(--line);
    background: var(--panel-2);
    color: #fff;
}

.queue-node.head .qn-circle {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    box-shadow: 0 0 0 5px rgba(124, 92, 252, .12);
}

.queue-node.new .qn-circle {
    border-color: var(--cyan);
    border-style: dashed;
    color: var(--cyan);
    background: transparent;
}

.queue-node .qn-label {
    font-size: .66rem;
    color: var(--text-faint);
}

.queue-node.head .qn-label {
    color: var(--green);
    font-weight: 600;
}

.queue-arrow {
    flex-shrink: 0;
    color: var(--text-faint);
    width: 16px;
    height: 16px;
}

.queue-flow-label {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--text-faint);
    padding-top: 10px;
    border-top: 1px dashed var(--line-soft);
    margin-top: 4px;
}

.queue-flow-label span:first-child {
    color: var(--green);
}

/*=========================== Recyle MLM Software =======================================*/
/* ===== HERO ===== */
.hero {
    padding: 170px 0 90px;
    position: relative;
    overflow: hidden;
}

@media(max-width:768px) {
    .hero {
        padding: 130px 0 60px;
    }
}

/* premium animated hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}

.hero-orb.o1 {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
    animation: orbit1 22s ease-in-out infinite;
}

.hero-orb.o2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
    animation: orbit2 26s ease-in-out infinite;
}

.hero-orb.o3 {
    width: 320px;
    height: 320px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, var(--violet-2), transparent 70%);
    opacity: .35;
    animation: orbit3 18s ease-in-out infinite;
}

@keyframes orbit1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 50px) scale(1.1);
    }

    66% {
        transform: translate(30px, 90px) scale(.92);
    }
}

@keyframes orbit2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(70px, -60px) scale(1.15);
    }
}

@keyframes orbit3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9);
    }

    50% {
        transform: translate(-40%, -60%) scale(1.2);
    }
}

.hero-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
    animation: gridpan 40s linear infinite;
}

@keyframes gridpan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 92px 46px;
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
    opacity: 0;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    90% {
        opacity: .4;
    }

    100% {
        transform: translateY(-620px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orb,
    .hero-grid-mask,
    .hero-particles span {
        animation: none !important;
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .08);
    border: 1px solid rgba(61, 220, 151, .25);
    font-size: .78rem;
    color: var(--green);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.badge-live .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
}

.badge-live .pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--green);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 20px 0 22px;
}

.hero-lead {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
}

.hero-stats .stat span {
    font-size: .8rem;
    color: var(--text-faint);
}

/* dashboard mockup */
.dash-wrap {
    position: relative;
}

.dash-card {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
    animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.dash-head .title {
    font-family: 'Outfit', sans-serif;
    font-size: .86rem;
    color: var(--text-dim);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dots span:nth-child(1) {
    background: #ff6b6b;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #3ddc97;
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kv {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
}

.kpi .kl {
    font-size: .72rem;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.kpi .kd {
    font-size: .72rem;
    margin-top: 4px;
}

.kpi .kd.up {
    color: var(--green);
}

.kpi .kd.down {
    color: var(--red);
}

.chart-box {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.chart-box .cb-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
}

.bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
    display: block;
}

.ai-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.ai-alert.insight {
    background: rgba(124, 92, 252, .08);
    border: 1px solid rgba(124, 92, 252, .25);
}

.ai-alert.fraud {
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .25);
}

.ai-alert i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-alert.insight i {
    color: var(--violet-2);
}

.ai-alert.fraud i {
    color: var(--red);
}

.float-chip {
    position: absolute;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .76rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.float-chip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.chip-1 {
    top: -18px;
    right: -10px;
    animation: floaty 7s ease-in-out infinite;
}

.chip-2 {
    bottom: 20px;
    left: -30px;
    animation: floaty 5.5s ease-in-out infinite reverse;
}

@media(max-width:991px) {

    .chip-1,
    .chip-2 {
        display: none;
    }
}

/* marquee */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 22px 0;
    background: rgba(255, 255, 255, .015);
}

.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: scroll 32s linear infinite;
}

.marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--text-faint);
    padding: 9px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* stat band */
.statband {
    padding: 70px 0;
}

.statband .num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
}

.statband .lbl {
    font-size: .82rem;
    color: var(--text-faint);
    margin-top: 6px;
}

/* pipeline */
.pipe-item {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}

.pipe-item:last-child {
    border-bottom: none;
}

.pipe-num {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    color: var(--violet-2);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(124, 92, 252, .35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
}

.pipe-item h5 {
    font-size: 1.12rem;
    margin-bottom: 6px;
}

.pipe-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
}

/* generic panel card */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    height: 100%;
    transition: .3s ease;
}

.panel:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-4px);
}

.panel .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(124, 92, 252, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.panel .ic i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

/* comparison list (what is ai mlm) */
.compare-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: flex-start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row i {
    width: 20px;
    height: 20px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 3px;
}

.compare-row p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.compare-row strong {
    color: #fff;
}

/* benefit cards */
.benefit-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.benefit-card .big {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    line-height: 1;
}

.benefit-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

/* feature tabs */
.feat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.feat-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.feat-tab-btn.active,
.feat-tab-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list li {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .93rem;
    color: var(--text-dim);
    align-items: flex-start;
}

.feat-list li i {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}

/* tech cards */
.tech-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.tech-card .eyebrow {
    margin-bottom: 10px;
}

.tech-card h5 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.tech-card p {
    font-size: .88rem;
    line-height: 1.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.tech-tags span {
    font-size: .72rem;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-faint);
}

/* plan cards */
.plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: .3s;
    position: relative;
}

.plan-card:hover {
    border-color: rgba(38, 217, 232, .4);
    transform: translateY(-3px);
}

.plan-card .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .66rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .1);
    color: var(--cyan);
    border: 1px solid rgba(38, 217, 232, .25);
}

.plan-card h5 {
    font-size: 1.05rem;
    margin: 8px 0 10px;
}

.plan-card p {
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* industries */
.ind-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ind-card i {
    width: 26px;
    height: 26px;
    color: var(--violet-2);
}

.ind-card h6 {
    font-size: .98rem;
    margin: 0;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.ind-card p {
    font-size: .83rem;
    margin: 0;
    line-height: 1.6;
}

/* table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

table.cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

table.cmp-table th,
table.cmp-table td {
    padding: 16px 18px;
    font-size: .87rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

table.cmp-table thead th {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, .02);
    font-size: .85rem;
}

table.cmp-table td {
    color: var(--text-dim);
}

table.cmp-table td.yes {
    color: var(--green);
}

table.cmp-table td.no {
    color: var(--text-faint);
}

table.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

table.cmp-table td:first-child {
    color: #fff;
    font-weight: 500;
}

/* why us */
.why-row {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
}

.why-row:last-child {
    border-bottom: none;
}

.why-row .n {
    font-family: 'Outfit', sans-serif;
    color: var(--violet-2);
    font-weight: 700;
    font-size: 1.6rem;
    opacity: .4;
    width: 40px;
    flex-shrink: 0;
}

.why-row h5 {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.why-row p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

/* case studies */
.case-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.case-tag {
    font-size: .72rem;
    color: var(--violet-2);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.case-card h4 {
    font-size: 1.25rem;
    margin: 10px 0 6px;
}

.case-meta {
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.case-card p {
    font-size: .87rem;
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.case-metrics div {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    padding: 14px 6px;
    border: 1px solid var(--line-soft);
}

.case-metrics b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.case-metrics span {
    font-size: .68rem;
    color: var(--text-faint);
}

/* pricing */
.price-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    border-color: var(--violet);
    box-shadow: var(--shadow-glow);
    position: relative;
}

.price-card .badge-top {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #05070d;
    font-size: .75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h4 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.price-card .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.price-card ul li {
    display: flex;
    gap: 10px;
    font-size: .86rem;
    color: var(--text-dim);
    padding: 9px 0;
    align-items: flex-start;
}

.price-card ul li i {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* testimonials */
.test-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.stars {
    color: var(--amber);
    font-size: .85rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.test-card p.quote {
    font-size: .93rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-style: italic;
}

.test-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #05070d;
    font-size: .85rem;
}

.test-person b {
    display: block;
    color: #fff;
    font-size: .88rem;
}

.test-person span {
    font-size: .76rem;
    color: var(--text-faint);
}

/* FAQ */
.accordion-custom .accordion-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-custom .accordion-button {
    background: transparent;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: .95rem;
    padding: 20px 24px;
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--violet-2);
}

.accordion-custom .accordion-button::after {
    filter: invert(1) brightness(2);
}

.accordion-custom .accordion-body {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.8;
    padding: 0 24px 22px;
}

/* CTA */
.cta-panel {
    background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: 28px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: center;
    margin-top: 36px;
}

.cta-checks span {
    font-size: .82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-checks i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

/* footer */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 70px 0 30px;
}

footer h6 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: .9rem;
    margin-bottom: 18px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 11px;
}

footer ul li a {
    font-size: .85rem;
    color: var(--text-faint);
    transition: .2s;
}

footer ul li a:hover {
    color: var(--violet-2);
}

.foot-bottom {
    border-top: 1px solid var(--line-soft);
    margin-top: 50px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: var(--text-faint);
}

.social-row {
    display: flex;
    gap: 10px;
}

/* back to top */
#backTop {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

#backTop.show {
    opacity: 1;
    pointer-events: auto;
}

#backTop i {
    width: 20px;
    height: 20px;
    color: #05070d;
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #252c47;
    border-radius: 10px;
}

/* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

/* breadcrumb */
.breadcrumb-row {
    padding: 12px 0;
    font-size: .8rem;
    color: var(--text-faint);
}

.breadcrumb-row a {
    color: var(--text-faint);
}

.breadcrumb-row a:hover {
    color: var(--violet-2);
}

/* trust strip */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
}

.trust-strip span {
    font-size: .8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.callback-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(38, 217, 232, .08);
    border: 1px solid rgba(38, 217, 232, .25);
    font-size: .82rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.callback-note i {
    width: 16px;
    height: 16px;
}

/* form panel */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-glow);
}

.form-panel h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-panel .form-lead {
    font-size: .86rem;
    color: var(--text-faint);
    margin-bottom: 26px;
}

.field-label {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 7px;
    display: block;
}

.field-label .req {
    color: var(--red);
}

.form-control-dark,
.form-select-dark {
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 300;
    transition: .2s;
}

.form-control-dark::placeholder {
    color: var(--text-faint);
}

.form-control-dark:focus,
.form-select-dark:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(124, 92, 252, .05);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.form-select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.form-select-dark option {
    background: #0e1424;
    color: #fff;
}

.phone-row {
    display: flex;
    gap: 8px;
}

.phone-row .form-select-dark {
    max-width: 112px;
    flex-shrink: 0;
}

.field-group {
    margin-bottom: 20px;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pill-choice {
    position: relative;
}

.pill-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-choice label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .83rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}

.pill-choice input:checked+label {
    background: var(--grad);
    border-color: transparent;
    color: #05070d;
    font-weight: 600;
}

.pill-choice label:hover {
    border-color: rgba(255, 255, 255, .3);
}

.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 22px 0;
}

.consent-row input {
    margin-top: 4px;
    accent-color: var(--violet);
    flex-shrink: 0;
}

.consent-row label {
    font-size: .78rem;
    color: var(--text-faint);
    line-height: 1.6;
}

.consent-row a {
    color: var(--violet-2);
}

.submit-note {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    margin-top: 14px;
}

/* success panel */
.success-panel {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

.success-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
}

.success-check i {
    width: 36px;
    height: 36px;
    color: var(--green);
}

@keyframes popIn {
    0% {
        transform: scale(.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.success-panel p {
    font-size: .92rem;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 8px;
}

/* side stat panel (reuses mega-side look) */
.demo-side-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 28px;
}

.demo-side-panel h5 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.demo-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-side-stats div {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    padding: 16px 8px;
    border: 1px solid var(--line-soft);
}

.demo-side-stats b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.demo-side-stats span {
    font-size: .7rem;
    color: var(--text-faint);
}

/* minute block cards */
.minute-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.minute-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(38, 217, 232, .1);
    border: 1px solid rgba(38, 217, 232, .25);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.minute-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.minute-card p {
    font-size: .87rem;
    line-height: 1.7;
    margin: 0;
}

/* process steps (horizontal) */
.proc-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.proc-step .pn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
}

.proc-step h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.proc-step p {
    font-size: .84rem;
    line-height: 1.7;
}

.proc-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .35;
}

@media(max-width:767px) {
    .proc-line {
        display: none;
    }
}

/* session agenda */
.agenda-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.agenda-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.agenda-head h5 {
    font-size: 1.05rem;
    margin: 0;
}

.agenda-head span {
    font-size: .75rem;
    color: var(--text-faint);
}

.agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .87rem;
    color: var(--text-dim);
}

.agenda-row:last-of-type {
    border-bottom: none;
}

.agenda-row .amin {
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    color: var(--violet-2);
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agenda-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: #fff;
    font-weight: 600;
}

.agenda-foot {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 16px;
    line-height: 1.7;
}

/* plan type grid */
.plantype-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    transition: .25s;
}

.plantype-card:hover {
    border-color: rgba(124, 92, 252, .4);
    transform: translateY(-3px);
}

.plantype-card .pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.plantype-card .pt-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.plantype-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: 8px;
}

.plantype-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.plantype-card .pt-tag {
    font-size: .68rem;
    color: var(--cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

/* sticky mobile CTA */
.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(8, 11, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.mobile-sticky-cta a {
    flex: 1;
    text-align: center;
    font-size: .86rem;
    padding: 12px 10px;
}

@media(min-width:992px) {
    .mobile-sticky-cta {
        display: none;
    }
}

body {
    padding-bottom: 0;
}

@media(max-width:991px) {
    body {
        padding-bottom: 70px;
    }
}

/* ============ CONTACT PAGE ============ */
.info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    text-align: center;
    transition: .25s;
}

.info-card:hover {
    border-color: rgba(124, 92, 252, .35);
    transform: translateY(-3px);
}

.info-card .ic-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.info-card .ic-circle i {
    width: 22px;
    height: 22px;
    color: var(--violet-2);
}

.info-card h6 {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 8px;
}

.info-card p {
    font-size: .83rem;
    line-height: 1.6;
    margin: 0;
}

.info-card a {
    color: var(--text-dim);
}

.info-card a:hover {
    color: var(--violet-2);
}

.office-panel {
    background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
    border: 1px solid rgba(124, 92, 252, .25);
    border-radius: var(--radius);
    padding: 30px;
    height: 100%;
}

.office-panel .of-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}

.office-panel .of-row:last-child {
    border-bottom: none;
}

.office-panel .of-row i {
    width: 19px;
    height: 19px;
    color: var(--violet-2);
    flex-shrink: 0;
    margin-top: 2px;
}

.office-panel .of-row b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 3px;
}

.office-panel .of-row span {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.map-visual {
    height: 170px;
    border-radius: 14px;
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
    border: 1px solid var(--line);
}

.map-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-visual .pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -45deg;
    box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
}

.map-visual .pin i {
    rotate: 45deg;
    width: 16px;
    height: 16px;
    color: #05070d;
}

.reason-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ============ FAQ PAGE ============ */
.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.faq-search input {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 999px;
    padding: 15px 20px 15px 50px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
}

.faq-search input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
}

.faq-search input::placeholder {
    color: var(--text-faint);
}

.faq-search i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 24px;
}

.faq-cat-btn {
    font-family: 'Outfit', sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: .2s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: var(--grad);
    color: #05070d;
    border-color: transparent;
}

.faq-cat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 50px 0 20px;
}

.faq-cat-heading .fc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 92, 252, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cat-heading .fc-icon i {
    width: 18px;
    height: 18px;
    color: var(--violet-2);
}

.faq-cat-heading h4 {
    font-size: 1.2rem;
    margin: 0;
}

.faq-cat-heading span {
    font-size: .78rem;
    color: var(--text-faint);
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
}

.faq-no-results i {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.faq-item-hidden {
    display: none !important;
}

/* ============ BINARY PAGE — EXTRA STYLES ============ */

.tree-wrap {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
    padding: 22px;
}

.tree-wrap .tw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.tree-wrap .tw-head span {
    font-family: 'Outfit', sans-serif;
    font-size: .84rem;
    color: var(--text-dim);
}

.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.tree-legend span {
    font-size: .72rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.feature-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feature-tagcloud span {
    font-size: .72rem;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .02);
}

/* earnings scenario card */
.earn-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}

.earn-legs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.leg-box {
    text-align: center;
    padding: 22px 14px;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
}

.leg-box.strong {
    background: rgba(124, 92, 252, .07);
    border-color: rgba(124, 92, 252, .25);
}

.leg-box.weak {
    background: rgba(38, 217, 232, .07);
    border-color: rgba(38, 217, 232, .25);
}

.leg-box .ll-label {
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 8px;
}

.leg-box .ll-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.leg-box .ll-sub {
    font-size: .76rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad);
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: .8rem;
}

.earn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.earn-stats .es-box {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 18px 10px;
}

.earn-stats .es-box b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    color: #fff;
}

.earn-stats .es-box.highlight b {
    color: var(--green);
}

.earn-stats .es-box span {
    font-size: .72rem;
    color: var(--text-faint);
}

.earn-note {
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.8;
    background: rgba(38, 217, 232, .06);
    border: 1px solid rgba(38, 217, 232, .2);
    border-radius: 12px;
    padding: 16px 18px;
}

.earn-note strong {
    color: #fff;
}

@media(max-width:600px) {
    .earn-legs {
        grid-template-columns: 1fr;
    }

    .vs-badge {
        margin: 0 auto;
    }
}

/* commission stream card */
.stream-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.stream-card h5 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.stream-card p {
    font-size: .86rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.stream-range {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(61, 220, 151, .1);
    border: 1px solid rgba(61, 220, 151, .25);
    padding: 5px 12px;
    border-radius: 999px;
}

/* logic groups */
.logic-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}

.logic-panel h5 {
    font-size: 1.02rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.logic-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.logic-row .ln {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 92, 252, .12);
    color: var(--violet-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.logic-row p {
    margin: 0;
    font-size: .83rem;
    line-height: 1.7;
    color: var(--text-dim);
}

.logic-row strong {
    color: #fff;
}

/* perf stat bars */
.perf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .86rem;
}

.perf-row:last-child {
    border-bottom: none;
}

.perf-row span:first-child {
    color: var(--text-dim);
}

.perf-row b {
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

/* ============ RECYCLE PAGE — EXTRA STYLES ============ */
.disclaimer-box {
    background: rgba(255, 182, 72, .06);
    border: 1px solid rgba(255, 182, 72, .25);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: .82rem;
    line-height: 1.75;
    color: var(--text-dim);
}

.disclaimer-box strong {
    color: var(--amber);
}

.disclaimer-box.critical {
    background: rgba(255, 107, 107, .06);
    border-color: rgba(255, 107, 107, .25);
}

.disclaimer-box.critical strong {
    color: var(--red);
}

.cycle-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 2px 16px;
}

.cycle-node {
    flex-shrink: 0;
    text-align: center;
    min-width: 82px;
}

.cycle-node .cn-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    background: rgba(124, 92, 252, .1);
    border: 1px solid rgba(124, 92, 252, .25);
}

.cycle-node .cn-icon i {
    width: 20px;
    height: 20px;
    color: var(--violet-2);
}

.cycle-node.final .cn-icon {
    background: var(--grad);
    border-color: transparent;
}

.cycle-node.final .cn-icon i {
    color: #05070d;
}

.cycle-node .cn-label {
    font-size: .68rem;
    color: var(--text-dim);
    font-weight: 500;
    line-height: 1.4;
}

.cycle-arrow2 {
    flex-shrink: 0;
    color: var(--text-faint);
    width: 14px;
    height: 14px;
}

/*================================= Unilevel MLM Software ====================================*/
/* ===== HERO ===== */
    .hero {
      padding: 170px 0 90px;
      position: relative;
      overflow: hidden;
    }

    @media(max-width:768px) {
      .hero {
        padding: 130px 0 60px;
      }
    }

    /* premium animated hero background */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
    }

    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .55;
    }

    .hero-orb.o1 {
      width: 480px;
      height: 480px;
      top: -160px;
      right: -120px;
      background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
      animation: orbit1 22s ease-in-out infinite;
    }

    .hero-orb.o2 {
      width: 420px;
      height: 420px;
      bottom: -160px;
      left: -100px;
      background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
      animation: orbit2 26s ease-in-out infinite;
    }

    .hero-orb.o3 {
      width: 320px;
      height: 320px;
      top: 35%;
      left: 45%;
      background: radial-gradient(circle, var(--violet-2), transparent 70%);
      opacity: .35;
      animation: orbit3 18s ease-in-out infinite;
    }

    @keyframes orbit1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      33% {
        transform: translate(-60px, 50px) scale(1.1);
      }

      66% {
        transform: translate(30px, 90px) scale(.92);
      }
    }

    @keyframes orbit2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(70px, -60px) scale(1.15);
      }
    }

    @keyframes orbit3 {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(.9);
      }

      50% {
        transform: translate(-40%, -60%) scale(1.2);
      }
    }

    .hero-grid-mask {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black, transparent 75%);
      animation: gridpan 40s linear infinite;
    }

    @keyframes gridpan {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 92px 46px;
      }
    }

    .hero-particles {
      position: absolute;
      inset: 0;
    }

    .hero-particles span {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px 2px rgba(38, 217, 232, .7);
      opacity: 0;
      animation: rise linear infinite;
    }

    @keyframes rise {
      0% {
        transform: translateY(0);
        opacity: 0;
      }

      10% {
        opacity: .8;
      }

      90% {
        opacity: .4;
      }

      100% {
        transform: translateY(-620px);
        opacity: 0;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .hero-orb,
      .hero-grid-mask,
      .hero-particles span {
        animation: none !important;
      }
    }

    .badge-live {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(61, 220, 151, .08);
      border: 1px solid rgba(61, 220, 151, .25);
      font-size: .78rem;
      color: var(--green);
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
    }

    .badge-live .pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      position: relative;
    }

    .badge-live .pulse::after {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      border: 1px solid var(--green);
      animation: pulse 1.8s ease-out infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(.6);
        opacity: 1;
      }

      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    .hero h1 {
      font-size: clamp(2.3rem, 5vw, 3.6rem);
      line-height: 1.08;
      margin: 20px 0 22px;
    }

    .hero-lead {
      font-size: 1.08rem;
      line-height: 1.8;
      color: var(--text-dim);
      max-width: 560px;
      margin-bottom: 34px;
    }

    .hero-stats {
      display: flex;
      gap: 34px;
      margin-top: 46px;
      flex-wrap: wrap;
    }

    .hero-stats .stat b {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 1.9rem;
      color: #fff;
      font-weight: 700;
    }

    .hero-stats .stat span {
      font-size: .8rem;
      color: var(--text-faint);
    }

    /* dashboard mockup */
    .dash-wrap {
      position: relative;
    }

    .dash-card {
      background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-glow);
      padding: 22px;
      animation: floaty 6s ease-in-out infinite;
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    .dash-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line-soft);
    }

    .dash-head .title {
      font-family: 'Outfit', sans-serif;
      font-size: .86rem;
      color: var(--text-dim);
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dots span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }

    .dots span:nth-child(1) {
      background: #ff6b6b;
    }

    .dots span:nth-child(2) {
      background: #ffb648;
    }

    .dots span:nth-child(3) {
      background: #3ddc97;
    }

    .kpi-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px;
    }

    .kpi {
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      padding: 14px 16px;
    }

    .kpi .kv {
      font-family: 'Outfit', sans-serif;
      font-size: 1.25rem;
      color: #fff;
      font-weight: 600;
    }

    .kpi .kl {
      font-size: .72rem;
      color: var(--text-faint);
      margin-bottom: 4px;
    }

    .kpi .kd {
      font-size: .72rem;
      margin-top: 4px;
    }

    .kpi .kd.up {
      color: var(--green);
    }

    .kpi .kd.down {
      color: var(--red);
    }

    .chart-box {
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 14px;
    }

    .chart-box .cb-head {
      display: flex;
      justify-content: space-between;
      font-size: .78rem;
      color: var(--text-faint);
      margin-bottom: 10px;
    }

    .bars {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 70px;
    }

    .bars i {
      flex: 1;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, var(--violet), rgba(124, 92, 252, .15));
      display: block;
    }

    .ai-alert {
      display: flex;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      margin-bottom: 10px;
      font-size: .78rem;
      line-height: 1.5;
    }

    .ai-alert.insight {
      background: rgba(124, 92, 252, .08);
      border: 1px solid rgba(124, 92, 252, .25);
    }

    .ai-alert.fraud {
      background: rgba(255, 107, 107, .08);
      border: 1px solid rgba(255, 107, 107, .25);
    }

    .ai-alert i {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .ai-alert.insight i {
      color: var(--violet-2);
    }

    .ai-alert.fraud i {
      color: var(--red);
    }

    .float-chip {
      position: absolute;
      background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: .76rem;
      box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Outfit', sans-serif;
    }

    .float-chip i {
      width: 15px;
      height: 15px;
      color: var(--green);
    }

    .chip-1 {
      top: -18px;
      right: -10px;
      animation: floaty 7s ease-in-out infinite;
    }

    .chip-2 {
      bottom: 20px;
      left: -30px;
      animation: floaty 5.5s ease-in-out infinite reverse;
    }

    @media(max-width:991px) {

      .chip-1,
      .chip-2 {
        display: none;
      }
    }

    /* marquee */
    .marquee-wrap {
      overflow: hidden;
      border-top: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft);
      padding: 22px 0;
      background: rgba(255, 255, 255, .015);
    }

    .marquee-track {
      display: flex;
      gap: 14px;
      width: max-content;
      animation: scroll 32s linear infinite;
    }

    .marquee-track span {
      font-family: 'Outfit', sans-serif;
      font-size: .85rem;
      color: var(--text-faint);
      padding: 9px 20px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      white-space: nowrap;
    }

    @keyframes scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    /* stat band */
    .statband {
      padding: 70px 0;
    }

    .statband .num {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 700;
      color: #fff;
    }

    .statband .lbl {
      font-size: .82rem;
      color: var(--text-faint);
      margin-top: 6px;
    }

    /* pipeline */
    .pipe-item {
      display: flex;
      gap: 22px;
      padding: 26px 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .pipe-item:last-child {
      border-bottom: none;
    }

    .pipe-num {
      font-family: 'Outfit', sans-serif;
      font-size: .85rem;
      color: var(--violet-2);
      width: 46px;
      height: 46px;
      border: 1px solid rgba(124, 92, 252, .35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-weight: 600;
    }

    .pipe-item h5 {
      font-size: 1.12rem;
      margin-bottom: 6px;
    }

    .pipe-item p {
      margin: 0;
      font-size: .92rem;
      line-height: 1.7;
    }

    /* generic panel card */
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      height: 100%;
      transition: .3s ease;
    }

    .panel:hover {
      border-color: rgba(124, 92, 252, .35);
      transform: translateY(-4px);
    }

    .panel .ic {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: rgba(124, 92, 252, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .panel .ic i {
      width: 22px;
      height: 22px;
      color: var(--violet-2);
    }

    /* comparison list (what is ai mlm) */
    .compare-row {
      display: flex;
      gap: 16px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line-soft);
      align-items: flex-start;
    }

    .compare-row:last-child {
      border-bottom: none;
    }

    .compare-row i {
      width: 20px;
      height: 20px;
      color: var(--green);
      flex-shrink: 0;
      margin-top: 3px;
    }

    .compare-row p {
      margin: 0;
      font-size: .95rem;
      line-height: 1.75;
      color: var(--text-dim);
    }

    .compare-row strong {
      color: #fff;
    }

    /* benefit cards */
    .benefit-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .benefit-card .big {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 2.6rem;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 6px;
      line-height: 1;
    }

    .benefit-card h5 {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }

    .benefit-card p {
      font-size: .9rem;
      line-height: 1.7;
      margin: 0;
    }

    /* feature tabs */
    .feat-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 36px;
    }

    .feat-tab-btn {
      font-family: 'Outfit', sans-serif;
      font-size: .88rem;
      font-weight: 500;
      color: var(--text-dim);
      padding: 11px 20px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      transition: .2s;
    }

    .feat-tab-btn.active,
    .feat-tab-btn:hover {
      background: var(--grad);
      color: #05070d;
      border-color: transparent;
    }

    .feat-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .feat-list li {
      display: flex;
      gap: 12px;
      padding: 13px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: .93rem;
      color: var(--text-dim);
      align-items: flex-start;
    }

    .feat-list li i {
      width: 17px;
      height: 17px;
      color: var(--cyan);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* tech cards */
    .tech-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      height: 100%;
    }

    .tech-card .eyebrow {
      margin-bottom: 10px;
    }

    .tech-card h5 {
      font-size: 1.15rem;
      margin-bottom: 10px;
    }

    .tech-card p {
      font-size: .88rem;
      line-height: 1.7;
    }

    .tech-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px;
    }

    .tech-tags span {
      font-size: .72rem;
      padding: 5px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--text-faint);
    }

    /* plan cards */
    .plan-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 24px;
      height: 100%;
      transition: .3s;
      position: relative;
    }

    .plan-card:hover {
      border-color: rgba(38, 217, 232, .4);
      transform: translateY(-3px);
    }

    .plan-card .tag {
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: .66rem;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(38, 217, 232, .1);
      color: var(--cyan);
      border: 1px solid rgba(38, 217, 232, .25);
    }

    .plan-card h5 {
      font-size: 1.05rem;
      margin: 8px 0 10px;
    }

    .plan-card p {
      font-size: .85rem;
      line-height: 1.6;
      margin: 0;
    }

    /* industries */
    .ind-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ind-card i {
      width: 26px;
      height: 26px;
      color: var(--violet-2);
    }

    .ind-card h6 {
      font-size: .98rem;
      margin: 0;
      color: #fff;
      font-family: 'Outfit', sans-serif;
    }

    .ind-card p {
      font-size: .83rem;
      margin: 0;
      line-height: 1.6;
    }

    /* table */
    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    table.cmp-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    table.cmp-table th,
    table.cmp-table td {
      padding: 16px 18px;
      font-size: .87rem;
      border-bottom: 1px solid var(--line-soft);
      text-align: left;
    }

    table.cmp-table thead th {
      font-family: 'Outfit', sans-serif;
      color: #fff;
      background: rgba(255, 255, 255, .02);
      font-size: .85rem;
    }

    table.cmp-table td {
      color: var(--text-dim);
    }

    table.cmp-table td.yes {
      color: var(--green);
    }

    table.cmp-table td.no {
      color: var(--text-faint);
    }

    table.cmp-table tbody tr:last-child td {
      border-bottom: none;
    }

    table.cmp-table td:first-child {
      color: #fff;
      font-weight: 500;
    }

    /* why us */
    .why-row {
      display: flex;
      gap: 16px;
      padding: 22px 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .why-row:last-child {
      border-bottom: none;
    }

    .why-row .n {
      font-family: 'Outfit', sans-serif;
      color: var(--violet-2);
      font-weight: 700;
      font-size: 1.6rem;
      opacity: .4;
      width: 40px;
      flex-shrink: 0;
    }

    .why-row h5 {
      font-size: 1.02rem;
      margin-bottom: 6px;
    }

    .why-row p {
      margin: 0;
      font-size: .9rem;
      line-height: 1.7;
    }

    /* case studies */
    .case-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      height: 100%;
    }

    .case-tag {
      font-size: .72rem;
      color: var(--violet-2);
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
    }

    .case-card h4 {
      font-size: 1.25rem;
      margin: 10px 0 6px;
    }

    .case-meta {
      font-size: .78rem;
      color: var(--text-faint);
      margin-bottom: 16px;
    }

    .case-card p {
      font-size: .87rem;
      line-height: 1.7;
    }

    .case-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 20px;
    }

    .case-metrics div {
      text-align: center;
      background: rgba(255, 255, 255, .02);
      border-radius: 10px;
      padding: 14px 6px;
      border: 1px solid var(--line-soft);
    }

    .case-metrics b {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 1.2rem;
      color: #fff;
    }

    .case-metrics span {
      font-size: .68rem;
      color: var(--text-faint);
    }

    /* pricing */
    .price-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 32px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .price-card.featured {
      border-color: var(--violet);
      box-shadow: var(--shadow-glow);
      position: relative;
    }

    .price-card .badge-top {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--grad);
      color: #05070d;
      font-size: .75rem;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .price-card h4 {
      font-size: 1.2rem;
      margin-bottom: 6px;
    }

    .price-card .price {
      font-family: 'Outfit', sans-serif;
      font-size: 1.7rem;
      color: #fff;
      font-weight: 700;
      margin: 10px 0;
    }

    .price-card ul {
      list-style: none;
      padding: 0;
      margin: 20px 0;
      flex: 1;
    }

    .price-card ul li {
      display: flex;
      gap: 10px;
      font-size: .86rem;
      color: var(--text-dim);
      padding: 9px 0;
      align-items: flex-start;
    }

    .price-card ul li i {
      width: 16px;
      height: 16px;
      color: var(--green);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* testimonials */
    .test-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 30px;
      height: 100%;
    }

    .stars {
      color: var(--amber);
      font-size: .85rem;
      margin-bottom: 14px;
      letter-spacing: 2px;
    }

    .test-card p.quote {
      font-size: .93rem;
      line-height: 1.8;
      color: var(--text-dim);
      font-style: italic;
    }

    .test-person {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
    }

    .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--grad);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      color: #05070d;
      font-size: .85rem;
    }

    .test-person b {
      display: block;
      color: #fff;
      font-size: .88rem;
    }

    .test-person span {
      font-size: .76rem;
      color: var(--text-faint);
    }

    /* FAQ */
    .accordion-custom .accordion-item {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px !important;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .accordion-custom .accordion-button {
      background: transparent;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
      font-size: .95rem;
      padding: 20px 24px;
      box-shadow: none !important;
    }

    .accordion-custom .accordion-button:not(.collapsed) {
      color: var(--violet-2);
    }

    .accordion-custom .accordion-button::after {
      filter: invert(1) brightness(2);
    }

    .accordion-custom .accordion-body {
      color: var(--text-dim);
      font-size: .88rem;
      line-height: 1.8;
      padding: 0 24px 22px;
    }

    /* CTA */
    .cta-panel {
      background: linear-gradient(135deg, rgba(124, 92, 252, .12), rgba(38, 217, 232, .08));
      border: 1px solid rgba(124, 92, 252, .25);
      border-radius: 28px;
      padding: 70px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 26px;
      justify-content: center;
      margin-top: 36px;
    }

    .cta-checks span {
      font-size: .82rem;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .cta-checks i {
      width: 15px;
      height: 15px;
      color: var(--green);
    }

    /* footer */
    footer {
      border-top: 1px solid var(--line-soft);
      padding: 70px 0 30px;
    }

    footer h6 {
      font-family: 'Outfit', sans-serif;
      color: #fff;
      font-size: .9rem;
      margin-bottom: 18px;
    }

    footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    footer ul li {
      margin-bottom: 11px;
    }

    footer ul li a {
      font-size: .85rem;
      color: var(--text-faint);
      transition: .2s;
    }

    footer ul li a:hover {
      color: var(--violet-2);
    }

    .foot-bottom {
      border-top: 1px solid var(--line-soft);
      margin-top: 50px;
      padding-top: 26px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      font-size: .78rem;
      color: var(--text-faint);
    }

    .social-row {
      display: flex;
      gap: 10px;
    }

    /* back to top */
    #backTop {
      position: fixed;
      bottom: 26px;
      right: 26px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--grad);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px -10px rgba(124, 92, 252, .7);
      z-index: 900;
      opacity: 0;
      pointer-events: none;
      transition: .3s;
    }

    #backTop.show {
      opacity: 1;
      pointer-events: auto;
    }

    #backTop i {
      width: 20px;
      height: 20px;
      color: #05070d;
    }

    /* reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }

    @media(prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }
    }

    ::-webkit-scrollbar {
      width: 9px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: #252c47;
      border-radius: 10px;
    }

    /* ============ BOOK DEMO PAGE — EXTRA STYLES ============ */

    /* breadcrumb */
    .breadcrumb-row {
      padding: 12px 0;
      font-size: .8rem;
      color: var(--text-faint);
    }

    .breadcrumb-row a {
      color: var(--text-faint);
    }

    .breadcrumb-row a:hover {
      color: var(--violet-2);
    }

    /* trust strip */
    .trust-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 26px;
    }

    .trust-strip span {
      font-size: .8rem;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .trust-strip i {
      width: 15px;
      height: 15px;
      color: var(--green);
    }

    .callback-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 22px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(38, 217, 232, .08);
      border: 1px solid rgba(38, 217, 232, .25);
      font-size: .82rem;
      color: var(--cyan);
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
    }

    .callback-note i {
      width: 16px;
      height: 16px;
    }

    /* form panel */
    .form-panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 34px;
      box-shadow: var(--shadow-glow);
    }

    .form-panel h3 {
      font-size: 1.35rem;
      margin-bottom: 6px;
    }

    .form-panel .form-lead {
      font-size: .86rem;
      color: var(--text-faint);
      margin-bottom: 26px;
    }

    .field-label {
      font-family: 'Outfit', sans-serif;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text-dim);
      margin-bottom: 7px;
      display: block;
    }

    .field-label .req {
      color: var(--red);
    }

    .form-control-dark,
    .form-select-dark {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--line);
      color: #fff;
      border-radius: 10px;
      padding: 12px 14px;
      font-family: 'Poppins', sans-serif;
      font-size: .9rem;
      font-weight: 300;
      transition: .2s;
    }

    .form-control-dark::placeholder {
      color: var(--text-faint);
    }

    .form-control-dark:focus,
    .form-select-dark:focus {
      outline: none;
      border-color: var(--violet);
      background: rgba(124, 92, 252, .05);
      box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
    }

    .form-select-dark {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7295' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 16px;
      padding-right: 38px;
    }

    .form-select-dark option {
      background: #0e1424;
      color: #fff;
    }

    .phone-row {
      display: flex;
      gap: 8px;
    }

    .phone-row .form-select-dark {
      max-width: 112px;
      flex-shrink: 0;
    }

    .field-group {
      margin-bottom: 20px;
    }

    .pill-group {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .pill-choice {
      position: relative;
    }

    .pill-choice input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .pill-choice label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      border-radius: 999px;
      border: 1px solid var(--line);
      font-size: .83rem;
      color: var(--text-dim);
      cursor: pointer;
      transition: .2s;
      font-family: 'Outfit', sans-serif;
    }

    .pill-choice input:checked+label {
      background: var(--grad);
      border-color: transparent;
      color: #05070d;
      font-weight: 600;
    }

    .pill-choice label:hover {
      border-color: rgba(255, 255, 255, .3);
    }

    .consent-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin: 22px 0;
    }

    .consent-row input {
      margin-top: 4px;
      accent-color: var(--violet);
      flex-shrink: 0;
    }

    .consent-row label {
      font-size: .78rem;
      color: var(--text-faint);
      line-height: 1.6;
    }

    .consent-row a {
      color: var(--violet-2);
    }

    .submit-note {
      font-size: .75rem;
      color: var(--text-faint);
      text-align: center;
      margin-top: 14px;
    }

    /* success panel */
    .success-panel {
      display: none;
      text-align: center;
      padding: 30px 10px;
    }

    .success-check {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      margin: 0 auto 22px;
      background: rgba(61, 220, 151, .1);
      border: 1px solid rgba(61, 220, 151, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1);
    }

    .success-check i {
      width: 36px;
      height: 36px;
      color: var(--green);
    }

    @keyframes popIn {
      0% {
        transform: scale(.4);
        opacity: 0;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .success-panel h3 {
      font-size: 1.4rem;
      margin-bottom: 12px;
    }

    .success-panel p {
      font-size: .92rem;
      line-height: 1.8;
      max-width: 460px;
      margin: 0 auto 8px;
    }

    /* side stat panel (reuses mega-side look) */
    .demo-side-panel {
      background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
      border: 1px solid rgba(124, 92, 252, .25);
      border-radius: var(--radius);
      padding: 28px;
    }

    .demo-side-panel h5 {
      font-size: 1.05rem;
      margin-bottom: 16px;
    }

    .demo-side-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .demo-side-stats div {
      text-align: center;
      background: rgba(255, 255, 255, .03);
      border-radius: 12px;
      padding: 16px 8px;
      border: 1px solid var(--line-soft);
    }

    .demo-side-stats b {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 1.3rem;
      color: #fff;
    }

    .demo-side-stats span {
      font-size: .7rem;
      color: var(--text-faint);
    }

    /* minute block cards */
    .minute-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      height: 100%;
    }

    .minute-tag {
      display: inline-block;
      font-family: 'Outfit', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      color: var(--cyan);
      background: rgba(38, 217, 232, .1);
      border: 1px solid rgba(38, 217, 232, .25);
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 14px;
    }

    .minute-card h5 {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }

    .minute-card p {
      font-size: .87rem;
      line-height: 1.7;
      margin: 0;
    }

    /* process steps (horizontal) */
    .proc-step {
      position: relative;
      text-align: center;
      padding: 0 10px;
    }

    .proc-step .pn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--grad);
      color: #05070d;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1.2rem;
      box-shadow: 0 0 0 6px rgba(124, 92, 252, .08);
    }

    .proc-step h5 {
      font-size: 1rem;
      margin-bottom: 8px;
    }

    .proc-step p {
      font-size: .84rem;
      line-height: 1.7;
    }

    .proc-line {
      position: absolute;
      top: 28px;
      left: calc(50% + 40px);
      right: calc(-50% + 40px);
      height: 1px;
      background: linear-gradient(90deg, var(--violet), var(--cyan));
      opacity: .35;
    }

    @media(max-width:767px) {
      .proc-line {
        display: none;
      }
    }

    /* session agenda */
    .agenda-panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
    }

    .agenda-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line-soft);
    }

    .agenda-head h5 {
      font-size: 1.05rem;
      margin: 0;
    }

    .agenda-head span {
      font-size: .75rem;
      color: var(--text-faint);
    }

    .agenda-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: .87rem;
      color: var(--text-dim);
    }

    .agenda-row:last-of-type {
      border-bottom: none;
    }

    .agenda-row .amin {
      font-family: 'Outfit', sans-serif;
      font-size: .75rem;
      color: var(--violet-2);
      background: rgba(124, 92, 252, .1);
      border: 1px solid rgba(124, 92, 252, .25);
      padding: 3px 10px;
      border-radius: 999px;
      flex-shrink: 0;
    }

    .agenda-total {
      display: flex;
      justify-content: space-between;
      padding-top: 14px;
      margin-top: 4px;
      font-family: 'Outfit', sans-serif;
      font-size: .92rem;
      color: #fff;
      font-weight: 600;
    }

    .agenda-foot {
      font-size: .78rem;
      color: var(--text-faint);
      margin-top: 16px;
      line-height: 1.7;
    }

    /* plan type grid */
    .plantype-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px;
      height: 100%;
      position: relative;
      transition: .25s;
    }

    .plantype-card:hover {
      border-color: rgba(124, 92, 252, .4);
      transform: translateY(-3px);
    }

    .plantype-card .pt-icon {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      background: rgba(124, 92, 252, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }

    .plantype-card .pt-icon i {
      width: 20px;
      height: 20px;
      color: var(--violet-2);
    }

    .plantype-card h6 {
      font-family: 'Outfit', sans-serif;
      font-size: .98rem;
      color: #fff;
      margin-bottom: 8px;
    }

    .plantype-card p {
      font-size: .8rem;
      line-height: 1.6;
      margin: 0 0 12px;
    }

    .plantype-card .pt-tag {
      font-size: .68rem;
      color: var(--cyan);
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
    }

    /* sticky mobile CTA */
    .mobile-sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 950;
      display: flex;
      gap: 10px;
      padding: 12px 16px;
      background: rgba(8, 11, 20, .92);
      backdrop-filter: blur(14px);
      border-top: 1px solid var(--line);
    }

    .mobile-sticky-cta a {
      flex: 1;
      text-align: center;
      font-size: .86rem;
      padding: 12px 10px;
    }

    @media(min-width:992px) {
      .mobile-sticky-cta {
        display: none;
      }
    }

    body {
      padding-bottom: 0;
    }

    @media(max-width:991px) {
      body {
        padding-bottom: 70px;
      }
    }

    /* ============ CONTACT PAGE ============ */
    .info-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 26px;
      height: 100%;
      text-align: center;
      transition: .25s;
    }

    .info-card:hover {
      border-color: rgba(124, 92, 252, .35);
      transform: translateY(-3px);
    }

    .info-card .ic-circle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(124, 92, 252, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }

    .info-card .ic-circle i {
      width: 22px;
      height: 22px;
      color: var(--violet-2);
    }

    .info-card h6 {
      font-family: 'Outfit', sans-serif;
      font-size: .95rem;
      color: #fff;
      margin-bottom: 8px;
    }

    .info-card p {
      font-size: .83rem;
      line-height: 1.6;
      margin: 0;
    }

    .info-card a {
      color: var(--text-dim);
    }

    .info-card a:hover {
      color: var(--violet-2);
    }

    .office-panel {
      background: linear-gradient(160deg, rgba(124, 92, 252, .14), rgba(38, 217, 232, .06));
      border: 1px solid rgba(124, 92, 252, .25);
      border-radius: var(--radius);
      padding: 30px;
      height: 100%;
    }

    .office-panel .of-row {
      display: flex;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .office-panel .of-row:last-child {
      border-bottom: none;
    }

    .office-panel .of-row i {
      width: 19px;
      height: 19px;
      color: var(--violet-2);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .office-panel .of-row b {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: .88rem;
      color: #fff;
      margin-bottom: 3px;
    }

    .office-panel .of-row span {
      font-size: .83rem;
      color: var(--text-dim);
      line-height: 1.6;
    }

    .map-visual {
      height: 170px;
      border-radius: 14px;
      margin-top: 22px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 30% 30%, rgba(124, 92, 252, .35), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(38, 217, 232, .25), transparent 60%),
        var(--panel-2);
      border: 1px solid var(--line);
    }

    .map-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .map-visual .pin {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%);
      width: 34px;
      height: 34px;
      border-radius: 50% 50% 50% 0;
      background: var(--grad);
      display: flex;
      align-items: center;
      justify-content: center;
      rotate: -45deg;
      box-shadow: 0 10px 25px -8px rgba(124, 92, 252, .7);
    }

    .map-visual .pin i {
      rotate: 45deg;
      width: 16px;
      height: 16px;
      color: #05070d;
    }

    .reason-pill-group {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    /* ============ FAQ PAGE ============ */
    .faq-search {
      position: relative;
      max-width: 560px;
      margin: 0 auto;
    }

    .faq-search input {
      width: 100%;
      background: var(--panel);
      border: 1px solid var(--line);
      color: #fff;
      border-radius: 999px;
      padding: 15px 20px 15px 50px;
      font-family: 'Poppins', sans-serif;
      font-size: .92rem;
    }

    .faq-search input:focus {
      outline: none;
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
    }

    .faq-search input::placeholder {
      color: var(--text-faint);
    }

    .faq-search i {
      position: absolute;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: var(--text-faint);
    }

    .faq-cat-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      justify-content: center;
      margin-top: 24px;
    }

    .faq-cat-btn {
      font-family: 'Outfit', sans-serif;
      font-size: .83rem;
      font-weight: 500;
      color: var(--text-dim);
      padding: 9px 18px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      transition: .2s;
    }

    .faq-cat-btn.active,
    .faq-cat-btn:hover {
      background: var(--grad);
      color: #05070d;
      border-color: transparent;
    }

    .faq-cat-heading {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 50px 0 20px;
    }

    .faq-cat-heading .fc-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(124, 92, 252, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .faq-cat-heading .fc-icon i {
      width: 18px;
      height: 18px;
      color: var(--violet-2);
    }

    .faq-cat-heading h4 {
      font-size: 1.2rem;
      margin: 0;
    }

    .faq-cat-heading span {
      font-size: .78rem;
      color: var(--text-faint);
    }

    .faq-no-results {
      display: none;
      text-align: center;
      padding: 60px 20px;
      color: var(--text-faint);
    }

    .faq-no-results i {
      width: 40px;
      height: 40px;
      color: var(--text-faint);
      margin-bottom: 14px;
    }

    .faq-item-hidden {
      display: none !important;
    }

    /* ============ BINARY PAGE — EXTRA STYLES ============ */

    .tree-wrap {
      background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-glow);
      padding: 22px;
    }

    .tree-wrap .tw-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line-soft);
    }

    .tree-wrap .tw-head span {
      font-family: 'Outfit', sans-serif;
      font-size: .84rem;
      color: var(--text-dim);
    }

    .tree-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
    }

    .tree-legend span {
      font-size: .72rem;
      color: var(--text-faint);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tree-legend i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    .feature-tagcloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .feature-tagcloud span {
      font-size: .72rem;
      padding: 6px 13px;
      border-radius: 999px;
      border: 1px solid var(--line-soft);
      color: var(--text-faint);
      background: rgba(255, 255, 255, .02);
    }

    /* earnings scenario card */
    .earn-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
    }

    .earn-legs {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 18px;
      align-items: center;
      margin-bottom: 26px;
    }

    .leg-box {
      text-align: center;
      padding: 22px 14px;
      border-radius: 14px;
      border: 1px solid var(--line-soft);
    }

    .leg-box.strong {
      background: rgba(124, 92, 252, .07);
      border-color: rgba(124, 92, 252, .25);
    }

    .leg-box.weak {
      background: rgba(38, 217, 232, .07);
      border-color: rgba(38, 217, 232, .25);
    }

    .leg-box .ll-label {
      font-family: 'Outfit', sans-serif;
      font-size: .78rem;
      color: var(--text-faint);
      margin-bottom: 8px;
    }

    .leg-box .ll-num {
      font-family: 'Outfit', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
    }

    .leg-box .ll-sub {
      font-size: .76rem;
      color: var(--text-faint);
      margin-top: 4px;
    }

    .vs-badge {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--grad);
      color: #05070d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .8rem;
    }

    .earn-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }

    .earn-stats .es-box {
      text-align: center;
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      padding: 18px 10px;
    }

    .earn-stats .es-box b {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 1.35rem;
      color: #fff;
    }

    .earn-stats .es-box.highlight b {
      color: var(--green);
    }

    .earn-stats .es-box span {
      font-size: .72rem;
      color: var(--text-faint);
    }

    .earn-note {
      font-size: .85rem;
      color: var(--text-dim);
      line-height: 1.8;
      background: rgba(38, 217, 232, .06);
      border: 1px solid rgba(38, 217, 232, .2);
      border-radius: 12px;
      padding: 16px 18px;
    }

    .earn-note strong {
      color: #fff;
    }

    @media(max-width:600px) {
      .earn-legs {
        grid-template-columns: 1fr;
      }

      .vs-badge {
        margin: 0 auto;
      }
    }

    /* commission stream card */
    .stream-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      height: 100%;
    }

    .stream-card h5 {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }

    .stream-card p {
      font-size: .86rem;
      line-height: 1.7;
      margin-bottom: 12px;
    }

    .stream-range {
      display: inline-block;
      font-family: 'Outfit', sans-serif;
      font-size: .75rem;
      font-weight: 600;
      color: var(--green);
      background: rgba(61, 220, 151, .1);
      border: 1px solid rgba(61, 220, 151, .25);
      padding: 5px 12px;
      border-radius: 999px;
    }

    /* logic groups */
    .logic-panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      height: 100%;
    }

    .logic-panel h5 {
      font-size: 1.02rem;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line-soft);
    }

    .logic-row {
      display: flex;
      gap: 12px;
      padding: 12px 0;
    }

    .logic-row .ln {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(124, 92, 252, .12);
      color: var(--violet-2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      font-size: .75rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .logic-row p {
      margin: 0;
      font-size: .83rem;
      line-height: 1.7;
      color: var(--text-dim);
    }

    .logic-row strong {
      color: #fff;
    }

    /* perf stat bars */
    .perf-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: .86rem;
    }

    .perf-row:last-child {
      border-bottom: none;
    }

    .perf-row span:first-child {
      color: var(--text-dim);
    }

    .perf-row b {
      font-family: 'Outfit', sans-serif;
      color: #fff;
    }

    /* ============ RECYCLE PAGE — EXTRA STYLES ============ */
    .disclaimer-box {
      background: rgba(255, 182, 72, .06);
      border: 1px solid rgba(255, 182, 72, .25);
      border-radius: 14px;
      padding: 18px 20px;
      font-size: .82rem;
      line-height: 1.75;
      color: var(--text-dim);
    }

    .disclaimer-box strong {
      color: var(--amber);
    }

    .disclaimer-box.critical {
      background: rgba(255, 107, 107, .06);
      border-color: rgba(255, 107, 107, .25);
    }

    .disclaimer-box.critical strong {
      color: var(--red);
    }

    .cycle-flow {
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      padding: 10px 2px 16px;
    }

    .cycle-node {
      flex-shrink: 0;
      text-align: center;
      min-width: 82px;
    }

    .cycle-node .cn-icon {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      background: rgba(124, 92, 252, .1);
      border: 1px solid rgba(124, 92, 252, .25);
    }

    .cycle-node .cn-icon i {
      width: 20px;
      height: 20px;
      color: var(--violet-2);
    }

    .cycle-node.final .cn-icon {
      background: var(--grad);
      border-color: transparent;
    }

    .cycle-node.final .cn-icon i {
      color: #05070d;
    }

    .cycle-node .cn-label {
      font-size: .68rem;
      color: var(--text-dim);
      font-weight: 500;
      line-height: 1.4;
    }

    .cycle-arrow2 {
      flex-shrink: 0;
      color: var(--text-faint);
      width: 14px;
      height: 14px;
    }

    /* ============ CUSTOM MLM PAGE — EXTRA STYLES ============ */
    .module-chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }

    .module-chip {
      font-size: .78rem;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--text-faint);
      background: rgba(255, 255, 255, .02);
      font-family: 'Outfit', sans-serif;
    }

    .module-chip.selected {
      background: var(--grad);
      color: #05070d;
      border-color: transparent;
      font-weight: 600;
    }

    .config-summary {
      background: rgba(124, 92, 252, .07);
      border: 1px solid rgba(124, 92, 252, .25);
      border-radius: 12px;
      padding: 14px 16px;
      font-size: .82rem;
      color: var(--text-dim);
      margin-top: 14px;
    }

    .config-summary b {
      color: #fff;
      font-family: 'Outfit', sans-serif;
    }

    .module-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px;
      height: 100%;
      transition: .2s;
    }

    .module-card:hover {
      border-color: rgba(124, 92, 252, .35);
      transform: translateY(-2px);
    }

    .module-card h6 {
      font-family: 'Outfit', sans-serif;
      font-size: .95rem;
      color: #fff;
      margin-bottom: 8px;
    }

    .module-card p {
      font-size: .82rem;
      margin: 0;
      line-height: 1.6;
    }