html {
    scroll-behavior: smooth;
}

/* 
    Cortenity | Parent Brand Design System v2.0
    Confidence, Clarity, and Premium Utility.
*/

:root {
    --bg-master: #050505;
    --bg-card: rgba(15, 15, 15, 0.6);
    --bg-nav: rgba(5, 5, 5, 0.9);
    --text-prim: #ffffff;
    --text-sec: #a1a1aa;
    --text-dim: #52525b;

    /* Neon Accents - Vibrant Revert */
    --accent-brand: #0096ff;
    --accent-ai: #00ffa3;
    --accent-trend: #f59e0b;
    --accent-gumroad: #ff0055;
    --accent-tools: #00a3ff;
    --accent-gaming: #8b5cf6;
    --accent-social: #ec4899;
    --accent-live: #22c55e;
    --accent-future: #9ca3af;

    --accent-glow: rgba(0, 210, 255, 0.15);
    /* Cyan-green glow base */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-xl: 32px;
    --radius-lg: 20px;
    --border: 1px solid rgba(255, 255, 255, 0.08);
    --font-h: 'Outfit', sans-serif;
    --font-b: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-master);
    color: var(--text-prim);
    font-family: var(--font-b);
    overflow-x: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Background System */
.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(1200px circle at var(--mouse-x) var(--mouse-y), rgba(0, 210, 255, 0.12), rgba(0, 255, 163, 0.05) 50%, transparent 80%);
}

.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 25px 0;
    border-bottom: var(--border);
    background: var(--bg-nav);
    backdrop-filter: blur(30px);
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 15px 0;
    background: rgba(5, 5, 5, 0.98);
}

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

.nav-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -1.2px;
}

.nav-logo img {
    height: 38px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 35px;
    list-style: none !important;
}

.nav-links a {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.nav-links a:hover {
    opacity: 1;
}

/* Nav Toggle (Hamburger) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.nav-toggle span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 10px;
    transition: var(--transition);
}

.navbar.nav-active .nav-toggle span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}

.navbar.nav-active .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.navbar.nav-active .nav-toggle span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Neon Button System */
.btn-vibrant {
    position: relative;
    padding: 14px 32px;
    background: linear-gradient(135deg, #00d2ff, #00ffa3);
    color: #000;
    border-radius: 100px;
    font-weight: 800;
    font-family: var(--font-h);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.3);
    display: inline-block;
    text-align: center;
}

.btn-vibrant::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.btn-vibrant:hover::before {
    left: 100%;
}

.btn-vibrant:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 210, 255, 0.5);
}

.btn-ghost {
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
    display: inline-block;
    text-align: center;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
}

/* Utility Section Spacing */
section {
    padding: 120px 0;
}

.h-section {
    font-family: var(--font-h);
    font-size: 3.5rem;
    letter-spacing: -2px;
    margin-bottom: 60px;
    background: linear-gradient(135deg, #fff, var(--text-dim));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Reveal System */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section */
.hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding-top: 150px;
    padding-bottom: 80px;
}

.hero-content {
    max-width: 900px;
}

.hero-tag {
    color: #0080ff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 35px;
    display: block;
    font-size: 0.85rem;
}

.h-hero {
    font-family: var(--font-h);
    font-size: 6rem;
    line-height: 0.95;
    margin-bottom: 40px;
    letter-spacing: -3.5px;
    font-weight: 800;
}

.hero-fade {
    background: linear-gradient(to bottom, #fff 30%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p-lead {
    font-size: 1.3rem;
    color: var(--text-sec);
    line-height: 1.6;
    margin-bottom: 45px;
    max-width: 700px;
    font-weight: 400;
    opacity: 0.9;
}

.hero-actions {
    margin-top: 50px;
}

/* Global Section Label Refinement (Blue Color) */
.section-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #0080ff;
    /* Unified vibrant blue */
    margin-bottom: 25px;
    display: block;
}

.h-hero {
    font-family: var(--font-h);
    font-size: 6.5rem;
    line-height: 1;
    letter-spacing: -4px;
    font-weight: 800;
    margin-bottom: 30px;
}

.p-lead {
    font-size: 1.5rem;
    color: var(--text-sec);
    max-width: 800px;
    margin-bottom: 50px;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* Mission Section - Centered Design */
.about-section {
    padding: 160px 0;
    text-align: center;
}

.about-wrap.centered {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-about {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 300;
    color: var(--text-sec);
    margin-top: 40px;
}

.p-about span {
    color: #fff;
    font-weight: 700;
}

/* Projects Section - Professional Spacing */
.project-grid {
    display: flex;
    flex-direction: column;
    gap: 256px;
    /* Professional spacing as requested */
    padding: 100px 0;
}

.project-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    transition: var(--transition);
    display: block;
    position: relative;
    overflow: visible;
    min-height: 80vh;
}

.project-content {
    display: grid;
    grid-template-areas:
        "image badge"
        "image title"
        "image desc"
        "image visit"
        "image resources"
        "image tools";
    grid-template-columns: 1.1fr 1fr;
    gap: 0 80px;
    align-items: center;
}

.project-image-wrap {
    grid-area: image;
    width: 100%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.project-card:nth-child(even) .project-content {
    grid-template-areas:
        "badge image"
        "title image"
        "desc image"
        "visit image"
        "resources image"
        "tools image";
    grid-template-columns: 1fr 1.1fr;
}

.project-card:hover {
    background: transparent !important;
    border: none !important;
    transform: none !important;
}

.project-card::before {
    display: none;
}

.project-image-wrap {
    width: 100%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition);
}

.project-card:hover .project-image {
    transform: scale(1.02);
}

.project-content {
    padding: 0;
}

.status-badge {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.status-badge.live {
    color: #00ffa3 !important;
    border-color: rgba(0, 255, 163, 0.3) !important;
}

.status-badge.dev {
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.project-card h3 {
    font-family: var(--font-h);
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.project-desc {
    color: var(--text-sec);
    line-height: 1.7;
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-weight: 300;
}

.resource-section,
.tool-section {
    margin-top: 40px;
}

/* Global Section Label Refinement (Blue Color) consolidated in Hero section */

.resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-prim);
    transition: var(--transition);
}

.tag:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.sub-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sub-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px;
    transition: var(--transition);
    text-decoration: none;
    display: block;
}

.sub-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #00ffa3;
    /* Neon green glow to match buttons */
    box-shadow: 0 0 30px rgba(0, 255, 163, 0.2);
    transform: translateY(-5px);
    cursor: default;
    /* For Global Finder unlinked cards */
}

.sub-card.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.8);
}

