/* ==================== CSS VARIABLES ==================== */
:root {
    --color-bg: #000000;
    --color-accent: #C9A963;
    --color-text: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-border: rgba(255, 255, 255, 0.1);

    --font-primary: 'Be Vietnam Pro', 'Inter', sans-serif;

    --header-height: 80px;
    --ticker-height: 48px;
    --container-max: 1400px;
}

/* ==================== RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    max-width: 100vw;
}

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

ul {
    list-style: none;
}

/* Remove gaps between sections and extend backgrounds */
section {
    margin: 0 !important;
    position: relative;
}

/* Extend section backgrounds to overlap and remove gaps */
section::before {
    top: -1px !important;
    bottom: -1px !important;
}

/* ==================== BLACK ROSE BACKGROUND LOGO ==================== */
.blackrose-logo-container {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

.blackrose-logo-image {
    width: 550px;
    max-width: 90vw;
    height: auto;
    opacity: 1;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    animation:
        logoGlow 3s ease-in-out infinite,
        logoPulse 6s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(201, 169, 99, 0.6)) drop-shadow(0 0 80px rgba(201, 169, 99, 0.3)) brightness(1.3);
    mask-image: none;
    -webkit-mask-image: none;
    transform-origin: center center;
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(201, 169, 99, 0.6)) drop-shadow(0 0 80px rgba(201, 169, 99, 0.3)) brightness(1.3);
    }
    50% {
        filter: drop-shadow(0 0 55px rgba(201, 169, 99, 0.8)) drop-shadow(0 0 110px rgba(201, 169, 99, 0.4)) brightness(1.45);
    }
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* ==================== CONTAINER ==================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

/* ==================== HEADER ==================== */
.header {
    position: fixed;
    top: var(--ticker-height);
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 9999;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

/* Logo Styling */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-link {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

.logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Text logo fallback styles */
.logo-indicator {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

.logo-the {
    font-size: 8px;
    letter-spacing: 0.5px;
    color: var(--color-text);
}

.logo-lab {
    font-size: 16px;
    letter-spacing: 1.5px;
    color: var(--color-text);
    margin-top: -1px;
}

/* Hamburger Menu Button - Hidden on desktop, visible on mobile */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 10001;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(201, 169, 99, 0.2);
    border-radius: 4px;
}

.hamburger span {
    width: 26px;
    height: 2.5px;
    background: #FFFFFF;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Navigation Menu - Desktop: horizontal, Mobile: full-screen */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 48px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-text);
    transition: color 0.3s;
    position: relative;
    text-transform: uppercase;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s;
}

.nav-link:hover {
    color: var(--color-text);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}

/* Mobile Menu CTA & Rating - Hidden on desktop, show on mobile */
.mobile-menu-cta,
.mobile-menu-rating {
    display: none;
}

/* Right side group (actions + language selector + hamburger) */
.nav-right {
    display: flex !important;
    align-items: center;
    gap: 20px;
    z-index: 1002;
    position: relative;
}

/* Language Selector */
.language-selector {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 11000; /* Lift above hero/overlay on mobile */
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s;
}

.language-btn:hover {
    border-color: var(--color-accent);
    background: rgba(201, 169, 99, 0.05);
}

.language-btn svg {
    opacity: 0.8;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 8px); /* Sit just beneath the button */
    right: 0;
    min-width: 160px;
    background: rgba(10, 10, 10, 0.98);
    border: 1.5px solid rgba(201, 169, 99, 0.3);
    border-radius: 8px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(201, 169, 99, 0.1);
    z-index: 11000; /* Higher than header (9999) */
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.language-option:hover {
    background: rgba(201, 169, 99, 0.1);
    color: var(--color-accent);
}

.language-option .flag {
    font-size: 18px;
    line-height: 1;
}

/* Discord Button */
.btn-discord {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-text);
    transition: all 0.3s;
}

.btn-discord:hover {
    border-color: var(--color-accent);
    background: rgba(201, 169, 99, 0.1);
}

/* Mobile Toggle - Now using .hamburger (defined above) */

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--color-accent);
    color: #000;
}

.btn-primary:hover {
    background: #D4AF37;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201, 169, 99, 0.3);
}

.btn-lg {
    padding: 12px 32px;
    font-size: 12px;
}

.btn-full {
    width: 100%;
}

/* ==================== HERO SECTION ==================== */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: calc(var(--header-height) + 128px);
    padding-bottom: 80px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
}

/* Hero Background Image */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/HERO%20SECTION.png');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/* Dark center overlay to make logo stand out */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse 600px 600px at 50% 45%,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 40px;
    padding-left: 40px;
    width: 100%;
    position: relative;
    z-index: 3;
}

.hero-content {
    max-width: 450px;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 0;
}

.hero-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

#rotating-text {
    display: inline;
}

.typing-cursor {
    color: var(--color-accent);
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero-description {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    max-width: 420px;
}

.highlight-green {
    color: var(--color-accent);
    font-weight: 700;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Trustpilot Badge */
.trustpilot-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trustpilot-icon {
    flex-shrink: 0;
}

.rating-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
}

/* ==================== LAB PRODUCTS SECTION ==================== */
.lab-section {
    padding: 70px 0 90px;
    position: relative;
    background: transparent;
    overflow: hidden;
    z-index: 2;
}

.lab-section::before,
.lab-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.lab-section::before {
    background:
        radial-gradient(circle at 18% 10%, rgba(201, 169, 99, 0.18), transparent 40%),
        radial-gradient(circle at 82% 12%, rgba(111, 162, 255, 0.12), transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(255, 109, 181, 0.12), transparent 45%);
    opacity: 0.75;
}

.lab-section::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.lab-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.lab-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    color: var(--color-accent);
    text-transform: uppercase;
    margin: 0;
}

.lab-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.lab-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 auto;
    max-width: 640px;
}

.lab-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 32px;
    max-width: 1500px;
    margin: 0 auto;
}

.lab-card {
    --card-glow: rgba(201, 169, 99, 0.2);
    position: relative;
    background: linear-gradient(180deg, rgba(17, 14, 20, 0.58) 0%, rgba(10, 12, 18, 0.7) 100%);
    border: 1px solid rgba(201, 169, 99, 0.2);
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.lab-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, var(--card-glow), transparent 45%),
        radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.6;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.lab-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        rgba(201, 169, 99, 0.45),
        rgba(201, 169, 99, 0) 25%,
        rgba(201, 169, 99, 0.45) 50%,
        rgba(201, 169, 99, 0) 75%,
        rgba(201, 169, 99, 0.45)
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    animation: labOrbit 9s linear infinite;
}

.lab-card:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 169, 99, 0.5);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(201, 169, 99, 0.18);
    background: linear-gradient(180deg, rgba(22, 16, 26, 0.7) 0%, rgba(8, 10, 14, 0.82) 100%);
}

.lab-card:hover::before,
.lab-card:hover::after {
    opacity: 1;
}

.lab-card-inner {
    position: relative;
    z-index: 1;
    padding: 30px 26px 38px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.lab-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(201, 169, 99, 0.12);
    border: 1px solid rgba(201, 169, 99, 0.4);
    border-radius: 999px;
    color: #f6e7c5;
    font-size: 11px;
    letter-spacing: 1.8px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(201, 169, 99, 0.2);
}

.lab-card-title {
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0 0;
    color: #ffffff;
}

.lab-card-tagline {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.lab-card-description {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 6px 0 10px;
}

.lab-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 20px;
    padding: 0;
}

.lab-card-list li {
    position: relative;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.lab-card-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 800;
}

.lab-card-button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    width: 100%;
    border-radius: 30px;
    border: 1px solid rgba(201, 169, 99, 0.6);
    background: rgba(201, 169, 99, 0.12);
    color: #f8eaca;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    opacity: 0.45;
    cursor: default;
    background: rgba(201, 169, 99, 0.18);
    color: #f8eaca;
    box-shadow: none;
}

.lab-card-button:hover {
    background: rgba(201, 169, 99, 0.18);
    color: #f8eaca;
    transform: none;
    box-shadow: none;
}

.lab-card:hover .lab-card-button {
    opacity: 1;
    background: var(--color-accent);
    color: #0d0a12;
    box-shadow: 0 12px 30px rgba(201, 169, 99, 0.35);
}

.lab-lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lab-lock-icon svg {
    fill: currentColor;
}

.category-one {
    --card-glow: rgba(201, 169, 99, 0.22);
}

.category-two {
    --card-glow: rgba(87, 191, 210, 0.22);
}

.category-three {
    --card-glow: rgba(162, 118, 255, 0.22);
}

@keyframes labOrbit {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== LAB MODAL ==================== */
.lab-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lab-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.lab-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.lab-modal-content {
    position: relative;
    z-index: 1;
    width: min(960px, 96vw);
    background: radial-gradient(circle at 20% 20%, rgba(201, 169, 99, 0.12), transparent 45%),
                radial-gradient(circle at 80% 15%, rgba(255, 214, 102, 0.12), transparent 40%),
                linear-gradient(160deg, rgba(14, 10, 16, 0.96), rgba(5, 5, 8, 0.98));
    border: 1px solid rgba(201, 169, 99, 0.45);
    border-radius: 20px;
    padding: 28px 28px 32px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(201, 169, 99, 0.2);
    animation: labModalPop 0.35s ease;
}

.lab-modal-content::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 1px solid rgba(201, 169, 99, 0.35);
    opacity: 0.5;
    filter: blur(1px);
    pointer-events: none;
}

.lab-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(201, 169, 99, 0.65);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(24, 20, 28, 0.95), rgba(10, 8, 12, 0.95));
    color: #f8eaca;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(201, 169, 99, 0.25), 0 0 12px rgba(201, 169, 99, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lab-modal-close:hover {
    background: var(--color-accent);
    color: #0d0a12;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 14px 32px rgba(201, 169, 99, 0.4), 0 0 18px rgba(201, 169, 99, 0.55);
}

.lab-modal-label {
    font-size: 12px;
    letter-spacing: 2.2px;
    color: var(--color-accent);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.lab-modal-title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.lab-modal-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.lab-modal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lab-modal-list li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.lab-modal-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 800;
}

