:root {
    --primary: #fed700;
    --bg-base: #060913;
    --bg-surface: #0b1120;
    --bg-card: rgba(15, 23, 42, 0.65);
    --bg-card-hover: rgba(30, 41, 59, 0.75);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(52, 211, 153, 0.4);
    --accent-green: #f8e19e63;
    --accent-cyan: #ffeecf;
    --accent-purple: #a855f7;
    --text-main: #f8fafc;
    --text-muted: rgba(255, 255, 255, 0.88);
    --text-dim: white;
    --font-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --liner-text: linear-gradient(45deg, #ffeecf, rgb(203 153 22));
    --shadow-elevation: 0 10px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    --text-h1: 1.35rem;
    --text-p: 16px;
}
body{
    overflow-x: hidden;
    background: #05070d;
}

nav.visibly{
    max-width: 1400px;
    margin: 0 auto;
    padding: unset;
    display: none;
}
body:before{
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 40%, rgb(26 19 14), transparent), radial-gradient(ellipse 60% 40% at 80% 20%, rgba(59, 130, 246, 0.06), transparent), radial-gradient(ellipse 50% 30% at 50% 80%, rgb(232 162 62 / 9%), transparent);
    pointer-events: none;
}

.s2-card-num{
    font-size: unset;
}

section{
    padding: 3rem 24px;
    max-width: 1400px;
    margin: 0 auto;
}
.section-header h2 span.cls span {
    background: var(--liner-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
#ui {
    position: relative;
    z-index: 31;
}
#s2,#s3 {
    position: relative;
    z-index: 30;
    min-height: 100svh;
    padding: clamp(60px, 10vh, 120px) var(--pad-h) clamp(60px, 10vh, 120px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, black 75%);
}
#s3{
    background: #0b0d10;
}
footer::before, #s2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 160, 80, 0.4) 25%, #170900 50%, rgba(255, 160, 80, 0.4) 75%, transparent 100%);
}
footer::after{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 40%, rgb(30 22 16), transparent), radial-gradient(ellipse 60% 40% at 80% 20%, rgb(0 0 0 / 48%), transparent), radial-gradient(ellipse 50% 30% at 50% 80%, rgb(127 62 232 / 9%), transparent);
    pointer-events: none;
}

#s2::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(232, 162, 62, 0.1), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(96, 165, 250, 0.06), transparent 50%);
    z-index: -1;
}

/*banner*/
@property --beam-angle-bb-6 {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@property --beam-opacity-bb-6 {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

[data-beam="bb-6"] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

[data-beam="bb-6"][data-active] {
    animation:
            beam-spin-bb-6 1.96s linear infinite,
            beam-fade-in-bb-6 0.6s ease forwards;
}

[data-beam="bb-6"][data-fading] {
    animation:
            beam-spin-bb-6 1.96s linear infinite,
            beam-fade-out-bb-6 0.5s ease forwards;
}

[data-beam="bb-6"][data-active]::after,
[data-beam="bb-6"][data-fading]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 1px;
    clip-path: inset(0 round 12px);
    background: conic-gradient(
            from var(--beam-angle-bb-6),
            transparent 0%, transparent 54%,
            rgba(255, 255, 255, 0.1) 57%,
            rgba(255, 255, 255, 0.3) 60%,
            rgba(255, 255, 255, 0.6) 63%,
            rgba(255, 255, 255, 0.75) 66%,
            rgba(255, 255, 255, 0.6) 69%,
            rgba(255, 255, 255, 0.3) 72%,
            rgba(255, 255, 255, 0.1) 75%,
            transparent 78%, transparent 100%
    ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 80, 50), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(255, 160, 40), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(255, 120, 60), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(255, 200, 50), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(255, 100, 80), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(255, 180, 60), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 60, 60), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(255, 140, 50), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(255, 90, 70), transparent);
    -webkit-mask:
            conic-gradient(
                    from var(--beam-angle-bb-6),
                    transparent 0%, transparent 30%,
                    rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
                    white 52%, white 80%,
                    rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
                    transparent 95%, transparent 100%
            ),
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-in, xor;
    mask:
            conic-gradient(
                    from var(--beam-angle-bb-6),
                    transparent 0%, transparent 30%,
                    rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
                    white 52%, white 80%,
                    rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
                    transparent 95%, transparent 100%
            ),
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    mask-composite: intersect, exclude;
    pointer-events: none;
    z-index: 2;
    opacity: calc(var(--beam-opacity-bb-6) * 0.26 * var(--beam-strength, 1));
    animation: beam-hue-shift-bb-6 12s ease-in-out infinite;
}

[data-beam="bb-6"][data-active]::before,
[data-beam="bb-6"][data-fading]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent);
    box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27);
    -webkit-mask-image:
            conic-gradient(
                    from var(--beam-angle-bb-6),
                    transparent 0%, transparent 30%,
                    rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
                    white 52%, white 80%,
                    rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
                    transparent 95%, transparent 100%
            ),
            linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
            linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
    -webkit-mask-composite: source-in, source-over;
    mask-image:
            conic-gradient(
                    from var(--beam-angle-bb-6),
                    transparent 0%, transparent 30%,
                    rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
                    white 52%, white 80%,
                    rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
                    transparent 95%, transparent 100%
            ),
            linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
            linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
    mask-composite: intersect, add;
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--beam-opacity-bb-6) * 0.42 * var(--beam-strength, 1));
    clip-path: inset(0 round 12px);
    animation: beam-hue-shift-bb-6 12s ease-in-out infinite;
}

[data-beam="bb-6"] [data-beam-bloom] {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 11px;
    clip-path: inset(0 round 12px);
    background: conic-gradient(
            from var(--beam-angle-bb-6),
            transparent 0%, transparent 58%,
            rgba(255, 255, 255, 0.03) 62%,
            rgba(255, 255, 255, 0.08) 65%,
            rgba(255, 255, 255, 0.2) 67%,
            rgba(255, 255, 255, 0.45) 69%,
            rgba(255, 255, 255, 0.85) 70%,
            rgba(255, 255, 255, 0.85) 70.5%,
            rgba(255, 255, 255, 0.45) 71.5%,
            rgba(255, 255, 255, 0.2) 73%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.03) 78%,
            transparent 82%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
    filter: blur(8px) brightness(1.60) saturate(1.20);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

[data-beam="bb-6"][data-active] [data-beam-bloom],
[data-beam="bb-6"][data-fading] [data-beam-bloom] {
    display: block;
    opacity: calc(var(--beam-opacity-bb-6) * 0.24 * var(--beam-strength, 1));
}

@keyframes beam-spin-bb-6 {
    to { --beam-angle-bb-6: 360deg; }
}

@keyframes beam-fade-in-bb-6 {
    to { --beam-opacity-bb-6: 1; }
}

@keyframes beam-fade-out-bb-6 {
    from { --beam-opacity-bb-6: 1; }
    to { --beam-opacity-bb-6: 0; }
}

@keyframes beam-hue-shift-bb-6 {
    0% { filter: hue-rotate(-30deg) brightness(1.60) saturate(1.20); }
    50% { filter: hue-rotate(30deg) brightness(1.60) saturate(1.20); }
    100% { filter: hue-rotate(-30deg) brightness(1.60) saturate(1.20); }
}

[data-beam="bb-6"][data-paused],
[data-beam="bb-6"][data-paused]::after,
[data-beam="bb-6"][data-paused]::before,
[data-beam="bb-6"][data-paused] [data-beam-bloom] {
    animation-play-state: paused !important;
}
/*mobile*/
.shadow{
    box-shadow: 0 -20px 120px 60px #000000, 0 -20px 120px 415px rgb(0 0 0 / 69%);
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: overlay;
}

.mobile-menu-top {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: auto;
    padding: 4rem 2rem;
    padding-top: 6rem;
    z-index: 2;
    width: 100%;
}
.mobile-menu-top a.a-is-active {
    scale: unset;
}
.mobile-menu a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 30px;
    transition: all 0.3s;
}

