/* 🚀 ULTIMATE PREMIUM DESIGN SYSTEM */

/* Advanced CSS Variables */
:root {
    --primary-blue: #0066ff;
    --primary-purple: #6366f1;
    --primary-cyan: #06b6d4;
    --success-green: #10b981;
    --warning-orange: #f59e0b;
    --error-red: #ef4444;
    --gold: #ffd700;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    --gradient-success: linear-gradient(135deg, var(--success-green), #22c55e);
    --gradient-tech: linear-gradient(135deg, var(--primary-cyan), var(--primary-blue));
    --gradient-gold: linear-gradient(135deg, var(--gold), #f59e0b);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.25);
    
    /* Tech Effects */
    --glow-primary: 0 0 20px rgba(102, 102, 255, 0.5);
    --glow-success: 0 0 20px rgba(16, 185, 129, 0.5);
    --glow-warning: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* 🎯 ULTIMATE NAVIGATION */
.navbar-ultimate {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* 🌟 REVOLUTIONARY PREMIUM LOGO */
.nav-logo-revolutionary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 15px 25px;
    border-radius: 25px;
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.1), 
        rgba(99, 102, 241, 0.1), 
        rgba(6, 182, 212, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
}

.nav-logo-revolutionary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 102, 255, 0.3),
        0 0 100px rgba(99, 102, 241, 0.2);
    border-color: rgba(0, 102, 255, 0.5);
}

/* 3D Holographic Container */
.logo-hologram-container {
    position: relative;
    width: 80px;
    height: 80px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Quantum Energy Field */
.quantum-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.energy-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #00ffff, #0066ff);
    border-radius: 50%;
    box-shadow: 0 0 10px #00ffff;
    animation: quantumFloat 4s ease-in-out infinite;
}

.energy-particle.p-1 { top: 10%; left: 20%; animation-delay: 0s; }
.energy-particle.p-2 { top: 30%; right: 15%; animation-delay: 0.7s; }
.energy-particle.p-3 { bottom: 25%; left: 30%; animation-delay: 1.4s; }
.energy-particle.p-4 { bottom: 15%; right: 25%; animation-delay: 2.1s; }
.energy-particle.p-5 { top: 50%; left: 10%; animation-delay: 2.8s; }
.energy-particle.p-6 { top: 60%; right: 10%; animation-delay: 3.5s; }

@keyframes quantumFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6; 
        box-shadow: 0 0 10px #00ffff;
    }
    25% { 
        transform: translate(10px, -15px) scale(1.2); 
        opacity: 1; 
        box-shadow: 0 0 20px #00ffff;
    }
    50% { 
        transform: translate(-5px, 20px) scale(0.8); 
        opacity: 0.8; 
        box-shadow: 0 0 15px #0066ff;
    }
    75% { 
        transform: translate(15px, 5px) scale(1.1); 
        opacity: 0.9; 
        box-shadow: 0 0 25px #6366f1;
    }
}

/* 3D Logo Core */
.logo-core-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    transform-style: preserve-3d;
    animation: coreRotate3D 20s linear infinite;
}

@keyframes coreRotate3D {
    0% { transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); }
    25% { transform: translate(-50%, -50%) rotateY(90deg) rotateX(15deg); }
    50% { transform: translate(-50%, -50%) rotateY(180deg) rotateX(0deg); }
    75% { transform: translate(-50%, -50%) rotateY(270deg) rotateX(-15deg); }
    100% { transform: translate(-50%, -50%) rotateY(360deg) rotateX(0deg); }
}

/* Rotating Rings */
.logo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
}

.ring-outer {
    width: 70px;
    height: 70px;
    transform: translate(-50%, -50%);
    animation: ringRotateOuter 15s linear infinite;
}

.ring-middle {
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    animation: ringRotateMiddle 12s linear infinite reverse;
}

.ring-inner {
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    animation: ringRotateInner 8s linear infinite;
}

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

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

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

.ring-segment {
    position: absolute;
    width: 8px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    border-radius: 2px;
    transform-origin: center;
}

.ring-outer .seg-1 { top: 0; left: 50%; transform: translateX(-50%); }
.ring-outer .seg-2 { top: 50%; right: 0; transform: translateY(-50%); }
.ring-outer .seg-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.ring-outer .seg-4 { top: 50%; left: 0; transform: translateY(-50%); }

.ring-middle .seg-1 { top: 0; left: 50%; transform: translateX(-50%); }
.ring-middle .seg-2 { top: 50%; right: 0; transform: translateY(-50%); }
.ring-middle .seg-3 { bottom: 0; left: 50%; transform: translateX(-50%); }

.ring-inner .seg-1 { top: 0; left: 50%; transform: translateX(-50%); }
.ring-inner .seg-2 { bottom: 0; left: 50%; transform: translateX(-50%); }

/* Central Quantum Icon */
.logo-icon-quantum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    z-index: 10;
}

.icon-core {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0066ff, #6366f1, #00ffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 
        0 0 20px rgba(0, 102, 255, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: iconQuantumPulse 3s ease-in-out infinite;
}

@keyframes iconQuantumPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 20px rgba(0, 102, 255, 0.8),
            inset 0 0 20px rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 
            0 0 40px rgba(0, 102, 255, 1),
            0 0 60px rgba(0, 255, 255, 0.5),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }
}

.quantum-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent);
    animation: quantumGlowPulse 2s ease-in-out infinite alternate;
}

@keyframes quantumGlowPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.4); opacity: 0.2; }
}

/* Orbiting Data Nodes */
.data-orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: orbitRotation 8s linear infinite;
}

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

.orbit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ffff;
}

.node-1 { top: 10%; left: 50%; transform: translateX(-50%); }
.node-2 { top: 50%; right: 10%; transform: translateY(-50%); }
.node-3 { bottom: 10%; left: 50%; transform: translateX(-50%); }

.node-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #00ffff;
    border-radius: 50%;
    animation: nodePulsation 2s ease-in-out infinite;
}

@keyframes nodePulsation {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2); opacity: 0; }
}

/* Neural Network Connections */
.neural-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connection-line {
    position: absolute;
    background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.6), transparent);
    border-radius: 1px;
    animation: neuralFlow 3s ease-in-out infinite;
}

.line-1 {
    top: 20%;
    left: 20%;
    width: 60%;
    height: 1px;
    transform: rotate(45deg);
    animation-delay: 0s;
}

.line-2 {
    top: 50%;
    left: 10%;
    width: 80%;
    height: 1px;
    animation-delay: 0.75s;
}

.line-3 {
    top: 30%;
    left: 30%;
    width: 40%;
    height: 1px;
    transform: rotate(-45deg);
    animation-delay: 1.5s;
}

.line-4 {
    top: 70%;
    left: 20%;
    width: 60%;
    height: 1px;
    transform: rotate(30deg);
    animation-delay: 2.25s;
}

@keyframes neuralFlow {
    0%, 100% { opacity: 0; transform: scaleX(0) var(--rotation, rotate(0deg)); }
    50% { opacity: 1; transform: scaleX(1) var(--rotation, rotate(0deg)); }
}

/* Holographic Scan Lines */
.hologram-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
}

.scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
    animation: hologramScan 4s ease-in-out infinite;
}

.scanline.s-1 { animation-delay: 0s; }
.scanline.s-2 { animation-delay: 1.3s; }
.scanline.s-3 { animation-delay: 2.6s; }

@keyframes hologramScan {
    0%, 100% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Premium 3D Text */
.logo-text-revolutionary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 20;
}

.text-container-3d {
    display: flex;
    align-items: baseline;
    gap: 5px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.text-main-3d {
    display: flex;
    gap: 2px;
}

.letter-3d {
    display: inline-block;
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff, #e2e8f0, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 rgba(0, 102, 255, 0.3),
        0 3px 0 rgba(0, 102, 255, 0.2),
        0 4px 0 rgba(0, 102, 255, 0.1),
        0 5px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: letter3DFloat 6s ease-in-out infinite;
}

.letter-3d.e { animation-delay: 0s; }
.letter-3d.f { animation-delay: 0.2s; }
.letter-3d.l { animation-delay: 0.4s; }
.letter-3d.o { animation-delay: 0.6s; }
.letter-3d.w { animation-delay: 0.8s; }

@keyframes letter3DFloat {
    0%, 100% { 
        transform: translateY(0) rotateX(0deg); 
        filter: brightness(1);
    }
    50% { 
        transform: translateY(-3px) rotateX(5deg); 
        filter: brightness(1.2);
    }
}

.nav-logo-revolutionary:hover .letter-3d {
    transform: translateY(-2px) rotateX(10deg) rotateY(5deg);
    filter: brightness(1.3);
    text-shadow: 
        0 2px 0 rgba(255, 255, 255, 0.6),
        0 4px 0 rgba(0, 102, 255, 0.4),
        0 6px 0 rgba(0, 102, 255, 0.3),
        0 8px 0 rgba(0, 102, 255, 0.2),
        0 10px 20px rgba(0, 0, 0, 0.4);
}

.text-domain-3d {
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin-left: 3px;
}

.domain-dot {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #00ffff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: dotPulse 2s ease-in-out infinite;
}

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

.domain-text {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(99, 102, 241, 0.5);
}

/* Dynamic Tagline */
.tagline-dynamic {
    position: relative;
    margin-top: 5px;
}

.tagline-text {
    display: flex;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tagline-word {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    animation: taglineGlow 4s ease-in-out infinite;
}

.tagline-word:nth-child(1) { animation-delay: 0s; }
.tagline-word:nth-child(2) { animation-delay: 0.5s; }
.tagline-word:nth-child(3) { animation-delay: 1s; }

@keyframes taglineGlow {
    0%, 100% { 
        color: rgba(255, 255, 255, 0.8); 
        text-shadow: none;
    }
    50% { 
        color: #00ffff; 
        text-shadow: 0 0 10px #00ffff;
    }
}

.tagline-underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1px;
    background: linear-gradient(90deg, #00ffff, #0066ff, #6366f1);
    animation: underlineExpand 4s ease-in-out infinite;
}

@keyframes underlineExpand {
    0%, 100% { width: 0%; }
    50% { width: 100%; }
}

/* Live Stats Badge */
.live-stats-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    margin-top: 8px;
}

.stats-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #00ffff;
    text-transform: uppercase;
}

