@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Syne:wght@700;800&family=Hanken+Grotesk:wght@300;400;600&display=swap');

:root {
    --primary: #16a34a;
    --edge: #7c3aed;
    --transit: #16a34a;
    --housing: #2563eb;
    --systems: #ea580c;
    --bg: #ffffff;
    --text: #0a0a0a;
    --border: rgba(0, 0, 0, 0.12);
    --font-body: "Tw Cen MT", "TwCenMT", "Hanken Grotesk", sans-serif;
    --font-heading: 'Syne', sans-serif;
    --font-accent: 'Outfit', sans-serif;
    --safe-x: 8%;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.618;
}

/* ═══════════════════════════════════════════════
   NAVIGATION — 70px fixed bar
   ═══════════════════════════════════════════════ */
nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 70px;
    padding: 0 var(--safe-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
}

.nav-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f1f5f9;
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    font-family: var(--font-accent);
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}

.nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0.4;
    transition: 0.3s;
    flex-shrink: 0;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    border: 1px solid var(--border);
}
.nav-back:hover { opacity: 1; border-color: var(--primary); color: var(--primary); }

.nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-logo-slot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    display: flex;
    gap: 2.5rem;
    flex-shrink: 0;
}

.nav-tabs a {
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    opacity: 0.35;
    transition: 0.3s;
    white-space: nowrap;
}
.nav-tabs a:hover, .nav-tabs a.active { opacity: 1; color: var(--primary); }


/* ═══════════════════════════════════════════════
   MORPH LOGO — Center hero → nav dock on scroll
   ═══════════════════════════════════════════════ */
.morph-logo {
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 200px;
    width: auto;
    z-index: 4500;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

body.is-scrolled .morph-logo {
    top: 35px;
    height: 32px;
    z-index: 10000;
}


/* ═══════════════════════════════════════════════
   HERO — Full viewport entry
   ═══════════════════════════════════════════════ */
.hero-full {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: inherit;
}


/* ═══════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════ */
h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-align: center;
}

h2 {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.1;
    text-align: center;
}

h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.half-accent { color: var(--primary); }


/* ═══════════════════════════════════════════════
   THEME COLORS — Per subdivision
   ═══════════════════════════════════════════════ */
body.edge-theme { --primary: var(--edge); }
body.transit-theme { --primary: var(--transit); }
body.housing-theme { --primary: var(--housing); }
body.systems-theme { --primary: var(--systems); }


/* ═══════════════════════════════════════════════
   WIDE CONTAINER — Grid padding enforcement
   ═══════════════════════════════════════════════ */
.wide-container {
    padding-left: var(--safe-x);
    padding-right: var(--safe-x);
}


/* ═══════════════════════════════════════════════
   PILLAR CARDS — Index homepage grid
   ═══════════════════════════════════════════════ */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 5rem;
}

.pillar-card {
    background: white;
    padding: 4rem 3rem;
    border-radius: 40px;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    transition: all 0.4s ease;
}
.pillar-card:hover { border-color: var(--primary); transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.04); }

.pillar-logo { height: 50px; margin-bottom: 2rem; }
.pillar-card p { font-size: 1rem; opacity: 0.5; text-align: center; max-width: 350px; line-height: 1.6; }


/* ═══════════════════════════════════════════════
   LEADER BOARD
   ═══════════════════════════════════════════════ */
.leader-grid-3x2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.leader-card { text-decoration: none; color: inherit; padding: 2rem 0; border-top: 1px solid var(--border); transition: 0.3s; }
.leader-card:hover { opacity: 0.7; }
.leader-title { font-family: var(--font-accent); font-size: 0.7rem; font-weight: 800; color: var(--primary); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.8rem; }
.leader-name { font-family: var(--font-heading); font-size: 1.8rem; }


/* ═══════════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.reveal.active { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════
   FILTER BAR — Subdivision sticky selector
   ═══════════════════════════════════════════════ */
