/* ==== ACCESSIBILITY - SKIP LINK ==== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cyan-primary);
    color: #FFFFFF;
    padding: 1rem 2rem;
    z-index: 10020;
    transition: top 0.3s ease;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--neon-green);
    outline-offset: 2px;
}

/* ==== LOADING SCREEN ==== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loading-logo {
    animation: logoFloat 2s ease-in-out infinite;
}

.loading-logo .mamba-logo {
    width: 140px;
    height: 105px;
    filter: drop-shadow(0 0 20px rgba(10, 132, 255, 0.3));
}

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

.loading-bar {
    width: 300px;
    height: 4px;
    background: rgba(10, 132, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #0A84FF 0%, #30D5C8 50%, #5E5CE6 100%);
    border-radius: 2px;
    animation: loadingProgress 2s ease-out forwards;
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.5);
}

@keyframes loadingProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.loading-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: #8E8E93;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: loadingTextPulse 1.5s ease-in-out infinite;
}

@keyframes loadingTextPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Hide main content during loading */
body:not(.page-loaded) .header,
body:not(.page-loaded) main,
body:not(.page-loaded) footer {
    opacity: 0;
    visibility: hidden;
}

body.page-loaded .header,
body.page-loaded main,
body.page-loaded footer {
    opacity: 1;
    visibility: visible;
    animation: fadeInContent 0.8s ease-out forwards;
}

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

/* ==== RESET & ROOT VARIABLES ==== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    /* BASE COLORS - Deep Space Tech */
    --neural-black: #000000;
    --neural-dark: #0D0D0D;
    --neural-surface: #1C1C1E;
    --neural-elevated: #2C2C2E;
    --neural-border: #2e2e30;

    /* BRAND COLORS - Deep Space Tech */
    --cyan-primary: #0A84FF;
    --cyan-secondary: #0066CC;
    --cyan-tertiary: #004C99;
    --neon-green: #30D5C8;
    --electric-blue: #0A84FF;
    --plasma-purple: #5E5CE6;
    --danger: #FF3B30;

    /* TEXT COLORS - Deep Space Tech */
    --text-primary: #FFFFFF;
    --text-secondary: #D1D1D6;
    --text-muted: #8E8E93;
    --text-accent: var(--cyan-primary);

    /* GRADIENTS - Deep Space Tech */
    --gradient-neural: linear-gradient(135deg, var(--neural-dark) 0%, var(--neural-surface) 50%, var(--neural-elevated) 100%);
    --gradient-cyan: linear-gradient(135deg, var(--cyan-primary) 0%, var(--electric-blue) 100%);
    --gradient-neon: linear-gradient(135deg, var(--neon-green) 0%, var(--cyan-primary) 100%);
    --gradient-plasma: linear-gradient(135deg, var(--plasma-purple) 0%, var(--cyan-primary) 50%, var(--neon-green) 100%);

    /* SHADOWS & GLOWS - Deep Space Tech */
    --glow-cyan: 0 0 20px rgba(10, 132, 255, 0.5);
    --glow-neon: 0 0 20px rgba(48, 213, 200, 0.5);
    --glow-purple: 0 0 20px rgba(94, 92, 230, 0.5);
    --shadow-neural: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* FONTS */
    --font-primary: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ==== GLOBAL STYLES ==== */
html {
    scroll-behavior: smooth;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    background: #000000;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
}

/* Custom cursor removed */

/* ==== CONTAINER ==== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==== HEADER & NAVIGATION ==== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000000;
    border-bottom: 1px solid var(--neural-border);
    z-index: 1000;
    transition: transform 0.3s ease, background 0.3s ease, border-bottom 0.3s ease;
    transform: translateY(0);
}

.header.hidden {
    transform: translateY(-100%) !important;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align logo to left */
    padding: 1.05rem 2rem; /* Reduced by 30% from 1.5rem */
    max-width: 1400px;
    margin: 0 auto;
}

.logo-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
}

/* Remove white background from logo container */
.logo-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
}

.mamba-logo {
    width: 98px; /* Reduced by 30% from 140px */
    height: 73.5px; /* Reduced by 30% from 105px */
    transition: all 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Header logo styling - cyan glowing snake with transparent background */
.header-logo-img {
    width: 98px;
    height: 73.5px;
    object-fit: contain;
    /* Apply cyan/neon color tint with glow */
    filter: brightness(0) 
            invert(1)
            sepia(1)
            saturate(5)
            hue-rotate(160deg)
            brightness(1.2)
            drop-shadow(0 0 15px rgba(10, 132, 255, 0.6)) 
            drop-shadow(0 0 25px rgba(48, 213, 200, 0.4));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo hover effects - enhanced glow */
.logo-icon:hover .header-logo-img {
    filter: brightness(0) 
            invert(1)
            sepia(1)
            saturate(5)
            hue-rotate(160deg)
            brightness(1.5)
            drop-shadow(0 0 25px rgba(10, 132, 255, 0.9)) 
            drop-shadow(0 0 35px rgba(48, 213, 200, 0.7))
            drop-shadow(0 0 45px rgba(94, 92, 230, 0.5));
    transform: scale(1.08) translateY(-2px);
}

/* Loading screen logo - larger with animated glow */
.loading-logo-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    /* Cyan/neon green gradient glow effect */
    filter: brightness(0) 
            invert(1)
            sepia(1)
            saturate(5)
            hue-rotate(160deg)
            brightness(1.2)
            drop-shadow(0 0 20px rgba(10, 132, 255, 0.6)) 
            drop-shadow(0 0 30px rgba(48, 213, 200, 0.4));
    animation: logoGlowPulse 3s ease-in-out infinite;
}

/* Pulsing glow animation for loading screen */
@keyframes logoGlowPulse {
    0%, 100% {
        filter: brightness(0) 
                invert(1)
                sepia(1)
                saturate(5)
                hue-rotate(160deg)
                brightness(1.2)
                drop-shadow(0 0 20px rgba(10, 132, 255, 0.6)) 
                drop-shadow(0 0 30px rgba(48, 213, 200, 0.4));
    }
    50% {
        filter: brightness(0) 
                invert(1)
                sepia(1)
                saturate(5)
                hue-rotate(160deg)
                brightness(1.5)
                drop-shadow(0 0 30px rgba(10, 132, 255, 0.9)) 
                drop-shadow(0 0 45px rgba(48, 213, 200, 0.7))
                drop-shadow(0 0 60px rgba(94, 92, 230, 0.5));
    }
}

.logo-text h1 {
    display: none; /* Hidden - using SVG logo only */
}

.logo-tagline {
    display: none; /* Hidden - using SVG logo only */
}

.nav-links {
    display: none; /* Hidden - only showing logo */
    list-style: none;
    gap: 3rem;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    text-transform: uppercase;
    overflow: hidden;
}

.nav-links a::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--cyan-primary);
    overflow: hidden;
    width: 0;
    transition: width 0.3s ease;
    text-shadow: none;
}

.nav-links a:hover::before {
    width: 100%;
}

.burger {
    display: none; /* Completely hidden */
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.burger span {
    width: 25px;
    height: 3px;
    background: var(--gradient-cyan);
    transition: all 0.3s ease;
    box-shadow: var(--glow-cyan);
}

/* ==== HERO SECTION ==== */
main {
    margin-top: 98px; /* Reduced by 30% from 140px for smaller header */
}

.hero {
    min-height: calc(100vh - 98px); /* Adjust for smaller header space */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #000000;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 2rem 0 2rem; /* Added top spacing */
    z-index: 10;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    display: none; /* Disable overlays to prevent dimming */
}

.neural-network {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, var(--cyan-primary), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--neon-green), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--plasma-purple), transparent),
        radial-gradient(1px 1px at 130px 80px, var(--cyan-secondary), transparent);
    background-repeat: repeat;
    background-size: 150px 150px;
    animation: neural-flow 20s linear infinite;
    opacity: 0;
}

@keyframes neural-flow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-150px, -150px); }
}

.data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(10, 132, 255, 0.1) 50%,
        transparent 100%
    );
    animation: data-flow 3s ease-in-out infinite alternate;
    opacity: 0;
}

@keyframes data-flow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.hero-content {
    text-align: left;
    z-index: 10;
}