.mobile-menu a:hover,
.mobile-menu a.a-is-active {
    background: #51734c;
}

.mobile-menu-top a {
    display: flex;
    justify-content: space-between;
}

.mobile-menu .mobile-phone {
    font-weight: 700;
    font-size: 1.8rem;
}

.mobile-menu-bottom {
    z-index: 2;
    margin-top: auto;
    padding: 4rem 2rem;
    width: 100%;
}

.mobile-menu-bottom a {
    padding: 0;
}

.mobile-menu-bottom a:last-of-type {
    font-size: 1rem;
    margin-top: 20px;
    display: block;
}

.mobile-link {
    display: flex;
    justify-content: space-between;
}
.mobile-menu-overlay.active .dropdown .story-card{
    transform: translateY(0);
    opacity: 1;
}
/*reports*/

.sw-reports{
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}
.reports-section {
    position: relative;

}
.ambient-glows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
}

.glow-1 {
    width: 600px;
    height: 600px;
    background: var(--accent-green);
    top: -100px;
    left: 10%;
    animation: floatGlow 10s ease-in-out infinite alternate;
}

.glow-2 {
    width: 700px;
    height: 700px;
    background: var(--accent-cyan);
    top: 40%;
    right: -10%;
    animation: floatGlow 14s ease-in-out infinite alternate-reverse;
}

.glow-3 {
    width: 500px;
    height: 500px;
    background: var(--accent-purple);
    bottom: 5%;
    left: 20%;
    animation: floatGlow 12s ease-in-out infinite alternate;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
p.hea.sw{
    margin-top: 18px;
    max-width: 550px;
    background: var(--liner-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
p.hea.sw span{
    color: #fff;
}

.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.15);
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background-color: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-green);
    animation: pulse 2s infinite;
}

.section-header h2 {
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
    color: #ffffff;
    text-transform: uppercase;
}

.section-header p {
    font-size: var(--text-p);
    line-height: 1.6;
    font-weight: 400;
    color: var(--muted);
}

/* --- Bento Grid / Main Showcase --- */
.reports-showcase-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.reports-section .section-header {
    margin: 0 auto 1.4rem;
}
@media (max-width: 1024px) {
    .reports-showcase-bento {
        grid-template-columns: 1fr;
    }
}
.sw-bento-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bento-card {
    background: var(--card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
    border-color: #f8e19e63;
}
.graphsw-card {
    width: 100%;
    max-width: unset;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
}
.graphsw-card-sw{
    padding: 24px 28px 20px;
}

.graphsw-top-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.graphsw-top-left .graphsw-label,
.graphsw-top-right .graphsw-label {
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.graphsw-top-left .graphsw-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(45deg, #ffeecf, rgb(249 223 146));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.graphsw-top-right {
    text-align: right;
}

.graphsw-top-right .graphsw-value {
    font-size: 18px;
    font-weight: 600;
    color: #00780e;
}

.graphsw-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.graphsw-account-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-p);
}

.graphsw-account-id {
    font-size: 13px;
    color: #c0c0c0;
}

.graphsw-account-id .graphsw-dot {
    color: #666;
    margin: 0 4px;
}

.graphsw-account-change {
    font-size: 13px;
    color: #c0c0c0;
}

.graphsw-ib-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d2c973;
    border-radius: 20px;
    padding: 6px 14px 6px 10px;
    font-size: 13px;
    font-weight: 500;
    background: var(--liner-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.graphsw-ib-badge svg {
    width: 18px;
    height: 18px;
}

.graphsw-panel {
    background: #1414147a;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
}

.graphsw-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0;
}

.graphsw-panel-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}

.graphsw-panel-logo .graphsw-logo-icon {
    width: 22px;
    height: 22px;
    background: #e74c3c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.graphsw-tabs {
    display: flex;
    gap: 0;
    padding: 12px 18px 0;
    border-bottom: 1px solid #2a2a2a;
    justify-content: space-between;
}

.graphsw-tab {
    padding: 4px 2px;
    font-size: 10px;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    cursor: no-drop;
}

.graphsw-tab:hover {
    color: #ccc;
}

.graphsw-tab.graphsw-active {
    color: #fff;
    font-weight: 500;
    cursor: context-menu;
}

.graphsw-tab.graphsw-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e8c872;
    border-radius: 2px 2px 0 0;
}

.graphsw-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 18px 8px;
}

.graphsw-chart-value-block .graphsw-account-tag {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.graphsw-chart-value-block .graphsw-big-value {
    font-size: 22px;
    font-weight: 700;
    color: #e8c872;
}

.graphsw-chart-value-block .graphsw-change {
    font-size: var(--text-p);
    color: #00780e;
    margin-top: 2px;
    font-weight: 600;
}
.graphsw-change-sw{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.graphsw-chart-toggles {
    display: flex;
    gap: 6px;
}

.graphsw-toggle {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    background: transparent;
    color: #888;
    border: 1px solid transparent;
    cursor: pointer;
}

.graphsw-toggle.graphsw-active {
    background: #2a2a2a;
    color: #fff;
    border-color: #3a3a3a;
}

.graphsw-chart-container {
    position: relative;
    max-height: 174px;
}

.graphsw-y-labels {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: wheat;
    text-align: right;
    pointer-events: none;
}

.graphsw-time-filters {
    display: flex;
    gap: 4px;
    padding: 0 18px 14px;
    justify-content: flex-start;
}

.graphsw-time-btn {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    background: transparent;
    color: #777;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.graphsw-time-btn:hover {
    color: #bbb;
}

.hero-showcase {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    height: 100%;
    background: linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
}
.hero-showcase::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center;
    z-index: -1;
    background: url(../../img/gold_graph_transparent.png);
    background-repeat: no-repeat;
    background-size: contain;
    filter: blur(4px);
    opacity: .7;
}

.hero-showcase h3 {
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: #fff;
}

.hero-showcase p {
    color: var(--text-muted);
    font-size: var(--text-p);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 430px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-modern-primary {
    overflow: hidden;
    user-select: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1.5px solid rgba(232, 200, 114, 0.4);
    color: #E8C872;
}

.btn-modern-primary:hover {
    transform: translateY(-2px);
    color: #1a1a1a;
}


@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 40px) scale(1.1); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes drawPath {
    0% { stroke-dashoffset: 1200; }
    100% { stroke-dashoffset: 0; }
}

.section-header {
    margin: 0 auto 3rem;
    position: relative;
    z-index: 1;
}


/* Soft glow */
.card-glow {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 70%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(45px);
}

#courses .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}

#courses .section-header p {
    font-size: var(--text-p);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}
.courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.course-card:nth-child(1) .course-top{
    background-image: url(../../img/img_16.png);
}
.course-card:nth-child(4) .course-top{
    background-image: url(../../img/img_17.png);
}

.course-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
}

.course-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.12) 0%,
            transparent 40%,
            transparent 60%,
            rgba(34,197,94,0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e63;
}