.filter-bar {
    position: sticky;
    top: 85px;
    width: fit-content;
    margin: 0 auto 4rem;
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    padding: 0.7rem 2rem;
    border-radius: 100px;
    border: 1px solid var(--border);
    z-index: 100;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.filter-bar.hidden { transform: translateY(-120%); opacity: 0; }


/* ═══════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════ */
.outfit { font-family: var(--font-accent); }
.syne { font-family: var(--font-heading); }
.static-nav-logo { height: 32px; width: auto; }


/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    :root { --safe-x: 5%; }
    nav { height: 60px; }
    .nav-logo-slot { height: 60px; }
    .nav-search { display: none; }
    .morph-logo { height: 140px; }
    body.is-scrolled .morph-logo { height: 25px; top: 30px; }
    .pillar-grid { grid-template-columns: 1fr; }
    .leader-grid-3x2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Layout Basics */
    body { padding-bottom: 70px; } /* Bottom Nav Room */
    .wide-container { padding-left: 1rem; padding-right: 1rem; }
    
    /* Solid White Top Bar for Logo */
    body::before {
        content: ""; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 60px !important;
        background: var(--bg) !important; z-index: 9000 !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    /* Entire Navbar as Bottom Translucent Glass Pill */
    nav { 
        position: fixed !important; top: auto !important; bottom: 25px !important; left: 5% !important; width: 90% !important; height: 60px !important; 
        padding: 0 0.8rem; border-radius: 100px; 
        background: rgba(255, 255, 255, 0.5) !important; 
        backdrop-filter: blur(40px) saturate(150%) !important; 
        border: 1px solid rgba(255, 255, 255, 0.6); 
        display: flex; align-items: center; justify-content: space-between; 
        overflow: visible; box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        z-index: 10000;
    }
    
    .nav-logo-slot, .nav-search { display: none !important; }
    .nav-left { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    
    /* Back button inside bottom pill */
    .nav-back { 
        border: none; background: transparent; 
        padding: 0 !important; border-radius: 50%;
        width: 32px; height: 32px; display: flex !important; align-items: center; justify-content: center;
        font-size: 0 !important; color: transparent !important; margin-right: 0;
    }
    .nav-back::before { content: "←"; font-size: 1.2rem; font-family: sans-serif; font-weight: 800; color: var(--text); }
    
    /* Tabs Container inside bottom pill */
    .nav-tabs {
        position: static; width: auto; height: auto; 
        background: transparent !important; border: none; backdrop-filter: none !important;
        display: flex; justify-content: space-evenly; flex: 1; padding: 0; margin: 0; gap: 0; box-shadow: none;
    }
    
    /* Monographic Line Symbols via SVG */
    .nav-tabs a {
        font-size: 0; padding: 0; width: 34px; height: 34px;
        background-size: 20px; background-repeat: no-repeat; background-position: center;
        opacity: 0.4; transition: 0.3s; background-color: transparent !important; border-radius: 50%;
    }
    
    /* Solid circle for active tab using invert */
    .nav-tabs a.active { 
        opacity: 1; background-color: white !important; filter: invert(1); 
        box-shadow: 0 0 0 2px white;
    }
    .nav-tabs a::after { display: none !important; }
    
    .nav-tabs a[href$="index.html"] { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>'); }
    .nav-tabs a[href$="edge.html"] { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>'); }
    .nav-tabs a[href$="housing.html"] { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>'); }
    .nav-tabs a[href$="transit.html"] { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'); }
    .nav-tabs a[href$="systems.html"] { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>'); }
    
    /* Typography Overrides (Fluid Clamping to fix glitches) */
    h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; }
    h2 { font-size: clamp(1.8rem, 6vw, 2.2rem) !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; }
    h3 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; }
    .syne { font-size: clamp(2rem, 7vw, 2.4rem) !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; }
    p { font-size: clamp(0.9rem, 3vw, 1.1rem) !important; }
    
    /* Grid Overrides */
    .pillar-grid { gap: 1.5rem; margin-top: 3rem; }
    .pillar-card { padding: 2.5rem 1.5rem; border-radius: 24px; }
    .leader-grid-3x2 { grid-template-columns: 1fr; gap: 1.5rem; }
    /* FAB Plus Button & Toggle Logic */
    .fab-plus {
        display: flex !important;
        position: fixed !important; bottom: 100px !important; right: 25px !important;
        width: 45px !important; height: 45px !important; border-radius: 50% !important;
        background: var(--text) !important; color: var(--bg) !important;
        border: none !important; font-size: 1.5rem !important; font-weight: 300 !important;
        align-items: center; justify-content: center; z-index: 11000 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    .fab-plus.hidden { transform: scale(0) !important; opacity: 0 !important; }
    .fab-plus.active { transform: rotate(180deg) !important; background: var(--primary) !important; }

    /* Floating 2-Line Category Grid (Hidden by default) */
    .filter-bar {
        position: fixed !important; bottom: 160px !important; left: 5% !important; width: 90% !important; 
        top: auto !important;
        background: rgba(255, 255, 255, 0.98) !important; 
        backdrop-filter: blur(25px) !important;
        padding: 0.8rem !important; 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important; margin: 0 !important;
        border-radius: 24px !important; border: 1px solid var(--border) !important;
        z-index: 10500 !important;
        opacity: 0 !important; transform: translateY(20px) scale(0.95) !important;
        pointer-events: none !important;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
        box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    }
    
    /* Make the 'All Systems' button span full width for premium look */
    .filter-btn[data-filter="all"] { grid-column: span 2; }

    .filter-bar.expanded { opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }
    .filter-bar.hidden { opacity: 0 !important; transform: translateY(50px) !important; }
    
    .filter-btn { 
        background: rgba(0,0,0,0.03) !important; border: 1px solid rgba(0,0,0,0.05) !important; 
        padding: 0.7rem 0.5rem !important; font-size: 0.6rem !important; border-radius: 12px !important; 
        text-align: center !important; font-weight: 800 !important; color: var(--text) !important;
        text-transform: uppercase !important; letter-spacing: 0.05em !important; opacity: 0.5 !important;
        transition: 0.2s;
    }
    .filter-btn.active { opacity: 1 !important; background: var(--text) !important; color: var(--bg) !important; }
    
    /* Portal Templates Fixes */
    .portal-card { padding: 2.5rem 1.5rem !important; border-radius: 24px !important; }
    .portal-hero { padding: 8rem 1rem 5rem !important; }
    .feature-grid { grid-template-columns: 1fr !important; gap: 2rem !important; margin-top: 2rem !important; }
    .section-title { font-size: 1.8rem !important; margin-bottom: 1.5rem !important; }
    .btn-initialize { padding: 1.2rem 2rem !important; width: 100%; text-align: center; font-size: 0.7rem !important; box-sizing: border-box; }
    
    /* Cards Global Fix (Overrides local HTML styles) */
    .system-card, .node-card { padding: 1.5rem !important; border-radius: 16px !important; min-height: auto !important; box-sizing: border-box !important; }
    .node-card h3 { font-size: 1.4rem !important; margin-bottom: 0.5rem !important; }
    .node-card p { font-size: 0.95rem !important; }
    .tag-row { flex-wrap: wrap !important; gap: 0.5rem !important; margin-bottom: 1rem !important; }
    .edge-tag { padding: 0.3rem 0.6rem !important; font-size: 0.55rem !important; }
    .edge-hero-content p { font-size: 1.1rem !important; margin: 1rem auto !important; }
    
    /* Footer */
    footer { padding: 5rem 1rem 3rem !important; }
    
    /* Logo and Header Fixes */
    .morph-logo { left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; height: 60px !important; max-width: 80vw !important; z-index: 10000; box-sizing: border-box !important; }
    body.is-scrolled .morph-logo { height: 26px !important; top: 30px !important; max-width: 60vw !important; transform: translate(-50%, -50%) !important; }
    .hero-full p.outfit { letter-spacing: 0.3em !important; font-size: 0.6rem !important; margin-bottom: 2rem !important; }
    
    /* Section Gaps and Overflow Fixes */
    section, header, footer { padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box !important; width: 100% !important; overflow-x: hidden !important; }
    section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    #subdivisions { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    #leadership { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .edge-hero-content { padding-top: 6rem !important; padding-bottom: 4rem !important; }
    .leader-board-container { margin-top: 4rem !important; }
    .leader-board-container > div:first-child { margin-bottom: 4rem !important; }
    
    /* Systems Absolute Centering & Square Tile Sizing */
    .systems-grid { 
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.6rem !important; 
        width: 100% !important; 
        margin: 0 auto !important; 
        padding: 0 !important;
    }
    .system-card { 
        flex: 0 0 140px !important;
        width: 140px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 1rem 0.4rem !important; 
        text-align: center !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important; 
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .system-card h3 { font-size: 0.8rem !important; margin-bottom: 0.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
    .system-card .desc { font-size: 0.5rem !important; line-height: 1.1 !important; opacity: 0.5; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .symbol { font-size: 1.8rem !important; margin-bottom: 0.4rem !important; }
    
    /* Housing and Subdivision Layout Fixes */
    .feature-block { flex-direction: column !important; gap: 2rem !important; padding: 4rem 1.5rem !important; text-align: center !important; }
    .feature-block:nth-child(even) { flex-direction: column !important; }
    .feature-visual { height: 250px !important; width: 100% !important; border-radius: 20px !important; font-size: 0.6rem !important; }
    .feature-text h2 { text-align: center !important; margin-bottom: 1.5rem !important; }
    .feature-text p { font-size: 1.1rem !important; text-align: center !important; }
    
    /* Leadership Refinement */
    .leader-name { font-size: 1.35rem !important; }
    .leader-card { padding: 1.5rem 1rem !important; }
}