.sub-card h4 {
    font-family: var(--font-h);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.sub-card p {
    font-size: 0.9rem;
    color: var(--text-sec);
    margin: 0;
    line-height: 1.5;
}

/* Website Visit Button */
.btn-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    /* 25% shorter */
    background: linear-gradient(135deg, #00d2ff, #00ffa3);
    color: #000 !important;
    font-weight: 800;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-b);
    font-size: 0.9rem;
    /* Slightly smaller for proportion */
    margin: 30px 0;
    transition: var(--transition);
    border: none;
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.4);
}

.btn-visit:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 210, 255, 0.5);
}

/* Base content layout resets moved to media queries if needed */

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
}

.status-badge {
    display: inline-flex;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    align-self: flex-start;
}

.status-live {
    color: var(--accent-live);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-dev {
    color: var(--accent-trend);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.project-card h3 {
    font-family: var(--font-h);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.project-desc {
    color: var(--text-sec);
    line-height: 1.6;
    font-size: 1.15rem;
    margin-bottom: 30px;
    font-weight: 300;
}

.project-bullets {
    margin-bottom: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
}

.v-bullet {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-sec);
    margin-bottom: 12px;
}

.v-bullet::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-brand);
}

.project-actions {
    margin-top: auto;
    display: flex;
    gap: 15px;
}

/* Category & Resources Section - Niche Gateway (Reference Match) */
.category-section {
    background: transparent;
    /* Changed from solid color to transparent */
    padding: 120px 0;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Matching reference gap */
}

.cat-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    /* Slightly tighter radius */
    padding: 40px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-height: 340px;
}

/* Card Glow (Hover only, no static featured) */
.cat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    /* Keep glass blur, avoid solid black */
    border-color: #00ffa3;
    /* Cyan-green accent */
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 210, 255, 0.15);
}

.cat-icon-box {
    font-size: 2rem;
    margin-bottom: 25px;
    display: block;
}

.cat-card h3 {
    font-family: var(--font-h);
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.cat-card p {
    color: var(--text-sec);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: auto;
    font-weight: 400;
}

.cat-meta-box {
    margin-top: 25px;
}

.cat-meta {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #00ffa3;
    /* Exact neon green from reference */
}

.cat-meta.faded {
    color: #52525b;
    opacity: 0.6;
}

/* Roadmap Section */
.roadmap-wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
}

.roadmap-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--accent-brand), transparent);
    transform: translateX(-50%);
}

.roadmap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 100px;
}

.roadmap-content {
    width: 45%;
    background: var(--bg-card);
    border: var(--border);
    padding: 30px;
    border-radius: var(--radius-lg);
    position: relative;
}

.roadmap-dot {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #000;
    border: 3px solid var(--accent-brand);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px var(--accent-brand);
}

.roadmap-item:nth-child(even) {
    flex-direction: row-reverse;
}

