@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap');

:root {
    /* Stitch Design Tokens */
    --bg-primary: #191A1F;
    --bg-secondary: #0F1014;
    --surface: #25262B;
    --border: #2C2D33;

    --accent: #C6FF00;
    /* Neon Lime */
    --accent-hover: #B2E600;

    --text-main: #FFFFFF;
    --text-muted: #A0A0A0;
    --text-on-accent: #000000;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius: 4px;
    --spacing-section: 120px;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
h4,
.logo {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
}

h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

p {
    color: var(--text-muted);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    max-width: 70ch;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: var(--spacing-section) 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

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

/* Header */
header {
    background-color: rgba(25, 26, 31, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img {
    height: 40px;
    /* Invert logo to white for dark mode if it's transparent, 
     or use a brightness filter if it has a white bg (which might look boxy, checking this) */
    /* Assuming the generated logo has a white background, we might need to round it or filter it. 
     Let's try to make it look intentionally 'stickered' or just rounded for now. */
    border-radius: 4px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-muted);
}

nav a:hover {
    color: var(--accent);
}

/* Hero Section */
.hero {
    /* Fallback or overlay */
    background-color: var(--bg-secondary);
    padding: 160px 0;
    display: flex;
    align-items: center;
    min-height: 80vh;
    position: relative;
}

/* We override the inline styles in HTML for background images with a class or specificity if needed, 
   but HTML inline styles win. We need to ensure the gradient looks 'dark' enough 
   over the inline image. The inline style uses linear-gradient(rgba(13, 70, 61, 0.9)...).
   We should probably update the HTML to use specific classes or just override here with !important 
   if we want to change the gradient color to the new Navy.
   Easiest is to update style.css to target the inline style pattern or just leave it green-tinted?
   The user wants "Stitch Style" (Navy). Green tint contradicts Navy.
   I will use an ::after pseudo-element or just rely on the fact that I'm replacing the file content.
   Actually, the HTML has inline styles for the Hero background image on inner pages. 
   Home page uses .hero class in CSS (previously).
   Wait, the homepage HTML I saw earlier had:
   <section class="hero"> ... </section>
   And CSS had:
   .hero { background: ... url('assets/home-hero.jpg'); }
   
   The inner pages had inline styles:
   style="background: linear-gradient(...), url(...)"
   
   This is tricky. Inline styles override external CSS.
   I should update the HTML files to remove inline styles and use utility classes 
   like .hero-home, .hero-ev, .hero-panel to keep styling in CSS.
   OR I can use !important here, but that won't change the URL.
   
   Actually, I can target `[style*="background"]` but that's messy.
   Best approach: Use `!important` for the gradient part? No, background is one property.
   
   Alternative: The inline style has:
   linear-gradient(rgba(13, 70, 61, 0.9), rgba(43, 122, 120, 0.8)), url(...)
   
   This green gradient definitely clashes with the new Navy theme.
   I MUST update the HTML files to fix the gradient colors or move the background definition to CSS.
   The plan mentioned "Update HTML Structure if needed", this counts.
   
   Strategy:
   1. Define .hero-variant classes in CSS.
   2. Update HTML to use these classes and remove inline styles.
*/

.hero {
    /* Default for pages without specific class */
    background-size: cover;
    background-position: center;
    text-align: left;
    /* Stitch usually aligns left */
}

.hero .container {
    max-width: 900px;
    margin: 0;
    /* Left align content in container */
}

/* Hero Variants */
.hero-home {
    background: linear-gradient(rgba(25, 26, 31, 0.8), rgba(25, 26, 31, 0.6)), url('assets/home-hero.jpg');
    background-size: cover;
    background-position: center;
}

.hero-ev {
    background: linear-gradient(rgba(25, 26, 31, 0.8), rgba(25, 26, 31, 0.6)), url('assets/service-ev-charger.jpg');
    background-size: cover;
    background-position: center;
}

.hero-panel {
    background: linear-gradient(rgba(25, 26, 31, 0.8), rgba(25, 26, 31, 0.6)), url('assets/service-panel.jpg');
    background-size: cover;
    background-position: center;
}

.hero-location {
    background: linear-gradient(rgba(25, 26, 31, 0.8), rgba(25, 26, 31, 0.6)), url('assets/location-hb.jpg');
    background-size: cover;
    background-position: center;
}

.hero-contact {
    background: linear-gradient(rgba(25, 26, 31, 0.8), rgba(25, 26, 31, 0.6)), url('assets/team-contact.jpg');
    background-size: cover;
    background-position: center;
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(198, 255, 0, 0.2);
}

/* Cards (Bento Box Style) */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.card h3 {
    color: var(--text-main);
    margin-bottom: 1rem;
}

.card p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Feature Sections */
section h2 {
    color: var(--text-main);
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
}

/* Alternating BG for sections */
.section-padding:nth-of-type(even) {
    background-color: var(--bg-secondary) !important;
    /* Override inline styles if any */
}

/* Footer */
footer {
    background-color: #000000;
    padding: 80px 0;
    border-top: 1px solid var(--border);
}

footer h4 {
    color: var(--text-main);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

footer p,
footer li a {
    color: var(--text-muted);
    font-size: 0.95rem;
}

footer ul {
    list-style: none;
}

footer li {
    margin-bottom: 0.8rem;
}

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

/* Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    header .container {
        flex-direction: column;
        gap: 1rem;
    }

    nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        text-align: center;
    }

    .hero .container {
        margin: 0 auto;
    }
}