.course-card:hover::before {
    opacity: 1;
}

.card-glow {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.course-card:hover .card-glow {
    opacity: 0.4;
}

.course-top {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    height: clamp(345px, 3.5vw, 122px);
    background-image: url(../../img/img_15.png);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 3.5vw, 24px) clamp(24px, 3.5vw, 40px) 14px;
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    overflow: hidden;
    isolation: isolate;
    box-shadow: inset 1px -120px 120px 1px rgb(19 18 24);
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
            linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-composite: intersect;
}

.course-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #f8e19e;
    border: 1px solid #f8e19e63;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 22px;
    width: max-content;
    backdrop-filter: blur(4px);
}

.course-metrics {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #ffffff2e;
    backdrop-filter: blur(3px);
    border-radius: 34px;
    transition: cubic-bezier(.51,.61,0,2.3) all .5s;
}
.course-card:hover .course-metrics{
    transform: translateY(-8px) scale(1.05);
}
.metric {
    gap: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.metric-value {
    font-size: 2.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

.metric-value.positive {
    background: linear-gradient(45deg, #ffeecf, rgb(232 162 62));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.metric-label {
    font-size: var(--text-p);
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* Body */
.course-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-body h3 {
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;
    margin: 0 0 14px;
    color: #f8fafc;
}

.course-body p {
    font-size: var(--text-p);
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Buttons */
.course-actions {
    display: flex;
    gap: 12px;
}
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    background: linear-gradient(135deg, #d1a862 0%, #fae19d 45%, #e6c200 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgb(251 230 167 / 39%), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    user-select: none;
}

.btn-primary::before,.btn-modern-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
    );
    transition: left 0.5s ease;
}

.btn-primary:hover,.btn-modern-primary:hover {
    transform: translateY(-2px);
    box-shadow:
            0 8px 28px rgba(254, 215, 0, 0.5),
            0 3px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
    background: linear-gradient(
            135deg,
            #fff08a 0%,
            #fed700 40%,
            #f0c800 100%
    );
}

.btn-primary:hover::before,.btn-modern-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow:
            0 3px 12px rgba(254, 215, 0, 0.3),
            inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
}

.btn-secondary:hover {
    color: #f1f5f9;
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.04);
}

/* Responsive */
@media (max-width: 900px) {
    .courses-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

@media (max-width: 640px) {

    #courses .section-header {
        margin-bottom: 48px;
    }

    .course-top,
    .course-body {
        padding: 24px;
    }

    .course-metrics {
        gap: 16px;
    }

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

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}

/*strg*/
#strategy .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}


#strategy .section-header p {
    font-size: 1.125rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* Grid */
.strategy-grid {
    display: grid;
    grid-template-columns: 1.10fr 0.9fr;
    gap: 32px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    align-items: center;
}

/* Steps */
.strategy-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.strategy-steps .section-header{
    margin: 0;
}
.strategy-steps .section-header h2{
}
.strategy-steps .section-header h2 span.cls span{
    /* font-size: clamp(14px, 2.4vw, 24px); */
}
.strategy-step {
    padding: 24px 20px;
    border-radius: 18px;
    transition: all 0.35s ease;
    border: 1px solid transparent;
}

.strategy-step:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}


.strategy-step:hover .step-num {
    box-shadow: 0 0 10px 4px #f8e19e63;
}

.step-content h4 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: #f8fafc;
}

.step-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* Targets card */
.strategy-targets {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    display: flex;
    background-image: url(../../img/img_36.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 1px -120px 120px 1px rgb(19 18 24);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-composite: intersect;
    background-position: center;
    height: 580px;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    position: sticky;
    top: 9rem;
}
.target-stat{display: flex;gap: 1rem;}
.target-stat .tw-spy-btt a,.target-stat .tw-spy-btt a.y {

=: 1.2rem;
    text-transform: uppercase;
}
.strategy-targets::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.12) 0%,
            transparent 40%,
            transparent 60%,
            rgba(34,197,94,0.18) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.card-glow {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 60%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.strategy-targets:hover .card-glow {
    opacity: 0.4;
}

.strategy-targets h3 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: #f8fafc;
}

/* Target items */
.target-item {
    background: rgb(13 12 15 / 60%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 14px 54px;
    margin-bottom: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
    height: min-content;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.target-item:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.1);
}

.target-label {
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.01em;
}

.target-value {
    font-size: var(--text-h1);
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(45deg, #ffeecf, rgb(203 153 22));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.target-note {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) {
    .strategy-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 640px) {

    #strategy .section-header {
        margin-bottom: 0;
    }

    .strategy-step {
        padding: 18px 12px;
        gap: 16px;
    }

    .step-num {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }

    .strategy-targets {
        padding: 28px 22px;
    }

    .target-value {
        font-size: 22px;
    }
}

/*resources*/
#resources{
    position: relative;
}
#resources .resource-card::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../../img/img_38.png");
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .7;
    filter: brightness(0.5) blur(1px);
}
.resource-post{
    --delay: 0s;
    transition: transform 0.6s var(--delay) cubic-bezier(.51,.61,0,2.3);
    transform: translateY(50px);
    opacity: 0;
}
.ssw-cards-container:hover .resource-post{
    transform: translateY(0);
    opacity: 1;
    pointer-events: unset;
    touch-action: unset;
}

.ssw-cards-container {
    display: grid;
    grid-template-columns: 1.25fr 1.5fr 1.25fr;
    gap: 24px;
    height: 550px;
}

.ssw-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
}

.ssw-card-content{
    z-index: 1;
}
.ssw-card-content h3 {
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;
    margin: 0 0 14px;
    color: #f8fafc;
}

.ssw-card-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.ssw-card-image {
    width: 100%;
    flex-grow: 1;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-top: 15px;
    /* position: absolute; */
}

@media (max-width: 900px) {

    .ssw-cards-container {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .ssw-card-large, .ssw-card-small {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 350px;
    }
}
#resources .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}



#resources .section-header p {
    font-size: var(--text-p);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Card */
.resource-card {
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: unset;
    position: relative;
    height: 100%;
    background:
            linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

.resource-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, transparent 60%, rgb(255 220 5 / 78%) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

.resource-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e;
}

.resource-card:hover::before {
    opacity: 1;
}

.card-glow {
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 65%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.resource-card:hover .card-glow {
    opacity: 0.4;
}
.resource-card .btn-primary{
    width: fit-content;
    height: 38px;
    padding: 0 20px;
    font-weight: 400;
}
/* Icon */
.resource-icon-wrap {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 16px;
    margin-bottom: 26px;
    transition: all 0.4s ease;
    border: 1px solid #ffeecf;
}

.resource-card:hover .resource-icon-wrap {
    transform: scale(1.06);
    background: #f8e19e63;
    border-color: #f8e19e63;
    box-shadow: 0 0 10px 4px #f8e19e63;
}

.resource-icon {
    width: 26px;
    height: 26px;
    color: #ffeecf;
    transition: all 0.4s ease;
}

.resource-card:hover .resource-icon {
}

/* Text */
.resource-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: #f8fafc;
}

.resource-card p {
    font-size: var(--text-p);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 18px;
    flex-grow: 1;
    max-width: 280px;
}

/* Button */
.resource-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 11px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.resource-btn:hover {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive */
@media (max-width: 900px) {
    .resources-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

@media (max-width: 640px) {

    #resources .section-header {
        margin-bottom: 48px;
    }

    .resource-card {
        padding: 32px 24px 28px;
    }
}
/*Review*/

#reviews .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}


#reviews .section-header p {
    font-size: var(--text-p);
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* Grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Card */
#reviews .splide{
    overflow: hidden;
}
.review-card-f{
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}
#reviews .splide__arrow{
    display: none;
}
.review-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    height: 352px;
}