.lab-modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 18px;
    position: relative;
    border: 1px solid rgba(201, 169, 99, 0.8);
    background: linear-gradient(180deg, #f6dfae 0%, #c9a963 65%, #b88a3e 100%);
    color: #0d0a12;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    box-shadow: 0 14px 34px rgba(201, 169, 99, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.lab-modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(201, 169, 99, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    filter: brightness(1.04);
}

.lab-modal-button:active {
    transform: translateY(0);
    box-shadow: 0 10px 20px rgba(201, 169, 99, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    filter: brightness(0.98);
}

.lab-modal-body {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.lab-modal-visual {
    position: relative;
    min-height: 360px;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 8, 12, 0.85), rgba(5, 5, 8, 0.95));
    border: 1px solid rgba(201, 169, 99, 0.35);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.lab-visual-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}

.lab-visual-frame::before,
.lab-visual-frame::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        rgba(201, 169, 99, 0.7),
        rgba(255, 214, 102, 0.35),
        rgba(201, 169, 99, 0.15),
        rgba(201, 169, 99, 0.7)
    );
    opacity: 0.9;
    animation: spinBorder 10s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

.lab-visual-frame::after {
    filter: blur(8px);
    opacity: 0.4;
}

.lab-visual-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    z-index: 1;
}

@keyframes spinBorder {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .lab-modal-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lab-modal-visual {
        min-height: 280px;
    }
}

@keyframes labModalPop {
    0% { transform: translateY(20px) scale(0.96); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 1200px) {
    .lab-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lab-section {
        padding: 56px 0 72px;
    }

    .lab-title {
        font-size: 30px;
    }

    .lab-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .lab-card-inner {
        padding: 22px 18px 26px;
    }

    .lab-subtitle {
        font-size: 14px;
    }

    .lab-card-title {
        font-size: 22px;
    }

    .lab-card-list li {
        font-size: 12.5px;
    }
}

/* ==================== PARTNERS SECTION ==================== */
.partners-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Partners Background Image */
.partners-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/PARTNERS-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.partners-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3.5px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.partners-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    opacity: 1;
}

.partner-logo:hover {
    transform: scale(1.08);
}

.partner-logo img,
.partner-img,
.partner-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    opacity: 0.4;
    filter: grayscale(1) brightness(1.5);
    transition: all 0.4s ease;
}

.partner-logo:hover img,
.partner-logo:hover .partner-img,
.partner-logo:hover .partner-logo-img {
    opacity: 1;
    filter: grayscale(0) brightness(1);
}

.partner-bybit {
    height: 32px !important;
}

.partner-okx {
    height: 38px !important;
    position: relative;
    top: 3px;
    mix-blend-mode: screen;
    filter: brightness(1.9) contrast(1.05) grayscale(1);
}

.partner-icon {
    height: 24px;
    width: auto;
    color: rgba(255, 255, 255, 0.6);
}

.partner-svg {
    height: 28px;
    width: auto;
    color: rgba(255, 255, 255, 0.5);
}

.partner-text {
    display: none;
}

.partner-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-primary);
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
}

.partner-logo:hover .partner-name {
    color: rgba(255, 255, 255, 0.6);
}

/* ==================== FEATURES SECTION ==================== */
.features-section {
    padding: 120px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Features Background Image */
.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/FEATURES%20SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.features-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 80px;
    gap: 16px;
}

.features-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.features-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

.features-subtitle {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 600px;
    margin-top: 8px;
}

.features-subtitle .code-brackets {
    font-size: 24px;
    color: #C9A963;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.4;
}

.features-subtitle p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.feature-card {
    background: rgba(201, 169, 99, 0.02);
    border: 1px solid rgba(201, 169, 99, 0.15);
    border-radius: 12px;
    padding: 0;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(201, 169, 99, 0.05), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.feature-card:hover {
    background: rgba(201, 169, 99, 0.04);
    border-color: rgba(201, 169, 99, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(201, 169, 99, 0.1);
}

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

.feature-mockup {
    width: 100%;
    height: 280px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(201, 169, 99, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-image {
    opacity: 1;
    transform: scale(1.05);
}

.feature-content {
    padding: 32px;
    position: relative;
    z-index: 2;
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    stroke: #C9A963;
    stroke-width: 2;
    fill: none;
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon svg {
    stroke: #C9A963;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(201, 169, 99, 0.4));
}

.feature-title {
    font-size: 22px;
    font-weight: 600;
    color: #C9A963;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.feature-description {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.feature-card:hover .feature-description {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .features-header {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }

    .features-title {
        font-size: 36px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .feature-mockup {
        height: 240px;
    }

    .feature-content {
        padding: 28px;
    }
}

@media (max-width: 480px) {
    .features-section {
        padding: 80px 0;
    }

    .features-title {
        font-size: 28px;
    }

    .features-subtitle p {
        font-size: 14px;
    }

    .feature-mockup {
        height: 200px;
    }

    .feature-content {
        padding: 24px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description {
        font-size: 14px;
    }
}

/* ==================== ECOSYSTEM SECTION ==================== */
.ecosystem-section {
    margin-top: 0;
    padding-top: 80px;
}

.ecosystem-header {
    text-align: center;
    margin-bottom: 60px;
}

.ecosystem-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
    text-align: center;
}

.ecosystem-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.ecosystem-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.6;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.ecosystem-item {
    text-align: center;
    padding: 0;
    transition: all 0.3s ease;
}

.ecosystem-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 99, 0.1);
    border: 1px solid rgba(201, 169, 99, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.ecosystem-icon svg {
    width: 28px;
    height: 28px;
    stroke: #C9A963;
    stroke-width: 2;
    fill: none;
    transition: all 0.3s ease;
}

.ecosystem-item:hover .ecosystem-icon {
    background: rgba(201, 169, 99, 0.15);
    border-color: rgba(201, 169, 99, 0.5);
    transform: translateY(-3px);
}

.ecosystem-item:hover .ecosystem-icon svg {
    transform: scale(1.1);
}

.ecosystem-item-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ecosystem-item-description {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.ecosystem-item:hover .ecosystem-item-description {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments for Ecosystem */
@media (max-width: 968px) {
    .ecosystem-section {
        margin-top: 80px;
        padding-top: 60px;
    }

    .ecosystem-title {
        font-size: 28px;
    }

    .ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .ecosystem-section {
        margin-top: 60px;
        padding-top: 40px;
    }

    .ecosystem-title {
        font-size: 24px;
    }

    .ecosystem-subtitle {
        font-size: 14px;
    }

    .ecosystem-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ecosystem-icon {
        width: 48px;
        height: 48px;
    }

    .ecosystem-icon svg {
        width: 24px;
        height: 24px;
    }

    .ecosystem-item-title {
        font-size: 16px;
    }

    .ecosystem-item-description {
        font-size: 13px;
    }
}

/* ==================== PRICING SECTION ==================== */
.pricing-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    margin-bottom: 300px;
}

/* Pricing Background Image */
.pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/PRICING-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* Pricing Header */
.pricing-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.pricing-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pricing-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.pricing-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
}

.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 60px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: fit-content;
}

.pricing-tab {
    padding: 12px 28px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    text-align: center;
}

.pricing-tab::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
}

.pricing-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(201, 169, 99, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.pricing-tab.active {
    background: rgba(201, 169, 99, 0.05);
    border-color: #C9A963;
    color: #C9A963;
}

.pricing-tab.active::before {
    background: #C9A963;
    box-shadow: 0 0 8px rgba(201, 169, 99, 0.6);
}

.pricing-tab-full {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.pricing-tab-full.active {
    background: rgba(201, 169, 99, 0.05);
    border-color: #C9A963;
    color: #C9A963;
}

.pricing-tab-full:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(201, 169, 99, 0.2);
}

.tab-icon {
    font-size: 16px;
    display: none;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 100px auto;
}

.pricing-card {
    background: rgb(16, 16, 16);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 18px 16px;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    opacity: 1;
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset;
}

.pricing-card:hover {
    background: rgb(18, 18, 18);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-8px);
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset,
                0 20px 60px rgba(201, 169, 99, 0.15);
}

.pricing-card:hover .pricing-plan-name {
    color: #C9A963;
}

.pricing-card:hover .price-amount {
    color: #ffffff;
}

.pricing-card:hover .feature-icon {
    color: #C9A963;
}

/* Featured card - same as normal cards, no special styling */

.pricing-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pricing-badge {
    position: relative;
    top: 0;
    right: 0;
    background: #C9A963;
    color: rgb(0, 0, 0);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 145%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pricing-badge::before {
    content: "⚡";
    font-size: 14px;
    filter: brightness(0);
}

.pricing-card-header {
    text-align: left;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-icon {
    width: 56px;
    height: 56px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(9, 9, 9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card:nth-child(1) .pricing-icon {
    animation-delay: 0s, 0s;
}

.pricing-card:nth-child(2) .pricing-icon {
    animation-delay: 0.7s, 0.3s;
}

.pricing-card:nth-child(3) .pricing-icon {
    animation-delay: 1.4s, 0.6s;
}

.pricing-card:hover .pricing-icon {
    background: rgba(201, 169, 99, 0.2);
    border-color: rgba(201, 169, 99, 0.6);
    animation: iconRotate 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.pricing-icon svg {
    stroke: rgba(201, 169, 99, 0.6);
    stroke-width: 2;
    fill: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 4px rgba(201, 169, 99, 0.4));
}

.pricing-card:hover .pricing-icon svg {
    stroke: #C9A963;
    filter: drop-shadow(0 0 8px rgba(201, 169, 99, 0.8));
}

/* Icon Animations - Enhanced */
@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        box-shadow: 0 4px 12px rgba(201, 169, 99, 0.1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 8px 20px rgba(201, 169, 99, 0.25);
    }
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-15deg) scale(1.1);
    }
    30% {
        transform: rotate(15deg) scale(1.1);
    }
    45% {
        transform: rotate(-10deg) scale(1.05);
    }
    60% {
        transform: rotate(10deg) scale(1.05);
    }
    75% {
        transform: rotate(-5deg) scale(1.02);
    }
    90% {
        transform: rotate(5deg) scale(1.02);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes iconGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 4px rgba(201, 169, 99, 0.3));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 12px rgba(201, 169, 99, 0.6));
    }
}

/* Pricing Icon Animations */
.pricing-icon {
    overflow: visible;
}

/* Monthly 3D icon */
.pricing-icon svg {
    transform-style: preserve-3d;
}

.icon-3d-outline {
    filter: drop-shadow(0 0 8px rgba(201, 169, 99, 0.6));
    animation: box3DRotate 6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.icon-3d-line {
    filter: drop-shadow(0 0 6px rgba(201, 169, 99, 0.5));
    animation: box3DLines 6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.line-1 { animation-delay: 0.2s; }
.line-2 { animation-delay: 0.4s; }
.line-3 { animation-delay: 0.6s; }

.icon-3d-outer {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
    animation: box3DOuterGlow 6s ease-in-out infinite;
}

@keyframes box3DRotate {
    0%, 100% {
        opacity: 1;
        transform: perspective(500px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        opacity: 0.85;
        transform: perspective(500px) rotateX(-8deg) rotateY(10deg);
    }
    50% {
        opacity: 1;
        transform: perspective(500px) rotateX(0deg) rotateY(15deg);
    }
    75% {
        opacity: 0.85;
        transform: perspective(500px) rotateX(8deg) rotateY(10deg);
    }
}

@keyframes box3DLines {
    0%, 100% {
        opacity: 1;
        stroke-dasharray: 0 300;
        stroke-dashoffset: 0;
    }
    20% {
        opacity: 0.7;
        stroke-dasharray: 100 300;
        stroke-dashoffset: -50;
    }
    50% {
        opacity: 1;
        stroke-dasharray: 150 300;
        stroke-dashoffset: -100;
    }
    80% {
        opacity: 0.7;
        stroke-dasharray: 100 300;
        stroke-dashoffset: -150;
    }
}

@keyframes box3DOuterGlow {
    0%, 100% {
        opacity: 0.9;
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9));
    }
}

/* Biannual - sliding bars */
.bar-slide {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
    animation: slideBarRight 3s ease-in-out infinite;
}

.bar-1 { animation-delay: 0s; }
.bar-2 { animation-delay: 0.15s; }
.bar-3 { animation-delay: 0.3s; }
.bar-4 { animation-delay: 0.45s; }

@keyframes slideBarRight {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateX(700px);
        opacity: 0;
    }
}

/* Annual icon - 5 boxes */
.icon-box-corner {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
    animation: boxAppearSequence 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.corner-1 { animation-delay: 0s; }
.corner-2 { animation-delay: 0.3s; }
.corner-3 { animation-delay: 0.6s; }
.corner-4 { animation-delay: 0.9s; }

.icon-box-center {
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.8));
    animation: boxCenterPulse 4s ease-in-out 1.2s infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.icon-connect {
    filter: drop-shadow(0 0 12px rgba(201, 169, 99, 0.5));
    animation: connectExpand 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.connect-1 { animation-delay: 0.15s; }
.connect-2 { animation-delay: 0.45s; }
.connect-3 { animation-delay: 0.75s; }
.connect-4 { animation-delay: 1.05s; }

@keyframes boxAppearSequence {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.85) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
    }
    25% {
        opacity: 1;
        transform: scale(1.15) rotate(5deg);
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.9));
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7));
    }
    75% {
        opacity: 0.8;
        transform: scale(0.95) rotate(-3deg);
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
    }
}