.roadmap-date {
    font-family: var(--font-h);
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-brand);
    margin-bottom: 10px;
    display: block;
}

/* Contact Container */
.contact-container {
    padding: 60px;
    background: linear-gradient(135deg, #0a0a0a, #000);
    border-radius: 40px;
    border: var(--border);
}

/* Form Styles */
input,
select,
textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-b);
    margin-bottom: 20px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-brand);
    background: rgba(255, 255, 255, 0.05);
}

option {
    background: #000;
}

/* Mission Section - Centered Design (Reference Inspired) */
.about-section {
    padding: 160px 0;
    background: radial-gradient(circle at center, rgba(0, 150, 255, 0.03) 0%, transparent 70%);
}

.about-wrap.centered {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-about {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 300;
    color: var(--text-sec);
    margin-top: 40px;
    letter-spacing: -1px;
}

.p-about span {
    color: #fff;
    font-weight: 700;
}

/* Footer Section */
.footer {
    padding: 100px 0 50px;
    background: #000;
    border-top: var(--border);
}

.footer-main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

.f-logo {
    font-family: var(--font-h);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -2px;
}

.f-nav {
    display: flex;
    gap: 60px;
}

.f-tagline {
    font-size: 0.95rem;
    color: var(--text-sec);
    margin-top: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.f-contact {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.f-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-sec);
    font-size: 0.9rem;
    transition: var(--transition);
}

.f-contact-item:hover {
    color: #fff;
}

.f-contact-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-ai);
}

.f-group h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 25px;
}

.f-group a {
    display: block;
    color: var(--text-sec);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.f-group a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 60px;
    display: flex;
    flex-direction: row;
    /* Horizontal layout */
    justify-content: space-between;
    /* Socials to the right */
    align-items: center;
    gap: 30px;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.f-socials {
    display: flex;
    gap: 20px;
}

.social-icon {
    width: 22px;
    height: 22px;
    opacity: 0.6;
    transition: var(--transition);
}

.social-icon:hover {
    opacity: 1;
    filter: drop-shadow(0 0 8px #00ffa3);
    /* Cyan-green glow */
    transform: translateY(-3px);
}

/* General Contact & Button Styles */
.contact-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-input-row input {
    margin-bottom: 0;
}

.btn-submit {
    width: fit-content;
    min-width: 50%;
    /* Desktop/Tablet 50% min, grow if needed */
    display: block;
    margin: 0 auto;
    /* Center alignment */
    white-space: nowrap;
    /* Prevent multiline */
}

/* Website Visit Button Base */
.btn-visit {
    width: fit-content;
    min-width: 50%;
    /* Requested 50% width */
    white-space: nowrap;
    /* Prevent multiline */
    padding-left: 32px;
    padding-right: 32px;
}

/* Mobile Responsiveness */
@media (max-width: 1100px) {

    /* Tablet Spacing Fix */
    section {
        padding-bottom: 0 !important;
    }

    #contact {
        padding-bottom: 100px !important;
    }

    .project-grid {
        gap: 80px;
    }

    .h-hero {
        font-size: 4.5rem;
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Removed Roadmap overrides to maintain desktop (centered) style */
}

@media (max-width: 768px) {
    .container {
        padding: 0 25px;
    }

    /* Reduce spacing between sections on mobile */
    section {
        padding-top: 60px;
        padding-bottom: 0 !important;
    }

    /* Mobile Contact Layout - Stack inputs */
    .contact-input-row {
        grid-template-columns: 1fr;
    }

    .btn-submit {
        width: 100%;
        /* Mobile full width usually better? User said 'make the "Submit" button size 50% in desktop and tablet screens', implies mobile might be 100% or default. I'll stick to 100% for mobile UX unless asked otherwise. User didn't specify mobile size, just "50% in desktop and tablet". */
    }

    /* Exceptions where some bottom spacing might be needed inside the specific container, 
       but the section itself shouldn't push down too hard */

    .navbar {
        padding: 20px 0;
    }

    /* Responsive Logo Size */
    .nav-logo img {
        height: 34px;
        /* Smaller for mobile */
        width: auto;
    }

    .nav-logo {
        font-size: 1.3rem;
        /* Scales text down slightly too */
    }

    .nav-toggle {
        display: flex;
    }

    /* Mobile Menu - 75% Width & Matched Glassmorphism */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        /* Fully hidden */
        width: 75%;
        height: 100vh;
        /* Exact match to .cat-card styles */
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    }

    /* Backdrop Blur Overlay when Active - "Make webpage contents behind also blur" */
    .navbar.nav-active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        /* Slightly darker for better focus */
        backdrop-filter: blur(20px);
        /* Stronger blur (increased from 10px) */
        -webkit-backdrop-filter: blur(20px);
        z-index: 999;
        /* Overlay level */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
    }

    .navbar.nav-active::before {
        opacity: 1;
        pointer-events: auto;
    }

    .navbar.nav-active .nav-links {
        right: 0;
    }

    /* Ensure Logo and Toggle stay sharp/above the blur */
    .navbar.nav-active .nav-logo,
    .navbar.nav-active .nav-toggle {
        position: relative;
        z-index: 1001;
        /* Above the overlay (999) */
    }

    /* "Our Projects" Heading Spacing Removal */
    /* Targeting the h-section inside #projects specifically on mobile */
    #projects .h-section {
        margin-bottom: 0;
        /* "remove the bottom padding" */
        padding-bottom: 0;
    }

    /* Ensure the grid doesn't stick too close if margin is 0 */
    #projects .section-label {
        margin-bottom: 10px;
    }

    /* Specific Section Spacing Exceptions */
    /* "Add 50px at the end of these sections... Browse by Category, Our Philosophy, Contact" */
    #category,
    #about,
    #contact {
        padding-bottom: 80px !important;
    }



    .hero {
        min-height: auto;
        padding: 180px 0 100px;
        text-align: center;
    }

    .h-hero {
        font-size: 3.5rem;
        letter-spacing: -1.5px;
    }

    .p-lead {
        font-size: 1.2rem;
        margin: 0 auto 40px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .btn-vibrant,
    .btn-ghost {
        width: 100%;
    }

    .h-section {
        font-size: 2.8rem;
    }

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

    .project-grid {
        gap: 120px;
    }

    .project-card {
        min-height: auto;
    }

    .project-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .status-badge {
        margin-bottom: 20px;
    }

    .project-card h3 {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .project-image-wrap {
        margin: 20px 0 30px;
        order: 0;
        /* Ensures it stays after title in flow if badge/title are before */
    }

    .project-desc {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }



    .sub-card-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Roadmap Centering */
    .roadmap-wrap {
        padding: 40px 0;
    }

    .roadmap-line {
        left: 50%;
        opacity: 0.3;
    }

    .roadmap-item {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        margin-bottom: 60px;
    }

    .roadmap-dot {
        position: relative;
        left: auto;
        transform: none;
        margin-bottom: 20px;
    }

    .roadmap-content {
        width: 100%;
        margin-left: 0;
        padding: 30px;
    }

    /* Footer Mobile */
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
    }

    .f-contact {
        align-items: center;
    }

    .f-logo {
        order: 1;
        /* Cortenity logo after Live Ventures/Directory? Wait user said logo first? 
           "seperate raw for each section... after 'Cortenity' logo"
           "make the Social icons center and put them first and after that put the copy right section at the end"
        */
    }

    .f-nav {
        flex-direction: column;
        gap: 40px;
        order: 2;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
    }

    .f-socials {
        order: 1;
        margin-bottom: 20px;
    }

    .footer-bottom p {
        order: 2;
    }
}