.hero-video {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-animation {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 20px;
    display: block;
    object-fit: contain;
}

/* Ensure video element displays properly */
video.hero-animation {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Hide all video controls and play buttons */
video.hero-animation::-webkit-media-controls {
    display: none !important;
}

video.hero-animation::-webkit-media-controls-enclosure {
    display: none !important;
}

video.hero-animation::-webkit-media-controls-panel {
    display: none !important;
}

video.hero-animation::-webkit-media-controls-play-button {
    display: none !important;
}

video.hero-animation::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* Hide controls for other browsers */
video.hero-animation::-moz-media-controls {
    display: none !important;
}

video.hero-animation::--webkit-media-controls {
    display: none !important;
}

/* Hero badge removed */

@keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

.hero-title {
    font-size: 3.6rem; /* Reduced by 20% from 4.5rem */
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: titleReveal 1s ease-out forwards;
}

.title-line:nth-child(2) {
    animation-delay: 0.3s;
}

.title-line.highlight {
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

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

.hero-subtitle {
    font-size: 1.12rem; /* Reduced by 20% from 1.4rem */
    color: var(--text-secondary);
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.8s forwards;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-metrics {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.2s forwards;
}

.metric {
    text-align: left;
    position: relative;
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    text-shadow: none;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.metric-label {
    font-size: 0.64rem; /* Reduced by 20% from 0.8rem */
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

@keyframes numberGlow {
    0% { opacity: 1; }
    100% { opacity: 0.8; }
}

.hero-actions {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.6s forwards;
}

.cta-primary, .cta-secondary {
    position: relative;
    padding: 1rem 2.4rem; /* Reduced padding by 20% */
    border: none;
    border-radius: 8px;
    font-size: 0.8rem; /* Reduced by 20% from 1rem */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cta-primary {
    background: var(--gradient-neon);
    color: var(--neural-black);
    box-shadow: var(--glow-neon);
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(0, 180, 216, 0.8);
}

.cta-secondary {
    background: rgba(10, 132, 255, 0.05);
    color: var(--cyan-primary);
    border: 2px solid var(--cyan-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.3), inset 0 0 20px rgba(10, 132, 255, 0.05);
    position: relative;
    overflow: hidden;
}

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

.cta-secondary:hover::before {
    left: 100%;
}

.cta-secondary:hover {
    background: rgba(10, 132, 255, 0.15);
    box-shadow: 0 0 30px rgba(10, 132, 255, 0.6), inset 0 0 30px rgba(10, 132, 255, 0.1);
    transform: translateY(-2px);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.btn-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnScan 3s ease-in-out infinite;
}

@keyframes btnScan {
    0%, 70% { left: -100%; }
    100% { left: 100%; }
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--cyan-primary), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

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

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

/* ==== HOW MAMBA BUTTON WRAPPER ==== */
.how-mamba-btn-wrapper {
    text-align: center;
    margin-top: 4rem;
}

.how-mamba-btn-wrapper .cta-primary {
    font-weight: 791; /* 13% increase from 700 */
}

/* ==== SECTION 02 BUTTONS ==== */
.section-02-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
}

.section-02-buttons .cta-primary {
    font-weight: 791; /* 13% increase from 700 */
}

/* ==== SCROLL ANIMATIONS (Center Viewport Trigger) ==== */
.scroll-hidden {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Optional: Visual debug line (comment out in production) */
/*
body::before {
    content: '';
    position: fixed;
    top: 25%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    bottom: 25%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: none;
}
*/

/* Smooth entrance for cards */
.card.scroll-visible,
.scenario-card.scroll-visible,
.step-card.scroll-visible {
    animation: smoothSlideIn 0.8s ease-out forwards;
}

@keyframes smoothSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Feature blocks with stagger effect */
.feature-block.scroll-visible .feature-content {
    animation: fadeSlideLeft 0.8s ease-out 0.1s both;
}

.feature-block.scroll-visible .mobile-preview {
    animation: fadeSlideRight 0.8s ease-out 0.3s both;
}

@keyframes fadeSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==== CENTER VIEWPORT INDICATOR (Mobile Only) - DISABLED ==== */
.center-viewport-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    display: none !important; /* DISABLED - removed visual cursor on mobile */
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

/* Hide on desktop */
@media (min-width: 1025px) {
    .center-viewport-indicator {
        display: none !important;
    }
}

/* Center dot */
.indicator-dot {
    width: 8px;
    height: 8px;
    background: var(--cyan-primary);
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 10px var(--cyan-primary);
    z-index: 3;
}

/* Rotating ring */
.indicator-ring {
    width: 30px;
    height: 30px;
    border: 2px solid var(--cyan-primary);
    border-radius: 50%;
    position: absolute;
    opacity: 0.4;
    animation: rotateRing 3s linear infinite;
    border-top-color: transparent;
    border-right-color: transparent;
    z-index: 2;
}

@keyframes rotateRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulse effect */
.indicator-pulse {
    width: 60px;
    height: 60px;
    border: 2px solid var(--cyan-primary);
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    z-index: 1;
}

.pulse-active .indicator-pulse {
    animation: indicatorPulse 0.6s ease-out;
}

.pulse-active .indicator-dot {
    animation: dotPulse 0.6s ease-out;
}

@keyframes indicatorPulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
        box-shadow: 0 0 20px var(--cyan-primary);
    }
}

/* Center-focused effect (hover-like state for elements in center) */
.center-focused {
    transform: scale(1.02) !important;
    box-shadow: 0 10px 40px rgba(10, 132, 255, 0.3) !important;
    border-color: var(--cyan-primary) !important;
    transition: all 0.4s ease !important;
}

.feature-animation.center-focused {
    transform: scale(1.05) !important;
    box-shadow: 0 15px 50px rgba(10, 132, 255, 0.4) !important;
    filter: brightness(1.1);
}

.card.center-focused {
    transform: scale(1.03) translateY(-5px) !important;
    box-shadow: 0 20px 60px rgba(10, 132, 255, 0.4) !important;
}

.scenario-card.center-focused {
    border-radius: 25px;
    background: rgba(10, 132, 255, 0.03);
}

.scenario-card.center-focused .iphone-mockup img,
.scenario-card.center-focused .iphone-mockup picture {
    transform: scale(1.05);
    filter: brightness(1.1);
    transition: all 0.4s ease;
}

/* Enhanced mobile effects */
@media (max-width: 768px) {
    .center-focused {
        transform: scale(1.05) !important;
        box-shadow: 0 15px 50px rgba(10, 132, 255, 0.5) !important;
    }

    .feature-animation.center-focused {
        transform: scale(1.08) !important;
        box-shadow: 0 20px 60px rgba(10, 132, 255, 0.6) !important;
        filter: brightness(1.15);
    }

    .card.center-focused {
        transform: scale(1.05) translateY(-8px) !important;
        box-shadow: 0 25px 70px rgba(10, 132, 255, 0.5) !important;
    }

    .scenario-card.center-focused .iphone-mockup img,
    .scenario-card.center-focused .iphone-mockup picture {
        transform: scale(1.08);
        filter: brightness(1.15);
    }

    .step-card.center-focused {
        transform: scale(1.04) translateY(-5px) !important;
        box-shadow: 0 20px 60px rgba(10, 132, 255, 0.5) !important;
    }

    /* Make scroll animations smoother on mobile */
    .scroll-hidden {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
        transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .scroll-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Smoother center-focused transitions on mobile */
    .card.center-focused,
    .scenario-card.center-focused,
    .step-card.center-focused {
        transition: all 0.5s ease-out !important;
    }
}

/* ==== SECTION HEADERS ==== */
.section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-title {
    font-size: 3.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.title-number {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    color: var(--cyan-primary);
    opacity: 0.6;
}

.title-underline {
    width: 100px;
    height: 4px;
    background: var(--gradient-cyan);
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: var(--glow-cyan);
}

/* ==== TECH SECTION ==== */
.tech-section {
    padding: 8rem 0;
    background: #000000;
    position: relative;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
}

.tech-card {
    position: relative;
    background: #000000;
    border: 1px solid rgba(48, 54, 61, 0.95);
    border-radius: 16px;
    padding: 3rem;
    overflow: hidden;
    transition: all 0.5s ease;
}

.tech-card:hover {
    transform: translateY(-10px);
    border-color: var(--cyan-primary);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.card-icon {
    font-size: 3rem;
    filter: none;
}

.card-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cyan-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.card-content p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tech-stack {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tech-tag {
    padding: 0.5rem 1rem;
    background: rgba(10, 132, 255, 0.1);
    border: 1px solid var(--cyan-primary);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cyan-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.security-levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.security-level {
    padding: 1rem;
    background: var(--neural-elevated);
    border-left: 4px solid var(--neural-border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.security-level.active {
    border-left-color: var(--neon-green);
    color: var(--neon-green);
    background: rgba(0, 180, 216, 0.1);
    box-shadow: inset 0 0 20px rgba(0, 180, 216, 0.1);
}

.speed-indicator {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.speed-bar {
    width: 100%;
    height: 8px;
    background: var(--neural-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.speed-fill {
    height: 100%;
    width: 95%;
    background: var(--gradient-neon);
    border-radius: 4px;
    animation: speedPulse 2s ease-in-out infinite;
}

@keyframes speedPulse {
    0%, 100% { width: 85%; }
    50% { width: 98%; }
}

.speed-text {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--neon-green);
    text-align: center;
}

.card-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
    animation: cardScan 4s ease-in-out infinite;
}

@keyframes cardScan {
    0%, 80% { left: -100%; }
    100% { left: 100%; }
}

/* ==== FEATURES SECTION ==== */
.features-section {
    padding: 8rem 0;
    background: #000000;
}

.features-clean {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-block:nth-child(even) {
    grid-template-columns: 1fr 1fr;
    direction: rtl;
}

.feature-block:nth-child(even) > * {
    direction: ltr;
}

.feature-content {
    padding: 2rem 0;
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    display: block;
}

.feature-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.feature-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mobile-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

.feature-animation {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
    display: block;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
}

/* Video-specific styling */
video.feature-animation {
    background: #000;
    opacity: 1;
    visibility: visible;
}

/* Ensure smooth video playback */
video.feature-animation.video-to-webp {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.phone-frame {
    width: 390px; /* Increased by 30% from 300px */
    height: 780px; /* Increased by 30% from 600px */
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 45px; /* Increased by 30% from 35px */
    border: 2px solid rgba(10, 132, 255, 0.2);
    padding: 23px; /* Increased by 30% from 18px */
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(10, 132, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.phone-frame:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(2deg);
    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(10, 132, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 16px; /* Increased by 30% from 12px */
    left: 50%;
    transform: translateX(-50%);
    width: 65px; /* Increased by 30% from 50px */
    height: 4px; /* Increased by 30% from 3px */
    background: linear-gradient(90deg, transparent, #333, transparent);
    border-radius: 2px;
}

.phone-frame::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Increased by 30% from 8px */
    left: 50%;
    transform: translateX(-50%);
    width: 65px; /* Increased by 30% from 50px */
    height: 4px; /* Increased by 30% from 3px */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%);
    border-radius: 33px; /* Increased by 30% from 25px */
    padding: 1.95rem; /* Increased by 30% from 1.5rem */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    border: 1px solid rgba(10, 132, 255, 0.1);
    position: relative;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.app-header h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    text-shadow: none;
}

.refresh-btn {
    width: 32px;
    height: 32px;
    background: var(--neural-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan-primary);
    font-size: 1.2rem;
}

.add-btn {
    width: 32px;
    height: 32px;
    background: var(--gradient-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neural-black);
    font-size: 1.2rem;
    font-weight: bold;
}

.client-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.client-selector label {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-field {
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 8px;
    padding: 0.8rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

.metrics-card, .status-card {
    background: #000000;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(10, 132, 255, 0.4);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.metrics-card:hover, .status-card:hover {
    border-color: rgba(10, 132, 255, 0.3);
    transform: translateY(-2px);
}

.metrics-card h5, .status-card h5 {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.metric-row:last-child {
    margin-bottom: 0;
}

.metric-row span:first-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.metric-value.success {
    color: var(--neon-green);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-indicator.active {
    background: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
}

.status-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: auto;
}

.action-btn {
    padding: 0.8rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn.start {
    background: var(--gradient-neon);
    color: var(--neural-black);
}

.action-btn.stop {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-green);
}

.balance-section {
    text-align: center;
    padding: 1.5rem;
    background: var(--neural-surface);
    border-radius: 12px;
    border: 1px solid var(--neural-border);
    margin-bottom: 1rem;
}

.balance-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.balance-amount {
    color: var(--cyan-primary);
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.balance-change {
    font-size: 0.9rem;
    font-weight: 600;
}

.balance-change.positive {
    color: var(--neon-green);
}

.ea-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.status-item {
    background: var(--neural-surface);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--neural-border);
}

.status-item .label {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.status-item .value {
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 1rem;
}

.status-item .value.profit {
    color: var(--neon-green);
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.quick-btn {
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 8px;
    padding: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-btn:hover {
    border-color: var(--cyan-primary);
    color: var(--cyan-primary);
}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--neural-surface);
    border-radius: 8px;
    border: 1px solid var(--neural-border);
    transition: all 0.3s ease;
}

.account-item.active {
    border-color: var(--cyan-primary);
    background: rgba(0, 255, 255, 0.05);
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.account-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.account-balance {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.account-status {
    font-size: 1.5rem;
}

.account-status.running {
    color: var(--neon-green);
}

.account-status.stopped {
    color: var(--text-muted);
}

.account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: auto;
}

.account-btn {
    padding: 0.8rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.account-btn {
    background: var(--gradient-cyan);
    color: var(--neural-black);
}

.account-btn.secondary {
    background: transparent;
    color: var(--cyan-primary);
    border: 1px solid var(--cyan-primary);
}

.features-showcase {
    max-width: 1200px;
    margin: 0 auto;
}

.feature-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 1rem 2rem;
    background: transparent;
    border: 2px solid var(--neural-border);
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
    border-color: var(--cyan-primary);
    color: var(--cyan-primary);
    background: rgba(10, 132, 255, 0.1);
    box-shadow: var(--glow-cyan);
}

.feature-content {
    position: relative;
    min-height: 600px;
}

.feature-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s ease;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-panel.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}

.panel-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trading-dashboard {
    background: var(--neural-elevated);
    border: 1px solid var(--neural-border);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-neural);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.account-name {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-green);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.balance-display {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(10, 132, 255, 0.2);
}

.balance-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.balance-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--cyan-primary);
    text-shadow: none;
    margin-bottom: 0.5rem;
}

.balance-change {
    font-size: 1rem;
    color: var(--neon-green);
    font-weight: 600;
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.metric-item {
    background: var(--neural-surface);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--neural-border);
}

.metric-title {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.metric-val {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.metric-val.profit {
    color: var(--neon-green);
}

.trading-interface {
    background: var(--neural-elevated);
    border: 1px solid var(--neural-border);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

.pair-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.pair-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.pair-price {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--cyan-primary);
}

.pair-change.up {
    color: var(--neon-green);
    font-weight: 600;
}

.trade-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.trade-btn {
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trade-btn.buy {
    background: var(--gradient-neon);
    color: var(--neural-black);
}

.trade-btn.sell {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
}

.trade-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-item label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-item input {
    padding: 0.8rem;
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.world-map {
    position: relative;
    width: 400px;
    height: 300px;
    background: var(--neural-elevated);
    border: 1px solid var(--neural-border);
    border-radius: 16px;
    overflow: hidden;
}

.connection-nodes {
    position: relative;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transform: translate(-50%, -50%);
}

.node-pulse {
    width: 20px;
    height: 20px;
    background: var(--cyan-primary);
    border-radius: 50%;
    box-shadow: var(--glow-cyan);
    animation: nodePulse 2s infinite;
}

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

.node-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.accounts-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
}

.account-card {
    background: var(--neural-elevated);
    border: 1px solid var(--neural-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.account-card.active {
    border-color: var(--cyan-primary);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.account-type {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cyan-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.account-id {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.account-balance {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.account-status {
    font-size: 0.8rem;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-text h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-text p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
    font-size: 1.1rem;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.feature-list li::before {
    content: '→';
    color: var(--cyan-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

/* ==== INNOVATION SECTION ==== */
.innovation-section {
    padding: 4rem 0 8rem 0;
    background: #000000;
    position: relative;
    z-index: 1;
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 6rem;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cards .red {
    background: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
}

.cards .white {
    background: linear-gradient(135deg, #30D5C8 0%, #0A84FF 100%);
}

.cards .blue {
    background: linear-gradient(135deg, #5E5CE6 0%, #0A84FF 100%);
}

.cards .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 238px;
    width: 100%;
    max-width: 680px;
    border-radius: 20px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 400ms ease;
    padding: 2.125rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cards .card p.tip {
    font-size: 1.275rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.85rem;
    font-family: 'Open Sans', sans-serif;
}

.cards .card p.second-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 510px;
    font-family: 'Open Sans', sans-serif;
}

.cards .card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 60px rgba(10, 132, 255, 0.3);
}

.cards:hover > .card:not(:hover) {
    filter: blur(5px);
    transform: scale(0.95);
    opacity: 0.7;
}

.card-number {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--gradient-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--neural-black);
}

.innovation-card .card-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    filter: none;
}

.innovation-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.innovation-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.card-tech {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.card-tech span {
    padding: 0.3rem 0.8rem;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid var(--neon-green);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.innovation-showcase {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3.2rem;
    align-items: center;
    background: #000000;
    border-radius: 24px;
    padding: 3.2rem;
    border: 1px solid rgba(58, 58, 60, 0.45);
    position: relative;
    z-index: 2;
}

.showcase-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.6rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.showcase-content p {
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.8;
    margin-bottom: 2.4rem;
}

.transformation-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.transform-item {
    text-align: center;
}

.transform-number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--neon-green);
    text-shadow: none;
    margin-bottom: 0.4rem;
}

.transform-label {
    font-size: 0.64rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ==== MAMBA CASE SCENARIOS ==== */
.scenario-section {
    margin-top: 8rem;
    text-align: center;
}

.scenario-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.scenario-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
}

.scenario-cards {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin-top: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.scenario-card {
    display: grid;
    grid-template-columns: 312.5px 1fr;
    grid-template-areas: "ui caption";
    gap: 5rem;
    align-items: center;
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.5s ease-out;
}

.scenario-ui {
    grid-area: ui;
    perspective: 1000px;
    display: flex;
    justify-content: flex-start;
}

.scenario-caption {
    grid-area: caption;
    text-align: left;
    padding: 2rem;
}

.card-3d {
    height: 375px;
    width: 225px;
    background: transparent;
    box-shadow: rgba(0, 0, 0, 0.4) -12.5px 18.75px 12.5px;
    transform-style: preserve-3d;
    transform: none;
    border-radius: 15.625px;
    transition: transform 0.8s ease;
    overflow: hidden;
    padding: 7.5px;
}

.card-3d:hover {
}

/* Auto-tilt animation for mobile — disabled */

@keyframes card3dAutoTilt {
    0% {
        transform: perspective(1000px) rotateX(8deg) rotateY(-5deg) rotateZ(-3deg);
    }
    25% {
        transform: perspective(1000px) rotateX(5deg) rotateY(5deg) rotateZ(-2deg);
    }
    50% {
        transform: perspective(1000px) rotateX(10deg) rotateY(-3deg) rotateZ(-4deg);
    }
    75% {
        transform: perspective(1000px) rotateX(6deg) rotateY(3deg) rotateZ(-1deg);
    }
    100% {
        transform: perspective(1000px) rotateX(8deg) rotateY(-5deg) rotateZ(-3deg);
    }
}

.iphone-mockup {
    width: 100%;
    height: 100%;
    background: #000000;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 17, 20, 1);
}

.iphone-mockup img,
.iphone-mockup picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.scenario-caption h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scenario-caption p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

@media (max-width: 1024px) {
    .scenario-card {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .scenario-caption {
        text-align: center;
        padding: 1rem;
    }

    .card-3d {
        height: 300px;
        width: 180px;
        box-shadow: rgba(0, 0, 0, 0.4) -10px 15px 10px;
        border-radius: 12.5px;
        padding: 6px;
    }
}

.hologram-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    perspective: 1000px;
}

.hologram-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--cyan-primary);
    border-radius: 50%;
    animation: holoRotate 10s linear infinite;
}

.hologram-ring:nth-child(1) {
    width: 180px;
    height: 180px;
    animation-duration: 8s;
}

.hologram-ring:nth-child(2) {
    width: 140px;
    height: 140px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.hologram-ring:nth-child(3) {
    width: 100px;
    height: 100px;
    animation-duration: 6s;
}

@keyframes holoRotate {
    0% { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg); }
}

.hologram-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--gradient-neon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: coreFloat 3s ease-in-out infinite alternate;
}

@keyframes coreFloat {
    0% { transform: translate(-50%, -50%) translateZ(0px); }
    100% { transform: translate(-50%, -50%) translateZ(20px); }
}

.core-data {
    font-weight: 800;
    font-size: 1rem;
    color: var(--neural-black);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ==== ACCESS SECTION ==== */
.access-section {
    padding: 4rem 0 8rem 0;
    background: #000000;
}

.access-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.access-info h3 {
    font-size: 2.125rem;
    font-weight: 800;
    margin-bottom: 1.7rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: none;
}

.access-info p {
    color: #e6e6e6;
    font-size: 1.02rem;
    line-height: 1.8;
    margin-bottom: 2.55rem;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.step-card {
    position: relative;
    width: 100%;
    background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);
    border-radius: 20px;
    transition: all 0.25s cubic-bezier(0, 0, 0, 1);
    overflow: visible;
    padding: 2px;
}

.step-card:hover {
    box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);
}

.step-card-inner {
    position: relative;
    background-color: #1d1724;
    border-radius: 18px;
    transition: all 0.25s cubic-bezier(0, 0, 0, 1);
    padding: 2.125rem;
    cursor: pointer;
    color: white;
}

.step-card:hover .step-card-inner {
    transform: scale(0.98);
}

.step-glow {
    display: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1.275rem;
    margin-bottom: 1.275rem;
}

.step-number {
    font-size: 2.55rem;
    font-weight: 800;
    font-family: var(--font-mono);
    background: linear-gradient(135deg, #0A84FF 0%, #30D5C8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-icon {
    font-size: 2.55rem;
    filter: none;
    animation: floatIcon 3s ease-in-out infinite;
}

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

.step-card h4 {
    font-size: 1.19rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.85rem;
}

.step-card p {
    color: #c9d1d9;
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 1.275rem;
}

.step-features {
    list-style: none;
    padding: 0;
    margin: 1.275rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.68rem;
}

.step-features li {
    color: #e6e6e6;
    font-size: 0.765rem;
    padding: 0.425rem;
    background: rgba(10, 132, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid #0A84FF;
    transition: all 0.3s ease;
}

.step-features li:hover {
    background: rgba(10, 132, 255, 0.15);
    transform: translateX(5px);
    border-left-color: #30D5C8;
}

.step-btn {
    width: 100%;
    padding: 0.81rem 1.62rem;
    background: linear-gradient(135deg, #0A84FF 0%, #30D5C8 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.62px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.step-btn:visited {
    color: #ffffff;
}

.step-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(10, 132, 255, 0.5);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.step-btn:hover .btn-shine {
    left: 150%;
}

/* Secondary Step Button - Contrasting Outline Style */
a.step-btn-secondary,
.step-btn-secondary {
    width: 100% !important;
    padding: 0.81rem 1.62rem !important;
    background: transparent !important;
    background-color: rgba(10, 132, 255, 0.05) !important;
    border: 2px solid #0A84FF !important;
    border-radius: 12px !important;
    color: #0A84FF !important;
    font-size: 0.81rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.62px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    margin-top: 1rem !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.3),
                inset 0 0 30px rgba(10, 132, 255, 0.05) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

a.step-btn-secondary:hover,
.step-btn-secondary:hover {
    transform: translateY(-2px) scale(1.01) !important;
    background: rgba(10, 132, 255, 0.15) !important;
    border-color: #30D5C8 !important;
    color: #30D5C8 !important;
    box-shadow: 0 0 30px rgba(10, 132, 255, 0.5),
                0 0 50px rgba(48, 213, 200, 0.4),
                0 5px 25px rgba(0, 0, 0, 0.3),
                inset 0 0 50px rgba(10, 132, 255, 0.15) !important;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(10, 132, 255, 0.3), transparent);
    transition: left 0.7s ease;
}

a.step-btn-secondary:hover .btn-glow,
.step-btn-secondary:hover .btn-glow {
    left: 150%;
}

/* Animated border effect for secondary button */
a.step-btn-secondary::before,
.step-btn-secondary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #0A84FF, #30D5C8, #5E5CE6, #0A84FF);
    background-size: 400% 400%;
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: borderGlow 3s ease infinite;
}

a.step-btn-secondary:hover::before,
.step-btn-secondary:hover::before {
    opacity: 1;
}

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

a.step-btn-secondary span,
.step-btn-secondary span {
    color: inherit !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    transition: all 0.4s ease !important;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(48, 213, 200, 0.8), 
                    0 0 60px rgba(10, 132, 255, 0.7),
                    0 0 90px rgba(94, 92, 230, 0.6),
                    inset 0 0 40px rgba(48, 213, 200, 0.3);
    }
    50% {
        box-shadow: 0 0 45px rgba(48, 213, 200, 1), 
                    0 0 90px rgba(10, 132, 255, 0.9),
                    0 0 120px rgba(94, 92, 230, 0.8),
                    inset 0 0 50px rgba(48, 213, 200, 0.4);
    }
}

.download-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.store-btn {
    flex: 1;
    min-width: 136px;
    display: flex;
    align-items: center;
    gap: 0.68rem;
    padding: 0.68rem 1.02rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 50%, #1a1a1a 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 20px rgba(10, 132, 255, 0.2);
    position: relative;
    overflow: hidden;
}

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

.store-btn:hover::before {
    left: 100%;
}

.store-btn:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 50%, #2a2a2a 100%);
    border-color: rgba(10, 132, 255, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 0 30px rgba(10, 132, 255, 0.4);
}

.store-icon {
    width: 27.2px;
    height: 27.2px;
}

.store-icon svg {
    width: 100%;
    height: 100%;
}

.google-play .store-icon {
    color: #34A853;
}

.app-store .store-icon {
    color: #FFFFFF;
}

/* Coming Soon Toast */
.coming-soon-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.95), rgba(48, 213, 200, 0.95));
    color: #fff;
    padding: 1.5rem 3rem;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(10, 132, 255, 0.4);
    text-align: center;
}

.coming-soon-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.store-label {
    font-size: 0.5525rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.store-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: none;
}

.global-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.275rem;
    margin-top: 1.7rem;
    padding-top: 1.7rem;
    border-top: 2px solid rgba(10, 132, 255, 0.2);
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(10, 132, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(10, 132, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(10, 132, 255, 0.15);
    transform: scale(1.05);
}

.stat-number {
    font-size: 1.7rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #30D5C8;
    text-shadow: none;
    margin-bottom: 0.425rem;
}

.stat-label {
    font-size: 0.68rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-container {
    width: 100%;
    max-width: 500px;
    background: #000000,
                linear-gradient(145deg, transparent 35%, #0A84FF, #30D5C8) border-box;
    border: 2px solid transparent;
    padding: 32px 24px;
    font-size: 14px;
    font-family: inherit;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    border-radius: 16px;
    background-size: 200% 100%;
    animation: gradient 5s ease infinite;
}

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

.form-container button:active {
    scale: 0.95;
}

.form-container .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-container .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #c9d1d9;
    font-weight: 600;
    font-size: 12px;
}

.form-container .form-group input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    background-color: transparent;
    border: 1px solid #414141;
}

.form-container .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    resize: none;
    color: #fff;
    height: 96px;
    border: 1px solid #414141;
    background-color: transparent;
    font-family: inherit;
}

.form-container .form-group input::placeholder {
    opacity: 0.5;
}

.form-container .form-group input:focus {
    outline: 2px solid #0A84FF;
    outline-offset: 2px;
    border-color: #0A84FF;
}

.form-container .form-group textarea:focus {
    outline: 2px solid #0A84FF;
    outline-offset: 2px;
    border-color: #0A84FF;
}

.form-container .form-submit-btn {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;
    font-family: inherit;
    color: #fff;
    font-weight: 600;
    width: 40%;
    background: linear-gradient(135deg, #0A84FF 0%, #30D5C8 100%);
    border: 1px solid #0A84FF;
    padding: 12px 16px;
    font-size: inherit;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.form-container .form-submit-btn:hover {
    background: linear-gradient(135deg, #30D5C8 0%, #0A84FF 100%);
    border-color: #30D5C8;
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.5);
}

.btn-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: particleFlow 3s linear infinite;
    opacity: 0.5;
}

@keyframes particleFlow {
    0% { transform: translateX(-100%) translateY(-100%); }
    100% { transform: translateX(100%) translateY(100%); }
}

.form-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* ==== FOOTER ==== */
.footer {
    background: #000000;
    border-top: 1px solid rgba(48, 54, 61, 0.95);
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logo-cube.small {
    width: 30px;
    height: 30px;
}

.logo-cube.small .cube-face {
    width: 30px;
    height: 30px;
}

.logo-cube.small .cube-face.front { transform: rotateY(0deg) translateZ(15px); }
.logo-cube.small .cube-face.back { transform: rotateY(180deg) translateZ(15px); }
.logo-cube.small .cube-face.right { transform: rotateY(90deg) translateZ(15px); }
.logo-cube.small .cube-face.left { transform: rotateY(-90deg) translateZ(15px); }
.logo-cube.small .cube-face.top { transform: rotateX(90deg) translateZ(15px); }
.logo-cube.small .cube-face.bottom { transform: rotateX(-90deg) translateZ(15px); }

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-brand h3 {
    font-size: 1.65rem; /* Increased by 10% from 1.5rem */
    font-weight: 700;
    color: var(--cyan-primary);
    text-align: center;
}

.footer-brand p {
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: center;
}

.footer-links h4 {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.footer-links a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--cyan-primary);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--neural-border);
    text-align: center;
}

.footer-line {
    width: 100%;
    height: 2px;
    background: var(--gradient-cyan);
    margin-bottom: 1rem;
    opacity: 0.3;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 1200px) {
    .innovation-showcase {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .access-content {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

@media (max-width: 968px) {
    .nav-links {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: #000000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease;
        border-top: 1px solid var(--neural-border);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        padding: 1rem;
    }

    .burger {
        display: flex;
    }

    .hero-title {
        font-size: 3rem;
    }

    .metric-value { font-size: 1.05rem; }
    .metric-label { font-size: 0.58rem; letter-spacing: 0.5px; }

    .hero-metrics {
        /* One metric per row, matching the original hero design. This is
           taller than a wrapped row, which pushes the CTAs further down the
           first screen — accepted trade-off, see also .hero-video order. */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .feature-panel {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .transformation-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

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

@media (max-width: 768px) {
    main {
        margin-top: 70px;
    }

    .nav {
        padding: 0.8rem 1.5rem;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .hero-content {
        text-align: center;
        padding-right: 0;
        margin-top: 0;
    }

    .hero-video {
        /* Video leads on mobile, matching the original hero design. Note this
           pushes the headline, metrics and both CTAs further down the first
           screen — the trade-off is deliberate. */
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
    }

    .hero-animation {
        max-width: 100%;
        width: 90%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    video.hero-animation {
        width: 90%;
        max-width: 450px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .hero-metrics {
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin: 2rem 0;
    }

    .hero-actions {
        justify-content: center;
        margin-bottom: 2rem;
    }

    .metric {
        text-align: center;
        flex: 1 1 45%;
        min-width: 120px;
    }

    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .section-title {
        font-size: 2.2rem;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

    .feature-tabs {
        flex-direction: column;
        align-items: center;
    }

    .tab-btn {
        width: 100%;
        max-width: 300px;
    }

    .container {
        padding: 0 1.5rem;
    }

    .features-section {
        padding: 3rem 0 1rem 0;
    }

    .innovation-section {
        padding: 1rem 0 3rem 0;
    }

    .access-section {
        padding: 3rem 0;
    }

    /* Cards section - Revolutionary Innovation */
    .cards {
        gap: 2rem;
        padding: 0 1rem;
    }

    .cards .card {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 180px;
        padding: 2rem 1.5rem;
        box-sizing: border-box;
    }

    .cards .card p.tip {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .cards .card p.second-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Scenario section */
    .scenario-section {
        margin-top: 4rem;
        padding: 0 1rem;
    }

    .scenario-title {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }

    .scenario-subtitle {
        font-size: 1rem;
        margin-bottom: 3rem;
    }

    .scenario-cards {
        gap: 3rem;
    }

    .scenario-card {
        grid-template-columns: 1fr;
        grid-template-areas: "ui" "caption";
        gap: 2rem;
    }

    .scenario-ui {
        grid-area: ui;
        justify-content: center;
    }

    .card-3d {
        width: 100%;
        max-width: 300px;
        height: 420px;
        margin: 0 auto;
    }

    .scenario-caption {
        grid-area: caption;
        text-align: center;
        padding: 1rem;
        max-width: 100%;
    }

    .scenario-caption h4 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .scenario-caption p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Access section */
    .access-content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .access-info {
        margin-bottom: 2rem;
    }

    .access-info h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .access-info p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .steps-container {
        gap: 1.5rem;
    }

    .step-card {
        padding: 0;
    }

    .step-card-inner {
        padding: 1.8rem;
    }

    .step-header {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .step-number {
        font-size: 2rem;
    }

    .step-icon {
        font-size: 2rem;
    }

    .step-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .step-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .step-features {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        margin: 1rem 0;
    }

    .step-features li {
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    .step-btn {
        width: 100%;
        padding: 0.81rem;
        font-size: 0.729rem;
    }

    a.step-btn-secondary,
    .step-btn-secondary {
        width: 100% !important;
        padding: 0.81rem !important;
        font-size: 0.729rem !important;
    }

    .download-buttons {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .store-btn {
        min-width: 100%;
        width: 100%;
        padding: 1rem;
    }

    .global-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding-top: 1.5rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    /* Core Functionalities mobile videos */
    .features-clean {
        gap: 2px;
    }

    .feature-block {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
        direction: ltr !important;
    }

    .feature-block:nth-child(even) {
        direction: ltr !important;
    }

    .feature-content {
        text-align: center;
        padding: 0.5rem;
        order: 2;
    }

    .mobile-preview {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        order: 1;
    }

    .feature-animation {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        display: block !important;
        border-radius: 20px;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Ensure feature blocks with videos are always visible on mobile */
    .features-clean .feature-block {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: grid !important;
    }

    .features-clean .mobile-preview {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
    }

    /* Force all video elements to be visible */
    .features-clean video.feature-animation {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Override any scroll-hidden classes on mobile */
    .feature-block.scroll-hidden,
    .mobile-preview.scroll-hidden,
    video.feature-animation.scroll-hidden {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Disable center-focused effects on mobile for videos */
    .features-clean .feature-animation.center-focused {
        transform: none !important;
        box-shadow: none !important;
    }

    .features-clean .feature-block.scroll-visible,
    .features-clean .feature-block.scroll-hidden {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Form section */
    .access-form {
        margin-top: 3rem;
        padding: 0 1rem;
    }

    .form-container {
        max-width: 100%;
    }

    .form {
        padding: 0;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group textarea {
        font-size: 1rem;
        padding: 0.8rem;
    }

    .form-submit-btn {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }

    /* Footer */
    .footer {
        padding: 2rem 0;
    }

    .footer-bottom p {
        font-size: 0.75rem;
        line-height: 1.4;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    main {
        margin-top: 60px; /* Even smaller header on small mobile */
    }

    .nav {
        padding: 0.6rem 1rem; /* Further reduce nav padding on small mobile */
    }

    /* Mobile logo adjustments */
    .header-logo-img {
        width: 70px;
        height: 52.5px;
    }

    .loading-logo-img {
        width: 100px;
        height: 100px;
    }

    .hero {
        min-height: calc(100vh - 60px);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .metric-value {
        font-size: 1.05rem;
    }

    .cta-primary,
    .cta-secondary {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    .tech-card,
    .innovation-card {
        padding: 2rem;
    }

    .neural-form {
        padding: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .title-number {
        font-size: 1.2rem;
    }

    /* Cards */
    .cards .card {
        padding: 1.5rem 1rem;
    }

    .cards .card p.tip {
        font-size: 1rem;
    }

    .cards .card p.second-text {
        font-size: 0.75rem;
    }

    /* Scenario section */
    .scenario-title {
        font-size: 1.5rem;
    }

    .scenario-subtitle {
        font-size: 0.9rem;
    }

    .card-3d {
        max-width: 250px;
        height: 350px;
    }

    .scenario-caption h4 {
        font-size: 1.1rem;
    }

    .scenario-caption p {
        font-size: 0.85rem;
    }

    /* Access section */
    .access-info h3 {
        font-size: 1.5rem;
    }

    .step-number {
        font-size: 1.5rem;
    }

    .step-icon {
        font-size: 1.5rem;
    }

    .step-card h4 {
        font-size: 0.9rem;
    }

    .step-card p {
        font-size: 0.75rem;
    }

    .container {
        padding: 0 0.75rem;
    }
}

/* ==== ANIMATIONS & UTILITIES ==== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.loading-text::after {
    content: '|';
    animation: blink 1s infinite;
}

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

/* ==== IPHONE FRAME DESIGN ====*/
.iphone-frame {
    width: 280px;
    height: 560px;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 45px;
    padding: 8px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    position: relative;
    margin: 0 auto;
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.iphone-frame:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(2deg);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* iPhone Details */
.iphone-frame::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #333, transparent);
    border-radius: 3px;
}

.iphone-frame::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Home Indicator */
.iphone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* Screen Container */
.iphone-screen {
    width: 100%;
    height: 100%;
    background: #000000;
    border-radius: 37px;
    padding: 24px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(10, 132, 255, 0.4);
}

.iphone-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
}

/* Status Bar */
.iphone-status-bar {
    position: absolute;
    top: 8px;
    left: 16px;
    right: 16px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.signal-bars {
    display: flex;
    gap: 2px;
}

.signal-bar {
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 1px;
}

.signal-bar:nth-child(1) { height: 4px; }
.signal-bar:nth-child(2) { height: 6px; }
.signal-bar:nth-child(3) { height: 8px; }
.signal-bar:nth-child(4) { height: 10px; }

.battery {
    width: 24px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    position: relative;
}

.battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0 1px 1px 0;
}

.battery-fill {
    height: 100%;
    background: var(--neon-green);
    border-radius: 1px;
    width: 80%;
}

/* App Content Area */
.app-content {
    flex: 1;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.app-content::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* App Header Styling */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.app-header h4 {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    text-shadow: none;
}

/* ==== RESPONSIVE DESIGN FOR MOBILE MOCKUPS ==== */
@media (max-width: 968px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .iphone-frame {
        width: 260px;
        height: 520px;
        padding: 6px;
    }

    .iphone-screen {
        padding: 20px 12px 12px 12px;
    }

    .app-content {
        gap: 0.5rem;
    }

    .phone-frame {
        width: 260px;
        height: 520px;
        padding: 15px;
    }

    .phone-screen {
        padding: 1.2rem;
        gap: 0.8rem;
    }
}

@media (max-width: 768px) {
    .feature-block {
        padding: 1.5rem;
    }

    .iphone-frame {
        width: 240px;
        height: 480px;
        padding: 5px;
    }

    .iphone-screen {
        padding: 18px 10px 10px 10px;
    }

    .app-content {
        gap: 0.4rem;
    }

    .phone-frame {
        width: 240px;
        height: 480px;
        padding: 12px;
    }

    .phone-screen {
        padding: 1rem;
        gap: 0.6rem;
    }

    .app-header h4 {
        font-size: 0.8rem;
    }

    .metrics-card h5, .status-card h5 {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .feature-block {
        padding: 1rem;
        margin: 0 1rem;
    }

    .iphone-frame {
        width: 200px;
        height: 400px;
        padding: 4px;
        transform: none !important;
    }

    .iphone-frame:hover {
        transform: translateY(-3px) !important;
    }

    .iphone-screen {
        padding: 16px 8px 8px 8px;
        border-radius: 30px;
    }

    .app-content {
        gap: 0.3rem;
    }

    .phone-frame {
        width: 200px;
        height: 400px;
        padding: 10px;
        transform: none !important;
    }

    .phone-frame:hover {
        transform: translateY(-3px) !important;
    }

    .phone-screen {
        padding: 0.8rem;
        gap: 0.5rem;
        border-radius: 20px;
    }

    .app-header {
        margin-bottom: 0.5rem;
        padding-bottom: 0.3rem;
    }

    .metrics-card, .status-card {
        padding: 0.8rem;
        margin-bottom: 0.5rem;
    }
}

/* ==== ACCESSIBILITY - FOCUS VISIBLE ==== */
:focus-visible {
    outline: 2px solid var(--cyan-primary);
    outline-offset: 2px;
}

.cta-primary:focus-visible,
.cta-secondary:focus-visible,
.step-btn:focus-visible,
.step-btn-secondary:focus-visible,
.store-btn:focus-visible,
.form-submit-btn:focus-visible {
    outline: 2px solid var(--neon-green);
    outline-offset: 3px;
    box-shadow: 0 0 20px rgba(48, 213, 200, 0.5);
}

a:focus-visible {
    outline: 2px solid var(--cyan-primary);
    outline-offset: 2px;
}

/* ==== NEW MOBILE APP UI STYLES ==== */

/* Mode Selection UI */
.account-info-card {
    background: #000000;
    border-radius: 10px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.account-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-row .label {
    color: var(--text-secondary);
    font-size: 0.65rem;
}

.account-row .value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.65rem;
}

.account-row .value.balance {
    color: var(--neon-green);
}

.account-row .value.equity {
    color: var(--electric-blue);
}

.trading-modes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.mode-card {
    background: #000000;
    border-radius: 8px;
    padding: 0.6rem;
    border: 1px solid rgba(71, 85, 105, 0.5);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    transition: all 0.3s ease;
}

.mode-card.selected {
    border-color: var(--cyan-primary);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 58, 138, 0.2) 100%);
}

.mode-icon {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.mode-icon.growth {
    background: linear-gradient(135deg, var(--neon-green) 0%, var(--cyan-primary) 100%);
}

.mode-icon.scalping {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}

.mode-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mode-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.72rem;
}

.mode-desc {
    color: var(--text-muted);
    font-size: 0.6rem;
}

.selected-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: var(--neon-green);
    color: var(--neural-black);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.5rem;
    font-weight: 600;
}

.continue-btn {
    background: var(--electric-blue);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 0.6rem;
    font-weight: 600;
    font-size: 0.72rem;
    width: 100%;
    margin-top: 0.4rem;
}

/* V2 Settings UI */
.mode-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
}

.mode-icon-small {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.mode-icon-small.scalping {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}

.mode-text {
    display: flex;
    flex-direction: column;
}

.mode-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.72rem;
}

.account-label {
    color: var(--text-muted);
    font-size: 0.56rem;
}

.settings-container {
    background: #000000;
    border-radius: 10px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.section-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.64rem;
    margin-bottom: 0.8rem;
    text-align: center;
}

.input-group {
    margin-bottom: 0.6rem;
}

.input-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.input-icon {
    font-size: 0.64rem;
}

.input-label {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 500;
    flex: 1;
}

.info-icon {
    font-size: 0.56rem;
    opacity: 0.7;
}

.input-field input {
    width: 100%;
    background: #000000;
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 6px;
    padding: 0.5rem;
    color: var(--text-primary);
    font-size: 0.64rem;
    font-family: var(--font-mono);
}

.help-text {
    color: var(--text-muted);
    font-size: 0.56rem;
    margin-top: 0.2rem;
}

.send-params-btn {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 0.6rem;
    font-weight: 600;
    font-size: 0.72rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-icon {
    font-size: 0.72rem;
}

/* Login UI */
.login-header {
    text-align: center;
    margin-bottom: 0.8rem;
}

.app-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--electric-blue) 0%, var(--cyan-primary) 100%);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.96rem;
    margin: 0 auto 0.6rem auto;
}

.login-header h4 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.64rem;
}

.login-history {
    background: #000000;
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.history-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.history-icon {
    font-size: 0.64rem;
}

.history-text {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 500;
}

.history-items {
    max-height: 64px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.history-items::-webkit-scrollbar {
    display: none; /* WebKit */
}

.history-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

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

.history-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.history-account {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.64rem;
}

.history-server {
    color: var(--text-secondary);
    font-size: 0.56rem;
}

.history-date {
    color: var(--text-muted);
    font-size: 0.52rem;
}

.login-form {
    background: #000000;
    border-radius: 10px;
    padding: 0.8rem;
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.form-group {
    margin-bottom: 0.6rem;
}

.form-group label {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0.3rem;
}

.login-btn {
    background: var(--electric-blue);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 0.6rem;
    font-weight: 600;
    font-size: 0.72rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

/* Status indicators */
.status-dot, .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    display: inline-block;
}

.status-dot.online, .status-indicator.online {
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.status-indicator.active {
    background: var(--neon-green);
}

.status-indicator.live {
    background: var(--electric-blue);
}

/* Responsive adjustments for new components */
@media (max-width: 480px) {
    .mode-card {
        padding: 0.6rem;
        gap: 0.6rem;
    }

    .mode-icon {
        width: 28px;
        height: 28px;
        border-radius: 14px;
        font-size: 0.9rem;
    }

    .settings-container {
        padding: 0.8rem;
    }

    .input-group {
        margin-bottom: 0.6rem;
    }

    .login-form {
        padding: 0.8rem;
    }

    .form-group {
        margin-bottom: 0.6rem;
    }

    /* Loading screen mobile adjustments */
    .loading-logo .mamba-logo {
        width: 100px;
        height: 75px;
    }

    .loading-bar {
        width: 250px;
    }

    .loading-text {
        font-size: 0.7rem;
    }

    /* How Mamba Works page - Increase video phone frame size by 25% on mobile */
    .phone-frame {
        width: 325px; /* 25% increase from 260px mobile size */
        height: 650px; /* 25% increase from 520px mobile size */
    }

    /* Section 01 - Reduce h3 size by 50% on mobile */
    .features-section .feature-content h3 {
        font-size: 1rem; /* 50% reduction from 2rem */
    }

    /* How Mamba Work - Section 02 - Button size on mobile */
    .innovation-section .step-card .cta-primary {
        padding: 0.6rem 1.44rem; /* Scaled proportionally with font size */
        font-size: 0.6rem;
    }

    /* How Mamba button wrapper - Reduce spacing on mobile */
    .how-mamba-btn-wrapper {
        text-align: center;
        margin-top: 0.5rem; /* Minimal spacing for mobile */
    }

    /* Section 02 buttons - Stack vertically on mobile */
    .section-02-buttons {
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .section-02-buttons .cta-primary {
        width: 100%;
        max-width: 300px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .section-02-buttons .cta-primary span {
        text-align: center;
        flex: 1;
    }

    /* Mobile touch optimization - Instant tap response for all buttons */
    button,
    a.cta-primary,
    a.cta-secondary,
    .step-btn,
    .store-btn,
    .form-submit-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==== FLOATING TELEGRAM BUTTON ==== */
.floating-telegram {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.telegram-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.5);
    transition: all 0.3s ease;
    transform: scale(0);
    opacity: 0;
}

.telegram-fab.pop-in {
    animation: fabPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.telegram-fab.pulse-attention {
    animation: fabPulseAttention 1.5s ease-in-out;
}

@keyframes fabPopIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    80% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fabPulseAttention {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 136, 204, 0.5); transform: scale(1); }
    25% { box-shadow: 0 4px 40px rgba(0, 136, 204, 0.9), 0 0 0 12px rgba(0, 136, 204, 0.15); transform: scale(1.15); }
    50% { box-shadow: 0 4px 20px rgba(0, 136, 204, 0.5); transform: scale(1); }
    75% { box-shadow: 0 4px 40px rgba(0, 136, 204, 0.9), 0 0 0 12px rgba(0, 136, 204, 0.15); transform: scale(1.15); }
}

.telegram-fab svg {
    width: 26px;
    height: 26px;
}

.telegram-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 136, 204, 0.7);
}

.telegram-fab.active {
    background: linear-gradient(135deg, #006699 0%, #0088cc 100%);
    transform: rotate(45deg);
}

.telegram-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.telegram-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.telegram-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.telegram-option:hover {
    background: var(--neural-elevated);
    border-color: #0088cc;
    transform: translateX(-5px);
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.3);
}

.telegram-option svg {
    color: #0088cc;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .floating-telegram {
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        right: calc(1.5rem + env(safe-area-inset-right, 0px));
    }

    .telegram-fab {
        width: 50px;
        height: 50px;
    }

    .telegram-fab svg {
        width: 22px;
        height: 22px;
    }

    .telegram-option {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }
}

/* ==== MEMBER AREA PROMO POPUP ==== */
.promo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.promo-overlay.active {
    opacity: 1;
    visibility: visible;
}

.promo-popup {
    position: relative;
    background: linear-gradient(145deg, #111 0%, #1C1C1E 100%);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: 20px;
    padding: 2.75rem 2rem 2.25rem;
    text-align: center;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 0 60px rgba(10, 132, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.promo-overlay.active .promo-popup {
    transform: translateY(0) scale(1);
}

.promo-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.75rem;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    padding: 0.25rem;
}

.promo-close:hover {
    color: var(--cyan-primary);
}

.promo-logo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    object-fit: contain;
    /* Matches .header-logo-img / .loading-logo-img: the asset is a black
       snake on transparency, so it must be inverted before tinting. */
    filter: brightness(0)
            invert(1)
            sepia(1)
            saturate(5)
            hue-rotate(160deg)
            brightness(1.2)
            drop-shadow(0 0 14px rgba(10, 132, 255, 0.55))
            drop-shadow(0 0 24px rgba(48, 213, 200, 0.35));
}

.promo-popup h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.promo-popup p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.promo-cta {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: var(--gradient-neon);
    border: none;
    border-radius: 8px;
    color: var(--neural-black);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--glow-neon);
}

.promo-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(0, 180, 216, 0.8);
}

/* ---- Promo popup: dual CTA (app + member area) ----
   Which button is primary depends on the device: a phone can install the app,
   so that leads; a desktop cannot, so Member Area leads and the app button
   drops to an outline that jumps to the on-page store section. The platform
   comes from <html data-platform>, set by config.js. */
.promo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

.promo-actions .promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
}

.promo-cta svg { width: 17px; height: 17px; flex-shrink: 0; }
.promo-cta .icon-ios,
.promo-cta .icon-android { display: none; }
html[data-platform="ios"] .promo-cta .icon-ios { display: block; }
html[data-platform="android"] .promo-cta .icon-android { display: block; }
html[data-platform="ios"] .promo-cta .icon-generic,
html[data-platform="android"] .promo-cta .icon-generic { display: none; }

/* Outline (secondary) treatment. The :not([data-platform]) case covers the
   window before config.js runs, and the case where its script never loads. */
.promo-cta-outline,
html[data-platform="desktop"] .promo-cta-app,
html:not([data-platform]) .promo-cta-app {
    background: transparent;
    border: 2px solid var(--cyan-primary);
    color: var(--cyan-primary);
    box-shadow: none;
}

html[data-platform="desktop"] .promo-cta-app:hover,
html:not([data-platform]) .promo-cta-app:hover {
    background: rgba(10, 132, 255, 0.12);
    box-shadow: 0 0 24px rgba(10, 132, 255, 0.45);
}

/* On a phone the app becomes the primary action and Member Area steps back. */
html[data-platform="ios"] .promo-cta-member,
html[data-platform="android"] .promo-cta-member {
    background: transparent;
    border: 2px solid var(--cyan-primary);
    color: var(--cyan-primary);
    box-shadow: none;
}

html[data-platform="ios"] .promo-cta-member:hover,
html[data-platform="android"] .promo-cta-member:hover {
    background: rgba(10, 132, 255, 0.12);
    box-shadow: 0 0 24px rgba(10, 132, 255, 0.45);
}

html[data-platform="ios"] .promo-actions,
html[data-platform="android"] .promo-actions {
    flex-direction: column;
}

html[data-platform="ios"] .promo-cta-app,
html[data-platform="android"] .promo-cta-app { order: 1; }
html[data-platform="ios"] .promo-cta-member,
html[data-platform="android"] .promo-cta-member { order: 2; }

@media (max-width: 480px) {
    .promo-popup {
        padding: 2.5rem 1.25rem 1.75rem;
    }

    .promo-logo {
        width: 54px;
        height: 54px;
        margin-bottom: 1rem;
    }

    .promo-popup h2 {
        font-size: 1.2rem;
    }

    .promo-popup p {
        font-size: 0.8rem;
    }

    .promo-cta {
        padding: 0.8rem 2rem;
        font-size: 0.8rem;
    }
}

/* ==== CONTACT FORM STATUS MESSAGE ==== */
.form-status {
    display: none;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(48, 213, 200, 0.1);
    border: 1px solid rgba(48, 213, 200, 0.4);
    color: #30D5C8;
}

.form-status.error {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

/* ==== LEGAL / UTILITY PAGES ==== */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    /* Top padding clears the ~107px fixed header so the heading isn't hidden under it */
    padding: 130px 1.5rem 4rem;
    color: var(--text-secondary, #A1A1A6);
    line-height: 1.75;
}

.legal-page h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.legal-page .legal-updated {
    font-size: 0.8rem;
    color: var(--text-muted, #6E6E73);
    margin-bottom: 2.5rem;
    font-family: var(--font-mono, monospace);
}

.legal-page h2 {
    font-size: 1.15rem;
    color: #fff;
    margin: 2.25rem 0 0.75rem;
    letter-spacing: 0.5px;
}

.legal-page p,
.legal-page li {
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

.legal-page ul {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

.legal-page a {
    color: var(--cyan-primary, #0A84FF);
    text-decoration: none;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-page .legal-back {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 0.7rem 1.6rem;
    border: 1px solid var(--cyan-primary, #0A84FF);
    border-radius: 8px;
    color: var(--cyan-primary, #0A84FF);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==== 404 PAGE ==== */
.error-page {
    min-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Top padding clears the fixed header */
    padding: 130px 1.5rem 3rem;
}

.error-page .error-code {
    font-family: var(--font-mono, monospace);
    font-size: clamp(4rem, 15vw, 8rem);
    font-weight: 700;
    background: linear-gradient(135deg, #0A84FF 0%, #30D5C8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-page h1 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
}

.error-page p {
    color: var(--text-secondary, #A1A1A6);
    max-width: 420px;
    margin-bottom: 2rem;
}

/* ==== REDUCED MOTION (accessibility) ==== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Content pages: reduce header clearance as the fixed header shrinks on mobile */
@media (max-width: 768px) {
    .support-page,
    .legal-page {
        padding-top: 112px;
    }
    .error-page {
        min-height: calc(100vh - 112px);
        padding-top: 112px;
    }
}

@media (max-width: 480px) {
    .support-page,
    .legal-page {
        padding-top: 90px;
    }
    .error-page {
        min-height: calc(100vh - 90px);
        padding-top: 90px;
    }
}

/* ==== SUPPORT / CONTACT PAGE ==== */
.support-page {
    max-width: 960px;
    margin: 0 auto;
    /* Top padding clears the ~107px fixed header so the title isn't hidden under it */
    padding: 130px 1.5rem 4rem;
}

.support-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.support-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--text-primary);
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.support-hero p {
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 0.98rem;
}

.support-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

.support-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1.25rem;
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 16px;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.support-card:hover {
    transform: translateY(-4px);
    border-color: var(--cyan-primary);
    box-shadow: var(--glow-cyan);
}

.support-card-primary {
    border-color: rgba(10, 132, 255, 0.5);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08) 0%, var(--neural-surface) 60%);
}

.support-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(10, 132, 255, 0.12);
    color: var(--cyan-primary);
    margin-bottom: 0.5rem;
}

.support-card-primary .support-card-icon {
    background: var(--gradient-cyan);
    color: #fff;
}

.support-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.support-card-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.support-card-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.support-form-section {
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.support-form-section h2 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.support-form-section > p {
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

.support-form .form-group {
    margin-bottom: 1.25rem;
}

.support-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.support-form input,
.support-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--neural-black);
    border: 1px solid var(--neural-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-form input:focus,
.support-form textarea:focus {
    outline: none;
    border-color: var(--cyan-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.support-form textarea {
    resize: vertical;
    min-height: 120px;
}

.support-submit {
    width: 100%;
    padding: 0.95rem;
    background: var(--gradient-cyan);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.support-submit:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

.support-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.support-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

.support-note a {
    color: var(--cyan-primary);
    text-decoration: none;
}

.support-note a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .support-methods {
        grid-template-columns: 1fr;
    }
    .support-form-section {
        padding: 2rem 1.25rem;
    }
}
/* ==================================================================
   PLATFORM-AWARE APP DOWNLOAD
   config.js sets data-platform on <html> and adds .platform-ios /
   .platform-android to each [data-app-store-section]. On a phone we
   promote the store that can actually install the app and demote the
   other, rather than showing two equal-weight buttons where one is a
   dead end for that device.
   ================================================================== */

/* Matching store: primary, first in the stack. */
[data-app-store-section].platform-ios .store-btn.app-store,
[data-app-store-section].platform-android .store-btn.google-play {
    order: 1;
    flex: 1 1 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 26px rgba(10, 132, 255, 0.45);
    border-color: rgba(10, 132, 255, 0.85);
}

/* Non-matching store: kept available, visually demoted. */
[data-app-store-section].platform-ios .store-btn.google-play,
[data-app-store-section].platform-android .store-btn.app-store {
    order: 2;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    align-self: flex-start;
    padding: 0.45rem 0.8rem;
    gap: 0.45rem;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    opacity: 0.5;
}

[data-app-store-section].platform-ios .store-btn.google-play:hover,
[data-app-store-section].platform-android .store-btn.app-store:hover {
    opacity: 1;
}

[data-app-store-section].platform-ios .store-btn.google-play .store-icon svg,
[data-app-store-section].platform-android .store-btn.app-store .store-icon svg {
    width: 18px;
    height: 18px;
}

[data-app-store-section].platform-ios .store-btn.google-play .store-label,
[data-app-store-section].platform-android .store-btn.app-store .store-label {
    display: none;
}

[data-app-store-section].platform-ios .store-btn.google-play .store-name,
[data-app-store-section].platform-android .store-btn.app-store .store-name {
    font-size: 0.68rem;
    white-space: nowrap;
}

/* ==================================================================
   APP INSTALL BANNER
   Shown only where the device can install the app AND Apple's native
   Smart App Banner will not appear (Android, non-Safari iOS browsers,
   in-app webviews). The pre-paint gate in each page's <head> adds
   .has-app-banner to <html>; everything below keys off that class.

   The height is a fixed value rather than measured, so the offset
   reserved on <main> always matches the banner exactly and revealing
   it costs zero layout shift.
   ================================================================== */

:root {
    /* Measured header height. Not the same as main's margin-top, which
       is slightly smaller — app-banner.js re-measures at runtime so a
       future header change cannot silently reintroduce an overlap. */
    --header-h: 108px;
    --app-banner-h: 0px;
}

@media (max-width: 768px) { :root { --header-h: 100px; } }
@media (max-width: 480px) { :root { --header-h: 73px; } }

:root.has-app-banner { --app-banner-h: 64px; }
@media (max-width: 480px) { :root.has-app-banner { --app-banner-h: 58px; } }

.app-banner { display: none; }

/* Content clearance, applied ONLY when the banner is showing so desktop and
   iOS Safari keep their existing spacing untouched. Uses the true header
   height so main clears the header AND the banner. */
.has-app-banner main {
    margin-top: calc(var(--header-h) + var(--app-banner-h));
}

.has-app-banner .hero {
    min-height: calc(100vh - var(--header-h) - var(--app-banner-h));
}

.has-app-banner .app-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: var(--app-banner-h);
    box-sizing: border-box;
    padding: 0 0.85rem;
    /* Below the header (1000) so the header stays visually dominant, and far
       below the IB carousel modal and nav drawer which sit at 9998-10020. */
    z-index: 999;
    background: rgba(10, 10, 10, 0.98);
    border-bottom: 1px solid var(--neural-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* A long app name must never grow the bar into interstitial territory. */
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.25s ease;
}

/* Slides away with the hide-on-scroll header. Moving by its own height plus
   the header's is what actually clears the viewport — translateY(-100%)
   alone would park it behind the header instead. */
.has-app-banner .app-banner.hidden,
.has-app-banner .app-banner.app-banner-dismissed {
    transform: translateY(calc(-100% - var(--header-h)));
}

.has-app-banner .app-banner.app-banner-dismissed { opacity: 0; }

.app-banner-close {
    flex: 0 0 auto;
    width: 44px;                 /* WCAG 2.5.8 target size, next to a CTA */
    height: 44px;
    margin-left: -0.85rem;       /* hugs the edge without shrinking the target */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: #949494;              /* 4.5:1 on near-black; #666 is only ~3.6:1 */
    cursor: pointer;
}

.app-banner-close svg { width: 15px; height: 15px; }
.app-banner-close:hover,
.app-banner-close:focus-visible { color: #ffffff; }

.app-banner-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.app-banner-text {
    flex: 1 1 auto;
    min-width: 0;                /* lets the ellipsis actually engage */
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

.app-banner-title,
.app-banner-sub,
.app-banner-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-banner-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.app-banner-sub,
.app-banner-meta {
    font-size: 0.61rem;
    color: #949494;
    letter-spacing: 0.3px;
}

.app-banner-cta {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.9rem;
    border-radius: 100px;
    background: var(--gradient-neon, linear-gradient(135deg, #00d4ff, #0a84ff));
    color: #000000;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

/* At 400% zoom the viewport drops to ~145px tall. Keeping a promo bar there
   would fail Reflow (1.4.10) and Focus Not Obscured (2.4.11), so drop it. */
@media (max-height: 400px) {
    :root.has-app-banner { --app-banner-h: 0px; }
    .has-app-banner .app-banner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .has-app-banner .app-banner { transition: none; }
}

/* ==================================================================
   SITE-WIDE RISK NOTICE
   Forex convention: a risk warning appears on every page, not only
   where a full footer exists. Deliberately low-contrast-but-legible
   (4.5:1) so it is present without shouting.
   ================================================================== */
.risk-strip {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 2rem 2rem;
    border-top: 1px solid var(--neural-border);
    color: #949494;
    font-size: 0.72rem;
    line-height: 1.7;
    text-align: left;
}

.risk-strip strong { color: #c9c9c9; font-weight: 700; }

.risk-strip a {
    color: var(--cyan-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.risk-strip a:hover { color: var(--neon-green, #30d5c8); }

@media (max-width: 768px) {
    .risk-strip { padding: 1rem 1.25rem 1.75rem; font-size: 0.68rem; }
}

/* ==================================================================
   HEADER NAVIGATION
   The site previously shipped `.nav-links { display: none }` with the
   comment "Hidden - only showing logo", leaving no navigation at all.
   These rules come after that declaration and re-enable it.
   ================================================================== */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    /* Links sit after the logo but before the CTA, regardless of DOM order —
       the markup keeps the CTA earlier so it stays reachable if CSS fails. */
    order: 1;
    margin: 0 0 0 3rem;
    margin-right: auto;
    padding: 0;
    list-style: none;
}

.logo-left    { order: 0; }
.header-actions { order: 2; margin-left: 0; }
.nav-toggle   { order: 3; }

.nav-links li { list-style: none; }

.nav-links a {
    color: var(--text-secondary, #c9c9c9);
    font-family: var(--font-primary);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible { color: var(--cyan-primary); }

/* Hamburger — hidden until the drawer breakpoint. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* WCAG 2.5.8 target size */
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--text-primary, #fff);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 968px) {
    .nav-toggle { display: flex; }

    /* Anchored below the header AND the app banner when it is showing —
       both offsets already exist as custom properties. */
    .nav-links {
        position: fixed;
        top: calc(var(--header-h) + var(--app-banner-h));
        right: -100%;
        width: 100%;
        height: calc(100vh - var(--header-h) - var(--app-banner-h));
        height: calc(100dvh - var(--header-h) - var(--app-banner-h));
        margin: 0;
        padding: 2rem 1.5rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        background: #000000;
        border-top: 1px solid var(--neural-border);
        /* Under the header (1000) so the hamburger stays reachable, above
           the app banner (999) and page content. */
        z-index: 998;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    /* Off-screen alone left the three links focusable and in the
       accessibility tree, so a keyboard user tabbed into an invisible menu.
       visibility:hidden removes them from both; the delay lets the slide-out
       animation finish before they disappear. */
    .nav-links {
        visibility: hidden;
        transition: right 0.3s ease, visibility 0s linear 0.3s;
    }

    .nav-links.active {
        right: 0;
        visibility: visible;
        transition: right 0.3s ease, visibility 0s linear 0s;
    }

    .nav-links a {
        display: block;
        padding: 1.15rem 0.25rem;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--neural-border);
    }

    /* Drawer is fixed-position on mobile, so source order no longer matters;
       the CTA sits beside the hamburger. */
    .nav-links { order: 0; margin-right: 0; }
    .header-actions { order: 1; margin-left: auto; margin-right: 0.25rem; }
    .nav-toggle { order: 2; margin-left: 0; }
}

@media (max-width: 380px) {
    .header-actions .cta-secondary { padding: 0.45rem 0.7rem !important; font-size: 0.6rem !important; }
}

/* Introducing-Broker disclosure shown inline where the broker is introduced. */
.ib-note {
    display: block;
    margin-top: 0.85rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--neural-border);
    color: #949494;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Caption for the hero app screenshot. Any visible account figures must be
   labelled as illustrative so they cannot read as a performance claim. */
.hero-media-note {
    max-width: 34rem;
    margin: 1rem auto 0;
    color: #949494;
    font-size: 0.66rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-media-note { font-size: 0.62rem; padding: 0 1rem; }
}

/* Consent copy shown above the Create Account button. */
.form-consent {
    margin: 0 0 1rem;
    color: #949494;
    font-size: 0.72rem;
    line-height: 1.6;
}

.form-consent a { color: var(--cyan-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ==================================================================
   PRICING & FAQ
   The site previously never stated a price or how the business earns.
   For an IB-funded product that is the strongest available trust
   asset, so it gets its own section rather than a line in the terms.
   Uses native <details> so it works without JavaScript.
   ================================================================== */
.faq-section {
    padding: 6rem 0;
    background: #000000;
}

.faq-lead {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.faq-lead p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.faq-lead strong { color: var(--text-primary); }

.faq-list {
    max-width: 46rem;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--neural-border);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Comfortably above the 44px WCAG target size. */
    padding: 1.35rem 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--cyan-primary);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:hover,
.faq-item summary:focus-visible { color: var(--cyan-primary); }

.faq-item p {
    margin: 0;
    padding: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.75;
}

@media (max-width: 768px) {
    .faq-section { padding: 4rem 0; }
    .faq-item summary { font-size: 0.88rem; padding: 1.2rem 0; }
    .faq-item p { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item summary::after { transition: none; }
}

/* Who the company is, and explicitly what it is not. Forex sites are expected
   to state this; "not a broker / no client funds / not advice" is the honest
   and reassuring version for an IB-model operator. */
.footer-identity {
    margin-top: 1rem;
    max-width: 34rem;
    color: #949494;
    font-size: 0.72rem;
    line-height: 1.7;
}

.footer-identity strong { color: #c9c9c9; }


/* Footer risk warning on the marketing pages. Replaces a low-contrast,
   emoji-prefixed 90-word paragraph: a legally material notice should not be
   introduced by a cartoon, and #8E8E93 on black failed comfortable reading. */
/* Scoped to .footer-bottom: the bare `.footer-risk` selector loses to
   `.footer-bottom p`, which would drag colour back to --text-muted. */
.footer-bottom .footer-risk {
    max-width: 75ch;
    margin: 0;
    padding: 1.1rem 0 0 1.1rem;
    border-left: 3px solid #f0a020;
    color: #c9c9c9;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.footer-bottom .footer-risk strong { color: #ffffff; }
.footer-bottom .footer-risk a { color: var(--cyan-primary); text-decoration: underline; text-underline-offset: 2px; }

/* Registration consent. A ticked box is evidence; a paragraph is not.
   Selectors are scoped through .auth-form .form-group because login.html loads
   portal.css AFTER styles.css: portal.css's `.auth-form .form-group` (0,2,0)
   forced flex-direction:column, and its `.auth-form input { width:100% }` tied
   on specificity and won on order, stretching the checkbox to 348px. */
.auth-form .form-group.form-consent-row {
    display: flex;
    /* Explicit: portal.css sets column on .auth-form .form-group and this rule
       previously only set `display`, so the column direction still applied. */
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.25rem 0;
}

.auth-form .form-group.form-consent-row input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    accent-color: var(--cyan-primary);
}

.auth-form .form-group.form-consent-row label {
    color: #c9c9c9;
    font-size: 0.78rem;
    line-height: 1.6;
    /* portal.css uppercases and letter-spaces .auth-form label; consent text
       is a sentence, not a field label. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.auth-form .form-group.form-consent-row a { color: var(--cyan-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ==================================================================
   ICONOGRAPHY
   These slots previously held emoji (📱 🏦 🎯 …) sized by font-size.
   Emoji render differently on every OS, cannot inherit brand colour,
   and read as a prototype rather than a financial product. They are
   now inline stroke SVGs that inherit currentColor.
   ================================================================== */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.75rem;
    border: 1px solid var(--neural-border);
    border-radius: 14px;
    background: rgba(10, 132, 255, 0.06);
    color: var(--cyan-primary);
}

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

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Was font-size + a floatIcon animation, which no longer applies. */
    font-size: 0;
    border: 1px solid var(--neural-border);
    border-radius: 12px;
    background: rgba(10, 132, 255, 0.06);
    color: var(--cyan-primary);
    animation: none;
}

.step-icon svg { width: 22px; height: 22px; }

/* Inline markers beside strategy-parameter headings. */
h6 > svg,
h5 > svg,
.step-features svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: -2px;
}

@media (max-width: 768px) {
    .feature-icon { width: 48px; height: 48px; margin-bottom: 1.25rem; }
    .feature-icon svg { width: 23px; height: 23px; }
    .step-icon { width: 40px; height: 40px; }
    .step-icon svg { width: 20px; height: 20px; }
}

.param-icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.param-icon svg { width: 17px; height: 17px; }