.review-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.12) 0%,
            transparent 40%,
            transparent 60%,
            rgba(34,197,94,0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

.review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e;
}

.review-card:hover::before {
    opacity: 1;
}
.reviews-splide a{
    height: 100%;
    padding: 0;
    border: unset;
    display: block;
}
.reviews-splide a > div{
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}
.splide__pagination__page{
    background: #ffeecf;
}
.splide__pagination__page.is-active{
    background: wheat;
}
.reviews-splide .review-card{
    padding: 0;
    border: 0;
    box-shadow: inset 1px -120px 120px 1px rgb(19 18 24);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-composite: intersect;
}
.card-glow {
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 60%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.review-card:hover .card-glow {
    opacity: 0.4;
}

/* Header */
.review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.review-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffeecf;
    border: 1px solid #f8e19e63;
    border-radius: 14px;
    flex-shrink: 0;
    transition: all 0.35s ease;
}

.review-card:hover .review-avatar {
    background: #ebc925;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e63;
    color: #1a1a1a;
}

.review-name {
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #f8fafc;
    margin-bottom: 3px;
}

.review-role {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Text */
.review-text {
    font-size: var(--text-p);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 24px;
    flex-grow: 1;
}

/* Result badge */
.review-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 9px 14px;
    border-radius: 100px;
    align-self: flex-start;
    background: #ebc925;
    border-color: #f8e19e63;
}
.ssw-cards-container img{
    position: absolute;
    z-index: -1;
    bottom: 0;
}
.ssw-cards-container .support-icon img{
    position: relative;
    width: 90px;
    filter: drop-shadow(0 0 13px rgba(255, 200, 50, 0.65)) drop-shadow(0 0 29px rgba(255, 180, 0, 0.35)) drop-shadow(0 0 42px rgba(200, 140, 0, 0.2));
}
.ssw-cards-container .card-recommendations img{
    width: 210px;
    right: -15px;
}
.ssw-cards-container .card-platform img{
    left: 0;
    width: 100%;
}
.ssw-cards-container .card-channel img{
    left: 160px;
    width: 300px;
}
.result-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1a1a1a;
    box-shadow: 0 0 8px #1a1a1a85;
}
.ssw-cards-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 20px;
    padding: 24px 70px 24px 42px;
    position: relative;
    overflow: visible;
    margin-top: 24px;
    border: 1px solid var(--border);
    background: url(../../img/img_38.png), linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right;
}
.ssw-cards-banner:hover{
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e;
    animation: beam-spin-bb-6 1.96s linear infinite, beam-fade-in-bb-6 0.6s ease forwards;
}
.ssw-cards-banner:hover::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 1px;
    clip-path: inset(0 round 12px);
    background: conic-gradient(from var(--beam-angle-bb-6), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%), radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 80, 50), transparent), radial-gradient(ellipse 60px 35px at 12% -5%, rgb(255, 160, 40), transparent), radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 85px 26px at 55% 100%, rgb(255, 180, 60), transparent), radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 60, 60), transparent), radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(255, 140, 50), transparent), radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(255, 90, 70), transparent);
    -webkit-mask: conic-gradient(from var(--beam-angle-bb-6), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-in, xor;
    mask: conic-gradient(from var(--beam-angle-bb-6), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: intersect, exclude;
    pointer-events: none;
    z-index: 2;
    opacity: calc(var(--beam-opacity-bb-6)* 0.26* var(--beam-strength, 1));
    animation: beam-hue-shift-bb-6 12s ease-in-out infinite;
}
.ssw-cards-banner:hover::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent);
    box-shadow: inset 0 0 9px 1px #f8e19e63;
    -webkit-mask-image: conic-gradient(from var(--beam-angle-bb-6), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
    -webkit-mask-composite: source-in, source-over;
    mask-image: conic-gradient(from var(--beam-angle-bb-6), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white), linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
    mask-composite: intersect, add;
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--beam-opacity-bb-6)* 0.42* var(--beam-strength, 1));
    clip-path: inset(0 round 12px);
    animation: beam-hue-shift-bb-6 12s ease-in-out infinite;
}
/* soft outer gold rim */
.ssw-cards-banner::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: linear-gradient(
            135deg,
            rgba(255, 210, 80, 0.45) 0%,
            rgba(255, 190, 40, 0.12) 25%,
            transparent 45%,
            transparent 55%,
            rgba(255, 190, 40, 0.1) 75%,
            rgba(255, 210, 80, 0.3) 100%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(0.5px);
}

.ssw-cards-left {
    display: flex;
    align-items: center;
    gap: 42px;
    z-index: 1;
    justify-content: space-around;
}

/* Icon */
.ssw-cards-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.ssw-cards-icon-wrap svg {
    width: 100%;
    height: 100%;
    filter:
            drop-shadow(0 0 5px rgba(255, 200, 50, 0.65))
            drop-shadow(0 0 14px rgba(255, 180, 0, 0.35))
            drop-shadow(0 0 22px rgba(200, 140, 0, 0.2));
}

/* Sparkles */
.ssw-cards-sparkle {
    position: absolute;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 5px 1.5px rgba(255, 215, 0, 0.9);
    pointer-events: none;
    animation: twinkle 2.4s ease-in-out infinite;
}

.ssw-cards-s1 {
    width: 3px;
    height: 3px;
    top: 6px;
    left: -3px;
    animation-delay: 0s;
    animation-duration: 2.2s;
}
.ssw-cards-s2 {
    width: 3.5px;
    height: 3.5px;
    top: 14px;
    right: -5px;
    animation-delay: 0.4s;
    animation-duration: 2.6s;
}
.ssw-cards-s3 {
    width: 2.5px;
    height: 2.5px;
    bottom: 10px;
    left: 0;
    opacity: 0.9;
    animation-delay: 0.8s;
    animation-duration: 2s;
}
.ssw-cards-s4 {
    width: 2px;
    height: 2px;
    top: 3px;
    right: 8px;
    opacity: 0.75;
    animation-delay: 1.2s;
    animation-duration: 2.8s;
}
.ssw-cards-s5 {
    width: 2px;
    height: 2px;
    bottom: 18px;
    right: -2px;
    opacity: 0.6;
    animation-delay: 0.2s;
    animation-duration: 2.3s;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.7);
        box-shadow: 0 0 3px 1px rgba(255, 215, 0, 0.5);
    }
    40% {
        opacity: 1;
        transform: scale(1.15);
        box-shadow: 0 0 7px 2.5px rgba(255, 215, 0, 1);
    }
    70% {
        opacity: 0.7;
        transform: scale(0.9);
        box-shadow: 0 0 5px 1.5px rgba(255, 215, 0, 0.75);
    }
}
.ssw-cards-text-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ssw-cards-banner:hover a.ssw-cards-btn{
    scale: 1.1;
    transition: cubic-bezier(.51,.61,0,2.3) all .5s;
}