.indicator-dot {
    width: 4px;
    height: 4px;
    background: #00ffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #00ffff;
    animation: liveDotPulse 1.5s ease-in-out infinite;
}

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

.stats-content {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.stat-number {
    font-size: 12px;
    font-weight: 900;
    color: white;
}

.stat-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* Quantum Aura Effect */
.quantum-aura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.aura-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.2);
    animation: auraExpansion 6s ease-in-out infinite;
}

.aura-layer.layer-1 {
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.aura-layer.layer-2 {
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    animation-delay: 2s;
}

.aura-layer.layer-3 {
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    animation-delay: 4s;
}

@keyframes auraExpansion {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.3; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.1; 
    }
}

/* Logo Hover State */
.nav-logo-revolutionary:hover .logo-core-3d {
    animation-play-state: paused;
    transform: translate(-50%, -50%) rotateY(45deg) rotateX(15deg) scale(1.1);
}

.nav-logo-revolutionary:hover .energy-particle {
    animation-duration: 2s;
    box-shadow: 0 0 15px #00ffff;
}

.nav-logo-revolutionary:hover .quantum-glow {
    transform: scale(1.6);
    opacity: 0.4;
}

.nav-logo-revolutionary:hover .aura-layer {
    animation-duration: 3s;
    border-color: rgba(0, 255, 255, 0.4);
}

/* Mobile Responsive Logo */
@media (max-width: 768px) {
    .nav-logo-revolutionary {
        gap: 15px;
        padding: 12px 20px;
    }
    
    .logo-hologram-container {
        width: 60px;
        height: 60px;
    }
    
    .logo-core-3d {
        width: 50px;
        height: 50px;
    }
    
    .icon-core {
        font-size: 16px;
    }
    
    .letter-3d {
        font-size: 24px;
    }
    
    .domain-dot {
        font-size: 24px;
    }
    
    .domain-text {
        font-size: 18px;
    }
    
    .tagline-text {
        font-size: 9px;
    }
    
    .live-stats-badge {
        padding: 4px 8px;
    }
    
    .stat-number {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .nav-logo-revolutionary {
        gap: 12px;
        padding: 10px 15px;
    }
    
    .logo-hologram-container {
        width: 50px;
        height: 50px;
    }
    
    .logo-core-3d {
        width: 40px;
        height: 40px;
    }
    
    .icon-core {
        font-size: 14px;
    }
    
    .letter-3d {
        font-size: 20px;
    }
    
    .domain-dot,
    .domain-text {
        font-size: 16px;
    }
    
    .tagline-dynamic {
        display: none; /* Hide on very small screens */
    }
    
    .live-stats-badge {
        padding: 3px 6px;
    }
    
    .stats-content {
        gap: 1px;
    }
    
    .stat-number {
        font-size: 9px;
    }
    
    .stat-label {
        font-size: 7px;
    }
}

.nav-container-ultimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;
    position: relative;
}

/* Premium Logo Ultimate */
.nav-logo-ultimate {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    padding: 10px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(102, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.nav-logo-ultimate:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
    border-color: rgba(102, 102, 255, 0.4);
}

.logo-tech-frame {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.grid-dot {
    width: 4px;
    height: 4px;
    background: var(--gradient-tech);
    border-radius: 50%;
    opacity: 0.6;
    animation: gridPulse 2s ease-in-out infinite;
}

.grid-dot:nth-child(1) { animation-delay: 0s; }
.grid-dot:nth-child(2) { animation-delay: 0.5s; }
.grid-dot:nth-child(3) { animation-delay: 1s; }
.grid-dot:nth-child(4) { animation-delay: 1.5s; }

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

.logo-icon-ultimate {
    position: relative;
    z-index: 2;
    font-size: 32px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(102, 102, 255, 0.4));
}

.icon-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid rgba(102, 102, 255, 0.3);
    border-radius: 50%;
    animation: pulseRing 3s ease-in-out infinite;
}

@keyframes pulseRing {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.icon-data-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.data-bit {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-cyan);
    border-radius: 50%;
    animation: dataFlow 2s linear infinite;
}

.data-bit:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.data-bit:nth-child(2) {
    top: 50%;
    right: 15%;
    animation-delay: 0.7s;
}

.data-bit:nth-child(3) {
    bottom: 20%;
    left: 60%;
    animation-delay: 1.4s;
}

@keyframes dataFlow {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

.logo-text-ultimate {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-main {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.logo-domain {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-tech);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-tagline {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.logo-shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: logoShine 4s ease-in-out infinite;
}

@keyframes logoShine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* Advanced Navigation Links */
.nav-links-ultimate {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 50px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link-ultimate {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 50px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-link-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50px;
    z-index: -1;
}

.nav-link-ultimate:hover::before,
.nav-link-ultimate.active::before {
    opacity: 1;
}

.nav-link-ultimate:hover,
.nav-link-ultimate.active {
    color: white;
    transform: translateY(-1px);
}

.link-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.nav-link-ultimate:hover .link-icon {
    transform: scale(1.1);
}

.link-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: var(--gradient-primary);
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.4s ease;
    z-index: -2;
}

.nav-link-ultimate:hover .link-glow {
    opacity: 0.3;
}

/* Ultimate Mobile Toggle */
.nav-toggle-ultimate {
    display: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    position: relative;
}

.nav-toggle-ultimate:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.hamburger-ultimate {
    position: relative;
    width: 24px;
    height: 18px;
}

.line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.line-1 { top: 0; }
.line-2 { top: 50%; transform: translateY(-50%); }
.line-3 { bottom: 0; }

.nav-toggle-ultimate.active .line-1 {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle-ultimate.active .line-2 {
    opacity: 0;
}

.nav-toggle-ultimate.active .line-3 {
    transform: rotate(-45deg) translate(6px, -6px);
}

.hamburger-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: var(--gradient-primary);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s ease;
    z-index: -1;
}

.nav-toggle-ultimate:hover .hamburger-glow {
    opacity: 0.3;
}

/* Live Status Bar */
.status-bar-ultimate {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 197, 94, 0.1));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 30px;
    display: flex;
    justify-content: center;
    gap: 40px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

.status-indicator.online {
    background: var(--success-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-indicator.processing {
    background: var(--warning-orange);
    animation: statusBlink 1s ease-in-out infinite;
}

.status-indicator.speed {
    background: var(--primary-cyan);
    animation: statusSpin 3s linear infinite;
}

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

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

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

/* 🌟 HERO ULTIMATE */
.hero-ultimate {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero);
    color: white;
    text-align: center;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 60px;
}

/* Advanced Background */
.hero-background-ultimate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tech-grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: gridFlow 8s ease-in-out infinite;
}

.grid-line.horizontal {
    width: 100%;
    height: 1px;
    animation: gridFlowHorizontal 8s ease-in-out infinite;
}

.grid-line.vertical {
    width: 1px;
    height: 100%;
    animation: gridFlowVertical 8s ease-in-out infinite;
}

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

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

/* Floating Tech Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tech-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    animation: orbFloat 15s ease-in-out infinite;
}

.orb-1 { top: 20%; left: 10%; animation-delay: 0s; }
.orb-2 { top: 60%; right: 15%; animation-delay: -5s; }
.orb-3 { bottom: 30%; left: 20%; animation-delay: -10s; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -20px) rotate(120deg); }
    66% { transform: translate(-20px, 30px) rotate(240deg); }
}

.orb-core {
    width: 40px;
    height: 40px;
    background: var(--gradient-tech);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--glow-primary);
}

.orb-ring {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(102, 102, 255, 0.3);
    border-radius: 50%;
    animation: orbRotate 10s linear infinite;
}

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

/* Data Flow Animation */
.data-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.data-stream {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--primary-cyan), transparent);
    animation: streamFlow 3s ease-in-out infinite;
}

.stream-1 {
    left: 30%;
    animation-delay: 0s;
}

.stream-2 {
    left: 60%;
    animation-delay: 1s;
}

.stream-3 {
    left: 80%;
    animation-delay: 2s;
}

@keyframes streamFlow {
    0% { top: -100px; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.4) 0%, 
        rgba(102, 102, 255, 0.1) 30%,
        rgba(99, 102, 241, 0.1) 70%,
        rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
}

