/* --- GLOBAL VARIABLES --- */
:root {
    --bg-main: #050505; /* Deep, rich black */
    --bg-card: #111111; /* Sleek dark gray for cards */
    --bg-card-hover: #161616;
    
    --text-main: #e0e0e0;
    --text-muted: #888888;
    
    --neon-green: #00ff88; /* Modern mint-green tech color */
    --neon-yellow: #ffcc00;
    --neon-red: #ff3366;
    
    --border-color: #222222;
}

html {
    scroll-behavior: smooth;
}

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

/* --- PROFESSIONAL DARK BACKGROUND --- */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-main);
    line-height: 1.7; /* Optimized for readable long text */
    overflow-x: hidden;
    
    /* CSS-only ambient lighting background (No image needed) */
    background-color: var(--bg-main);
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(0, 255, 136, 0.03), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 204, 0, 0.03), transparent 25%);
    background-attachment: fixed;
}

/* --- LAYOUT UTILITIES --- */
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 25px; 
}
.section { 
    margin: 120px 0; /* Huge whitespace for breathing room */
}
.center-text { text-align: center; }
.justify-center { justify-content: center; }

/* --- TYPOGRAPHY HIERARCHY --- */
h1, h2, h3, h4 { color: #ffffff; }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }

.section-title { 
    font-size: 2.4rem; 
    margin-bottom: 50px; 
    letter-spacing: -0.5px; 
    text-align: center; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 15px;
}
.subsection-title { 
    font-size: 1.5rem; 
    color: var(--neon-green); 
    margin: 40px 0 20px 0;
}
.section-intro {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 800px; /* Prevents long lines of text */
    margin: 0 auto 40px auto;
}

/* --- HERO SECTION --- */
.hero {
    text-align: center;
    padding: 140px 0 100px 0;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, #0a0a0a 0%, var(--bg-main) 100%);
}
.hero h1 { 
    font-size: 5.5rem; 
    letter-spacing: 4px; 
    margin-bottom: 15px; 
}
.hero h2 { 
    font-size: 1.4rem; 
    color: #aaaaaa; 
    margin-bottom: 20px; 
    font-weight: 400;
}
.hero .subtitle { 
    color: var(--neon-green); 
    font-weight: 500; 
    letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.pulse-glow { animation: textPulse 3s infinite alternate; }
@keyframes textPulse {
    0% { text-shadow: 0 0 20px rgba(0, 255, 136, 0.1); }
    100% { text-shadow: 0 0 40px rgba(0, 255, 136, 0.4); }
}

/* --- TABLE OF CONTENTS --- */
.toc-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    margin: -50px auto 80px auto;
    position: relative;
    max-width: 900px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.toc-container h3 { margin-bottom: 20px; color: #fff; text-align: center; font-size: 1.2rem;}
.toc-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; }
.toc-list a {
    color: var(--text-muted); text-decoration: none; padding: 10px 18px; 
    background: var(--bg-main); border-radius: 6px; border: 1px solid var(--border-color);
    transition: all 0.3s ease-out; font-size: 0.95rem; font-weight: 500;
}
.toc-list a:hover { 
    background: rgba(0, 255, 136, 0.05); 
    color: var(--neon-green); 
    border-color: var(--neon-green); 
    transform: translateY(-2px);
}

/* --- GRID LAYOUTS --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.problem-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }

/* --- SLEEK CARDS --- */
.card {
    background-color: var(--bg-card); 
    border-radius: 12px; 
    padding: 40px; /* Ample internal padding */
    transition: all 0.3s ease-out; 
    border: 1px solid var(--border-color);
}
.card p { margin-bottom: 20px; color: #aaaaaa; }
.card-title { font-size: 1.4rem; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; }
.content-image { width: 100%; border-radius: 8px; margin-bottom: 20px; border: 1px solid #333; }

/* Consistent Accent Colors & Hovers */
.card-green { border-top: 3px solid var(--neon-green); }
.green-text { color: var(--neon-green) !important; }
.hover-glow-green:hover { 
    border-color: var(--neon-green); 
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.08); 
    transform: translateY(-5px); 
    background-color: var(--bg-card-hover);
}

.card-red { border-top: 3px solid var(--neon-red); }
.red-text { color: var(--neon-red) !important; }
.hover-glow-red:hover { 
    border-color: var(--neon-red); 
    box-shadow: 0 10px 30px rgba(255, 51, 102, 0.08); 
    transform: translateY(-5px);
    background-color: var(--bg-card-hover);
}

.card-yellow { border-top: 3px solid var(--neon-yellow); }
.yellow-text { color: var(--neon-yellow) !important; }
.hover-glow-yellow:hover { 
    border-color: var(--neon-yellow); 
    box-shadow: 0 10px 30px rgba(255, 204, 0, 0.08); 
    transform: translateY(-5px);
    background-color: var(--bg-card-hover);
}

.hover-lift:hover { 
    transform: translateY(-5px); 
    border-color: #444; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); 
    background-color: var(--bg-card-hover);
}

/* --- LISTS --- */
.custom-list { list-style: none; }
.custom-list li { position: relative; padding-left: 25px; margin-bottom: 12px; color: #aaa; font-size: 0.95rem; }
.custom-list li strong { color: #fff; }
.green-bullets li::before { content: "▹"; color: var(--neon-green); position: absolute; left: 0; top: 0; font-size: 1.2rem; line-height: 1.2;}
.red-bullets li::before { content: "▹"; color: var(--neon-red); position: absolute; left: 0; top: 0; font-size: 1.2rem; line-height: 1.2;}
.yellow-bullets li::before { content: "▹"; color: var(--neon-yellow); position: absolute; left: 0; top: 0; font-size: 1.2rem; line-height: 1.2;}

.rule-box { background: var(--bg-main); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); margin-top: 20px;}

/* --- IMAGES --- */
.image-wrapper {
    margin: 60px auto; padding: 30px; background: var(--bg-card); border-radius: 12px;
    border: 1px solid var(--border-color); text-align: center; max-width: 900px;
    transition: all 0.3s ease-out;
}
.image-wrapper h3 { margin-bottom: 25px; color: #fff; font-size: 1.3rem;}
.project-image { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #333; }
.image-caption { margin-top: 20px; font-size: 0.9rem; color: #666; font-style: italic; }

/* --- TECH CARDS --- */
.tech-card {
    background: var(--bg-card); border: 1px solid var(--border-color); padding: 35px 25px; 
    border-radius: 12px; text-align: center; transition: all 0.3s ease-out;
}
.tech-card h4 { margin-bottom: 15px; color: #fff; font-size: 1.1rem; }
.tech-card i { color: var(--neon-green); font-size: 2rem; display: block; margin-bottom: 15px; }
.tech-card p { font-size: 0.9rem; color: #999; }

/* --- FAILSAFE LIGHTS --- */
.failsafe-lights { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap;}
.light { padding: 15px 30px; border-radius: 50px; font-weight: 600; letter-spacing: 1px; color: #000; background: #333;}
.red-light { background: var(--neon-red); box-shadow: 0 0 20px rgba(255,51,102,0.4); color: #fff;}
.yellow-light { background: var(--neon-yellow); box-shadow: 0 0 20px rgba(255,204,0,0.4); color: #000;}
.green-light { background: var(--neon-green); box-shadow: 0 0 20px rgba(0,255,136,0.4); color: #000;}

/* --- TABLES --- */
.table-container { overflow-x: auto; margin-top: 30px; border-radius: 12px; border: 1px solid var(--border-color);}
.styled-table { width: 100%; border-collapse: collapse; background-color: var(--bg-card); }
.styled-table th, .styled-table td { padding: 20px 25px; text-align: left; border-bottom: 1px solid var(--border-color); }
.styled-table th { background-color: #0a0a0a; color: var(--neon-green); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
.styled-table td { color: #bbb; font-size: 0.95rem; }
.styled-table tr:hover { background-color: var(--bg-card-hover); }
.total-row { background-color: #0a0a0a !important; border-top: 2px solid var(--border-color);}
.total-row td { color: var(--neon-yellow); font-size: 1.1rem; font-weight: 600; border-bottom: none;}

/* --- TEAM & LINKS --- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 60px; }
.team-card {
    background: var(--bg-card); border-radius: 12px; padding: 40px 20px; text-align: center;
    border: 1px solid var(--border-color); transition: all 0.3s ease-out;
}
.team-card h3 { color: #fff; margin-bottom: 5px; font-size: 1.1rem;}
.team-card .e-number { color: #777; font-size: 0.9rem; margin-bottom: 25px; font-family: monospace; font-size: 1rem;}
.email-btn {
    display: inline-block; padding: 10px 20px; background: rgba(0, 255, 136, 0.05);
    color: var(--neon-green); text-decoration: none; border-radius: 6px; font-size: 0.9rem;
    border: 1px solid rgba(0, 255, 136, 0.2); transition: all 0.3s ease-out; font-weight: 500;
}
.email-btn:hover { background: var(--neon-green); color: #000; }

.project-links-box {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px;
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.link-item {
    color: #ccc; text-decoration: none; font-size: 1rem; padding: 12px 24px; font-weight: 500;
    background: var(--bg-main); border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.3s ease-out;
}
.link-item:hover { color: var(--neon-green); border-color: var(--neon-green); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,255,136,0.1);}
.link-item i { margin-right: 10px; font-size: 1.1rem;}

/* --- FOOTER --- */
footer { padding: 40px 0; border-top: 1px solid var(--border-color); margin-top: 100px; background-color: var(--bg-main); }
.footer-text { color: #555; font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;}

/* --- ANIMATIONS --- */
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .problem-solution-grid, .grid-2 { grid-template-columns: 1fr; }
    .hero h1 { font-size: 3.5rem; }
    .section { margin: 80px 0; }
    .project-links-box { flex-direction: column; text-align: center; }
    .failsafe-lights { flex-direction: column; align-items: center; }
    .light { width: 100%; max-width: 200px; }
}