.ssw-cards-title {
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.ssw-cards-subtitle {
    font-size: 15.5px;
    font-weight: 600;
    color: #ebc925;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

.ssw-cards-features {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.15px;
    margin-top: 3px;
    line-height: 1.3;
}

.ssw-cards-features .ssw-cards-dot {
    margin: 0 5px;
    color: #5a5a5a;
    font-size: 11px;
    vertical-align: middle;
}

/* Button */
.ssw-cards-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ssw-cards-btn:hover {
    transform: translateY(-1.5px);
    filter: brightness(1.05);
    box-shadow:
            0 0 0 1px rgba(255, 210, 60, 0.65),
            0 6px 22px rgba(212, 160, 20, 0.6),
            0 0 36px rgba(255, 200, 50, 0.4),
            0 0 60px rgba(255, 180, 30, 0.2),
            inset 0 1.5px 0 rgba(255, 255, 220, 0.6),
            inset 0 -1.5px 0 rgba(0, 0, 0, 0.12);
}

.ssw-cards-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

@media (max-width: 700px) {
    .ssw-cards-banner {
        flex-direction: column;
        height: auto;
        padding: 22px 20px;
        gap: 18px;
        text-align: center;
    }
    .ssw-cards-left {
        flex-direction: column;
        gap: 14px;
    }
    .ssw-cards-text-block {
        align-items: center;
    }
    .ssw-cards-btn {
        width: 100%;
    }
}
/* Responsive */
@media (max-width: 960px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

@media (max-width: 640px) {

    #reviews .section-header {
        margin-bottom: 48px;
    }

    .review-card {
        padding: 28px 22px 24px;
    }
}


/* Header */

#free-courses .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}



#free-courses .section-header p {
    font-size: 1.125rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* Grid */
.free-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Card */
.free-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.free-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.12) 0%,
            transparent 40%,
            transparent 60%,
            rgba(34,197,94,0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

.free-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e63;
}

.free-card:hover::before {
    opacity: 1;
}

.card-glow {
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 65%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.free-card:hover .card-glow {
    opacity: 0.4;
}

/* Icon */
.free-icon-wrap {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f8e19e63;
    border-radius: 16px;
    margin-bottom: 26px;
    transition: all 0.4s ease;
}

.free-card:hover .free-icon-wrap {
    transform: scale(1.06);
    background: #f8e19e63;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e63;
}

.free-icon {
    width: 26px;
    height: 26px;
    color: #ffeecf;
    transition: all 0.4s ease;
}

.free-card:hover .free-icon {
}

/* Text */
.free-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: #f8fafc;
}

.free-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Button */
.free-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 11px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.free-btn:hover {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive */
@media (max-width: 900px) {
    .free-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

@media (max-width: 640px) {

    #free-courses .section-header {
        margin-bottom: 48px;
    }

    .free-card {
        padding: 32px 24px 28px;
    }
}



/*faq*/

/* Header */

#faq .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}


/* List */
.faq-group{
    display: flex;
    gap: 12px;
    justify-content: center;
    height: auto;
}
.faq-list {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.box-faq{
    width: 0;
    opacity: 0;
    transition: .5s;
}
.status .faq-group{
    height: 570px;
}
.status .box-faq{
    opacity: 1;
}
.status .box-faq, .status .faq-list{
    width: 50%;
}
.faq-model{

    background: var(--card);

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

    border-radius: 18px;

    overflow: hidden;

    transition: border-color 0.3s ease, background 0.3s ease;

    backdrop-filter: blur(16px);

    height: auto;

    position: sticky;

    top: 9rem;

    display: flex;

    justify-content: end;

    align-items: end;

    background: radial-gradient(ellipse 80% 50% at 20% 40%, rgb(209 170 103 / 16%), transparent), radial-gradient(ellipse 60% 40% at 80% 20%, rgb(244 244 244 / 9%), transparent), radial-gradient(ellipse 50% 30% at 50% 80%, rgb(232 162 62 / 9%), #17161b);

    box-shadow: inset 1px -120px 120px 1px rgb(19 18 24);

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);

    -webkit-mask-composite: source-in;

    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);

    mask-composite: intersect;

    background-position: center;
}
.status .faq-model{
    height: 505px;
}
.faq-x-img{
    height: 90%;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 14px;
    width: 90%;
    transition: transform .5s;
    transform: translateY(100%) translateX(100%);
    position: absolute;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
    border-color: #f8e19e63;
}
.faq-x-img.active{
    transform: translateY(0) translateX(0);
}
/* Item */
.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(16px);
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.faq-item.active {
    border-color: #f8e19e63;
    background: rgba(255, 255, 255, 0.035);
}

/* Question */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    background: none;
    border: none;
    color: #f1f5f9;
    font-size: var(--text-h1);
    font-weight: 500;
    letter-spacing: -0.015em;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #fff;
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #ffeecf;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* Answer */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
    display: flex;
    gap: 28px;
    padding: 0 26px;
    align-items: flex-start;
}

.faq-item.active .faq-answer-inner {
    padding-bottom: 28px;
}

/* Visual (left side) */
.faq-visual {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    opacity: 0;
    transform: translateX(-16px) scale(0.92);
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.faq-item.active .faq-visual {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.faq-visual svg {
    width: 100%;
    height: 100%;
}

/* Text */
.faq-text {
    font-size: var(--text-p);
    line-height: 1.6;
    color: var(--text-muted);
    padding-top: 8px;
}

/* Responsive */
@media (max-width: 640px) {

    .faq-question {
        padding: 18px 20px;
        font-size: 1rem;
    }

    .faq-answer-inner {
        flex-direction: column;
        gap: 16px;
        padding: 0 20px;
    }

    .faq-item.active .faq-answer-inner {
        padding-bottom: 22px;
    }

    .faq-visual {
        width: 90px;
        height: 90px;
    }
}

/*contact*/

/* Wrapper */
.cta-wrapper {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Left info */
.cta-info .label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.cta-info h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: 0 0 18px;
}

.cta-info h2 span {
    background: var(--liner-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.modal-mw span {
    background: var(--liner-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 400;
}
.cta-info > p {
    font-size: var(--text-p);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 36px;
    max-width: 420px;
}

/* Contact list */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
    width: fit-content;
}

.contact-list a:hover {
    color: #ffeecf;
}

.contact-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #d1a862 0%, #fae19d 45%, #e6c200 100%);
}

.contact-icon svg {
    width: 18px;
    height: 18px;
    color: #1a1a1a;
}

.contact-list a:hover .contact-icon {
    box-shadow: 0 0 10px 4px #f8e19e63;
}

/* Form card */
.form-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse 80% 70% at 100% 50%, rgba(255, 200, 50, 0.12) 0%, rgba(212, 160, 30, 0.05) 40%, transparent 70%);
}

.form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.12) 0%,
            transparent 40%,
            transparent 60%,
            rgba(34,197,94,0.18) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.card-glow {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 60%;
    background: radial-gradient(ellipse, var(--green-glow), transparent 70%);
    opacity: 0.25;
    pointer-events: none;
    filter: blur(40px);
}

/* Form elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #f1f5f9;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #64748b;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.05);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-group select option {
    background: #0f172a;
    color: #f1f5f9;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

/* Submit button */
.form-submit {
    width: 100%;
    padding: 15px 24px;
    margin-top: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8e19e63;
    border-color: #f8e19e63;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
}
.dribbble-svg-graph {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.animated-line {
    will-change: stroke-dashoffset;
}

.chart-area {
    will-change: opacity, transform;
}
.bento-card,
.report-card,
.adv-card,
.course-card,
.strategy-step,
.strategy-targets,
.resource-card,
.review-card,
.free-card,
.fmt-right-header,
p.hea,
.faq-item {
    opacity: 0;
    transition: .5s;
}


.trading-card {
    position: relative;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background-image: url(../../img/gold-mw.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    background-position-y: bottom;
    background-color: #e6ad4d;
    overflow: hidden;
}
.trading-des{
    display: flex;
    justify-content: space-between;
    margin: 0 255px;
    width: 100%;
}
.trading-card:hover{
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.65), 0 0 35px -8px #f8e19e63;
}
.coin{
    transition: all .5s 0s cubic-bezier(.51,.61,0,2.3);
}
.trading-card:hover .coin{
    transform: scale(1.05);
    filter: sepia(0);
}
.trading-card::before {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 60%;background: linear-gradient(to top, rgb(22 19 25 / 55%), transparent);background-blend-mode: overlay;pointer-events: none;}

.trading-content {
    max-width: 450px;
    z-index: 4;
}

.trading-content h2 {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #1a1a1a;
}

.trading-content p {
    font-size: var(--text-p);
    color: #1a1a1a;
    line-height: 1.5;
    margin: 0 0 32px 0;
}

.trading-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.trading-btn:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.trading-coins {
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 2;
}

.coin {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    animation: float 8.5s ease-in-out infinite;
    transform-style: preserve-3d;
}

.coin-1 {
    width: 60px;
    height: 60px;
    top: 10px;
    left: 30px;
    scale: 1.2;
    z-index: 3;
}

.coin-2 {
    width: 50px;
    height: 50px;
    right: 50px;
    scale: 1.3;
    top: 90px;
    z-index: 4;
}

.coin-3 {
    width: 90px;
    height: 90px;
    bottom: -30px;
    right: 90px;
    scale: 1.2;
    z-index: 3;
}
.coin-3 img{
    width: 140px;
}
.coin-2 img{
    width: 88px;
}
.coin-1 img{
    width: 110px;
}
.telegram-banner {
    width: 100%;
    background: linear-gradient(135deg, #14141400 0%, #1a1a1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.telegram-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 280px;
    height: 200%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.telegram-banner .left {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.telegram-banner .icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(145deg, #ffffff, #23a0db);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.telegram-banner .icon-wrap svg {
    width: 22px;
    height: 22px;
    fill: #eab308;
}

.telegram-banner .text-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #f5f5f5;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.telegram-banner .text-content p {
    font-size: 13.5px;
    color: #cbd5e1;
    max-width: 480px;
}
.resource-post{
    position: absolute;
    bottom: -50px;
    display: flex;
    justify-content: center;
    margin: 24px;
    max-width: 1400px;
    left: 0;
    right: 0;
    pointer-events: none;
    touch-action: none;
}
.subscribe-block {
    width: 100%;
    background: #0c0c1187;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(7px);
    align-items: center;
    flex-wrap: wrap;
    max-width: 770px;
}
.graphsw-chart-container svg{
    width: 100%!important;
    height: 100%!important;
}
.subscribe-block::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 320px;
    height: 180%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.13) 0%, transparent 70%);
    pointer-events: none;
}

.subscribe-block .left-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.subscribe-block .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #eab308;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.subscribe-block .badge svg {
    width: 14px;
    height: 14px;
    fill: #eab308;
}