/* Hero Content Ultimate */
.hero-content-ultimate {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Premium Status Badge */
.status-badge-ultimate {
    margin-bottom: 0;
}

.badge-tech-frame {
    display: inline-block;
    position: relative;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.frame-corners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
}

.corner-tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.corner-tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.corner-br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

.badge-content {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.badge-icon-ultimate {
    position: relative;
    font-size: 24px;
    color: var(--gold);
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
}

.crown-sparkle {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

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

.badge-text-ultimate {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.badge-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.badge-verification {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--success-green);
    font-size: 12px;
    font-weight: 600;
}

/* Ultimate Title */
.hero-title-ultimate-new {
    margin-bottom: 0;
    text-align: center;
}

.title-ultimate {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 40px;
    text-align: center;
}

.title-main {
    display: block;
    margin-bottom: 10px;
}

.word {
    display: inline-block;
    margin-right: 20px;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.title-highlight {
    display: block;
    margin-bottom: 15px;
    position: relative;
}

.highlight-number {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.5));
    position: relative;
}

.highlight-number::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: var(--gradient-gold);
    border-radius: 2px;
    animation: highlightGlow 2s ease-in-out infinite alternate;
}

@keyframes highlightGlow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

.highlight-unit {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    margin-left: 15px;
}

.title-sub {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Advanced Trust Metrics */
.trust-metrics-ultimate {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    flex-wrap: wrap;
    width: 100%;
}

.metric-ultimate {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 25px 30px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 280px;
}

.metric-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.metric-ultimate:hover::before {
    opacity: 1;
}

.metric-ultimate:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.metric-icon-ultimate {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.metric-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: metricPulse 3s ease-in-out infinite;
}

@keyframes metricPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.metric-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.metric-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    line-height: 1;
}

.metric-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.metric-change {
    font-size: 0.8rem;
    color: var(--success-green);
    font-weight: 600;
}

/* Technology Showcase Hero */
.technology-showcase-hero {
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 24px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 1000px;
}

.tech-header {
    text-align: center;
    margin-bottom: 40px;
}

.tech-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tech-header p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

.tech-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.tech-feature {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.tech-feature:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tech-icon-ultimate {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--gradient-tech);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

/* Tech Icon Animations */
.icon-neural-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.neural-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: neuralPulse 2s ease-in-out infinite;
}

.neural-dot:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.neural-dot:nth-child(2) { top: 30%; right: 25%; animation-delay: 0.7s; }
.neural-dot:nth-child(3) { bottom: 25%; left: 30%; animation-delay: 1.4s; }

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

.icon-signal-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wave {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-radius: 50%;
    opacity: 0;
    animation: waveExpand 2s ease-out infinite;
}

.wave-1 { animation-delay: 0s; }
.wave-2 { animation-delay: 0.7s; }
.wave-3 { animation-delay: 1.4s; }

@keyframes waveExpand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.icon-security-scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, white, transparent);
    animation: securityScan 3s ease-in-out infinite;
}

@keyframes securityScan {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}

.icon-boost-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.boost-trail {
    position: absolute;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, white);
    animation: boostTrail 1.5s ease-out infinite;
}

@keyframes boostTrail {
    0% { transform: translate(-50%, -50%) translateX(-40px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateX(40px); opacity: 0; }
}

.tech-feature h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.tech-feature p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Ultimate CTA */
.hero-cta-ultimate {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.cta-tech-frame {
    position: relative;
    display: inline-block;
    padding: 4px;
    border-radius: 20px;
    background: var(--gradient-primary);
    overflow: hidden;
}

.frame-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

@keyframes scannerMove {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.cta-button-ultimate {
    background: rgba(0, 0, 0, 0.9);
    border: none;
    border-radius: 16px;
    padding: 25px 40px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 400px;
}

.cta-button-ultimate:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(102, 102, 255, 0.4);
}

.button-tech-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tech-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pattern-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-cyan);
    border-radius: 50%;
    opacity: 0.6;
    animation: patternFlow 4s ease-in-out infinite;
}

.pattern-dot:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.pattern-dot:nth-child(2) { top: 30%; right: 25%; animation-delay: 1s; }
.pattern-dot:nth-child(3) { bottom: 25%; left: 30%; animation-delay: 2s; }
.pattern-dot:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 3s; }

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

.button-content-ultimate {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.button-icon-ultimate {
    position: relative;
    font-size: 28px;
    color: white;
}

.icon-thrust {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

.thrust-particle {
    position: absolute;
    width: 4px;
    height: 2px;
    background: var(--warning-orange);
    border-radius: 2px;
    animation: thrustFlow 1s ease-out infinite;
}

.thrust-particle:nth-child(1) { animation-delay: 0s; }
.thrust-particle:nth-child(2) { animation-delay: 0.3s; }
.thrust-particle:nth-child(3) { animation-delay: 0.6s; }

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

.button-text-ultimate {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.button-main-ultimate {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.button-sub-ultimate {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.button-arrow-ultimate {
    position: relative;
    font-size: 20px;
    color: white;
    transition: transform 0.3s ease;
}

.cta-button-ultimate:hover .button-arrow-ultimate {
    transform: translateX(5px);
}

.arrow-trail {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cta-button-ultimate:hover .arrow-trail {
    opacity: 1;
}

.button-hologram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%) skewX(-25deg);
    transition: transform 0.6s ease;
}

.cta-button-ultimate:hover .button-hologram {
    transform: translateX(100%) skewX(-25deg);
}

/* 🚀 REVOLUTIONARY CTA BUTTON */
.cta-revolutionary {
    position: relative;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    border: none;
    border-radius: 20px;
    padding: 30px 50px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(0, 102, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    max-width: 600px;
    width: 100%;
}

.cta-revolutionary:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(0, 102, 255, 0.4),
        0 0 120px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Security Frame */
.security-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #00ffff;
    opacity: 0.7;
}

.frame-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.frame-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.frame-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.frame-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.security-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

@keyframes securityScan {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* Button Content */
.button-revolutionary-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
}

/* Trust Shield Icon */
.trust-shield-icon {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.shield-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shield-layer {
    position: absolute;
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    animation: shieldProtection 4s ease-in-out infinite;
}

.shield-layer.layer-1 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.shield-layer.layer-2 {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    animation-delay: 1.3s;
}

.shield-layer.layer-3 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    animation-delay: 2.6s;
}

@keyframes shieldProtection {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
        border-color: rgba(16, 185, 129, 0.4);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.1); 
        border-color: rgba(16, 185, 129, 0.8);
    }
}

.shield-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #10b981, #22c55e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 
        0 0 20px rgba(16, 185, 129, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: shieldCorePulse 3s ease-in-out infinite;
}

@keyframes shieldCorePulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 
            0 0 20px rgba(16, 185, 129, 0.8),
            inset 0 0 20px rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        box-shadow: 
            0 0 40px rgba(16, 185, 129, 1),
            0 0 60px rgba(34, 197, 94, 0.5),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }
}

.shield-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: shieldRingPulse 3s ease-in-out infinite;
}

@keyframes shieldRingPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.5; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.3); 
        opacity: 0.2; 
    }
}

/* Revolutionary Text */
.button-text-revolutionary {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.button-title-revolutionary {
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.button-subtitle-revolutionary {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    line-height: 1.3;
}

.trust-indicators-mini {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.trust-mini {
    background: rgba(16, 185, 129, 0.2);
    color: #22c55e;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.3);
    backdrop-filter: blur(10px);
}

/* Action Arrow */
.action-arrow-revolutionary {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.arrow-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0066ff, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    transition: all 0.4s ease;
}

.cta-revolutionary:hover .arrow-container {
    transform: translateX(5px) scale(1.1);
    background: linear-gradient(135deg, #0066ff, #00ffff);
}

.arrow-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.4), transparent);
    animation: arrowGlowPulse 2s ease-in-out infinite alternate;
}

@keyframes arrowGlowPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0.2; }
}

.arrow-trail-effect {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #0066ff, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cta-revolutionary:hover .arrow-trail-effect {
    opacity: 1;
    animation: arrowTrailMove 1s ease-out infinite;
}

@keyframes arrowTrailMove {
    0% { transform: translateY(-50%) translateX(0); opacity: 1; }
    100% { transform: translateY(-50%) translateX(20px); opacity: 0; }
}

/* Holographic Overlay */
.holographic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        transparent 40%, 
        rgba(0, 255, 255, 0.1) 50%, 
        transparent 60%);
    transform: translateX(-100%) skewX(-25deg);
    transition: transform 1s ease;
    z-index: 5;
}

.cta-revolutionary:hover .holographic-overlay {
    transform: translateX(100%) skewX(-25deg);
}

/* Quantum Particles */
.quantum-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #00ffff, #0066ff);
    border-radius: 50%;
    box-shadow: 0 0 10px #00ffff;
    animation: particleFloat 6s ease-in-out infinite;
}

.particle.p-1 { top: 20%; left: 15%; animation-delay: 0s; }
.particle.p-2 { top: 70%; left: 25%; animation-delay: 1.5s; }
.particle.p-3 { top: 30%; right: 20%; animation-delay: 3s; }
.particle.p-4 { bottom: 25%; right: 15%; animation-delay: 4.5s; }

@keyframes particleFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6; 
    }
    25% { 
        transform: translate(10px, -10px) scale(1.2); 
        opacity: 1; 
    }
    50% { 
        transform: translate(-5px, 15px) scale(0.8); 
        opacity: 0.8; 
    }
    75% { 
        transform: translate(12px, 5px) scale(1.1); 
        opacity: 0.9; 
    }
}

/* Trust Indicators Ultimate */
.trust-indicators-ultimate {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 0;
    flex-wrap: wrap;
    width: 100%;
}

.trust-indicator-ultimate {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.trust-indicator-ultimate:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.indicator-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.trust-indicator-ultimate.security .indicator-icon {
    background: var(--gradient-success);
}

.trust-indicator-ultimate.speed .indicator-icon {
    background: var(--gradient-tech);
}

.trust-indicator-ultimate.guarantee .indicator-icon {
    background: var(--gradient-gold);
}

.security-scan, .speed-meter, .certificate-seal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: indicatorScan 3s ease-in-out infinite;
}