@keyframes boxCenterPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.7) rotate(0deg);
        filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
    }
    30% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 1));
    }
    60% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8));
    }
}

@keyframes connectExpand {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    20% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    40% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    60% {
        opacity: 0.5;
        transform: scale(1);
    }
    80% {
        opacity: 0.2;
        transform: scale(0.7);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateX(78px);
        opacity: 0;
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 1;
        stroke-width: 2;
    }
    50% {
        opacity: 0.6;
        stroke-width: 3;
    }
}

@keyframes layerFloat {
    0%, 100% {
        transform: translateY(0px);
        opacity: 1;
    }
    50% {
        transform: translateY(-3px);
        opacity: 0.7;
    }
}

.pricing-plan-name {
    font-size: 22px;
    font-weight: 500;
    color: #C9A963;
    margin: 0;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.pricing-price {
    text-align: left;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.price-amount {
    font-size: 52px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    display: block;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.price-period {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    display: block;
}

.price-note {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    background: rgba(201, 169, 99, 0.1);
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
}

/* Sale Price Styles */
.price-sale {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.price-original {
    font-size: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.price-original::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 0, 0, 0.75) 15%,
        rgba(255, 0, 0, 0.9) 50%,
        rgba(255, 0, 0, 0.75) 85%,
        transparent);
    transform: rotate(8deg);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
}

/* Timer Styles */
.price-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 6px;
    animation: pulse-timer 2s ease-in-out infinite;
}

@keyframes pulse-timer {
    0%, 100% {
        background: rgba(255, 0, 0, 0.1);
        border-color: rgba(255, 0, 0, 0.3);
    }
    50% {
        background: rgba(255, 0, 0, 0.15);
        border-color: rgba(255, 0, 0, 0.5);
    }
}

.timer-icon {
    font-size: 16px;
}

.timer-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.timer-countdown {
    font-size: 16px;
    font-weight: 700;
    color: #ff4444;
    font-family: monospace;
}

.pricing-features {
    flex: 1;
    margin-bottom: 14px;
}

.features-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
}

.feature-item.active .feature-icon {
    background: #C9A963;
    color: #000;
    font-weight: 700;
}

.feature-item.inactive {
    opacity: 0.4;
}

.feature-item.inactive .feature-icon {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

.feature-icon {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C9A963;
    border-radius: 50%;
    color: #000;
}

.pricing-btn {
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    background: rgba(201, 169, 99, 0.1);
    border: 1px solid #C9A963;
    border-radius: 8px;
    color: #C9A963;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-btn:hover {
    background: #C9A963;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201, 169, 99, 0.3);
}

/* Featured button - same as normal buttons */

/* Responsive adjustments for Pricing */
@media (max-width: 968px) {
    .pricing-section {
        padding: 80px 0;
    }

    .pricing-tabs {
        gap: 12px;
        margin-bottom: 50px;
    }

    .pricing-tab {
        padding: 10px 20px;
        font-size: 14px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 500px;
    }

    .price-amount {
        font-size: 48px;
    }
}

@media (max-width: 640px) {
    .pricing-section {
        padding: 60px 0;
    }

    .pricing-tabs {
        flex-direction: column;
        gap: 8px;
    }

    .pricing-tab {
        width: 100%;
        text-align: center;
    }

    .pricing-card {
        padding: 32px 24px;
    }

    .price-amount {
        font-size: 40px;
    }

    .pricing-icon {
        width: 56px;
        height: 56px;
    }

    .pricing-plan-name {
        font-size: 20px;
    }
}

/* ==================== TEST TWEAK TRADE SECTION ==================== */
.test-trade-section {
    padding: 120px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Test-Trade Background Image */
.test-trade-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/TESTTRADE-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.test-trade-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.test-trade-left {
    max-width: 650px;
}

.test-trade-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--color-text);
}

.test-trade-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

.test-trade-indicator {
    font-size: 16px;
    font-family: monospace;
    color: var(--color-accent);
    margin-bottom: 24px;
    letter-spacing: 2px;
}

.test-trade-description {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}

.test-trade-description strong {
    color: var(--color-text);
    font-weight: 700;
}

.test-trade-description a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.test-trade-description a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.link-futures,
.link-crypto {
    position: relative;
}

.test-trade-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.test-trade-right::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -150px;
    width: 600px;
    height: 600px;
    background:
        radial-gradient(circle at center,
            rgba(201, 169, 99, 0.25) 0%,
            rgba(201, 169, 99, 0.15) 25%,
            rgba(201, 169, 99, 0.08) 40%,
            rgba(201, 169, 99, 0.04) 55%,
            rgba(201, 169, 99, 0.01) 70%,
            transparent 85%);
    pointer-events: none;
    z-index: -1;
    filter: blur(60px);
}