.subscribe-block .left-content h2 {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
}

.subscribe-block .left-content p {
    color: #9ca3af;
    max-width: 520px;
}

.cookie {
    --rotate: 0deg;
    --top-y: 0px;
    --eyeball-x: -2px;
    --eyeball-y: -2px;
    --eyeball-scale: 0.75;
    --mouth-y: 0px;
    --crack-offset: 38px;
    position: relative;
    transform: rotate(var(--rotate));
    transform-origin: 50% 100%;
}
.cookie svg{
    width: 36px;
    height: 36px;
}

.banner {
    background-color: #252731b3;
    padding: 24px;
    border-radius: 27px;
    display: flex;
    gap: 20px;
    font-size: 14px;
    line-height: 1.4;
    color: #e1e3eb;
    box-shadow: 0px 1px 3px rgba(9, 10, 15, 0.25), 0px 4px 16px rgba(9, 10, 15, 0.1), 0px 8px 24px rgba(9, 10, 15, 0.1), inset 0px 1px 1px #323543;
    position: fixed;
    z-index: 99999;
    bottom: 12px;
    left: 0;
    right: 0;
    backdrop-filter: blur(8px);
    max-width: 700px;
}
@media (min-width: 601px) {
    .banner {
        align-items: center;
    }
}
.banner .content {
    display: flex;
    gap: 24px;
}
@media (min-width: 601px) {
    .banner .content {
        align-items: center;
    }
}
@media (max-width: 600px) {
    .banner .content {
        flex-direction: column;
        gap: 16px;
    }
}
.banner .content .list {
    display: flex;
    gap: 12px;
}
.banner .content .list button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    color: inherit;
    outline: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    background: #2e303d;
    box-shadow: inset 0 0 0 1px #3c3e4d;
    line-height: 24px;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.2s;
}
.banner .content .list button:hover {
    background-color: #323543;
}
.banner .content .list button.muted {
    background: none;
    box-shadow: inset 0 0 0 1px #353744;
}
.banner .content .list button.muted:hover {
    background-color: #292b36;
}

/*banner-five*/
.fullscreen-banner {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fullscreen-banner.active {
    opacity: 1;
    visibility: visible;
}

.banner-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.banner-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: 90%;
    text-align: center;
    transform: translateY(40px) scale(0.95);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.fullscreen-banner.active .banner-content {
    transform: translateY(0) scale(1);
}

.trade-btn {
    justify-content: center;
    border: 1px solid transparent;
    background-color: #00000078;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--text-p);
    backdrop-filter: blur(10px);
}

.trade-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.trade-btn svg {
    width: 24px;
    height: 24px;
}
.btn-red {
    border-color: #ff3333;
    color: #ff3333;
}
.btn-red svg {
    fill: #ff3333;
}
.btn-red:hover {
    box-shadow: 0 0 15px #ff3333,0 0 15px #ff3333;
}
.btn-blue {
    border-color: #33ccff;
    color: #33ccff;
}
.btn-blue svg {
    fill: #33ccff;
}
.btn-blue:hover {
    box-shadow: 0 0 15px #33ccff, inset 0 0 15px #33ccff;
}
.btn-green {
    border-color: #66ff33;
    color: #66ff33;
}
.btn-green svg {
    fill: #66ff33;
}
.btn-green:hover {
    box-shadow: 0 0 15px #66ff33,0 0 15px #66ff33;
}
.btn-purple {
    border-color: #cc33ff;
    color: #cc33ff;
}
.btn-purple svg {
    fill: #cc33ff;
}
.btn-purple:hover {
    box-shadow: 0 0 15px #cc33ff, inset 0 0 15px #cc33ff;
}
.btn-yellow {
    border-color: #ffff33;
    color: #ffff33;
}
.btn-yellow svg {
    fill: #ffff33;
}
.btn-yellow:hover {
    box-shadow: 0 0 15px #ffff33, inset 0 0 15px #ffff33;
}
.banner-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}
.banner-close:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.banner-content .global-m{
    justify-content: center;
    align-items: center;
    background: unset;
    border: unset;
    backdrop-filter: unset;
    height: auto;
}
.banner-content .tw-spy-btt{
    justify-content: center;
}
.flex-glow{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}
.banner-content .tw-spy-btt a.y,.banner-content .btn-primary{
    border-radius: 50px;
}
.timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #f1d000;
    border-radius: 0 2px 2px 0;
    width: 0%;
    transition: width 0.1s linear;
}
.fullscreen-banner.active .timer-bar {
    animation: timerFill 15s linear forwards;
}
@keyframes timerFill {
    from { width: 0%; }
    to { width: 100%; }
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.banner-grid {
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.timeline {
    position: relative;
    max-width: 680px;
    width: 100%;
    padding-left: 36px;
}

/* Vertical line */
.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: #c9a227;
}

.timeline .item {
    position: relative;
    /* margin-bottom: 42px; */
}

.timeline .item:last-child {
    margin-bottom: 0;
}

/* Golden dot */
.timeline .item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: #c9a227;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.25);
}

