/* ==========================================================================
   GLOBAL RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #050816;
    color: #fff;
    overflow-x: hidden; /* Strict defense against mobile layout blowouts */
}

/* ==========================================================================
   NAVBAR & COMPONENTS (DESKTOP DEFAULT)
   ========================================================================== */
.navbar {
    width: 100%;
    height: 90px;
    background: #030712;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #f8b400;
}

.nav-links .active {
    color: #f8b400;
    border-bottom: 3px solid #f8b400;
    padding-bottom: 10px;
}

/* Hide mobile-specific lists on desktop */
.mobile-action {
    display: none;
}

.desktop-buttons {
    display: flex;
    align-items: center;
    gap: 25px;
}

.login-btn {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.start-btn {
    text-decoration: none;
    background: #f8b400;
    color: #000;
    padding: 7px 14px;
    border-radius: 12px;
    font-weight: 700;
    transition: .3s;
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(248,180,0,.5);
}

.menu-toggle {
    display: none; /* Hidden completely on desktop layouts */
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #f8b400;
    transition: 0.3s;
}

/* Hamburger Toggle States */
.menu-toggle.open .hamburger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open .hamburger-icon span:nth-child(2) { opacity: 0; }
.menu-toggle.open .hamburger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px;
    background-color: #030712;
    background-image: 
        linear-gradient(rgba(3, 7, 18, 0.95), rgba(3, 7, 18, 0.95)),
        linear-gradient(rgba(248, 180, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(248, 180, 0, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 45px 45px, 45px 45px;
}

.hero-left {
    width: 55%;
}

.hero-tag {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgba(248,180,0,.3);
    border-radius: 30px;
    color: #f8b400;
    margin-bottom: 25px;
    font-size: 14px;
}

.hero-left h1 {
    font-size: 72px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 25px;
}

.hero-left p {
    color: #a8b0c0;
    font-size: 18px;
    line-height: 1.8;
    max-width: 700px;
}

.hero-buttons {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

.activate-btn {
    background: #f8b400;
    color: #000;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
}

.demo-btn {
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
}

.hero-right {
    width: 40%;
    display: flex;
    justify-content: center;
}

.ai-circle {
    width: 450px;
    height: 450px;
    border: 2px solid rgba(248,180,0,.2);
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: float 4s ease-in-out infinite;
}

.ai-core {
    width: 170px;
    height: 170px;
    background: #f8b400;
    color: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: bold;
    box-shadow: 0 0 40px rgba(248,180,0,.5);
}

.status-box {
    position: absolute;
    background: #111827;
    border: 1px solid rgba(255,255,255,.1);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
}

.live { top: 40px; left: -20px; }
.online { top: 120px; right: -20px; }
.analyze { bottom: 70px; left: -30px; }

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

/* ==========================================================================
   STATISTICS SECTION
   ========================================================================== */
.stats-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 80px;
    background: #050816;
}

.stat-card {
    width: 320px;
    text-align: center;
    background: #0b1220;
    padding: 40px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.05);
    transition: .3s;
}

.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(248,180,0,.4);
}

.stat-card h2 {
    font-size: 48px;
    color: #f8b400;
    margin-bottom: 15px;
    font-weight: 900;
}

.stat-card p {
    color: #a8b0c0;
    font-size: 18px;
}

/* ==========================================================================
   STRATEGIES SECTION
   ========================================================================== */
.strategies-section {
    padding: 100px 80px;
    background: #070d18;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title span {
    color: #f8b400;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-title h2 {
    font-size: 48px;
    margin: 15px 0;
}

.section-title p {
    color: #a8b0c0;
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
}

.strategy-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.strategy-card {
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 20px;
    padding: 30px;
    transition: .4s;
    flex: 1 1 calc(25% - 30px);
    min-width: 260px;
}

.strategy-card:hover {
    transform: translateY(-10px);
    border-color: #f8b400;
    box-shadow: 0 0 30px rgba(248,180,0,.15);
}

.strategy-icon {
    width: 65px;
    height: 65px;
    background: rgba(248,180,0,.15);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
}

.strategy-card h3 {
    margin-bottom: 25px;
    font-size: 24px;
}

.strategy-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.strategy-stats span { color: #a8b0c0; }
.strategy-stats strong { color: #f8b400; }
.strategy-card p { margin-top: 20px; color: #b8c1d1; line-height: 1.8; }

/* ==========================================================================
   LIVE ACTIVITY TABLE
   ========================================================================== */
.activity-section {
    padding: 100px 80px;
    background: #050816;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.activity-table {
    max-width: 1200px;
    margin: auto;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
    min-width: 800px;
}

.activity-header {
    display: flex;
    background: #111827;
    padding: 20px;
    font-weight: 700;
    color: #f8b400;
}

.activity-row {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: .3s;
}

.activity-header > div:nth-child(1),
.activity-row > div:nth-child(1) { flex: 2; }
.activity-header > div:not(:nth-child(1)),
.activity-row > div:not(:nth-child(1)) { flex: 1; }

.activity-row:hover { background: #131d30; }
.buy { color: #00ff88; font-weight: 700; }
.sell { color: #ff6464; font-weight: 700; }
.profit { color: #00ff88; font-weight: bold; }
.success { color: #00ff88; }

/* ==========================================================================
   TRADING PLANS
   ========================================================================== */
.plans-section {
    padding: 100px 80px;
    background: #070d18;
}

.plans-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    max-width: 1200px;
    margin: auto;
    justify-content: center;
}

.plan-card {
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    transition: .4s;
    flex: 1 1 calc(33.333% - 35px);
    min-width: 300px;
}

.plan-card:hover {
    transform: translateY(-10px);
    border-color: #f8b400;
}

.plan-card h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.price {
    text-align: center;
    font-size: 54px;
    font-weight: 900;
    color: #f8b400;
    margin-bottom: 30px;
}

.plan-card ul {
    list-style: none;
    margin-bottom: 30px;
}

.plan-card ul li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #b8c1d1;
}

.plan-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background: #f8b400;
    color: #000;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
}

.featured-plan { border: 2px solid #f8b400; }
.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #f8b400;
    color: #000;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 12px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-section {
    padding: 100px 80px;
    background: #050816;
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
    justify-content: center;
}

.testimonial-card {
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 20px;
    padding: 35px;
    transition: .4s;
    flex: 1 1 calc(33.333% - 30px);
    min-width: 290px;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: #f8b400;
}

.testimonial-stars {
    color: #f8b400;
    font-size: 22px;
    margin-bottom: 20px;
}

.testimonial-card p {
    color: #b8c1d1;
    line-height: 1.9;
    margin-bottom: 30px;
}

.testimonial-user h4 { margin-bottom: 5px; }
.testimonial-user span { color: #a8b0c0; font-size: 14px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: #030712;
    border-top: 1px solid rgba(255,255,255,.05);
}

.footer-container {
    max-width: 1400px;
    margin: auto;
    padding: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.footer-column {
    flex: 1 1 calc(20% - 50px);
    min-width: 200px;
}

.footer-column:first-child {
    flex: 2 1 calc(40% - 50px);
    min-width: 260px;
}

.footer-logo img {
    width: 70px;
    margin-bottom: 20px;
}

.footer-column p { color: #a8b0c0; line-height: 1.9; }
.footer-column h3 { margin-bottom: 20px; color: #f8b400; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 12px; color: #b8c1d1; }
.footer-column ul li a { color: #b8c1d1; text-decoration: none; transition: .3s; }
.footer-column ul li a:hover { color: #f8b400; }
.footer-bottom { text-align: center; padding: 25px; border-top: 1px solid rgba(255,255,255,.05); color: #a8b0c0; }

/* ==========================================================================
   AUTHENTICATION PAGES
   ========================================================================== */
.auth-body {
    background: #050816;
    min-height: 100vh;
}

.auth-container {
    display: flex;
    min-height: 100vh;
}

.auth-left {
    width: 50%;
    background: #030712;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo {
    width: 90px;
    margin-bottom: 30px;
}

.auth-left h1 {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 25px;
}

.auth-left p { color: #a8b0c0; line-height: 1.8; }
.auth-right { width: 50%; display: flex; justify-content: center; align-items: center; }
.auth-form { width: 500px; background: #0b1220; padding: 40px; border-radius: 20px; }
.auth-form h2 { margin-bottom: 25px; }

.auth-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    background: #111827;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
}

.auth-btn {
    width: 100%;
    border: none;
    background: #f8b400;
    color: #000;
    padding: 15px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.auth-links { display: flex; justify-content: space-between; margin-top: 20px; }
.auth-links a { color: #f8b400; text-decoration: none; }
.alert { background: #2d1b1b; color: #ff9f9f; padding: 12px; border-radius: 10px; margin-bottom: 15px; }
.success-alert { background: #0f3b20; color: #7dffb3; padding: 12px; border-radius: 10px; margin-bottom: 15px; }




/* ==========================================================================
   AI CIRCLE ROTATION SYSTEM
   ========================================================================== */

/* 1. Reset static positions so the orbit calculation handles layout natively */
.ai-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 450px;
    height: 450px;
    border: 2px solid rgba(248,180,0,.2);
    border-radius: 50%;
    animation: float 4s ease-in-out infinite;
}

.status-box {
    position: absolute;
    margin: 0;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    will-change: transform;
}

/* 2. Apply separate phase-shifted keyframe loops to keep boxes spaced apart */
.status-box.live {
    animation: orbitLive 25s linear infinite;
}

.status-box.online {
    animation: orbitOnline 25s linear infinite;
}

.status-box.analyze {
    animation: orbitAnalyze 25s linear infinite;
}

/* ==========================================================================
   ORBIT TRAJECTORY KEYFRAMES (225px Radius)
   ========================================================================== */

/* Box 1 (Starts at 0 degrees - Top Center) */
@keyframes orbitLive {
    0% {
        transform: rotate(0deg) translateY(-225px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateY(-225px) rotate(-360deg);
    }
}

/* Box 2 (Starts at 120 degrees - Right Side) */
@keyframes orbitOnline {
    0% {
        transform: rotate(120deg) translateY(-225px) rotate(-120deg);
    }
    100% {
        transform: rotate(480deg) translateY(-225px) rotate(-480deg);
    }
}

/* Box 3 (Starts at 240 degrees - Left Side) */
@keyframes orbitAnalyze {
    0% {
        transform: rotate(240deg) translateY(-225px) rotate(-240deg);
    }
    100% {
        transform: rotate(600deg) translateY(-225px) rotate(-600deg);
    }
}



/* ==========================================================================
   LIVE DATA ENGINE ANIMATIONS
   ========================================================================== */

/* 1. SIGNAL FEED: Soft glowing pulse simulating a heartbeat data stream */
.status-box.live::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9px;
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5);
    animation: signalPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

/* 2. TRADES EXECUTED: Quick lightning flash when a entry fires */
.status-box.online, .strategy-icon {
    animation: tradeTrigger 4s ease-in-out infinite;
}

/* 3. PROFIT GENERATED: Steady ascending float to signify wealth building */
.status-box.analyze, .stat-card h2 {
    position: relative;
}

.status-box.analyze::after {
    content: '+$142.80';
    position: absolute;
    color: #00ff88;
    font-weight: 800;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: profitFloat 7.5s ease-in-out infinite;
}

/* ==========================================================================
   DYNAMIC ENGINE KEYFRAMES
   ========================================================================== */

/* Signal Heartbeat */
@keyframes signalPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }
}

/* Rapid trade execution flash (runs every 4 seconds) */
@keyframes tradeTrigger {
    0%, 90%, 100% {
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }
    93% {
        border-color: #f8b400;
        background: #1e293b;
        box-shadow: 0 0 15px rgba(248, 180, 0, 0.4);
    }
    96% {
        border-color: #00ff88;
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    }
}

/* Upward drifting profit ticker */
@keyframes profitFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, 5px);
    }
    30%, 60% {
        opacity: 1;
        transform: translate(-50%, -20px);
    }
    90%, 100% {
        opacity: 0;
        transform: translate(-50%, -35px);
    }
}
/* ==========================================================================
  /* ==========================================================================
   PRODUCTION GLOBAL MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 1200px) {
    .hero { padding: 60px 40px; }
    .hero-left h1 { font-size: 54px; }
    .strategy-card { flex: 1 1 calc(50% - 30px); }
    .plan-card { flex: 1 1 calc(50% - 35px); }
    .testimonial-card { flex: 1 1 calc(50% - 30px); }
}

@media (max-width: 992px) {
    .navbar { padding: 0 20px; height: 80px; }
    
    /* Swap desktop elements for dynamic mobile setups */
    .desktop-buttons { display: none; }
    .menu-toggle { display: flex; }
    
    /* Layout explicit items horizontally inside mobile navbar panel */
    .nav-links {
        display: flex;
        flex-direction: row;
        gap: 20px;
        width: auto;
    }
    
    .mobile-action {
        display: block;
    }
    
    /* Shrink tracking action targets slightly to cleanly secure viewport bounds */
    .mobile-action .start-btn {
        display: inline-block;
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 8px;
    }
    .mobile-action .login-btn {
        font-size: 13px;
    }
    
    /* Remove extra options out of immediate row layout flow */
    .extra-link {
        display: none;
        position: fixed;
        top: 80px;
        right: -100%;
        width: 260px;
        height: auto;
        background: #030712;
        border: 1px solid rgba(255,255,255,0.05);
        border-top: none;
        flex-direction: column;
        padding: 25px;
        gap: 20px;
        align-items: flex-start;
        z-index: 999;
        transition: 0.3s ease;
    }
    
    /* Reveal tray only when active class state handles it via JavaScript toggles */
    .extra-link.show {
        display: flex;
        right: 0;
    }
    
    /* Hero Adaptive Resizing */
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
        gap: 50px;
    }
    .hero-left, .hero-right { width: 100%; }
    .hero-left p { margin: 0 auto; }
    .hero-buttons { justify-content: center; }
    .ai-circle { width: 330px; height: 330px; margin: 0 auto; }
    .ai-core { width: 120px; height: 120px; font-size: 32px; }
    
    .strategy-card, .plan-card, .testimonial-card, .footer-column {
        flex: 1 1 100%;
    }
    .featured-plan { transform: none; }
    
    /* Authentication Panel Adapters */
    .auth-container { flex-direction: column; }
    .auth-left, .auth-right { width: 100%; padding: 40px 24px; }
    .auth-left { text-align: center; align-items: center; }
    .auth-left h1 { font-size: 38px; }
    .auth-form { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    .hero-left h1 { font-size: 40px; }
    .hero-buttons { flex-direction: column; gap: 15px; }
    .activate-btn, .demo-btn { text-align: center; width: 100%; }
    
    .stats-section, .strategies-section, .activity-section, .plans-section, .testimonials-section {
        padding: 60px 20px;
    }
    
    .section-title h2 { font-size: 32px; }
    .stat-card { width: 100%; }
    .footer-container { padding: 40px 20px; }
    
    /* Reset floating target layers cleanly against absolute edges */
    .live { top: 20px; left: 0px; }
    .online { top: 100px; right: 0px; }
    .analyze { bottom: 40px; left: -10px; }
}

@media (max-width: 600px) {
    .navbar { padding: 0 12px; }
    .nav-links { gap: 10px; }
    .nav-links a { font-size: 13px; }
    
    /* Tighten layout dimensions to maintain header row alignment */
    .mobile-action .start-btn { 
        padding: 5px 10px; 
        font-size: 12px; 
        letter-spacing: -0.2px;
    }
    .menu-toggle span { display: none; } /* Drops descriptive text to protect screen width */
}

@media (max-width: 480px) {
    .hero-left h1 { font-size: 32px; }
    .ai-circle { width: 290px; height: 290px; }
    .ai-core { width: 100px; height: 100px; font-size: 28px; }
    .status-box { font-size: 12px; padding: 8px 12px; }
    .live { top: 10px; }
    .online { top: 80px; }
    .price { font-size: 44px; }
}

/* Micro-adjustments for ultra-compact phone displays */
@media (max-width: 400px) {
    .nav-links { gap: 8px; }
    .nav-links a { font-size: 12px; }
    
    .mobile-action .start-btn {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 6px;
    }
}