:root {
    /* Colors - EXACT match to antigravity.google */
    --bg-color: #ffffff;
    /* Pure white like antigravity */
    --text-color: #121317;
    /* Very dark gray from antigravity */
    --text-secondary: #45474d;
    /* Nav link gray from antigravity */
    --accent-color: #4285f4;
    --accent-hover: #7aa5f5;

    /* Card / Glass */
    --card-bg: #f8f9fa;
    /* Light gray cards on white background */
    --card-border: rgba(0, 0, 0, 0.12);
    --spotlight-color: rgba(0, 0, 0, 0.05);

    /* Nav */
    --nav-bg: transparent;
    --nav-border: transparent;
    --nav-bg: transparent;
    --nav-border: transparent;
    --nav-bg-mobile: #ffffff;
    /* White mobile menu for light mode */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 5rem;

    /* Typography - EXACT match to antigravity */
    --font-family: 'Google Sans', 'Inter', system-ui, sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 430;
    /* Antigravity uses 430 for nav links */
    --font-weight-semibold: 450;
    /* Antigravity uses 450 for h1 */

    /* Transitions */
    --transition-speed: 0.4s;
}

/* Dark Mode (when toggled) */
body.dark-mode {
    --bg-color: #050505;
    --text-color: #e0e0e0;
    --text-secondary: #888888;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --spotlight-color: rgba(255, 255, 255, 0.1);
    --nav-bg-mobile: rgba(5, 5, 5, 1);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Grid Background Effect - Disabled */
body::before {
    display: none;
}

/* Navigation - Clean left-aligned layout */
nav {
    display: flex;
    justify-content: space-between;
    /* Logo left, links center-left, controls right */
    align-items: center;
    gap: 3rem;
    padding: 1rem 5rem 0.5rem 5rem;
    /* Increased top padding */
    height: auto;
    /* Let content determine height */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border: none;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between logo and text */
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    /* Prevent wrapping of brand text */
}

.nav-logo {
    height: 20px;
    /* EXACT antigravity logo height */
    width: auto;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    /* Comfortable spacing between links */
    list-style: none;
}

.nav-links a {
    color: var(--text-secondary);
    /* #45474d */
    text-decoration: none;
    font-size: 14.5px;
    /* EXACT from antigravity */
    font-weight: 430;
    /* EXACT from antigravity */
    padding: 10px 16px;
    /* Increased vertical padding for taller button */
    /* EXACT from antigravity */
    border-radius: 9999px;
    /* Fully rounded pill shape */
    transition: color 0.2s, background-color 0.2s;
}

.nav-links a.active {
    color: #121317;
    background-color: transparent;
    /* No background for active state by default */
    text-decoration: none;
}

.nav-links a:hover {
    color: #121317;
    /* Match button text color */
    background-color: rgb(239, 240, 243);
    /* EXACT from antigravity nav hover */
    text-decoration: none;
}

/* Hamburger Menu Toggle (Hidden by default) */
.menu-toggle {
    display: none;
}

/* Dark mode nav adjustments */
body.dark-mode .nav-links a {
    color: #888888;
}

body.dark-mode .nav-links a.active {
    color: #e0e0e0;
}

body.dark-mode .nav-links a.active {
    color: #e0e0e0;
    background-color: transparent;
}

/* Dark Mode Nav Hover Override */
body.dark-mode .nav-links a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
    /* Subtle white bg for dark mode */
}



.nav-controls {
    display: flex;
    gap: 1rem;
    margin-left: auto;
    /* Push to right */
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem;
    transition: color 0.2s;
    font-family: var(--font-mono);
}

.btn-icon:hover {
    color: var(--text-color);
    background-color: transparent;
}

/* Layout */
main {
    min-height: 80vh;
    width: 100%;
    max-width: none;
    /* Remove max-width to match nav's full width behavior */
    margin: 0;
    padding-left: 5rem;
    /* Match nav left padding */
    padding-right: 5rem;
    /* Match nav right padding */
    box-sizing: border-box;
}

section {
    margin-bottom: var(--spacing-lg);
    padding-top: 100px;
    /* Space for nav on non-hero pages */
    /* Space for nav on non-hero pages */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

/* Hero section overrides the padding */
.hero {
    padding-top: 0;
    /* No top padding for hero - it needs to be centered */
    min-height: 100vh;
    /* Full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center */
    align-items: center;
    /* Horizontally center */
    text-align: center;
    padding-left: 0;
    /* Remove inner padding so it aligns with main's 5rem */
    padding-right: 0;
}

/* Universal Heading Styles - adjusted for better readability */
h1 {
    font-size: 48px;
    /* Smaller, more readable for sub-pages */
    font-weight: 500;
    /* Slightly heavier for better Chinese character rendering */
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--text-color);
    /* #121317 */
    margin-bottom: 0.5rem;
    /* Reduced from 1rem to further tighten spacing */
}

.hero h1 {
    font-size: 80px;
    /* Hero uses larger size from antigravity */
    font-weight: 450;
    /* Antigravity weight for hero */
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

.devfest-logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 24px;
    /* Adjusted spacing from antigravity */
    justify-content: center;
    /* Center the container */
}

