:root {
    --bg-color: #0a0a12;
    --text-primary: #ffffff;
    --text-secondary: #b4b4c7;
    --accent-color: #00f3ff;
    --accent-hover: #00c2cc;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    overflow-x: hidden;
}

/* Canvas Background */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(10, 10, 18, 0.7);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.dot {
    color: var(--accent-color);
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: 0.3s;
    position: relative;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--text-primary);
}

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

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

.btn-login {
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: 0.3s;
    background: var(--glass-bg);
}

.btn-login:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-color);
}

/* Hide mobile login buttons on desktop */
.nav-links .btn-login {
    display: none;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-content {
    max-width: 800px;
    animation: fadeInUp 1s ease-out;
}

h1 {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -2px;
    position: relative;
}

.subtitle {
    font-size: 1.8rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn {
    padding: 14px 36px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--accent-color);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

.btn-primary:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

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

.btn-outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(0, 243, 255, 0.05);
}

/* Glitch Effect */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip: rect(20px, 9999px, 10px, 0); }
    20% { clip: rect(60px, 9999px, 30px, 0); }
    40% { clip: rect(10px, 9999px, 80px, 0); }
    60% { clip: rect(90px, 9999px, 50px, 0); }
    80% { clip: rect(30px, 9999px, 20px, 0); }
    100% { clip: rect(70px, 9999px, 90px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(60px, 9999px, 10px, 0); }
    20% { clip: rect(10px, 9999px, 50px, 0); }
    40% { clip: rect(80px, 9999px, 30px, 0); }
    60% { clip: rect(20px, 9999px, 90px, 0); }
    80% { clip: rect(50px, 9999px, 10px, 0); }
    100% { clip: rect(40px, 9999px, 60px, 0); }
}

/* Stats Bar */
.stats-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 100px;
    padding: 40px 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    border-top: 1px solid rgba(255,255,255,0.05);
}

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

.stat-item .number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
}

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

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    animation: float 2s infinite;
}

.scroll-indicator span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    transform: rotate(45deg);
}

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

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

/* Subpage Styles */
.page-header {
    padding: 150px 20px 80px;
    text-align: center;
}

.page-header h1 {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* Grid Layouts */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 60px;
    align-items: center;
}

/* Cards */
.tech-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 16px;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.tech-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    transform: scaleX(0);
    transition: 0.4s;
}

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

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 24px;
    color: var(--accent-color);
}

.tech-card h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.tech-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.card-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card-link:hover {
    gap: 12px;
}

/* Solution Section */
.solution-item {
    margin-bottom: 100px;
}

.solution-item:nth-child(even) .grid-2 {
    direction: rtl;
}

.solution-item:nth-child(even) .solution-content {
    direction: ltr;
}

.solution-img {
    width: 100%;
    height: 300px;
    background: linear-gradient(45deg, rgba(0,243,255,0.1), rgba(0,0,0,0.5));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.solution-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMCwgMjQzLCAyNTUsIDAuMikiLz48L3N2Zz4=');
    opacity: 0.5;
}

/* About Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.1);
}

.timeline-item {
    margin-bottom: 60px;
    position: relative;
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 40px;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 40px;
}

.timeline-dot {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--bg-color);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -10px;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
}

.year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
}

/* Footer */
footer {
    border-top: 1px solid var(--glass-border);
    padding: 60px 0 20px;
    background: rgba(0,0,0,0.5);
    margin-top: 80px;
}

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

.footer-col h4 {
    color: #fff;
    margin-bottom: 20px;
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.footer-col a:hover {
    color: var(--accent-color);
}

/* Menu Toggle (Hamburger) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 101;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--text-primary);
    transition: 0.3s;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    background: var(--accent-color);
}

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

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    background: var(--accent-color);
}

@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(10, 10, 18, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid var(--glass-border);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

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

    .nav-links a {
        font-size: 1.2rem;
    }

    /* Login buttons inside nav on mobile */
    .nav-links .btn-login {
        display: block;
        margin-top: 20px;
        width: 80%;
        text-align: center;
    }

    /* Hide desktop login buttons from navbar header */
    .navbar > .btn-login,
    .navbar > div > .btn-login {
        display: none;
    }
    
    /* But we need to show them INSIDE the nav-links, 
       but currently they are outside in the HTML. 
       We'll need to move them or clone them in JS, 
       OR we just hide them on mobile header and rely on user adding them to nav-links?
       
       Better approach for HTML structure without changing too much logic:
       We can keep them outside for desktop, but on mobile we might need them inside.
       
       Wait, looking at index.php structure:
       <div class="nav-links">...</div>
       <?php if(is_logged_in()): ?> ... <?php endif; ?>
       
       The login buttons are siblings to nav-links.
       
       Mobile Strategy:
       We can wrap everything (links + buttons) in a container that becomes the mobile menu,
       OR we can use CSS to make the siblings look like they are together.
       
       Let's make .nav-links AND the buttons container responsive?
       Or better, let's move the buttons inside .nav-links in the HTML update step.
       That's cleaner. I will move the login logic INTO .nav-links in the HTML files.
    */
    
    .grid-2 { grid-template-columns: 1fr; }
    .solution-item:nth-child(even) .grid-2 { direction: ltr; }
    .timeline::before { left: 20px; }
    .timeline-item { width: 100%; left: 0 !important; padding-left: 50px !important; text-align: left !important; }
    .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 10px; }
    .footer-grid { grid-template-columns: 1fr; }
    
    /* Hero Mobile */
    .hero h1 {
        font-size: 2.8rem;
    }
    .hero .subtitle {
        font-size: 1.2rem;
    }
    .stats-bar {
        flex-direction: column;
        gap: 30px;
        padding: 30px 0;
        background: rgba(0,0,0,0.8);
    }
    .cta-group {
        flex-direction: column;
        width: 100%;
    }
    .cta-group .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Page Header Mobile */
    .page-header h1 {
        font-size: 2.5rem;
    }
}