/* Small Material/Mobile Fixes (< 480px) */
@media (max-width: 480px) {

    .btn-vibrant,
    .btn-submit,
    .btn-visit {
        padding-left: 20px !important;
        padding-right: 20px !important;
        letter-spacing: 1px;
        font-size: 0.85rem;
    }
}

/* Content Pages (About, Privacy, Contact) */
.small-hero {
    min-height: 40vh;
    padding-top: 180px;
    padding-bottom: 60px;
    text-align: center;
}

.small-hero .hero-content {
    margin: 0 auto;
}

.content-section {
    padding: 60px 0 120px;
}

.text-block {
    max-width: 900px;
    margin: 0 auto 80px;
}

.text-block h2.h-section {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.platform-item {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.platform-item:last-child {
    border-bottom: none;
}

.platform-item h3 {
    font-family: var(--font-h);
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--accent-brand);
}

.text-block p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-sec);
    margin-bottom: 20px;
}

.text-block ul {
    list-style: none;
    margin-bottom: 25px;
    padding-left: 20px;
}

.text-block ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: var(--text-sec);
    font-size: 1.05rem;
}

.text-block ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-brand);
    font-weight: 800;
}

.text-block a {
    color: var(--accent-ai);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s;
}

.text-block a:hover {
    opacity: 0.8;
}

.text-block em {
    color: var(--accent-trend);
    font-style: normal;
    font-weight: 500;
}

.nav-links a.active {
    opacity: 1;
    color: var(--accent-brand);
}

@media (max-width: 768px) {
    .small-hero {
        padding-top: 140px;
    }

    .text-block h2.h-section {
        font-size: 2rem;
    }

    .platform-item h3 {
        font-size: 1.5rem;
    }
}