:root {
    /* Extracted from Logo */
    --color-navy: #1B2045; 
    --color-gold: #A68A50;
    
    /* Dark Theme Base */
    --bg-body: #0f1016; 
    --bg-card: #1a1b24;
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
}

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

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Clean, system default */
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3 { color: var(--color-gold); text-transform: uppercase; letter-spacing: 2px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* Layout - General */
section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
    position: relative; /* Setup for stacking contexts */
    z-index: 1; /* Content sits above background */
}

section.visible { opacity: 1; transform: translateY(0); }


/* --- HERO SECTION UPDATES --- */
.hero {
    /* BREAK OUT of the 1000px limit */
    max-width: 100vw !important; 
    width: 100%;
    
    position: relative; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--bg-body); 
    overflow: hidden;
    padding: 0; /* Reset padding for full edge-to-edge */
}


.hero img {
    width: 240px; 
    height: auto;
    margin-bottom: 1.5rem;
    z-index: 2; /* Ensure it sits on top of canvas */
    position: relative;
    border-radius: 50%; /* Optional: If you want it round, keep; otherwise remove */
}

/* Ensure Text sits above canvas */
.hero h1, .hero p {
    z-index: 2;
    position: relative;
    max-width: 800px; /* Keep text readable, don't let it stretch too wide */
    padding: 0 20px;
}

/* The Canvas Background */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    opacity: 0.6;
}

/* --- UPDATE CARDS FOR SPOTLIGHT EFFECT --- */
.grid {
    /* We need this for the mouse tracking to work smoothly */
    position: relative; 
}

.card {
    background: rgba(26, 27, 36, 0.8); /* Slightly transparent */
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-left: 3px solid var(--color-navy); /* Keep your accent */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

/* The 'Flashlight' Glow */
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    padding: 2px; /* Width of the glow border */
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(166, 138, 80, 0.4), /* Gold glow */
        transparent 40%
    );
    z-index: -1; /* Behind the card content */
    opacity: 0;
    transition: opacity 0.5s;
}

/* Show glow only when hovering over the grid area */
.grid:hover .card::before {
    opacity: 1;
}

.card:hover {
    transform: translateY(-5px);
    border-left-color: var(--color-gold);
}

/* Competencies Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.card {
    background: var(--bg-card);
    padding: 25px;
    border-left: 3px solid var(--color-navy);
    transition: transform 0.3s, border-color 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold); /* Tech side lights up on hover */
}

/* Button */
.btn {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 30px;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-weight: bold;
}

.btn:hover { background: var(--color-gold); color: var(--bg-body); }