@keyframes indicatorScan {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.indicator-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.indicator-text span {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.indicator-text small {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* 📱 REVOLUTIONARY MOBILE MENU - COMPLETELY NEW */
@media (max-width: 768px) {
    .nav-toggle-ultimate {
        display: block;
        z-index: 1002;
        position: relative;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(99, 102, 241, 0.2));
        border-radius: 12px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-toggle-ultimate:hover {
        background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
        border-color: rgba(0, 102, 255, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
    }
    
    .hamburger-ultimate {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 18px;
    }
    
    .line {
        position: absolute;
        width: 100%;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .line-1 { top: 0; }
    .line-2 { top: 50%; transform: translateY(-50%); }
    .line-3 { bottom: 0; }
    
    .nav-toggle-ultimate.active .line-1 {
        transform: rotate(45deg) translate(6px, 6px);
        background: #00ffff;
        box-shadow: 0 0 10px #00ffff;
    }
    
    .nav-toggle-ultimate.active .line-2 {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }
    
    .nav-toggle-ultimate.active .line-3 {
        transform: rotate(-45deg) translate(6px, -6px);
        background: #00ffff;
        box-shadow: 0 0 10px #00ffff;
    }
    
    .hamburger-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background: var(--gradient-primary);
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.4s ease;
        z-index: -1;
    }
    
    .nav-toggle-ultimate:hover .hamburger-glow,
    .nav-toggle-ultimate.active .hamburger-glow {
        opacity: 0.4;
    }
    
    /* Revolutionary Mobile Menu Overlay */
    .nav-links-ultimate {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.98) 0%,
            rgba(30, 41, 59, 0.98) 50%,
            rgba(0, 0, 0, 0.98) 100%);
        backdrop-filter: blur(25px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transform: scale(0.9);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        border: none;
        border-radius: 0;
    }
    
    .nav-links-ultimate.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    
    /* Mobile Menu Background Effects */
    .nav-links-ultimate::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 20% 30%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
        z-index: -1;
    }
    
    /* Revolutionary Mobile Links */
    .nav-link-ultimate {
        font-size: 1.3rem;
        font-weight: 700;
        padding: 18px 35px;
        min-width: 280px;
        max-width: 320px;
        width: 90%;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        backdrop-filter: blur(15px);
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(20px);
        opacity: 0;
    }
    
    .nav-links-ultimate.active .nav-link-ultimate {
        transform: translateY(0);
        opacity: 1;
    }
    
    .nav-link-ultimate:nth-child(1) { transition-delay: 0.1s; }
    .nav-link-ultimate:nth-child(2) { transition-delay: 0.15s; }
    .nav-link-ultimate:nth-child(3) { transition-delay: 0.2s; }
    .nav-link-ultimate:nth-child(4) { transition-delay: 0.25s; }
    .nav-link-ultimate:nth-child(5) { transition-delay: 0.3s; }
    .nav-link-ultimate:nth-child(6) { transition-delay: 0.35s; }
    
    .nav-link-ultimate::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1;
    }
    
    .nav-link-ultimate:hover::before,
    .nav-link-ultimate.active::before {
        opacity: 0.9;
    }
    
    .nav-link-ultimate:hover,
    .nav-link-ultimate.active {
        color: white;
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 102, 255, 0.4);
        border-color: rgba(0, 102, 255, 0.6);
    }
    
    .link-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
        transition: all 0.4s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .nav-link-ultimate:hover .link-icon,
    .nav-link-ultimate.active .link-icon {
        background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
        transform: scale(1.1) rotate(5deg);
        border-color: rgba(0, 102, 255, 0.5);
        box-shadow: 0 0 20px rgba(0, 102, 255, 0.3);
    }
    
    .nav-link-ultimate span {
        flex: 1;
        text-align: left;
    }
    
    /* Mobile Menu Close Button */
    .mobile-menu-close {
        position: absolute;
        top: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
        cursor: pointer;
        transition: all 0.4s ease;
        backdrop-filter: blur(15px);
    }
    
    .mobile-menu-close:hover {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.5);
        color: #ef4444;
        transform: rotate(90deg);
    }
    
    .status-bar-ultimate {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    
    .trust-metrics-ultimate {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .metric-ultimate {
        min-width: auto;
        width: 100%;
        max-width: 350px;
    }
    
    .tech-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .tech-feature {
        padding: 25px 15px;
    }
    
    .tech-icon-ultimate {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .cta-button-ultimate {
        min-width: auto;
        width: 100%;
        max-width: 350px;
        padding: 20px 25px;
    }
    
    .button-content-ultimate {
        gap: 15px;
    }
    
    .button-icon-ultimate {
        font-size: 24px;
    }
    
    .button-main-ultimate {
        font-size: 1.2rem;
    }
    
    .trust-indicators-ultimate {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .trust-indicator-ultimate {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    .nav-container-ultimate {
        padding: 15px 20px;
    }
    
    .logo-tech-frame {
        width: 50px;
        height: 50px;
    }
    
    .logo-icon-ultimate {
        font-size: 24px;
    }
    
    .logo-main {
        font-size: 24px;
    }
    
    .logo-domain {
        font-size: 18px;
    }
    
    .nav-link-ultimate {
        font-size: 1.3rem;
        padding: 16px 25px;
        min-width: 200px;
    }
    
    .title-ultimate {
        font-size: 2.5rem;
    }
    
    .highlight-number {
        font-size: 3rem;
    }
    
    .tech-header h2 {
        font-size: 2rem;
    }
    
    .tech-header p {
        font-size: 1rem;
    }
    
    .technology-showcase-hero {
        padding: 30px 20px;
        margin: 60px 0;
    }
    
    .button-main-ultimate {
        font-size: 1.1rem;
    }
    
    .button-sub-ultimate {
        font-size: 0.8rem;
    }
}

/* 🔬 TECHNOLOGY SECTION ULTIMATE */
.technology-ultimate {
    padding: 120px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.section-header-ultimate {
    text-align: center;
    margin-bottom: 80px;
}

.header-badge-tech {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.4);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 30px;
    color: var(--primary-cyan);
    font-weight: 700;
}

.section-header-ultimate h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-ultimate p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto;
}

/* Infrastructure Visual */
.tech-infrastructure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.infrastructure-visual {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.server-rack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.server {
    background: linear-gradient(135deg, #1e293b, #334155);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.4s ease;
}

.server:hover {
    background: linear-gradient(135deg, #334155, #475569);
    box-shadow: var(--glow-primary);
}

.server-lights {
    display: flex;
    gap: 4px;
}

.light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    transition: all 0.3s ease;
}

.light.active {
    background: var(--success-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    animation: lightBlink 2s ease-in-out infinite;
}

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

.server-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

.data-flow-visual {
    position: absolute;
    top: 20px;
    right: -20px;
    width: 40px;
    height: 80%;
}

.flow-path {
    position: relative;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--primary-cyan), transparent);
    margin: 0 auto;
}

.flow-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-cyan);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: flowMove 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
}

.flow-particle:nth-child(1) { animation-delay: 0s; }
.flow-particle:nth-child(2) { animation-delay: 1s; }
.flow-particle:nth-child(3) { animation-delay: 2s; }

@keyframes flowMove {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.tech-specs {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.spec-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.spec-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(10px);
    box-shadow: var(--shadow-lg);
}

.spec-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-tech);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.spec-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.spec-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 15px;
}

.spec-metrics {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.spec-metrics span {
    background: rgba(6, 182, 212, 0.2);
    color: var(--primary-cyan);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

/* 📱 ULTIMATE RECHARGE FORM */
.recharge-ultimate {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
}

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

.header-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(102, 102, 255, 0.1);
    border: 1px solid rgba(102, 102, 255, 0.3);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 30px;
    color: var(--primary-blue);
    font-weight: 700;
}

.form-header-ultimate h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-header-ultimate p {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
}

.form-ultimate-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Form Progress Ultimate */
.form-progress-ultimate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(102, 102, 255, 0.05), rgba(99, 102, 241, 0.05));
    border-bottom: 1px solid rgba(102, 102, 255, 0.1);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.4s ease;
}

.progress-step.active,
.progress-step.completed {
    color: var(--primary-blue);
}

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #64748b;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.progress-step.active .step-circle,
.progress-step.completed .step-circle {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--glow-primary);
}

.progress-step.completed .step-circle::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 900;
}

.progress-line {
    width: 80px;
    height: 2px;
    background: #e2e8f0;
    margin: 0 20px;
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}

.progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.6s ease;
}

.progress-step.completed + .progress-line::after {
    width: 100%;
}

/* Form Sections */
.form-section-ultimate {
    padding: 40px;
    border-bottom: 1px solid #f1f5f9;
}

.form-section-ultimate:last-child {
    border-bottom: none;
}

.form-section-ultimate h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-section-ultimate h3::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

/* Operators Grid Ultimate */
.operators-grid-ultimate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.operator-card-ultimate {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.operator-card-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.operator-card-ultimate:hover::before,
.operator-card-ultimate.selected::before {
    opacity: 0.05;
}

.operator-card-ultimate:hover,
.operator-card-ultimate.selected {
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 102, 255, 0.2);
}

.operator-icon-ultimate {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    position: relative;
}