.test-trade-right::after {
    content: '';
    position: absolute;
    top: -80px;
    left: -110px;
    width: 500px;
    height: 500px;
    background-image:
        repeating-linear-gradient(0deg, transparent 0px, rgba(201, 169, 99, 0.12) 1px, transparent 2px, transparent 20px),
        repeating-linear-gradient(90deg, transparent 0px, rgba(201, 169, 99, 0.12) 1px, transparent 2px, transparent 20px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    mask-image: radial-gradient(circle at center, black 20%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 60%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 20%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 60%, transparent 80%);
}

.discord-mockup {
    position: relative;
    border-radius: 0;
    overflow: visible;
    width: 100% !important;
    max-width: 700px;
    flex-shrink: 0;
    box-shadow: none;
}

.discord-mockup::before {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        radial-gradient(ellipse 100% 100% at bottom right, #000000 0%, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.65) 45%, rgba(0, 0, 0, 0.35) 60%, transparent 75%),
        radial-gradient(ellipse 85% 85% at top right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 25%, transparent 55%),
        radial-gradient(circle 550px at bottom left, rgba(201, 169, 99, 0.15) 0%, rgba(201, 169, 99, 0.08) 20%, rgba(201, 169, 99, 0.03) 35%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}

.discord-mockup::after {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        linear-gradient(to left, #000000 0%, rgba(0, 0, 0, 0.95) 2%, rgba(0, 0, 0, 0.85) 5%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0.4) 18%, transparent 35%),
        linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.9) 3%, rgba(0, 0, 0, 0.7) 8%, rgba(0, 0, 0, 0.45) 15%, transparent 30%);
    z-index: 1;
    pointer-events: none;
}

.discord-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    position: relative;
    z-index: 0;
}

/* ==================== SECTIONS ==================== */
section {
    position: relative;
    padding: 100px 0;
    z-index: 1;
}

.section-header {
    margin-bottom: 60px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.section-description {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ==================== TESTIMONIALS ==================== */
.testimonials {
    padding: 100px 0;
    background: #000;
    position: relative;
}

/* Payment Methods */
.payment-methods {
    text-align: center;
    margin-bottom: 1000px;
    padding: 40px 0 20px 0;
}

.payment-title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
}

.payment-icon {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-icon img {
    filter: grayscale(100%) brightness(0.6);
    transition: all 0.3s ease;
    display: block;
    opacity: 0.7;
}

.payment-icon:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

.payment-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    max-width: 600px;
    margin: 20px auto 0;
}

/* Globe Container */
.globe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 100px 0;
    margin-top: -920px;
    position: relative;
}

.globe-circle {
    position: relative;
    width: 900px;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.globe-image {
    position: absolute;
    width: 135%;
    height: 135%;
    object-fit: contain;
    opacity: 0.9;
    filter: brightness(1.1);
}

.globe-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 650px;
    padding: 0 50px;
}

.globe-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.globe-title {
    font-size: 58px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ==================== TESTIMONIALS GRID ==================== */
.testimonials-grid {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 20px;
    overflow: hidden;
    position: relative;
}

.testimonial-card {
    background: rgb(16, 16, 16);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.12) 0px 1px 1px 0px inset;
    transition: all 0.3s ease;
    flex: 0 0 310px;
    min-width: 310px;
}

.testimonial-card:nth-child(5) {
    opacity: 0.7;
}

.testimonial-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.testimonial-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.testimonial-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.testimonial-avatar {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.testimonial-name {
    font-size: 14px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    margin: 0;
    line-height: 14.4px;
}

.testimonial-stars {
    display: flex;
    gap: 2px;
}

.testimonial-stars .star {
    color: #C9A963;
    font-size: 14px;
}

.testimonial-text {
    font-size: 14px;
    line-height: 150%;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: -0.14px;
    margin: 0;
}

.testimonial-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonial-footer svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.testimonial-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: -0.14px;
    line-height: 150%;
}

/* ==================== TEAM SECTION ==================== */
.team-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Team Background Image */
.team-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/TEAM-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
    gap: 100px;
}

.team-title-wrapper {
    flex: 0 0 auto;
}

.team-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.team-title {
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0;
}

.team-description {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 480px;
    margin: 0;
    padding-top: 8px;
}

.team-content {
    display: flex;
    gap: 60px;
}

.team-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 4px;
}

.team-tab-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.team-tab-title {
    font-size: 22px;
    font-weight: 700;
    color: #C9A963;
    margin: 0;
    letter-spacing: 0.5px;
}

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

.team-card {
    background: rgb(16, 16, 16);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.12) 0px 1px 1px 0px inset;
}

.team-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.team-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.05);
}

/* Progress bar under team card (THE LAB style) */
.team-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 35%; /* Can vary per card */
    background: linear-gradient(90deg,
        rgba(201, 169, 99, 0) 0%,
        rgba(201, 169, 99, 0.8) 20%,
        #C9A963 50%,
        rgba(201, 169, 99, 0.8) 80%,
        rgba(201, 169, 99, 0) 100%
    );
    opacity: 0.8;
    transition: width 0.3s ease;
}

.team-card:hover::after {
    width: 100%;
    opacity: 1;
}

.team-info {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-name {
    font-size: 16px;
    font-weight: 700;
    color: #C9A963;
    margin: 0;
    letter-spacing: 0.5px;
}

.team-role {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.team-social {
    position: absolute;
    bottom: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    text-decoration: none;
}

.team-social:hover {
    background: #C9A963;
    color: #000;
}

/* ==================== BLOG SECTION ==================== */
.blog-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Blog Background Image */
.blog-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/BLOG-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.blog-header {
    text-align: center;
    margin-bottom: 60px;
}

.blog-label {
    font-size: 14px;
    font-weight: 700;
    color: #C9A963;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.blog-title {
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.blog-card {
    background: rgb(16, 16, 16);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.12) 0px 1px 1px 0px inset;
}

.blog-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.blog-image {
    width: 100%;
    height: 280px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(201, 169, 99, 0.3), rgba(6, 78, 59, 0.3));
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: all 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
    opacity: 1;
}

.blog-image-overlay {
    display: none;
}

.blog-image-title {
    display: none;
}

.blog-content {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex: 1;
}

.blog-read-more {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
    margin-left: 16px;
}

.blog-read-more:hover {
    color: #C9A963;
}

.blog-footer {
    text-align: center;
    margin-top: 40px;
}

.blog-see-more {
    display: inline-block;
    padding: 12px 32px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-see-more:hover {
    background: rgba(201, 169, 99, 0.1);
    border-color: #C9A963;
    color: #C9A963;
}

/* ==================== FAQ SECTION ==================== */
.faq-section {
    padding: 150px 20px 150px;
    background: transparent;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
    z-index: 10;
}

/* FAQ Background Image */
.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/FAQ-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.faq-header.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.faq-label {
    font-size: 16px;
    font-weight: 500;
    color: rgb(201, 169, 99);
    letter-spacing: 0em;
    line-height: 120%;
    margin-bottom: 12px;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
    overflow: hidden;
    max-width: 0;
    display: inline-block;
    transition: max-width 1.2s ease;
}

.faq-header.fade-in .faq-label {
    max-width: 400px;
}

.faq-title {
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-item {
    background: rgb(16, 16, 16);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 7px 9px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset,
                rgba(255, 255, 255, 0.16) 0px 1px 1px 0px inset;
    opacity: 1;
    transform: none;
    will-change: auto;
}

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

.faq-item.active {
    border-color: rgba(201, 169, 99, 0.3);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.faq-question h3 {
    font-size: 14px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    margin: 0;
    line-height: 17px;
    transition: color 0.3s ease;
    font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
    text-transform: inherit;
}

.faq-item.active .faq-question h3 {
    color: #C9A963;
}

.faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.faq-icon svg {
    stroke: rgba(255, 255, 255, 0.6);
    transition: stroke 0.3s ease;
}

.faq-item.active .faq-icon svg {
    stroke: #C9A963;
    transform: rotate(180deg);
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: none;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 16px;
    transform: none;
}

.faq-answer p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 145%;
    margin: 0;
    font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
    text-transform: capitalize;
}

@media (max-width: 768px) {
    .faq-title {
        font-size: 36px;
    }

    .faq-question h3 {
        font-size: 16px;
    }

    .faq-answer p {
        font-size: 14px;
    }
}

/* ==================== FINAL CTA SECTION ==================== */
.final-cta-section {
    padding: 1200px 0 100px 0;
    background: transparent;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: auto;
    z-index: 1;
}

/* Final CTA Background Image */
.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/FINAL-CTA-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.final-cta-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
}

.final-cta-section .globe-container {
    width: 850px;
    height: 500px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    margin-bottom: 40px;
}

.final-cta-section .globe-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.radar-component {
    position: relative;
    width: 850px;
    height: 850px;
    opacity: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #000000;
    border: 32px solid transparent;
    background-image:
        linear-gradient(#000000, #000000),
        linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 25%, #000000 50%, #0a0a0a 75%, #1a1a1a 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        0 0 0 2px rgba(40, 40, 40, 0.9),
        0 -4px 12px rgba(100, 100, 100, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.9),
        inset 0 -4px 12px rgba(80, 80, 80, 0.3),
        inset 0 4px 12px rgba(0, 0, 0, 0.8);
    z-index: 2;
    clip-path: inset(0 0 50% 0 round 50% 50% 0 0);
}

.radar-component::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('../images/globe-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 1;
}

.radar-component::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

.outer-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 500px;
    opacity: 1;
    pointer-events: none;
}

.main-border-frame {
    display: none;
}

.border-inner-highlight {
    display: none;
}

.inner-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 2;
}

.inner-outlines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 2;
}

.outline-vertical {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.01);
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 1;
}

.outline-horizontal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.01);
    transform: translate(-50%, -50%);
    opacity: 1;
}

.outline-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(201, 169, 99, 0.06);
    border-radius: 500px;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.circle-1 {
    width: 80%;
    height: 80%;
}

.circle-2 {
    width: 60%;
    height: 60%;
}

.circle-3 {
    width: 40%;
    height: 40%;
}

.circle-4 {
    width: 20%;
    height: 20%;
}

.light-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 270deg,
        rgba(201, 169, 99, 0.02) 280deg,
        rgba(201, 169, 99, 0.05) 290deg,
        rgba(201, 169, 99, 0.08) 300deg,
        rgba(201, 169, 99, 0.12) 310deg,
        rgba(201, 169, 99, 0.18) 320deg,
        rgba(201, 169, 99, 0.25) 330deg,
        rgba(201, 169, 99, 0.35) 340deg,
        rgba(201, 169, 99, 0.5) 345deg,
        rgba(201, 169, 99, 0.65) 350deg,
        rgba(201, 169, 99, 0.8) 355deg,
        rgba(201, 169, 99, 0.95) 358deg,
        rgba(201, 169, 99, 1) 359deg,
        rgba(212, 175, 55, 1) 359.5deg,
        rgba(201, 169, 99, 0.85) 359.8deg,
        transparent 360deg
    );
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, -50%);
    animation: radarRotate 4s linear infinite;
    will-change: transform;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 20px rgba(201, 169, 99, 0.8))
            drop-shadow(0 0 40px rgba(201, 169, 99, 0.5));
    mask-image: radial-gradient(circle, transparent 0%, white 1%, white 100%);
    -webkit-mask-image: radial-gradient(circle, transparent 0%, white 1%, white 100%);
    z-index: 3;
}

.border-highlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 914px;
    height: 914px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 340deg,
        rgba(201, 169, 99, 0.5) 350deg,
        rgba(201, 169, 99, 0.8) 355deg,
        rgba(201, 169, 99, 1) 358.5deg,
        rgba(212, 175, 55, 1) 359deg,
        rgba(201, 169, 99, 0.8) 359.5deg,
        rgba(201, 169, 99, 0.4) 359.8deg,
        transparent 360deg
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: radarRotate 4s linear infinite;
    z-index: 50;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(1px);
    clip-path: inset(0 0 50% 0);
    -webkit-mask-image: radial-gradient(circle, transparent 0%, transparent 92.5%, white 92.5%, white 100%);
    mask-image: radial-gradient(circle, transparent 0%, transparent 92.5%, white 92.5%, white 100%);
}