.gdg-logo {
    height: 40px;
    /* Increased to match text height */
    width: auto;
}

.devfest-text {
    font-size: 28px;
    /* Reverted to original size */
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: -0.5px;
}

.hero p {
    font-size: 56px;
    /* EXACT from antigravity subtitle span */
    font-weight: 450;
    /* Matching H1 weight */
    color: #45474d;
    /* EXACT from antigravity (lighter gray) */
    line-height: 1.2;
    max-width: 1400px;
    /* Increased width for larger text */
    margin: 0 auto 40px;
    /* Space before button */
}

.cta-button {
    display: inline-block;
    background-color: #121317;
    /* EXACT from antigravity */
    color: #ffffff;
    /* EXACT from antigravity */
    padding: 10px 24px;
    /* EXACT from antigravity */
    height: 47px;
    /* EXACT from antigravity */
    border-radius: 9999px;
    /* Fully rounded from antigravity */
    text-decoration: none;
    font-size: 17.5px;
    /* EXACT from antigravity */
    font-weight: 430;
    /* EXACT from antigravity */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Cards with Spotlight */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.grid-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.grid-programs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

/* Featured Card */
.card-featured {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    margin: 40px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-featured h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.card-featured p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Cards */
.card {
    background: #f8f9fc;
    /* EXACT from antigravity pricing */
    border: none;
    /* EXACT from antigravity */
    border-radius: 24px;
    /* Reduced from 36px as requested */
    /* EXACT from antigravity */
    padding: 24px;
    /* EXACT from antigravity */
    box-shadow: none;
    /* EXACT from antigravity */
    transition: transform 0.3s ease;
    /* Keep subtle transform for interactivity, but remove shadow */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    /* Keep subtle lift */
    /* No shadow change to match flat aesthetic */
}

/* Dark Mode Card Override */
body.dark-mode .card {
    background: #1e1f24;
    /* Reasonable dark gray for contrast against #050505 */
}

/* Spotlight Effect Logic */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px),
            var(--spotlight-color),
            transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.card:hover::before {
    opacity: 1;
}

.card h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.4rem;
    font-weight: 400;
    /* Normal weight */
}

.card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

/* Footer */
footer {
    text-align: center;
    padding: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 1024px) {

    /* Mobile Nav */
    nav {
        display: flex;
        /* Enforce flex */
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: var(--nav-bg-mobile);
        backdrop-filter: blur(10px);
        transition: transform 0.3s ease, background 0.3s ease;
    }

    nav.nav-hidden {
        transform: translateY(-100%);
    }

    .nav-brand {
        display: block;
        /* Ensure logo is visible */
        z-index: 1002;
        /* Above menu overlay */
        position: relative;
    }

    .nav-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
        z-index: 1002;
        /* Above menu overlay */
        position: relative;
    }

    .nav-links {
        position: fixed;
        top: 0;
        /* Cover full screen */
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--nav-bg-mobile);
        flex-direction: column;
        justify-content: flex-start;
        /* Align to top */
        padding-top: 80px;
        /* Space from top */
        align-items: center;
        gap: 2rem;
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: 998;
        /* Below controls/logo */
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links a {
        font-size: 1.5rem;
        opacity: 1;
    }

    /* Hamburger Button (Injected via JS) */
    .menu-toggle {
        display: block;
        background: transparent;
        /* Ensure transparent bg */
        border: none;
        color: var(--text-color);
        /* Inherit theme color */
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.2rem;
        line-height: 1;
        transition: color 0.2s;
        z-index: 1001;
    }

    /* Typography & Layout */
    .hero {
        min-height: 100dvh;
        /* Use dvh for better mobile browser support */
        padding: 0 1.5rem;
        margin-top: -80px;
        /* Counteract main padding to ensure true centering */
        /* Add horizontal padding for mobile */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Vertically center */
        align-items: center;
        /* Horizontally center */
    }

    .hero h1 {
        font-size: 36px;
        /* Reduced from 48px to prevent wrapping */
        padding: 0 1rem;
        white-space: nowrap;
        /* Prevent "DevFest Workshop" from wrapping */
    }

    .hero p {
        font-size: 32px;
        /* Smaller subtitle for mobile */
        padding: 0 1rem;
    }

    main {
        padding-top: 100px;
        /* Match section padding */
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    section {
        padding-top: 100px;
        /* Override global 210px for mobile */
    }

    .grid,
    .grid-intro,
    .grid-programs {
        grid-template-columns: 1fr;
        gap: 1rem;
        /* Reduced gap for mobile */
    }

    .card {
        padding: 1.5rem;
    }
}

/* Code Block Styling */
.code-block {
    background: #f1f3f4;
    /* Light gray for light mode */
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: monospace;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .code-block {
    background: rgba(255, 255, 255, 0.1);
    /* Translucent white for dark mode */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop Nav Scroll Hide (Optional, but user asked for it generally) */
/* Actually user asked for "https://antigravity.google" behavior which applies to desktop too usually. */
/* Let's apply .nav-hidden globally but only trigger it via JS */
nav.nav-hidden {
    transform: translateY(-100%);
}

/* Utility for text fade */
[data-i18n] {
    transition: opacity 0.2s ease;
}