.timeline .year {
    font-size: var(--text-h1);
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.timeline .description {
    font-size: var(--text-p);
    color: var(--text-muted);
    max-width: 580px;
    margin: 0;
}
.card-platform {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.left-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(232, 200, 114, 0.06);
    border: 1px solid rgba(232, 200, 114, 0.28);
    font-size: 13px;
    font-weight: 500;
    color: #E8C872;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}
.card-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 220px;
    flex-direction: row;
}
.resource-card p.fmt-card-subtitle{
    font-size: var(--text-p);
    color: var(--text-muted);
    margin: 20px 0 22px;
    line-height: 1.6;
    flex-grow: unset;
    max-width: 341px;
}
.card {
    background: linear-gradient(145deg, #131118 0%, #0d0c10 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}



.fmt-section {
    position: relative;
}
.fmt-section:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-image: url(../../img/graph-gold.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    opacity: .2;
    filter: brightness(0.5);
    mask-image: radial-gradient(ellipse at right, rgba(0,0,0,0.85) 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at right, rgba(0,0,0,0.85) 0%, transparent 100%);
    pointer-events: none;
    touch-action: none;
}

.fmt-section > div{
    z-index: 1;
    position: relative;

}

.fmt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: 16px;
    padding: 10px 8px;
    margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: fit-content;
    background: linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
}

.fmt-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-weight: 500;
    font-size: var(--text-h1);
    position: relative;
}

.fmt-tag:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: linear-gradient(1deg, transparent, rgba(232, 200, 114, 0.18), transparent);
}

.fmt-tag-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(232, 200, 114, 0.12);
    border: 1.5px solid rgba(232, 200, 114, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fmt-tag-icon svg {
    width: 14px;
    height: 14px;
}

.fmt-grid {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 24px;
    align-items: start;
}
.fmt-grid > .resource-card{
    justify-content: space-between;
}
.fmt-grid > .resource-card:nth-child(1){
    width: 100%;
    background: linear-gradient(165deg, #161616 0%, #0f0f0f 100%);
    border-radius: 28px;
    padding: 36px 32px 45px;
    border: 1px solid rgba(232, 200, 114, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 80px -20px rgba(232, 200, 114, 0.08);
    position: relative;
    overflow: hidden;
}
.fmt-sub-grid .resource-card:nth-child(1)::before,
.fmt-grid > .resource-card:nth-child(1)::before{
    content: '';
    position: absolute;
    top: -80px;
    left: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(232, 200, 114, 0.12) 0%, transparent 70%);
    pointer-events: none;
    opacity: unset;
    -webkit-mask: unset;
    mask: unset;
}
.fmt-grid > .resource-card:nth-child(1) .fmt-meta-pill svg{
    width: 14px;
    height: 14px;
    stroke: #E8C872;
    fill: none;
    stroke-width: 1.8;
}

.fmt-grid > .resource-card:nth-child(2){
    padding: 0;
    background: unset;
    overflow: hidden;
    background: white;
    background: linear-gradient(165deg, #edcd39 1%, transparent 7%), linear-gradient(311deg, #edcd39 8%, #ffffff 24%);
}
.fmt-grid > .resource-card:nth-child(2) .fmt-sub-card-title .fmt-main,
.fmt-grid > .resource-card:nth-child(2)  .fmt-btn,
.fmt-grid > .resource-card:nth-child(2) .fmt-card-title h2 .fmt-line1,
.fmt-grid > .resource-card:nth-child(2) .fmt-sub-checklist li,
.fmt-grid > .resource-card:nth-child(2) p.fmt-card-subtitle,
.resource-card.gold .fmt-t1,
.resource-card.gold .fmt-t2
{
    color: black;
}
.fmt-grid > .resource-card:nth-child(2)  .fmt-btn{
    border: 1px solid rgb(36 32 31 / 20%);
}

.resource-card.gold{
    background: linear-gradient(165deg, #edcd39 5%, transparent 10%),  linear-gradient(311deg, #edcd39 8%, #0f0f0f 24%);
    border: unset;
}
.fmt-grid > .resource-card:nth-child(2) .resource-card.gold  .fmt-main,
.fmt-grid > .resource-card:nth-child(2) .resource-card.gold .fmt-sub-checklist li{
    color: var(--text-muted);
}



.fmt-card {
    background: #424242;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: unset;
    position: relative;
    height: 100%;
}

.fmt-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: unset;
}
.fmt-card-white-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.fmt-card-title-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(232, 200, 114, 0.08);
    border: 1.5px solid rgba(232, 200, 114, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(232, 200, 114, 0.25);
    flex-shrink: 0;
}

.fmt-card-title-icon svg {
    width: 22px;
    height: 22px;
}

.fmt-card-title h2 {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.fmt-card-title h2 .fmt-line1 {display: block;}
.fmt-card-title h2 .fmt-line2 { color: #c9a227; display: block; }

.fmt-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.fmt-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(232, 200, 114, 0.06);
    border: 1px solid rgba(232, 200, 114, 0.28);
    font-size: 13px;
    font-weight: 500;
    color: #E8C872;
    letter-spacing: 0.01em;
    background: #131313;
}

.fmt-meta-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.fmt-checklist {
    list-style: none;
    margin-bottom: 14px;
}

.fmt-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-p);
    line-height: 1.45;
    margin-bottom: 10px;
    color: var(--text-muted);
}



.fmt-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 200, 114, 0.18), transparent);
    margin-bottom: 24px;
}

.fmt-program-label {
    font-size: var(--text-p);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E8C872;
    margin-bottom: 22px;
}