@keyframes radarRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.radar-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.radar-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    background: rgba(201, 169, 99, 1);
    border-radius: 1px;
    box-shadow: 0 0 12px rgba(201, 169, 99, 1),
                0 0 24px rgba(201, 169, 99, 0.8),
                0 0 36px rgba(201, 169, 99, 0.4);
}

.dot-1 {
    top: 30%;
    left: 40%;
    opacity: 1;
    box-shadow: 0 0 20px rgba(201, 169, 99, 1),
                0 0 40px rgba(201, 169, 99, 0.9),
                0 0 60px rgba(201, 169, 99, 0.5);
}

.dot-2,
.dot-3,
.dot-4,
.dot-5,
.dot-6,
.dot-7 {
    display: none;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.outer-border-light-spool {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        transparent 0deg,
        transparent 340deg,
        rgba(201, 169, 99, 0.3) 350deg,
        rgba(201, 169, 99, 0.6) 355deg,
        rgba(201, 169, 99, 0.3) 360deg
    );
    border-radius: 50%;
    opacity: 0.38;
    transform: translate(-50%, -50%);
    animation: outerRotate 5s linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes outerRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.floating-avatar {
    position: absolute;
    width: 95px;
    height: 95px;
    border-radius: 19px;
    overflow: hidden;
    border: 2px solid rgba(201, 169, 99, 0.3);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5),
                0 0 0 4px rgba(201, 169, 99, 0.2),
                0 0 15px rgba(201, 169, 99, 0.25),
                0 0 30px rgba(201, 169, 99, 0.15),
                0 6px 20px rgba(0, 0, 0, 0.4);
    animation: float 6s ease-in-out infinite;
    backdrop-filter: blur(10px);
    z-index: 100;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.9s ease,
                filter 0.9s ease;
    transform: translate3d(0, 0, 0) scale(1);
}

.floating-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
}

.final-cta-section:not(.avatars-expanded) .floating-avatar {
    transform: translate3d(var(--avatar-shift-x, 0), var(--avatar-shift-y, 0), 0) scale(0.35);
    opacity: 0.25;
    filter: grayscale(60%);
}

.final-cta-section.avatars-expanded .floating-avatar {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: grayscale(20%);
}

.avatar-1 {
    top: 160px;
    left: 250px;
    animation-delay: 0s;
    width: 75px;
    height: 75px;
    opacity: 0.6;
    --avatar-shift-x: 140px;
    --avatar-shift-y: -60px;
}

.avatar-1 img {
    filter: grayscale(20%) blur(0.5px);
}

.avatar-2 {
    top: 50px;
    right: 180px;
    animation-delay: 1s;
    width: 110px;
    height: 110px;
    opacity: 1;
    --avatar-shift-x: -160px;
    --avatar-shift-y: 80px;
}

.avatar-2 img {
    filter: grayscale(10%) blur(0px);
}

.avatar-3 {
    top: -60px;
    left: -200px;
    animation-delay: 2s;
    width: 130px;
    height: 130px;
    opacity: 0.5;
    --avatar-shift-x: 190px;
    --avatar-shift-y: 140px;
}

.avatar-3 img {
    filter: grayscale(30%) blur(1px);
}

.avatar-4 {
    top: 300px;
    left: -120px;
    animation-delay: 3s;
    width: 70px;
    height: 70px;
    opacity: 0.55;
    --avatar-shift-x: 160px;
    --avatar-shift-y: -140px;
}

.avatar-4 img {
    filter: grayscale(25%) blur(0.8px);
}

.avatar-5 {
    top: 200px;
    right: -200px;
    animation-delay: 4s;
    width: 90px;
    height: 90px;
    opacity: 0.9;
    --avatar-shift-x: -220px;
    --avatar-shift-y: -20px;
}

.avatar-5 img {
    filter: grayscale(15%) blur(0.3px);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.final-cta-text {
    text-align: center;
    max-width: 800px;
    position: relative;
    z-index: 10;
    margin-top: -120px;
}

.final-cta-title {
    font-size: 64px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.final-cta-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.final-cta-button {
    display: inline-block;
    padding: 18px 48px;
    background: #C9A963;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.final-cta-button:hover {
    background: #C9A963;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201, 169, 99, 0.3);
}

.final-cta-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 16px 0 0 0;
}

@media (max-width: 768px) {
    /* FIX OVERLAP: Reduce spacing for payment methods */
    .payment-methods {
        margin-bottom: 500px;
        z-index: 10;
        position: relative;
    }

    .globe-container {
        width: 100%;
        height: 500px;
        margin-top: -450px;
        z-index: 5;
    }

    /* FIX OVERFLOW: Globe and radar elements */
    .globe-circle {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 1;
    }

    .final-cta-section .globe-container {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .radar-component {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 1;
    }

    .border-highlight {
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 1;
    }

    .floating-avatar {
        width: 60px;
        height: 60px;
    }

    .final-cta-text {
        padding-top: 150px;
    }

    .final-cta-title {
        font-size: 36px;
    }

    .final-cta-description {
        font-size: 16px;
    }

    /* FIX OVERFLOW: Hide decorative pseudo-elements on tablets too */
    .test-trade-right::before,
    .test-trade-right::after {
        display: none;
    }

    /* Ensure no overflow on tablets */
    section {
        overflow-x: hidden;
    }

    .container {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ==================== PRICING ==================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s;
}

.pricing-card:hover {
    border-color: rgba(201, 169, 99, 0.3);
    transform: translateY(-4px);
}

/* Featured card - no special border styling */

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--color-accent);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 50px;
}

.plan-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
}

.price-currency {
    font-size: 24px;
    font-weight: 600;
}

.price-amount {
    font-size: 56px;
    font-weight: 700;
    margin: 0 4px;
}

.price-period {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.plan-features {
    margin: 32px 0;
}

.plan-features li {
    padding: 10px 0;
    font-size: 15px;
    color: var(--color-text-secondary);
    position: relative;
    padding-left: 24px;
}

.plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

/* ==================== FAQ ==================== */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
}

.faq-item {
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.faq-answer {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ==================== FOOTER ==================== */
/* ==================== NEWSLETTER SECTION ==================== */
.newsletter-section {
    background: transparent;
    padding: 80px 0 80px 0;
    position: relative;
    z-index: 1;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(201, 169, 99, 0.02) 25%, rgba(201, 169, 99, 0.02) 26%, transparent 27%, transparent 74%, rgba(201, 169, 99, 0.02) 75%, rgba(201, 169, 99, 0.02) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(201, 169, 99, 0.02) 25%, rgba(201, 169, 99, 0.02) 26%, transparent 27%, transparent 74%, rgba(201, 169, 99, 0.02) 75%, rgba(201, 169, 99, 0.02) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

/* Newsletter Background Image */
.newsletter-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/NEWSLETTER-SECTION.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.newsletter-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 2px solid rgba(201, 169, 99, 0.3);
    border-radius: 24px;
    padding: 60px 80px;
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 80px rgba(201, 169, 99, 0.15),
        0 0 120px rgba(201, 169, 99, 0.1),
        0 20px 100px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 100px rgba(201, 169, 99, 0.02);
    position: relative;
    overflow: hidden;
    animation: borderPulse 4s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% {
        border-color: rgba(201, 169, 99, 0.3);
        box-shadow:
            0 0 80px rgba(201, 169, 99, 0.15),
            0 0 120px rgba(201, 169, 99, 0.1),
            0 20px 100px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 100px rgba(201, 169, 99, 0.02);
    }
    50% {
        border-color: rgba(201, 169, 99, 0.5);
        box-shadow:
            0 0 100px rgba(201, 169, 99, 0.25),
            0 0 150px rgba(201, 169, 99, 0.15),
            0 20px 100px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 120px rgba(201, 169, 99, 0.04);
    }
}

.newsletter-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(201, 169, 99, 0.05), transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(201, 169, 99, 0.03), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.newsletter-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 99, 0.1) 25%,
        transparent 50%,
        rgba(201, 169, 99, 0.1) 75%,
        transparent 100%
    );
    border-radius: 24px;
    opacity: 0;
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 0.3;
        transform: translateX(100%);
    }
}

.newsletter-content > * {
    position: relative;
    z-index: 3;
}

.newsletter-left {
    position: relative;
}

.newsletter-left::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 30px;
    height: 30px;
    border-top: 2px solid rgba(201, 169, 99, 0.5);
    border-left: 2px solid rgba(201, 169, 99, 0.5);
    z-index: 4;
    animation: cornerGlow 2s ease-in-out infinite;
}

.newsletter-left::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 30px;
    height: 30px;
    border-top: 2px solid rgba(201, 169, 99, 0.5);
    border-right: 2px solid rgba(201, 169, 99, 0.5);
    z-index: 4;
    animation: cornerGlow 2s ease-in-out infinite 0.5s;
}

.newsletter-right::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid rgba(201, 169, 99, 0.5);
    border-left: 2px solid rgba(201, 169, 99, 0.5);
    z-index: 4;
    animation: cornerGlow 2s ease-in-out infinite 1s;
}

.newsletter-right::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid rgba(201, 169, 99, 0.5);
    border-right: 2px solid rgba(201, 169, 99, 0.5);
    z-index: 4;
    animation: cornerGlow 2s ease-in-out infinite 1.5s;
}

@keyframes cornerGlow {
    0%, 100% {
        opacity: 0.4;
        filter: drop-shadow(0 0 4px rgba(201, 169, 99, 0.3));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(201, 169, 99, 0.6));
    }
}

.newsletter-mockup {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.mockup-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 2px solid rgba(201, 169, 99, 0.3);
    box-shadow:
        0 0 40px rgba(201, 169, 99, 0.2),
        0 0 80px rgba(201, 169, 99, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.mockup-image:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 60px rgba(201, 169, 99, 0.3),
        0 0 100px rgba(201, 169, 99, 0.15),
        0 25px 80px rgba(0, 0, 0, 0.5);
}

.newsletter-center {
    text-align: center;
}

.newsletter-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #C9A963 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.newsletter-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.newsletter-form {
    display: flex;
    gap: 12px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s;
}