.operator-icon-ultimate.play {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

.operator-icon-ultimate.orange {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.operator-icon-ultimate.plus {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}

.operator-icon-ultimate.tmobile {
    background: linear-gradient(135deg, #e91e63, #c2185b);
}

.operator-signal {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    gap: 2px;
}

.signal-bar {
    width: 3px;
    background: white;
    border-radius: 1px;
    animation: signalStrength 2s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.signal-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.signal-bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.signal-bar:nth-child(3) { height: 16px; animation-delay: 0.6s; }
.signal-bar:nth-child(4) { height: 20px; animation-delay: 0.9s; }

.operator-tech-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tech-line {
    position: absolute;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 1px;
    animation: techLineFlow 3s ease-in-out infinite;
}

.tech-line:nth-child(1) {
    top: 30%;
    left: 10%;
    width: 80%;
    height: 1px;
    animation-delay: 0s;
}

.tech-line:nth-child(2) {
    top: 70%;
    left: 15%;
    width: 70%;
    height: 1px;
    animation-delay: 1.5s;
}

@keyframes techLineFlow {
    0%, 100% { opacity: 0; transform: scaleX(0); }
    50% { opacity: 1; transform: scaleX(1); }
}

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

.operator-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}

.operator-info p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 10px;
}

.delivery-time {
    display: inline-block;
    background: var(--gradient-success);
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.operator-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.operator-status.online {
    background: var(--gradient-success);
    color: white;
}

/* Input Groups Ultimate */
.input-grid-ultimate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.input-group-ultimate {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group-ultimate label {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.phone-input-ultimate,
.amount-input-ultimate {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.phone-input-ultimate:focus-within,
.amount-input-ultimate:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(102, 102, 255, 0.1);
}

.phone-input-ultimate.valid,
.amount-input-ultimate.valid {
    border-color: var(--success-green);
}

.country-flag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    font-weight: 700;
    color: #1e293b;
}

.phone-input-ultimate input,
.amount-input-ultimate input {
    flex: 1;
    padding: 16px;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
}

.phone-input-ultimate input:focus,
.amount-input-ultimate input:focus {
    outline: none;
}

.currency-badge {
    padding: 16px;
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    font-weight: 700;
    color: #1e293b;
}

.input-validation {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success-green);
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.phone-input-ultimate.valid .input-validation,
.amount-input-ultimate.valid .input-validation {
    opacity: 1;
}

.amount-quick-select {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.amount-btn-ultimate {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    background: white;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.amount-btn-ultimate:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform: translateY(-1px);
}

.amount-btn-ultimate.selected {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(102, 102, 255, 0.3);
}

/* Payment Methods Ultimate */
.payment-preview-ultimate {
    background: #f8fafc;
    padding: 30px;
    border-radius: 16px;
    margin: 30px 0;
    border: 1px solid #e2e8f0;
}

.payment-preview-ultimate h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    text-align: center;
}

.payment-methods-ultimate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.payment-method-ultimate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 15px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.payment-method-ultimate:hover {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 102, 255, 0.1);
}

.method-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.payment-method-ultimate.blik .method-icon {
    background: linear-gradient(135deg, #2196f3, #1976d2);
}

.payment-method-ultimate.card .method-icon {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.payment-method-ultimate.paypal .method-icon {
    background: linear-gradient(135deg, #2196f3, #1565c0);
}

.payment-method-ultimate.transfer .method-icon {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}

.payment-method-ultimate span {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.method-speed {
    background: var(--gradient-success);
    color: white;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Ultimate Submit Button */
.submit-ultimate {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    margin-top: 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-ultimate:hover {
    transform: translateY(-3px);
}

.submit-tech-frame {
    background: var(--gradient-primary);
    padding: 4px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.frame-scanner-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

@keyframes submitScan {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.submit-content {
    background: rgba(0, 0, 0, 0.9);
    padding: 25px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.submit-icon {
    position: relative;
    font-size: 28px;
    color: white;
}

.rocket-flames {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.flame {
    position: absolute;
    width: 4px;
    height: 8px;
    background: var(--warning-orange);
    border-radius: 2px;
    animation: rocketFlame 0.5s ease-in-out infinite;
}

.flame:nth-child(1) { left: -6px; animation-delay: 0s; }
.flame:nth-child(2) { left: 0; animation-delay: 0.1s; }
.flame:nth-child(3) { left: 6px; animation-delay: 0.2s; }

@keyframes rocketFlame {
    0%, 100% { height: 8px; opacity: 1; }
    50% { height: 12px; opacity: 0.8; }
}

.submit-text {
    flex: 1;
    text-align: left;
}

.submit-main {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 5px;
}

.submit-sub {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.submit-arrow {
    position: relative;
    font-size: 20px;
    color: white;
    transition: transform 0.3s ease;
}

.submit-ultimate:hover .submit-arrow {
    transform: translateX(5px);
}

.arrow-boost {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.submit-ultimate:hover .arrow-boost {
    opacity: 1;
}

.submit-hologram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%) skewX(-25deg);
    transition: transform 0.8s ease;
}

.submit-ultimate:hover .submit-hologram {
    transform: translateX(100%) skewX(-25deg);
}

/* Security Assurance */
.security-assurance-ultimate {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.assurance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success-green);
    font-size: 0.9rem;
    font-weight: 600;
}

.assurance-item i {
    font-size: 16px;
}

/* 📊 LIVE DASHBOARD ULTIMATE */
.live-dashboard-ultimate {
    padding: 120px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 80px;
}

.dashboard-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-header p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(15px);
    transition: all 0.4s ease;
}

.dashboard-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.card-header-dash {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header-dash h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-success);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: dashPulse 2s ease-in-out infinite;
}

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

.metric-number-dash {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    display: block;
    line-height: 1;
}

.metric-growth {
    font-size: 0.9rem;
    color: var(--success-green);
    font-weight: 600;
    margin-top: 5px;
}

.card-chart {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 60px;
    margin-top: 20px;
}

.chart-bar {
    flex: 1;
    background: var(--gradient-primary);
    border-radius: 2px;
    min-height: 10px;
    animation: chartGrow 2s ease-out;
}

@keyframes chartGrow {
    0% { height: 0; }
    100% { height: var(--final-height, 50%); }
}

.performance-status {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.performance-status.excellent {
    background: var(--gradient-success);
    color: white;
}

.performance-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.performance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.perf-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.perf-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.performance-gauge {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
}

.gauge-fill {
    height: 100%;
    background: var(--gradient-success);
    border-radius: 4px;
    animation: gaugeFill 2s ease-out;
}

@keyframes gaugeFill {
    0% { width: 0%; }
    100% { width: var(--final-width, 97%); }
}

.security-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.security-status.secure {
    background: var(--gradient-success);
    color: white;
}

.security-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.check-item i {
    color: var(--success-green);
    font-size: 14px;
}

/* 🦶 FOOTER ULTIMATE */
.footer-ultimate {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 80px 0 20px;
    position: relative;
    overflow: hidden;
}

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

.footer-content-ultimate {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer-logo-ultimate {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    font-weight: 900;
}

.footer-logo-ultimate .logo-tech-frame {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.footer-brand p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 400px;
}

.footer-certifications {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cert-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-section h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 4px 0;
}

.footer-section a:hover {
    color: white;
    transform: translateX(5px);
}

.footer-bottom-ultimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 20px;
}

.footer-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.footer-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
}

.footer-stat .stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-legal {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* 🏆 FLOATING STATUS BADGE */
.floating-status-badge {
    position: fixed;
    top: 80px;
    right: 30px;
    z-index: 999;
    animation: badgeFloat 6s ease-in-out infinite;
}

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

.badge-tech-frame-floating {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    padding: 15px 20px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.frame-corners-floating {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.corner-floating {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #ffd700;
    animation: cornerPulse 3s ease-in-out infinite;
}

.corner-floating.corner-tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.corner-floating.corner-tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.corner-floating.corner-bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.corner-floating.corner-br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

@keyframes cornerPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.badge-content-floating {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.badge-icon-floating {
    position: relative;
    font-size: 20px;
    color: #ffd700;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
}

.crown-sparkle-floating {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    animation: crownSparkle 2s ease-in-out infinite;
}

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

.badge-text-floating {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-title-floating {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.badge-subtitle-floating {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.badge-verification-floating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #22c55e;
    font-size: 10px;
    font-weight: 600;
}

/* Mobile Body Lock */
body.menu-open {
    overflow: hidden;
}

/* Mobile Responsive Floating Badge */
@media (max-width: 768px) {
    .floating-status-badge {
        top: 100px;
        right: 20px;
    }
    
    .badge-tech-frame-floating {
        padding: 12px 15px;
    }
    
    .badge-content-floating {
        gap: 8px;
    }
    
    .badge-icon-floating {
        font-size: 16px;
    }
    
    .badge-title-floating {
        font-size: 12px;
    }
    
    .badge-subtitle-floating {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .floating-status-badge {
        top: 90px;
        right: 15px;
    }
    
    .badge-tech-frame-floating {
        padding: 10px 12px;
    }
    
    .badge-icon-floating {
        font-size: 14px;
    }
    
    .badge-title-floating {
        font-size: 11px;
    }
    
    .badge-subtitle-floating {
        font-size: 8px;
    }
    
    .badge-verification-floating {
        font-size: 9px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tech-infrastructure {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .infrastructure-visual {
        padding: 30px;
    }
    
    .input-grid-ultimate {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .payment-methods-ultimate {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }
    
    .footer-content-ultimate {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .footer-bottom-ultimate {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    
    .footer-stats {
        gap: 25px;
    }
}

@media (max-width: 480px) {
    .trust-metrics-ultimate {
        gap: 20px;
    }
    
    .metric-ultimate {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        min-width: auto;
        padding: 20px;
    }
    
    .metric-data {
        text-align: center;
    }
    
    .operators-grid-ultimate {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .amount-quick-select {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .payment-methods-ultimate {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .trust-indicators-ultimate {
        gap: 15px;
    }
    
    .trust-indicator-ultimate {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }
    
    .indicator-text {
        text-align: center;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .footer-stats {
        flex-direction: column;
        gap: 20px;
    }
}

/* 📈 SEO CONTENT SECTION ULTIMATE */
.seo-content-ultimate {
    padding: 120px 0;
    background: white;
    position: relative;
}

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

.seo-header {
    text-align: center;
    margin-bottom: 80px;
}

.seo-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-header p {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.seo-card {
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 20px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.seo-card:hover::before {
    transform: scaleX(1);
}

.seo-card:hover {
    border-color: rgba(102, 102, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(102, 102, 255, 0.1);
}

.seo-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.seo-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%) skewX(-25deg);
    animation: iconShine 3s ease-in-out infinite;
}

@keyframes iconShine {
    0% { transform: translateX(-100%) skewX(-25deg); }
    50% { transform: translateX(100%) skewX(-25deg); }
    100% { transform: translateX(100%) skewX(-25deg); }
}

.seo-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.seo-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.seo-keywords {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.seo-keywords span {
    background: linear-gradient(135deg, rgba(102, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    color: var(--primary-blue);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(102, 102, 255, 0.2);
}

/* Keywords Section */
.keywords-section {
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.keywords-section h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 30px;
}

.keywords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.keyword-item {
    background: white;
    padding: 20px;
    border-radius: 16px;
    border: 2px solid #f1f5f9;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.keyword-item.hot {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.05));
}

.keyword-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.keyword {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.searches {
    display: block;
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 8px;
}

.trend {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.trend.up {
    background: var(--gradient-success);
    color: white;
}

.trend.stable {
    background: #e2e8f0;
    color: #64748b;
}

/* Long-tail Keywords */
.longtail-keywords {
    margin-top: 40px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
}

.longtail-keywords h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    text-align: center;
}

.longtail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.longtail-item {
    background: white;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: default;
}

.longtail-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    color: var(--primary-blue);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Collapsible Keywords */
.keywords-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.keywords-header:hover {
    color: var(--primary-blue);
}

.keywords-header h3,
.keywords-header h4 {
    margin: 0;
    flex: 1;
}

.toggle-icon {
    font-size: 16px;
    color: var(--primary-blue);
    transition: transform 0.3s ease;
}

.toggle-icon.rotated {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin: 0;
    padding: 0;
}

.collapsible-content.expanded {
    max-height: 300px;
    margin: 20px 0;
    padding: 20px 0;
}

/* SEO Title Highlight */
.seo-title-highlight {
    background: linear-gradient(135deg, #00ff88, #00d4ff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

/* 🚀 LUXURY NAVIGATION SYSTEM */

/* Navigation Container */
.nav-container-luxury {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    height: 90px !important;
    position: relative;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

/* Super Premium Luxury Logo */
.nav-logo-luxury {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    min-width: 300px !important;
    height: 80px !important;
}

.logo-hologram-luxury {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Quantum Energy Core */
.quantum-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: rotate 4s linear infinite;
}

.core-ring.ring-1 {
    width: 70px;
    height: 70px;
    border-top: 2px solid rgba(0, 255, 136, 0.8);
    border-right: 2px solid rgba(0, 212, 255, 0.6);
    animation-delay: 0s;
}

.core-ring.ring-2 {
    width: 50px;
    height: 50px;
    border-bottom: 2px solid rgba(0, 102, 255, 0.8);
    border-left: 2px solid rgba(0, 255, 136, 0.6);
    animation-delay: -1s;
    animation-direction: reverse;
}

.core-ring.ring-3 {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(0, 212, 255, 0.9);
    animation-delay: -2s;
}

/* Central Icon with Quantum Effects */
.logo-icon-quantum-luxury {
    position: relative;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.3), rgba(0, 102, 255, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #00ff88;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.5),
        inset 0 0 20px rgba(0, 102, 255, 0.3);
    z-index: 5;
}

.quantum-field-bg {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1), transparent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Quantum Particles */
.quantum-particles {
    position: absolute;
    inset: -20px;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ff88;
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
}

.particle.p-1 { top: 0; left: 50%; animation-delay: 0s; }
.particle.p-2 { top: 25%; right: 0; animation-delay: 0.5s; }
.particle.p-3 { bottom: 0; right: 25%; animation-delay: 1s; }
.particle.p-4 { bottom: 25%; left: 0; animation-delay: 1.5s; }
.particle.p-5 { top: 75%; left: 25%; animation-delay: 2s; }
.particle.p-6 { top: 50%; right: 75%; animation-delay: 2.5s; }

/* Energy Waves */
.energy-waves {
    position: absolute;
    inset: -15px;
}

.wave {
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    animation: waveExpand 2s ease-out infinite;
}

.wave.w-1 { border-color: rgba(0, 255, 136, 0.6); animation-delay: 0s; }
.wave.w-2 { border-color: rgba(0, 212, 255, 0.4); animation-delay: 0.7s; }
.wave.w-3 { border-color: rgba(0, 102, 255, 0.3); animation-delay: 1.4s; }

/* Neural Network */
.neural-network {
    position: absolute;
    inset: -30px;
    pointer-events: none;
}

.neural-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00d4ff;
    border-radius: 50%;
    animation: nodePulse 2s ease-in-out infinite;
}

.neural-node.node-1 { top: 20%; right: 10%; animation-delay: 0s; }
.neural-node.node-2 { bottom: 30%; left: 15%; animation-delay: 0.7s; }
.neural-node.node-3 { top: 60%; right: 80%; animation-delay: 1.4s; }

.neural-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
    animation: connectionFlow 3s ease-in-out infinite;
}

.neural-connection.conn-1 {
    top: 25%;
    left: 20%;
    width: 40px;
    transform: rotate(45deg);
    animation-delay: 0s;
}

.neural-connection.conn-2 {
    bottom: 35%;
    right: 30%;
    width: 35px;
    transform: rotate(-30deg);
    animation-delay: 1s;
}

.neural-connection.conn-3 {
    top: 65%;
    left: 40%;
    width: 30px;
    transform: rotate(120deg);
    animation-delay: 2s;
}

/* Holographic Scanner */
.holo-scanner {
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 136, 0.2), transparent);
    animation: holoScan 4s linear infinite;
}

/* Premium Luxury Text */
.logo-text-luxury {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    min-width: 150px !important;
    align-items: flex-start !important;
}

.text-3d-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.logo-main-luxury {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    gap: 2px;
}

.letter-luxury {
    display: inline-block;
    background: linear-gradient(135deg, #00ff88, #00d4ff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    animation: letterFloat 3s ease-in-out infinite;
}

.letter-luxury:hover {
    transform: rotateY(360deg) scale(1.1);
}

.letter-luxury.e { animation-delay: 0s; }
.letter-luxury.f { animation-delay: 0.1s; }
.letter-luxury.l { animation-delay: 0.2s; }
.letter-luxury.o { animation-delay: 0.3s; }
.letter-luxury.w { animation-delay: 0.4s; }

.logo-domain-luxury {
    font-size: 16px;
    font-weight: 600;
    margin-top: -5px;
}

.domain-dot-luxury {
    color: #00ff88;
    font-size: 18px;
}

.domain-text-luxury {
    color: #00d4ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Dynamic Luxury Tagline */
.tagline-luxury {
    position: relative;
    margin-top: 5px;
}

.tagline-bg-effect {
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tagline-text-luxury {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    padding: 3px 8px;
}

.tagline-underline-luxury {
    height: 1px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    margin-top: 2px;
    animation: underlineGlow 2s ease-in-out infinite;
}

.tagline-luxury:hover .tagline-bg-effect {
    opacity: 1;
}

/* Premium Status Indicator */
.status-luxury {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.status-dot-luxury {
    width: 6px;
    height: 6px;
    background: #00ff88;
    border-radius: 50%;
    animation: statusPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
}

.status-text-luxury {
    font-size: 9px;
    font-weight: 500;
    color: rgba(0, 255, 136, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Luxury Performance Badge */
.performance-badge-luxury {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    padding: 15px 20px;
    min-width: 120px;
}

.badge-hologram {
    position: absolute;
    inset: -1px;
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 136, 0.3), transparent);
    border-radius: 16px;
    animation: badgeHolo 3s linear infinite;
    z-index: -1;
}

.badge-content-luxury {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.performance-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.metric-value-luxury {
    font-size: 20px;
    font-weight: 800;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.metric-label-luxury {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.performance-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.indicator-bar {
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, #00ff88, #00d4ff);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.indicator-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: barScan 2s ease-in-out infinite;
}

.indicator-text {
    font-size: 9px;
    font-weight: 600;
    color: #00d4ff;
    text-transform: uppercase;
}

.badge-aura-luxury {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1), transparent);
    border-radius: 25px;
    filter: blur(10px);
    animation: auraExpand 3s ease-in-out infinite;
    z-index: -2;
}

/* Luxury Navigation Links */
.nav-links-luxury {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
}

.nav-link-luxury {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 25px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.link-hologram {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 102, 255, 0.1));
    border-radius: 26px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.link-icon-luxury {
    position: relative;
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 102, 255, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.icon-glow-luxury {
    position: absolute;
    inset: -3px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.4), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.link-text-luxury {
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.link-energy-trail {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ff88, #00d4ff);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link-luxury:hover {
    color: #00ff88;
    transform: translateY(-3px);
}

.nav-link-luxury:hover .link-hologram {
    opacity: 1;
}

.nav-link-luxury:hover .icon-glow-luxury {
    opacity: 1;
}

.nav-link-luxury:hover .link-energy-trail {
    width: 100%;
}

.nav-link-luxury:hover .link-icon-luxury {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.4), rgba(0, 102, 255, 0.4));
}

.nav-link-luxury.active {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.nav-link-luxury.active .link-hologram {
    opacity: 1;
}

.nav-link-luxury.active .link-energy-trail {
    width: 100%;
}

/* Premium Mobile Close */
.mobile-close-luxury {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
}

.close-hologram {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.2), transparent);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

.mobile-close-luxury i {
    color: #ff4444;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.mobile-close-luxury:hover i {
    transform: rotate(90deg) scale(1.2);
}

/* Luxury Mobile Toggle */
.mobile-toggle-luxury {
    display: none;
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.toggle-quantum-field {
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1), transparent);
    border-radius: 50%;
    animation: quantumField 3s ease-in-out infinite;
}

.toggle-hologram {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.hamburger-luxury {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.line-luxury {
    width: 25px;
    height: 3px;
    background: linear-gradient(90deg, #00ff88, #00d4ff);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.toggle-energy-pulse {
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 50%;
    opacity: 0;
    animation: energyPulse 2s ease-in-out infinite;
}

.mobile-toggle-luxury:hover .toggle-hologram {
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.mobile-toggle-luxury.active .line-luxury:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.mobile-toggle-luxury.active .line-luxury:nth-child(2) {
    opacity: 0;
}

.mobile-toggle-luxury.active .line-luxury:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* Animations */
@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-10px) scale(1.2); opacity: 0.7; }
}

@keyframes waveExpand {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

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

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

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

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

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

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

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

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

@keyframes auraExpand {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

@keyframes quantumField {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

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

/* Mobile Responsive */
@media (max-width: 1024px) {
    .nav-links-luxury {
        gap: 25px;
    }
    
    .nav-link-luxury {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .performance-badge-luxury {
        padding: 12px 16px;
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .nav-container-luxury {
        padding: 0 20px !important;
        height: 80px !important;
    }
    
    .nav-links-luxury {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        height: 100vh;
        background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.95) 0%,
            rgba(15, 23, 42, 0.95) 50%,
            rgba(0, 0, 0, 0.95) 100%);
        backdrop-filter: blur(25px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 100px 30px 30px;
        gap: 25px;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        border-left: 1px solid rgba(0, 255, 136, 0.2);
    }
    
    .nav-links-luxury.active {
        right: 0;
    }
    
    .mobile-close-luxury {
        display: flex;
    }
    
    .mobile-toggle-luxury {
        display: flex;
    }
    
    .nav-link-luxury {
        width: 100%;
        padding: 20px 25px;
        border-radius: 15px;
        font-size: 16px;
        justify-content: flex-start;
    }
    
    .nav-link-luxury .link-icon-luxury {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .performance-badge-luxury {
        display: none;
    }
    
    .logo-hologram-luxury {
        width: 60px;
        height: 60px;
    }
    
    .logo-main-luxury {
        font-size: 24px;
    }
    
    .tagline-luxury {
        display: none;
    }
    
    .status-luxury {
        display: none;
    }
}

/* 🚀 STREAMLINED NAVIGATION OVERRIDES */

/* Navigation Container */
.nav-container-ultimate {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    height: 80px !important;
}

/* Streamlined Logo */
.nav-logo-streamlined {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.logo-icon-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-background-glow {
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0;
    transition: all 0.3s ease;
}

.logo-icon-premium {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
    transition: all 0.3s ease;
}

.logo-icon-premium:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 102, 255, 0.5);
}

.logo-icon-container:hover .logo-background-glow {
    opacity: 1;
}

.icon-energy-ring {
    position: absolute;
    inset: -3px;
    border: 2px solid transparent;
    border-top: 2px solid rgba(0, 102, 255, 0.6);
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.icon-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ff88;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 1.5s ease-in-out infinite;
}

.icon-spark.spark-1 {
    top: -2px;
    right: 8px;
    animation-delay: 0s;
}

.icon-spark.spark-2 {
    bottom: 2px;
    left: -2px;
    animation-delay: 0.5s;
}

.icon-spark.spark-3 {
    top: 8px;
    right: -2px;
    animation-delay: 1s;
}

.logo-text-premium {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.logo-main-text {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-e {
    font-size: 32px;
}

.logo-domain {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-top: -2px;
}

.domain-dot {
    color: var(--primary-blue);
}

.domain-pro {
    color: var(--secondary-purple);
}

.logo-tagline {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 1px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.speed-badge {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.speed-number {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
}

.speed-label {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
}

.badge-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(99, 102, 241, 0.2));
    border-radius: 27px;
    filter: blur(4px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}

.speed-badge:hover .badge-glow {
    opacity: 1;
}

/* Streamlined Navigation Links */
.nav-links-streamlined {
    display: flex;
    align-items: center;
    gap: 35px;
    position: relative;
}

.nav-link-premium {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 50px;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link-premium i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.nav-link-premium:hover {
    color: var(--primary-blue);
    background: rgba(0, 102, 255, 0.05);
    transform: translateY(-2px);
}

.nav-link-premium:hover i {
    transform: scale(1.1);
    color: var(--primary-blue);
}

.nav-link-premium.active {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    color: var(--primary-blue);
    border: 1px solid rgba(0, 102, 255, 0.2);
}

.nav-link-premium.active i {
    color: var(--primary-blue);
}

/* Mobile Close Button */
.mobile-close-btn {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}

.mobile-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Mobile Toggle Button */
.mobile-toggle-btn {
    display: none;
    position: relative;
    width: 50px;
    height: 50px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.toggle-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.toggle-line {
    width: 20px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.mobile-toggle-btn:hover .toggle-bg {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(99, 102, 241, 0.2));
}

.mobile-toggle-btn.active .toggle-line:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}

.mobile-toggle-btn.active .toggle-line:nth-child(2) {
    opacity: 0;
}

.mobile-toggle-btn.active .toggle-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

/* Live Counter Revolutionary */
.live-counter-revolutionary {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.counter-container {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.counter-icon {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.icon-pulse {
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(0, 102, 255, 0.5);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.counter-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.counter-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.counter-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.number-animate {
    font-size: 28px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 102, 255, 0.5);
}

.number-suffix {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.counter-growth {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #00ff88;
}

.counter-growth i {
    font-size: 10px;
}

.counter-glow {
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
    border-radius: 25px;
    filter: blur(10px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}

.counter-container:hover .counter-glow {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .nav-links-streamlined {
        gap: 25px;
    }
    
    .nav-link-premium {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .speed-badge {
        padding: 6px 12px;
    }
}

@media (max-width: 768px) {
    .nav-container-ultimate {
        padding: 0 20px !important;
    }
    
    .nav-links-streamlined {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.98) 0%,
            rgba(30, 41, 59, 0.98) 50%,
            rgba(0, 0, 0, 0.98) 100%);
        backdrop-filter: blur(25px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 80px 30px 30px;
        gap: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-links-streamlined.active {
        right: 0;
    }
    
    .mobile-close-btn {
        display: flex;
    }
    
    .mobile-toggle-btn {
        display: flex;
    }
    
    .nav-link-premium {
        width: 100%;
        padding: 15px 20px;
        border-radius: 12px;
        font-size: 16px;
        justify-content: flex-start;
    }
    
    .nav-link-premium i {
        font-size: 18px;
        width: 24px;
    }
    
    .speed-badge {
        display: none;
    }
    
    .logo-tagline {
        display: none;
    }
    
    .logo-main-text {
        font-size: 24px;
    }
    
    .logo-domain {
        font-size: 12px;
    }
    
    .counter-container {
        padding: 15px 20px;
        gap: 15px;
    }
    
    .counter-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .number-animate {
        font-size: 24px;
    }
    
    .number-suffix {
        font-size: 14px;
    }
}

/* Animations */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

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

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

/* 🏆 SUPER PREMIUM WHY EFLOW SECTION */

.why-eflow-super-premium {
    padding: 120px 0;
    background: linear-gradient(135deg, 
        #0f172a 0%, 
        #1e293b 25%, 
        #334155 50%, 
        #1e293b 75%, 
        #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.premium-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.floating-orbs {
    position: absolute;
    inset: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
    filter: blur(40px);
    animation: float 8s ease-in-out infinite;
}

.orb-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.orb-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.orb-4 {
    width: 180px;
    height: 180px;
    top: 30%;
    right: 40%;
    animation-delay: 6s;
}

.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.3) 50%, 
        rgba(0, 0, 0, 0.7) 100%);
}

/* Section Header */
.section-header-super-premium {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.elite-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.2));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50px;
    padding: 12px 25px;
    margin-bottom: 30px;
    overflow: hidden;
}

.badge-glow-ring {
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, rgba(255, 215, 0, 0.5), transparent);
    border-radius: 52px;
    animation: rotate 3s linear infinite;
    z-index: -1;
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-content i {
    font-size: 16px;
    color: #f59e0b;
}

.title-super-premium {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title-main {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.title-highlight {
    background: linear-gradient(135deg, #00ff88, #00d4ff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.description-premium {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.clients-highlight {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Live Dashboard */
.live-dashboard {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.dashboard-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(99, 102, 241, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    position: relative;
    z-index: 1;
}

.card-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.data-number {
    font-size: 24px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 102, 255, 0.5);
}

.data-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Super Premium Reasons Grid */
.reasons-super-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.reason-premium-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.reason-premium-card.featured {
    border: 2px solid rgba(0, 102, 255, 0.5);
    transform: scale(1.02);
}

.reason-premium-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 102, 255, 0.6);
}

.card-premium-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.reason-number-premium {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4);
}

.reason-icon-premium {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(99, 102, 241, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-blue);
}

.icon-glow-premium {
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reason-premium-card:hover .icon-glow-premium {
    opacity: 1;
}

.card-premium-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    line-height: 1.3;
}

.card-premium-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Premium Metrics */
.premium-metrics {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.metric {
    background: rgba(0, 102, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: 10px;
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 70px;
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
}

.metric-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Security Badges */
.security-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.security-badge {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #10b981;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Coverage Stats */
.coverage-stats {
    display: flex;
    gap: 20px;
}

.coverage-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-number {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-blue);
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Support Features */
.support-features {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.support-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
}

.support-feature i {
    color: var(--accent-cyan);
    font-size: 14px;
}

.support-feature span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
}

/* International Methods */
.international-methods {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.method-badge {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #a855f7;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Guarantee Metrics */
.guarantee-metrics {
    display: flex;
    gap: 15px;
}

.guarantee-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.guarantee-value {
    font-size: 18px;
    font-weight: 800;
    color: #10b981;
}

.guarantee-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Leadership Stats */
.leadership-stats {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}

.leadership-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #fbbf24;
}

.stat-unit {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.card-premium-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(99, 102, 241, 0.3));
    border-radius: 22px;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.reason-premium-card:hover .card-premium-glow {
    opacity: 1;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .why-eflow-super-premium {
        padding: 80px 0;
    }
    
    .reasons-super-premium {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .reason-premium-card {
        padding: 25px;
    }
    
    .reason-premium-card.featured {
        transform: none;
    }
    
    .live-dashboard {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .dashboard-card {
        padding: 15px 20px;
    }
    
    .data-number {
        font-size: 20px;
    }
    
    .title-super-premium {
        font-size: 2rem;
    }
    
    .description-premium {
        font-size: 1rem;
    }
}

/* 🏆 WHY EFLOW ULTIMATE SECTION */
.why-eflow-ultimate {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.reason-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 2px solid #f1f5f9;
    overflow: hidden;
}

.reason-card.main-feature {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(102, 102, 255, 0.05), rgba(99, 102, 241, 0.05));
    border-color: rgba(102, 102, 255, 0.2);
}

.reason-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.reason-card:hover::before {
    transform: scaleX(1);
}

.reason-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(102, 102, 255, 0.15);
    border-color: rgba(102, 102, 255, 0.3);
}

.reason-number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.reason-icon {
    position: relative;
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    margin-bottom: 25px;
}

/* Icon Animations */
.icon-energy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent);
    animation: energyPulse 2s ease-in-out infinite;
}

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

.icon-security-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: securityLayer 3s ease-in-out infinite;
}

.layer-1 { width: 60%; height: 60%; top: 20%; left: 20%; animation-delay: 0s; }
.layer-2 { width: 80%; height: 80%; top: 10%; left: 10%; animation-delay: 1s; }
.layer-3 { width: 100%; height: 100%; top: 0; left: 0; animation-delay: 2s; }

@keyframes securityLayer {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.icon-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-support {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: supportPulse 2s ease-in-out infinite;
}

@keyframes supportPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
}

.icon-global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: globalRotate 8s linear infinite;
}

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

.icon-guarantee {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-radius: 50%;
    animation: guaranteeSparkle 2s ease-in-out infinite;
}

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

.icon-premium {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: premiumGlow 3s ease-in-out infinite;
}

@keyframes premiumGlow {
    0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 5px #ffd700); }
    50% { opacity: 1; filter: drop-shadow(0 0 15px #ffd700); }
}

.reason-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.reason-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.reason-stats,
.reason-features,
.reason-coverage,
.reason-support,
.reason-international,
.reason-guarantee,
.reason-leadership {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reason-stats span,
.reason-features span,
.reason-coverage span,
.reason-support span,
.reason-international span,
.reason-guarantee span,
.reason-leadership span {
    background: var(--gradient-primary);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 102, 255, 0.3);
}

.reason-features span {
    background: var(--gradient-success);
}

.reason-coverage span {
    background: var(--gradient-tech);
}

.reason-support span {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.reason-international span {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.reason-guarantee span {
    background: var(--gradient-gold);
    color: #1e293b;
}

.reason-leadership span {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Mobile Responsive for SEO */
@media (max-width: 768px) {
    .seo-content-ultimate {
        padding: 80px 0;
    }
    
    .seo-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }
    
    .keywords-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .keywords-section {
        padding: 30px 20px;
    }
    
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }
    
    .reason-card.main-feature {
        grid-column: span 1;
    }
    
    .reason-card {
        padding: 25px 20px;
    }
    
    .reason-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .reason-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* 🏦 BANKING-STYLE FORM ENHANCEMENTS */
.banking-security-header {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 25px 30px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--gradient-primary);
}

.security-badge-banking {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(16, 185, 129, 0.2);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.security-level {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.security-level i {
    color: var(--success-green);
}

.form-section-ultimate.banking-style {
    background: #f8fafc;
    border-left: 4px solid var(--primary-blue);
    border-radius: 0;
    position: relative;
}

.form-section-ultimate.banking-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 102, 255, 0.02), transparent);
    pointer-events: none;
}

.banking-input-group {
    position: relative;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.banking-input-group:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(102, 102, 255, 0.1);
}

.banking-input-group.verified {
    border-color: var(--success-green);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.input-header-banking {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: between;
}

.input-label-banking {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-security-indicator {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success-green);
    font-size: 0.8rem;
    font-weight: 600;
}

.banking-submit-ultimate {
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 3px solid transparent;
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(30, 41, 59, 0.3);
    width: 100%;
    margin: 30px auto 0;
    display: block;
}

.banking-submit-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    padding: 3px;
    border-radius: 16px;
    z-index: -1;
}

.banking-submit-ultimate:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(30, 41, 59, 0.4);
}

.banking-submit-content {
    background: linear-gradient(135deg, #1e293b, #334155);
    padding: 25px 35px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.banking-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--gradient-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.banking-icon-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: bankingPulse 3s ease-in-out infinite;
}

@keyframes bankingPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 0.3; }
}

.banking-text-container {
    flex: 1;
    text-align: left;
}

.banking-main-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
    display: block;
}

.banking-sub-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.banking-security-badges {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.security-badge-mini {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-green);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.banking-arrow {
    position: relative;
    font-size: 24px;
    color: white;
    transition: transform 0.3s ease;
}

.banking-submit-ultimate:hover .banking-arrow {
    transform: translateX(5px);
}

.banking-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.banking-submit-ultimate:hover .banking-arrow::after {
    opacity: 1;
}

.banking-hologram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%) skewX(-25deg);
    transition: transform 0.8s ease;
}

.banking-submit-ultimate:hover .banking-hologram {
    transform: translateX(100%) skewX(-25deg);
}

/* Banking Form Additional Styles */
.banking-info {
    margin-top: 15px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(34, 197, 94, 0.05));
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

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

.info-item i {
    color: var(--success-green);
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.amount-quick-select-banking {
    margin-top: 15px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.quick-select-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.amount-buttons-banking {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e2e8f0;
    padding: 1px;
}

.amount-btn-banking {
    background: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.amount-btn-banking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.amount-btn-banking:hover::before,
.amount-btn-banking.selected::before {
    opacity: 0.1;
}

.amount-btn-banking:hover,
.amount-btn-banking.selected {
    color: var(--primary-blue);
}

.amount-value {
    font-size: 1.1rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.amount-desc {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    position: relative;
    z-index: 2;
}

.amount-btn-banking.selected .amount-desc {
    color: var(--primary-blue);
}

/* Real-time Verification */
.realtime-verification {
    margin-top: 30px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}

.verification-header {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.9rem;
}

.verification-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--success-green);
    border-radius: 50%;
    animation: statusDotPulse 2s ease-in-out infinite;
}

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

.verification-checks {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.check-item-realtime {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.check-item-realtime i {
    color: #64748b;
    font-size: 14px;
    transition: color 0.3s ease;
}

.check-item-realtime span {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.check-status {
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.check-status.pending {
    background: #f1f5f9;
    color: #64748b;
}

.check-status.verified {
    background: var(--gradient-success);
    color: white;
}

.check-item-realtime.verified i {
    color: var(--success-green);
}

.check-item-realtime.verified {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

/* Enhanced Mobile Responsive */
@media (max-width: 768px) {
    .banking-security-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 20px;
    }
    
    .amount-buttons-banking {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }
    
    .amount-btn-banking {
        padding: 12px;
    }
    
    .banking-submit-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 20px 25px;
    }
    
    .banking-text-container {
        text-align: center;
    }
    
    .banking-security-badges {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .verification-checks {
        padding: 15px;
        gap: 12px;
    }
    
    .check-item-realtime {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 10px;
    }
    
    .check-status {
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    .banking-info {
        padding: 12px;
    }
    
    .info-item {
        font-size: 0.8rem;
    }
    
    .amount-btn-banking {
        padding: 10px;
    }
    
    .amount-value {
        font-size: 1rem;
    }
    
    .amount-desc {
        font-size: 0.75rem;
    }
    
    .banking-main-text {
        font-size: 1.2rem;
    }
    
    .banking-sub-text {
        font-size: 0.85rem;
    }
    
    .security-badge-mini {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
}