.fmt-program-items {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.fmt-program-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.fmt-program-item-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(232, 200, 114, 0.06);
    border: 1.5px solid rgba(232, 200, 114, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.fmt-program-item-icon svg {
    width: 22px;
    height: 22px;
    stroke: #E8C872;
    fill: none;
    stroke-width: 1.7;
}

.fmt-program-item span {
    font-size: var(--text-p);
    color: var(--text-muted);
    line-height: 1.3;
    display: block;
}

.fmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fmt-btn svg {
    width: 16px;
    height: 16px;
}

.fmt-right-col {
    display: flex;
    flex-direction: column;
}

.fmt-right-header {
    padding: 12px 28px;
}

.fmt-right-header .fmt-card-subtitle {
    font-size: var(--text-p);
}

.fmt-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 28px 12px;
}
.fmt-sub-grid .resource-card:nth-child(1){
    background: white;
    border: 1px solid rgb(36 32 31 / 20%);
    overflow: hidden;
    position: relative;
}
.gold.resource-card.fmt-right-col .fmt-right-header > .resource-card:nth-child(1) {
    border: 1px solid #f8e19e;
}
.fmt-sub-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.045);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.fmt-sub-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(232, 200, 114, 0.12);
    border: 1.5px solid rgba(232, 200, 114, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.check svg {
    width: 11px;
    height: 11px;
    stroke: #E8C872;
    fill: none;
    stroke-width: 2.5;
}
.fmt-sub-card-icon {
    /* filter: drop-shadow(0 0 13px rgba(255, 200, 50, 0.65)) drop-shadow(0 0 29px rgba(255, 180, 0, 0.35)) drop-shadow(0 0 42px rgba(200, 140, 0, 0.2)); */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(232, 200, 114, 0.08);
    border: 1.5px solid rgba(232, 200, 114, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(232, 200, 114, 0.25);
    flex-shrink: 0;
}

.fmt-sub-card-icon svg {
    width: 18px;
    height: 18px;
}

.fmt-sub-card-title {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.fmt-sub-card-title .fmt-main {
    display: block;
}

.fmt-sub-card-title .fmt-sub {
    color: #c9a227;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
}

.fmt-sub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.fmt-sub-tag {
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    color: #ebc925;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #f8e19e63;
}

.fmt-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.fmt-flow-box {
    flex: 1;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border);
    background: linear-gradient(188deg, #edcd39 1%, transparent 7%), linear-gradient(3deg, #edcd39 8%, #ffffff 24%);
}

.fmt-flow-box .fmt-t1 {
    font-size: var(--text-p);
    font-weight: 700;
    display: block;
    color: #ebc925;
}

.fmt-flow-box .fmt-t2 {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.fmt-flow-arrow {
    color: #c9a227;
    font-size: 16px;
    flex-shrink: 0;
}

.fmt-sub-checklist {
    list-style: none;
    flex: 1;
    margin-bottom: 18px;
}

.fmt-sub-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-p);
    line-height: 1.4;
    margin-bottom: 9px;
}

.fmt-sub-checklist li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fmt-sub-card .fmt-btn {
    margin-top: auto;
}
.resource-card .fmt-btn.btn-primary{
    width: auto;
    height: 48px;
    padding: 0 20px;
    font-weight: 600;
}
@media (max-width: 900px) {
    .fmt-grid {
        grid-template-columns: 1fr;
    }
    .fmt-sub-grid {
        grid-template-columns: 1fr;
    }
    .fmt-header h1 {
        font-size: 32px;
    }
    .fmt-card-subtitle,
    .fmt-meta-row,
    .fmt-checklist {
        padding-left: 0;
    }
    .fmt-right-header .fmt-card-subtitle {
        padding-left: 0;
    }
}

@media (max-width: 1200px) {
    nav.visibly,section{
        padding: 24px;
    }
    #resources{
        overflow: hidden;
    }
    .trading-card{
        background-position: right;
    }
    .trading-des{
        margin: 0 200px 0 48px;
    }
}

@media (max-width: 1100px) {
    #resources{
        overflow: hidden;
    }
    .ssw-cards-container{
        height: auto;
    }
    .ssw-cards-container .card-channel img{
        width: 250px;
    }
    .ssw-cards-container .card-recommendations img{
        width: 155px;
    }
    .ssw-cards-container .support-icon img{
        position: absolute;
        width: 60px;
        right: -12px;
        top: -60px;
    }
    .strategy-grid{
        grid-template-columns: 1fr;
    }
    .strategy-targets{
        height: 574px;
        max-width: 670px;
    }
    .timeline{
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .graphsw-card-sw{
        padding: 24px;
    }
    .left-column{
        flex-direction: row;
    }
    .card-support{
        height: 100%;
    }
    .left-column > .resource-card:nth-child(1){
        width: 60%;
    }
    .left-column > .resource-card:nth-child(2){
        width: 40%;
    }
    .ssw-cards-container{
        grid-template-columns: 1fr;
    }
    .ssw-cards-container .card-recommendations img {
        width: 220px;
    }
    .ssw-cards-container .card-channel img {
        width: 223px;
        right: 0;
        left: unset;
    }
    .ssw-cards-container .card-platform img {
        left: unset;
        width: 370px;
        right: 0;
    }
    .ssw-cards-container .support-icon img {
        position: unset;
    }
    .graphsw-chart-container{
        width: 100%;
        height: 162px;
        position: relative;
    }
    .graphsw-card{
    }
    .graphsw-change-sw{
        flex-direction: column;
        gap: 1rem;
    }
    .trading-des{
        margin: 0 80px 0 60px;
    }
    nav.visibly{
        padding: 0 24px;
    }

    .trading-content h2 {
        font-size: clamp(32px, 3.5vw, 52px);
    }
    .trading-card{
        background-image: url("../../img/img_31.png");
        background-position: bottom;
    }
    .hero-showcase{
        padding: 24px;
    }
    .splide__pagination{
        bottom: -1.5em;
    }
    .cta-wrapper,.review-card-f{
        display: flex;
        flex-direction: column;
    }
    .form-card{
        width: 100%;
    }
}
@media (max-width: 768px) {
    .banner{
        bottom: 0;
        border-radius: 0;
    }
    .subscribe-block {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
        gap: 24px;
    }
    .telegram-banner .btn-modern-primary{
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .trading-card{
        background-position: left;
    }
    .coin-1{
        left: -20px;
    }
    .coin-3{
        right: 40px;
    }
    .faq-group{
        flex-direction: column;
    }
    .status .box-faq, .status .faq-list{
        width: 100%;
    }
    .status .faq-model {
        height: 280px;
    }
    .telegram-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
        gap: 20px;
    }

    .telegram-banner .left {
        width: 100%;
    }
    .ssw-cards-banner{
        flex-direction: column;
        align-items: inherit;
        gap: 20px;
        padding: 24px 42px;
    }
    .left-column{
        flex-direction: column;
    }
    .left-column > .resource-card:nth-child(1),.left-column > .resource-card:nth-child(2){
        width: 100%;
    }
    .ssw-cards-container .card-platform img {
        width: auto;
        height: 100%;
    }
    .target-item{
        padding: 8px 14px;
    }
}
@media (max-width: 576px) {
    .fmt-program-items{
        flex-wrap: wrap;
    }
    .fmt-sub-grid{
        padding: 0 12px 12px;
    }
    .metric-value{
        font-size: var(--text-h1);
    }
    .global-m span.wm-span{
        font-size: 12px;
    }
    .trading-card {
        background-position: center;
    }
    .trading-des {
        margin: 24px;
    }
    .coin-1 {
        top: -42px;
        left: 54px;
        animation-delay: 1.4s;
    }
    .coin-2 {
        top: -94px;
        right: 18px;
        animation-delay: 0.8s;
    }
    .coin-3{
        bottom: -147px;
        right: -49px;
    }
    .ssw-cards-container .card-platform img{
        display: none;
    }
    .resource-card{
        overflow: hidden;
        height: fit-content;
    }
    .ssw-cards-container .card-recommendations img {
        width: 220px;
        right: -100px;
    }
    .ssw-cards-container .card-channel img {
        width: 220px;
        right: -55px;
        top: 98px;
    }

}
@keyframes float {
    0% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: translateY(-12px) rotateX(1.5deg) rotateY(-1deg);
    }
    50% {
        transform: translateY(-6px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        transform: translateY(-14px) rotateX(-1.5deg) rotateY(1deg);
    }
    100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
}