.newsletter-input:focus {
    outline: none;
    border-color: rgba(201, 169, 99, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.newsletter-button {
    padding: 16px 32px;
    background: #C9A963;
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
}

.newsletter-button:hover {
    background: #D4AF37;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 169, 99, 0.3);
}

.newsletter-privacy {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-privacy a {
    color: #C9A963;
    text-decoration: underline;
}

.newsletter-privacy a:hover {
    color: #D4AF37;
}

/* ==================== FOOTER ==================== */
.footer {
    background: transparent;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Footer Background Image */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('../images/FOOTER.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.footer-logo-link {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.footer-logo-link:hover {
    opacity: 0.8;
}

.footer-logo-image {
    height: 50px;
    width: auto;
    object-fit: contain;
}

/* Text logo fallback styles */
.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-weight: 700;
}

.footer-logo-text .logo-the {
    font-size: 12px;
    letter-spacing: 0.8px;
    color: var(--color-text);
}

.footer-logo-text .logo-lab {
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--color-text);
}

.footer-tagline {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 8px;
    position: relative;
    display: inline-block;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.9), #C9A963, rgba(255, 255, 255, 0.9));
    background-size: 300% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footerTaglineGlow 4s linear infinite, footerTaglinePulse 4s ease-in-out infinite;
}

@keyframes footerTaglineGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes footerTaglinePulse {
    0% {
        text-shadow: 0 0 4px rgba(201, 169, 99, 0.2), 0 0 12px rgba(201, 169, 99, 0.3);
    }
    50% {
        text-shadow: 0 0 12px rgba(201, 169, 99, 0.5), 0 0 22px rgba(201, 169, 99, 0.7);
    }
    100% {
        text-shadow: 0 0 4px rgba(201, 169, 99, 0.2), 0 0 12px rgba(201, 169, 99, 0.3);
    }
}

.footer-center,
.footer-right {
    display: flex;
    flex-direction: column;
}

.footer-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #C9A963;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links li a {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    display: block;
}

.footer-links li a:hover {
    color: #C9A963;
    transform: translateX(4px);
}

.legal-bar {
    background: rgba(0, 0, 0, 0.85);
    padding: 32px 0 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-bar .container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.legal-copy {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

.legal-links {
    display: flex;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-links a:hover {
    color: #C9A963;
}

.legal-credit {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: color 0.2s ease, border 0.2s ease;
    border: 1px solid transparent;
}

.legal-credit strong {
    color: #C9A963;
    font-weight: 600;
}

.legal-credit-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legal-credit-icon svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}

.legal-credit-icon svg path:first-child {
    fill: rgba(255, 255, 255, 0.15);
    stroke: none;
    transition: fill 0.2s ease;
}

.legal-credit-icon svg path:last-child {
    stroke: rgba(255, 255, 255, 0.8);
}

.legal-credit:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.legal-credit:hover strong {
    color: #ffffff;
}

.legal-credit:hover .legal-credit-icon svg {
    stroke: #C9A963;
}

.legal-credit:hover .legal-credit-icon svg path:first-child {
    fill: rgba(201, 169, 99, 0.4);
}

.legal-credit:hover .legal-credit-icon svg path:last-child {
    stroke: #C9A963;
}

.legal-disclaimer {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
}

.legal-disclaimer a {
    color: #C9A963;
    text-decoration: underline;
    font-weight: 600;
}

.privacy-page {
    color: #ffffff;
    position: relative;
    min-height: 100vh;
    font-family: var(--font-primary);
}

.privacy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
    z-index: 1;
    pointer-events: none;
}

.privacy-header,
.privacy-main,
.privacy-footer {
    position: relative;
    z-index: 2;
}

.privacy-header {
    padding: 24px 40px;
}

.privacy-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.privacy-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
}

.privacy-logo img {
    height: 40px;
}

.privacy-nav {
    display: flex;
    gap: 20px;
}

.privacy-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.privacy-nav a:hover {
    color: #C9A963;
}

.privacy-back-top {
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s ease, color 0.2s ease;
}

.privacy-back-top:hover {
    background: #C9A963;
    color: #000;
}

.privacy-main {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 80px) 24px 120px;
}

.privacy-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 48px;
}

.privacy-eye {
    width: 220px;
    height: 220px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-eye::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.privacy-eye span {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(201, 169, 99, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.risk-eye {
    background: transparent;
}

.privacy-eye span::before {
    content: '';
    width: 80px;
    height: 80px;
    background-image: url('../images/logo_blackrose.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

.privacy-label {
    font-size: 14px;
    letter-spacing: 2px;
    color: #C9A963;
    margin: 0;
}

.privacy-hero h1 {
    font-size: 40px;
    margin: 0;
    line-height: 1.2;
}

.privacy-updated {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.privacy-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-size: 16px;
    line-height: 1.7;
}

.privacy-content ul {
    padding-left: 20px;
    margin: 12px 0 0 0;
}

.privacy-article h2 {
    font-size: 22px;
    margin-bottom: 8px;
    color: #C9A963;
}

.privacy-content a {
    color: #C9A963;
    text-decoration: underline;
}

.privacy-actions {
    text-align: center;
    margin-top: 40px;
}

.privacy-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 999px;
    background: #C9A963;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    transition: transform 0.2s ease;
}

.privacy-back-button:hover {
    transform: translateY(-2px);
}

.privacy-footer {
    text-align: center;
    padding: 30px 20px 50px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1400px) {
    .hero-title {
        font-size: 30px;
    }

    .hero-content {
        text-align: left;
        margin-left: 0;
    }

    .test-trade-title {
        font-size: 42px;
    }

    .test-trade-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 1200px) {
    /* Navigation - Reduce spacing to prevent overlap */
    .nav-menu {
        gap: 28px; /* Reduced from 48px */
    }

    .nav-link {
        font-size: 11px; /* Reduced from 12px */
        letter-spacing: 0.3px;
    }

    .nav-right {
        gap: 12px; /* Reduced from 20px */
    }

    /* Hide JOIN BLACK ROSE button text on smaller screens */
    .btn-discord span {
        display: none;
    }

    .btn-discord {
        padding: 10px; /* Reduce padding when text is hidden */
        min-width: auto;
    }

    /* Reduce language button size */
    .language-btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-content {
        text-align: left;
        margin-left: 0;
    }

    .test-trade-content {
        gap: 60px;
    }

    .test-trade-title {
        font-size: 38px;
    }

    .newsletter-content {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 50px 60px;
    }

    .newsletter-left {
        display: flex;
        justify-content: center;
    }

    .newsletter-center {
        text-align: center;
    }

    .newsletter-title {
        font-size: 36px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .footer-left {
        text-align: center;
        align-items: center;
    }
}

/* Medium screens - Further reduce spacing if needed */
@media (max-width: 1024px) {
    .nav-menu {
        gap: 24px; /* Further reduced from 28px */
    }

    .nav-link {
        font-size: 10px;
    }

    /* Hide logo in header on smaller laptops to save space */
    .nav-logo {
        display: none;
    }
}

@media (max-width: 810px) {
    /* Restore logo on mobile (will use hamburger menu) */
    .nav-logo {
        display: block;
    }

    /* Hamburger Button - Show on tablet/mobile */
    .hamburger {
        display: flex !important;
        margin-left: auto;
    }

    /* Full-Screen Mobile Menu (THE LAB Style) */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 120px 40px 40px;
        gap: 32px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        overflow-y: auto;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-link {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #FFFFFF;
        width: 100%;
        padding: 8px 0;
    }

    .nav-link:hover {
        color: var(--color-accent);
    }

    /* Mobile Menu CTA Button */
    .mobile-menu-cta {
        margin-top: 32px;
        display: block !important;
        width: 100%;
        list-style: none;
    }

    .btn-mobile-join {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 16px 32px;
        background: var(--color-accent);
        color: #000000;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .btn-mobile-join:hover {
        background: #FFFFFF;
        transform: translateY(-2px);
    }

    /* Mobile Menu Rating */
    .mobile-menu-rating {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        padding: 12px 0;
        color: var(--color-accent);
        font-size: 14px;
        font-weight: 600;
        list-style: none;
    }

    .mobile-menu-rating svg {
        width: 20px;
        height: 20px;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .nav-actions {
        display: none;
    }

    .language-selector {
        margin-left: 0;
        z-index: 11000; /* Highest - above header */
        position: relative;
    }

    .language-btn {
        position: relative;
        z-index: 11000;
    }

    .language-dropdown {
        position: fixed; /* Float above mobile menu overlay */
        top: calc(var(--ticker-height) + 48px); /* Tuck closer to button */
        right: 12px;
        min-width: 150px;
        z-index: 20000;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        transform: translateY(-6px);
    }

    .language-dropdown.show {
        transform: translateY(0);
    }

    .logo-image {
        height: 32px;
    }

    .footer-logo-image {
        height: 40px;
    }

    .blackrose-logo-image {
        width: 60vw;
        max-width: 600px;
    }

    .hero {
        padding-top: calc(var(--header-height) + 108px);
    }

    .hero .container {
        justify-content: flex-start;
        align-items: flex-end;
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-content {
        max-width: 100%;
        text-align: left;
        margin-left: 0;
        margin-right: auto;
    }

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

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

    .test-trade-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .test-trade-title {
        font-size: 32px;
    }

    .test-trade-subtitle {
        font-size: 16px;
    }

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

    /* MOBILE SWIPE: Enable horizontal scrolling for testimonials */
    .testimonials-grid {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px 20px 20px;
        margin: 60px auto 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(201, 169, 99, 0.5) transparent;
    }

    .testimonials-grid::-webkit-scrollbar {
        height: 6px;
    }

    .testimonials-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .testimonials-grid::-webkit-scrollbar-thumb {
        background: rgba(201, 169, 99, 0.5);
        border-radius: 3px;
    }

    .testimonials-grid::-webkit-scrollbar-thumb:hover {
        background: rgba(201, 169, 99, 0.8);
    }

    .testimonial-card {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 82vw;
    }

    .pricing-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-content {
        gap: 40px;
        padding: 40px 30px;
    }

    .newsletter-title {
        font-size: 28px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-button {
        width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        align-items: center;
    }
}

@media (max-width: 480px) {
    /* Container & Layout */
    .container {
        padding: 0 16px;
    }

    /* FIX OVERLAP: Payment methods and globe on small mobile */
    .payment-methods {
        margin-bottom: 350px;
        z-index: 10;
        position: relative;
    }

    .globe-container {
        margin-top: -300px;
        z-index: 5;
    }

    .globe-title {
        font-size: 32px;
    }

    /* Logo */
    .logo-image {
        height: 28px;
    }

    .footer-logo-image {
        height: 35px;
    }

    .blackrose-logo-container {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .blackrose-logo-image {
        width: 380px;
        max-width: 85vw;
        opacity: 1;
    }

    /* Hero Section */
    .hero {
        min-height: 100vh;
        padding-top: calc(var(--header-height) + 60px);
        padding-bottom: 40px;
        align-items: flex-end;
    }

    .hero-content {
        max-width: 100%;
        padding: 0 10px;
        text-align: center;
        margin: auto auto 0;
        position: relative;
        z-index: 10;
        /* FORCE VISIBILITY ON MOBILE */
        display: flex !important;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 12px;
        color: #FFFFFF !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-description {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.8) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-actions {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* FORCE LOGO VISIBILITY */
    .blackrose-logo-container {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .blackrose-logo-image {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .btn-lg {
        padding: 10px 24px;
        font-size: 11px;
    }

    /* Features Section */
    .features-section {
        padding: 60px 0;
    }

    .features-label {
        font-size: 12px;
    }

    .features-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .features-subtitle p {
        font-size: 14px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Pricing Section */
    .pricing-section {
        padding: 60px 0;
    }

    .pricing-label {
        font-size: 12px;
    }

    .pricing-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .pricing-subtitle {
        font-size: 14px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pricing-card {
        padding: 24px;
    }

    .pricing-plan-name {
        font-size: 18px;
    }

    .price-amount {
        font-size: 32px;
    }

    /* Test Trade Section */
    .test-trade-section {
        padding: 60px 0;
    }

    .test-trade-title {
        font-size: 24px;
    }

    .test-trade-subtitle {
        font-size: 14px;
    }

    .test-trade-content {
        flex-direction: column;
        gap: 30px;
        padding: 0 16px;
    }

    .test-trade-left,
    .test-trade-right {
        width: 100%;
    }

    /* Newsletter Section */
    .newsletter-section {
        padding: 60px 0;
    }

    .newsletter-content {
        padding: 30px 20px;
        gap: 30px;
    }

    .newsletter-title {
        font-size: 24px;
    }

    .newsletter-subtitle {
        font-size: 13px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 12px;
    }

    .newsletter-input {
        font-size: 13px;
        padding: 12px 16px;
    }

    .newsletter-btn {
        font-size: 13px;
        padding: 12px 24px;
        width: 100%;
    }

    /* Footer */
    .footer {
        padding: 60px 0 30px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-left {
        align-items: center;
    }

    .footer-description {
        font-size: 13px;
    }

    .footer-section-title {
        font-size: 14px;
    }

    .footer-link {
        font-size: 13px;
    }

    /* FAQ Section - THE LAB STYLE */
    .faq-section {
        padding: 60px 0;
    }

    .faq-header {
        padding: 0 20px;
        margin-bottom: 32px;
        text-align: center;
    }

    .faq-label {
        font-size: 11px;
        color: #C9A963;
        margin-bottom: 12px;
    }

    .faq-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .faq-subtitle {
        font-size: 14px;
    }

    /* THE LAB STYLE: FAQ accordion items */
    .faq-list {
        padding: 0 20px;
        gap: 12px;
    }

    .faq-item {
        padding: 0;
        border-radius: 12px;
    }

    .faq-question {
        font-size: 15px;
        padding: 20px;
    }

    .faq-question h3 {
        font-size: 15px;
        font-weight: 500;
    }

    .faq-answer {
        font-size: 14px;
        padding: 0 20px 20px 20px;
    }

    .faq-icon {
        flex-shrink: 0;
    }

    /* Final CTA Section */
    .final-cta-section {
        padding: 60px 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: auto;
        height: auto;
        position: relative;
    }

    .final-cta-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .final-cta-section .final-cta-content {
        padding: 0 16px !important;
        margin: 0 auto !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: flex-start;
        gap: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        position: relative;
    }

.final-cta-section .globe-container {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto !important;
        position: relative;
        overflow: visible;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        pointer-events: auto;
    }

    .final-cta-section .radar-component {
        width: 380px !important;
        height: 380px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        border-width: 20px;
        border-radius: 50%;
        clip-path: inset(0 0 50% 0 round 50% 50% 0 0);
        box-shadow:
            0 0 0 1px rgba(60, 60, 60, 0.8),
            0 12px 24px rgba(0, 0, 0, 0.65),
            inset 0 -8px 20px rgba(0, 0, 0, 0.6);
        background: #000000;
        background-image:
            linear-gradient(#000000, #000000),
            linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 25%, #000000 50%, #0a0a0a 75%, #1a1a1a 100%);
        background-origin: padding-box, border-box;
        background-clip: padding-box, border-box;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 2;
        margin: 0 !important;
    }

    .final-cta-section .light-beam {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        animation: radarRotate 4s linear infinite !important;
        z-index: 3;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .final-cta-section .border-highlight {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        animation: radarRotate 4s linear infinite !important;
        clip-path: inset(0 0 50% 0);
        z-index: 4;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .final-cta-section .radar-dot {
        width: 6px;
        height: 6px;
    }

    .final-cta-section .floating-avatar {
        display: none;
    }

    .final-cta-section .final-cta-text {
        padding: 0;
        text-align: center;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 430px;
        z-index: 10;
        margin-top: -275px;
    }

    .final-cta-section .final-cta-title {
        font-size: clamp(26px, 7vw, 32px);
        margin: 0 0 16px 0;
        line-height: 1.2;
    }

    .final-cta-section .final-cta-description {
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.6;
        margin: 0 0 32px 0;
    }

    .final-cta-section .final-cta-button {
        padding: 16px 40px;
        font-size: 15px;
        border-radius: 8px;
        width: 100%;
        max-width: 280px;
        text-align: center;
        margin: 0 auto;
        display: inline-block;
    }

    .final-cta-section .final-cta-note {
        font-size: 13px;
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.4);
    }

    /* Force display all inner radar elements */
    .final-cta-section .inner-background,
    .final-cta-section .inner-outlines,
    .final-cta-section .light-beam,
    .final-cta-section .border-highlight,
    .final-cta-section .radar-dots,
    .final-cta-section .radar-dot,
    .final-cta-section .outline-circle,
    .final-cta-section .outline-vertical,
    .final-cta-section .outline-horizontal {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Light beam and border highlight are now properly positioned above */

    /* Scale down radar dots */
    .final-cta-section .radar-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Scale down outline circles */
    .final-cta-section .outline-circle {
        opacity: 0.3 !important;
    }

    /* Testimonials */
    .testimonials-section {
        padding: 60px 0;
    }

    .testimonial-card {
        padding: 20px;
    }

    .testimonial-text {
        font-size: 13px;
    }

    /* Team Section */
    .team-section {
        padding: 60px 0;
    }

    /* THE LAB STYLE: Stack header vertically */
    .team-header {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 48px;
        padding: 0 20px;
    }

    .team-title-wrapper {
        width: 100%;
    }

    .team-label {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .team-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .team-description {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
        padding-top: 0;
    }

    /* THE LAB STYLE: Stack content vertically */
    .team-content {
        flex-direction: column;
        gap: 24px;
        padding: 0 20px;
        margin-bottom: 48px;
    }

    /* THE LAB STYLE: Team category labels */
    .team-tabs {
        padding: 0;
        gap: 4px;
    }

    .team-tab-label {
        font-size: 11px;
        color: #C9A963;
    }

    .team-tab-title {
        font-size: 20px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    /* MOBILE SWIPE: Team carousel like testimonials */
    .team-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        padding: 0 20px 20px 20px;
        scrollbar-width: thin;
        scrollbar-color: rgba(201, 169, 99, 0.5) transparent;
    }

    .team-grid::-webkit-scrollbar {
        height: 6px;
    }

    .team-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .team-grid::-webkit-scrollbar-thumb {
        background: rgba(201, 169, 99, 0.5);
        border-radius: 3px;
    }

    .team-grid::-webkit-scrollbar-thumb:hover {
        background: rgba(201, 169, 99, 0.8);
    }

    .team-card {
        flex: 0 0 280px;
        min-width: 280px;
        scroll-snap-align: start;
    }

    .team-member-name {
        font-size: 16px;
    }

    .team-member-role {
        font-size: 12px;
    }

    /* Blog Section - THE LAB STYLE */
    .blog-section {
        padding: 60px 0;
    }

    .blog-header {
        padding: 0 20px;
        margin-bottom: 32px;
    }

    .blog-label {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .blog-title {
        font-size: 32px;
        line-height: 1.2;
    }

    /* THE LAB STYLE: Single column blog cards */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 20px;
        margin-bottom: 32px;
    }

    .blog-card {
        border-radius: 16px;
    }

    .blog-image {
        height: 320px;
        border-radius: 16px 16px 0 0;
    }

    .blog-image-overlay {
        display: none !important;  /* Hide text overlay on mobile */
    }

    .blog-image-title {
        display: none !important;  /* Hide title text on mobile */
    }

    .blog-content {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .blog-card-title {
        font-size: 16px;
    }

    .blog-read-more {
        font-size: 13px;
    }

    .blog-footer {
        padding: 0 20px;
    }

    /* Partners Section */
    .partners-section {
        padding: 50px 0;
    }

    .partners-logos {
        gap: 40px;
    }

    .partner-logo {
        height: 32px;
    }

    /* Ecosystem Section */
    .ecosystem-section {
        padding: 60px 16px;
    }

    .ecosystem-title {
        font-size: 28px;
    }

    .ecosystem-subtitle {
        font-size: 14px;
    }

    .ecosystem-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* FIX OVERFLOW: Hide decorative pseudo-elements that are too wide */
    .test-trade-right::before,
    .test-trade-right::after {
        display: none;
    }

    /* FIX OVERFLOW: Scale down all large decorative elements */
    .globe-circle,
    .radar-component,
    .border-highlight {
        max-width: 90vw !important;
    }

    /* Ensure all sections don't overflow */
    section {
        overflow-x: hidden;
    }

    .container {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ==================== ANIMATIONS ==================== */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.8;
        filter: blur(0.3px);
        text-shadow: 0 0 15px rgba(201, 169, 99, 0.5),
                     0 0 25px rgba(201, 169, 99, 0.3),
                     0 0 35px rgba(201, 169, 99, 0.2);
    }
    50% {
        opacity: 1;
        filter: blur(0.2px);
        text-shadow: 0 0 20px rgba(201, 169, 99, 0.7),
                     0 0 30px rgba(201, 169, 99, 0.5),
                     0 0 40px rgba(201, 169, 99, 0.3);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */

/* Base state for all animated elements */
.scroll-animate {
    opacity: 0 !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Revealed state */
.scroll-animate.revealed {
    opacity: 1 !important;
}

/* Fade Up Animation */
.animate-fade-up {
    transform: translateY(60px) !important;
}

.animate-fade-up.revealed {
    transform: translateY(0) !important;
}

/* Fade Down Animation */
.animate-fade-down {
    transform: translateY(-60px) !important;
}

.animate-fade-down.revealed {
    transform: translateY(0) !important;
}

/* Fade Left Animation */
.animate-fade-left {
    transform: translateX(-60px) !important;
}

.animate-fade-left.revealed {
    transform: translateX(0) !important;
}

/* Fade Right Animation */
.animate-fade-right {
    transform: translateX(60px) !important;
}

.animate-fade-right.revealed {
    transform: translateX(0) !important;
}

/* Scale Animation */
.animate-scale {
    transform: scale(0.85) !important;
}

.animate-scale.revealed {
    transform: scale(1) !important;
}

/* Zoom In Animation */
.animate-zoom {
    transform: scale(0.5);
}

.animate-zoom.revealed {
    transform: scale(1);
}

/* Rotate Animation */
.animate-rotate {
    transform: rotate(-10deg) scale(0.9);
}

.animate-rotate.revealed {
    transform: rotate(0deg) scale(1);
}

/* Flip Animation */
.animate-flip {
    transform: perspective(1000px) rotateY(-90deg);
    transform-origin: center;
}

.animate-flip.revealed {
    transform: perspective(1000px) rotateY(0deg);
}

/* Slide Up with Fade */
.animate-slide-up {
    transform: translateY(100px);
    opacity: 0;
}

.animate-slide-up.revealed {
    transform: translateY(0);
    opacity: 1;
}

/* Blur to Focus Animation */
.animate-blur {
    filter: blur(10px);
    opacity: 0;
}

.animate-blur.revealed {
    filter: blur(0);
    opacity: 1;
}

/* Stagger Animation for Child Elements */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* Animation Durations */
.duration-fast {
    transition-duration: 0.4s;
}

.duration-normal {
    transition-duration: 0.8s;
}

.duration-slow {
    transition-duration: 1.2s;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .stagger-item {
        transition: none !important;
        animation: none !important;
    }

    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==================== IMAGE ZOOM/SCALE EFFECTS ==================== */

/* Image container with overflow hidden for zoom effect */
.image-zoom-container {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

/* Base image zoom effect */
.image-zoom {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
}

/* Hover zoom effect */
.image-zoom-container:hover .image-zoom,
.image-zoom:hover {
    transform: scale(1.1);
}

/* Smooth zoom on scroll reveal */
.image-zoom.revealed {
    transform: scale(1);
}

/* Team member images */
.team-image,
.team-image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-member:hover .team-image img {
    transform: scale(1.1);
}

/* Feature card images */
.feature-card img,
.pricing-card img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover img,
.pricing-card:hover img {
    transform: scale(1.05);
}

/* Testimonial images */
.testimonial-img,
.testimonial-img img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card:hover .testimonial-img img {
    transform: scale(1.08);
}

/* Blog card images - already has zoom, enhance it */
.blog-image {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/* Hero section images */
.hero-image,
.hero-image img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content:hover .hero-image img {
    transform: scale(1.05);
}

/* Smooth image loading */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Parallax effect on scroll for large images */
@media (min-width: 968px) {
    .parallax-image {
        transition: transform 0.3s ease-out;
        will-change: transform;
    }
}

/* ==================== TELEGRAM SUPPORT WIDGET ==================== */
.telegram-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.telegram-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0088cc 0%, #229ED9 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    position: relative;
    animation: telegram-bounce 2s ease-in-out infinite;
}

/* Pulse ring animation */
.telegram-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 136, 204, 0.4);
    animation: telegram-pulse 2s ease-out infinite;
    z-index: -1;
}

.telegram-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 136, 204, 0.6);
    animation: none;
}

.telegram-button:hover::before {
    animation: none;
}

.telegram-button:active {
    transform: scale(0.95);
}

/* Telegram Animations */
@keyframes telegram-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

@keyframes telegram-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.telegram-chat-bubble {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    position: relative;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.telegram-chat-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.telegram-chat-bubble p {
    margin: 0;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.5;
    padding-right: 20px;
}

.telegram-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.telegram-close-btn:hover {
    color: #333;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .telegram-widget {
        bottom: 16px;
        right: 16px;
    }

    .telegram-button {
        width: 56px;
        height: 56px;
    }

    .telegram-button svg {
        width: 24px;
        height: 24px;
    }

    .telegram-chat-bubble {
        max-width: 260px;
        padding: 14px 18px;
    }

    .telegram-chat-bubble p {
        font-size: 13px;
    }

    .legal-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .legal-links {
        flex-wrap: wrap;
    }

    .legal-credit {
        margin-left: 0;
        padding: 4px 10px;
        width: 100%;
        justify-content: flex-start;
    }

    .privacy-header {
        padding: 20px;
    }

    .privacy-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .privacy-nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    .privacy-main {
        padding: calc(var(--header-height) + 50px) 20px 90px;
    }

    .privacy-hero h1 {
        font-size: 32px;
    }

    .privacy-eye {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .legal-bar {
        padding: 24px 0 32px 0;
    }

    .legal-copy {
        font-size: 13px;
    }

    .legal-links {
        font-size: 13px;
    }

    .legal-disclaimer {
        font-size: 12px;
    }

    .legal-credit {
        font-size: 13px;
    }

    .legal-credit-icon {
        width: 24px;
    }

    .privacy-main {
        padding: calc(var(--header-height) + 40px) 16px 70px;
    }

    .privacy-hero h1 {
        font-size: 26px;
    }

    .privacy-eye {
        width: 140px;
        height: 140px;
    }

    .privacy-back-top {
        align-self: flex-start;
    }
}

/* ==================== FORCE SCROLL ANIMATIONS (OVERRIDE ALL) ==================== */
/* These must be at the end of CSS to override everything else */

/* Hidden state - before reveal */
section.scroll-animate,
div.scroll-animate,
.feature-card.scroll-animate,
.pricing-card.scroll-animate,
.testimonial-card.scroll-animate,
.team-member.scroll-animate,
.faq-item.scroll-animate,
.partner-logo.scroll-animate,
.blog-card.scroll-animate {
    opacity: 0 !important;
    will-change: transform, opacity;
}

/* Fade up transforms */
.feature-card.animate-fade-up,
.pricing-card.animate-fade-up,
.blog-card.animate-fade-up,
section.animate-fade-up,
div.animate-fade-up {
    transform: translateY(60px) !important;
}

/* Scale transforms */
.testimonial-card.animate-scale,
.team-member.animate-scale,
.partner-logo.animate-scale {
    transform: scale(0.85) !important;
}

/* Fade left transforms */
.faq-item.animate-fade-left,
.faq-question.animate-fade-left {
    transform: translateX(-60px) !important;
}

/* Revealed state - after scroll */
section.scroll-animate.revealed,
div.scroll-animate.revealed,
.feature-card.scroll-animate.revealed,
.pricing-card.scroll-animate.revealed,
.testimonial-card.scroll-animate.revealed,
.team-member.scroll-animate.revealed,
.faq-item.scroll-animate.revealed,
.partner-logo.scroll-animate.revealed,
.blog-card.scroll-animate.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Revealed scale */
.testimonial-card.animate-scale.revealed,
.team-member.animate-scale.revealed,
.partner-logo.animate-scale.revealed {
    transform: scale(1) !important;
}

/* Revealed fade left */
.faq-item.animate-fade-left.revealed,
.faq-question.animate-fade-left.revealed {
    transform: translateX(0) !important;
}

/* ==================== PARTNER TICKER ==================== */
.partner-ticker {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid rgba(201, 169, 99, 0.2);
    height: var(--ticker-height);
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1001;
}

.ticker-track {
    width: 100%;
    overflow: hidden;
}

.ticker-content {
    display: flex;
    gap: 80px;
    animation: ticker-scroll 40s linear infinite;
    will-change: transform;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-item img {
    height: 28px;
    width: auto;
    opacity: 1;
    transition: transform 0.3s ease;
}

.ticker-item:hover img {
    transform: scale(1.1);
}

.ticker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background: rgba(201, 169, 99, 0.12);
    color: var(--color-accent);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ticker-btn:hover {
    background: rgba(201, 169, 99, 0.22);
    color: #ffe5b3;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --ticker-height: 44px;
    }

    .partner-ticker {
        padding: 0 10px;
    }

    .ticker-content {
        gap: 50px;
        animation-duration: 30s;
    }

    .ticker-item img {
        height: 22px;
    }

    .ticker-btn {
        min-height: 30px;
        padding: 6px 12px;
        font-size: 12.5px;
    }
}

/* ==================== MOBILE RADAR - KEEP DESKTOP DESIGN, JUST SCALE SIZE ==================== */
/* This MUST be at the end of file to override .scroll-animate opacity */