/* AVYR Digital // Design System v1.0 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Playfair+Display:ital,wght@1,400;1,700&display=swap');

:root {
    /* 1.1 Color Palette */
    --color-canvas: #011C40;
    /* Deep Matte Midnight Navy */
    --color-accent: #A7EBF2;
    /* Glowing Pale Cyan */
    --color-text-primary: #FFFFFF;
    /* White */
    --color-text-secondary: #B0B8C1;
    /* Cool Grey */
    --color-overlay: rgba(1, 28, 64, 0.85);

    /* 1.2 Typography */
    --font-headline: 'Didot', 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;

    /* 1.3 Spatial Principles */
    --spacing-section: 15rem;
    /* Extreme negative space */
    --spacing-gutter: 2rem;
}

/* Global Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    /* radial-gradient(circle at top center, [Spotlight Color] 0%, [Dark Base] 100%) */
    background: radial-gradient(circle at 50% 0%, #051e3e 0%, #000000 85%);
    background-color: #000;
    /* Fallback */
    background-attachment: fixed;
    /* Parallax effect for gradient */
    color: var(--color-text-primary);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.05em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 2rem;
}

h2 {
    font-size: 3rem;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Utilities */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-gutter);
}

.section {
    padding: var(--spacing-section) 0;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Signal Line Utility */
.signal-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    box-shadow: 0 0 10px var(--color-accent);
    margin: 4rem 0;
    opacity: 0.5;
}

/* --- SECTION 01: HERO --- */
.hero-section {
    text-align: center;
    overflow: hidden;
    height: 100vh;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 600px;
    width: 100%;
    position: relative;
    /* Transparent so body radial gradient shows through */
    background-color: transparent;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- HERO ANIMATION: PARTICLES --- */
#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Behind content but above background */
    pointer-events: none;
    /* Let clicks pass through */
}

.hero-container {
    z-index: 10;
    /* Ensure text is above particles */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 28, 62, 0.70);
    /* Darker overlay for better text contrast */
    z-index: 1;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 10;
    padding: 0 1rem;
}

/* Typography */
.hero-headline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 5.5rem;
    /* Increased size */
    line-height: 1.2;
    /* Opened up line-height slightly */
    color: var(--color-text-primary);
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 1.5s ease-out 0.5s forwards;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* Stronger shadow for readability */
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

.hero-subheadline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    /* Slightly larger */
    letter-spacing: 0.25em;
    /* Wider tracking */
    text-transform: uppercase;
    color: #E2E8F0;
    margin-bottom: 5rem;
    opacity: 0;
    animation: fadeUp 1.5s ease-out 0.8s forwards;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
}

.hero-cta {
    display: inline-block;
    border: 1px solid rgba(167, 235, 242, 0.5);
    color: var(--color-accent);
    padding: 1rem 3rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeUp 1.5s ease-out 1.1s forwards;
    background: rgba(1, 28, 64, 0.4);
    font-weight: 600;
}

.hero-cta:hover {
    background: rgba(167, 235, 242, 0.1);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 0 15px rgba(167, 235, 242, 0.2);
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 20;
}

.logo span {
    color: var(--color-accent);
}

.logo:hover {
    color: var(--color-accent);
    text-shadow: 0 0 10px rgba(167, 235, 242, 0.4);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0.7;
}

.scroll-text {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-accent), transparent);
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes rotate {
    0% {
        transform: rotateX(45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(45deg) rotateZ(360deg);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* --- SECTION 02: PHILOSOPHY --- */
.philosophy-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.philosophy-container {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.philosophy-split {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

.philosophy-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Signal Line Illustration */
.signal-illustration {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.signal-wave {
    width: 50%;
    height: 2px;
    background: var(--color-accent);
    /* Simple visual representation of chaos */
    mask-image: url("data:image/svg+xml,%3Csvg width='200' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q 10 5, 20 25 T 40 25 T 60 25 T 80 25 T 100 25 T 120 25 T 140 25 T 160 25 T 180 25 T 200 25' stroke='black' fill='transparent'/%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q 10 5, 20 25 T 40 25 T 60 25 T 80 25 T 100 25 T 120 25 T 140 25 T 160 25 T 180 25 T 200 25' stroke='black' fill='transparent'/%3E");
    opacity: 0.5;
}

.signal-laser {
    width: 0%;
    /* Animates to 50% */
    height: 2px;
    background: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent);
    transition: width 1.5s ease-out;
}

.philosophy-section:hover .signal-laser {
    width: 50%;
}

.philosophy-content {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 4rem;
}

.philosophy-text {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    max-width: 500px;
}

/* --- SECTION 03: CAPABILITIES --- */
.capabilities-section {
    align-items: flex-start;
    padding-left: 10%;
    padding-right: 10%;
}

.capabilities-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 4rem;
}

.capabilities-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.capability-item {
    font-family: var(--font-headline);
    font-size: 4rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
}

/* Hover Interaction Group */
.capabilities-list:hover .capability-item {
    opacity: 0.3;
    /* Dim all items when hovering the list */
}

.capabilities-list .capability-item:hover {
    opacity: 1;
    /* Highlight specific item */
    text-shadow: 0 0 20px var(--color-accent);
    padding-left: 2rem;
    /* Slide effect */
    border-bottom: 1px solid rgba(167, 235, 242, 0.3);
}

.capability-arrow {
    font-size: 2rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
    color: var(--color-accent);
}

.capability-item:hover .capability-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- SECTION 04: COLLECTIONS --- */
.collections-section {
    align-items: center;
}

.collections-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.collection-card {
    background: rgba(1, 28, 64, 0.5);
    /* Semi-transparent Navy */
    border: 1px solid rgba(167, 235, 242, 0.2);
    backdrop-filter: blur(5px);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    cursor: pointer;
    min-height: 400px;
    position: relative;
}

.collection-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 30px rgba(167, 235, 242, 0.1);
    /* Subtle touch feedback: slight lift and micro-scale */
    transform: translateY(-5px) scale(1.01);
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth ease-out */
}

.card-title {
    font-family: var(--font-headline);
    font-size: 2rem;
    margin-bottom: 1rem;
    z-index: 2;
}

.card-border-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 20px transparent;
    transition: all 0.5s ease;
}

.collection-card:hover .card-border-glow {
    box-shadow: inset 0 0 20px rgba(167, 235, 242, 0.2);
}

.card-select-btn {
    margin-top: auto;
    /* Push to bottom */
    width: 100%;
    background: transparent;
    border: 1px solid rgba(167, 235, 242, 0.3);
    color: #fff;
    padding: 1rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
}

.card-select-btn:hover {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(167, 235, 242, 0.2);
}

/* --- SECTION 05: CONTACT --- */
.contact-section {
    flex-direction: column;
}

.contact-form-container {
    width: 100%;
    max-width: 600px;
}

.minimal-input-group {
    margin-bottom: 4rem;
    position: relative;
}

.minimal-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-family: var(--font-body);
    padding: 1rem 0;
    transition: border-color 0.4s ease;
}

.minimal-input:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
}

.minimal-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.5;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

.submit-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.initiate-btn {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 1.5rem 4rem;
    font-family: var(--font-headline);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.initiate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--color-accent);
    z-index: -1;
    transition: width 0.4s ease;
}

.initiate-btn:hover {
    color: var(--color-canvas);
}

.initiate-btn:hover::before {
    width: 100%;
}

/* --- NEW ADDITIONS: DESIGN INSPIRATION --- */

/* 1. Fixed Glass Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    padding: 1.5rem 3rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(16, 13, 59, 0.6);
    /* Black glass */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.nav-links {
    display: flex;
    gap: 3rem;
    margin-left: auto;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-primary);
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 1;
    color: var(--color-accent);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 2. Floating Animations (Glow Orbs) */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 235, 242, 0.25) 0%, rgba(5, 5, 5, 0) 70%);
    /* Lower alpha for black bg */
    filter: blur(30px);
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
    animation: floatBackground 20s infinite ease-in-out alternate;
    will-change: transform;
}

.orb-1 {
    width: 600px;
    height: 600px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: -50px;
    background: radial-gradient(circle, rgba(167, 235, 242, 0.2) 0%, rgba(5, 5, 5, 0) 70%);
    animation-delay: -5s;
    animation-duration: 25s;
}

@keyframes floatBackground {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, 50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 3. Pricing: Custom Solutions Element */
.custom-solution-card {
    grid-column: 1 / -1;
    /* sPan full width */
    margin-top: 3rem;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.5) 0%, rgba(167, 235, 242, 0.05) 50%, rgba(10, 10, 10, 0.5) 100%);
    border: 1px solid rgba(167, 235, 242, 0.2);
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

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

/* 4. Contact Section: Split Layout */
.contact-split-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .contact-split-container {
        grid-template-columns: 0.8fr 1.2fr;
    }
}

/* Left Column: Info */
.contact-info-col h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.contact-info-items {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.info-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-content h4 {
    font-family: var(--font-body);
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.info-content p {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.social-icons-row {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background: var(--color-accent);
    color: var(--color-canvas);
    border-color: var(--color-accent);
}

/* Right Column: Form Card */
.contact-form-card {
    /* Rich Dark Blue to Black Gradient with Glass effect */
    background: linear-gradient(145deg, rgba(8, 20, 35, 0.9) 0%, rgba(2, 6, 12, 0.95) 100%);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 0;
    /* Subtle highlight border */
    border: 1px solid rgba(167, 235, 242, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.form-header {
    margin-bottom: 2rem;
}

.form-header h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.5rem;
    font-style: normal;
    color: #fff;
    margin-bottom: 0;
}

.form-grid {
    display: grid;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.input-field {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Darker input bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 1rem 1.25rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-accent);
    /* Deep blue tint on focus */
    background: rgba(8, 20, 35, 0.8);
    box-shadow: 0 0 15px rgba(167, 235, 242, 0.05);
}

.input-field::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

textarea.input-field {
    min-height: 150px;
    resize: vertical;
}

.submit-btn-full {
    width: 100%;
    background: var(--color-accent);
    /* Cyan */
    color: #000;
    /* Black text for high contrast on Cyan */
    font-family: var(--font-body);
    font-weight: 700;
    /* Bolder */
    padding: 1rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.1em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    margin-top: 1rem;
}

/* Staying true to AVYR palette but adapting the button style if requested, 
   OR overriding to use AVYR's Cyan Accent if strict adherence to brand is preferred.
   The user asked to implement "like the image". The image has a blue/purple button.
   I will use a gradient that blends the AVYR Navy with a brighter blue to harmonize. 
*/
.submit-btn-full {
    background: var(--color-accent);
    color: #000;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}

.submit-btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(167, 235, 242, 0.2);
}

/*for mobile menu*/
/* --- Hamburger Button --- */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        min-height: 44px;
        background: rgba(1, 28, 64, 0.8);
        border: none;
        cursor: pointer;
        z-index: 1001;
        padding: 0;
        gap: 6px;
        transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .hamburger:hover {
        background: rgba(1, 28, 64, 0.95);
    }

    .hamburger-line {
        width: 100%;
        height: 2px;
        background: var(--color-accent);
        transition: all 0.3s ease;
        transform-origin: center;
    }

    .hamburger.active .hamburger-line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* --- Mobile Menu Overlay --- */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-canvas);
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(15px);
    }

    .mobile-menu.active {
        right: 0;
    }

    .mobile-nav-link {
        font-family: var(--font-body);
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--color-accent);
        text-decoration: none;
        padding: 1rem 2rem;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border-bottom: 1px solid transparent;
    }

    .mobile-nav-link:hover {
        color: #fff;
        border-bottom-color: var(--color-accent);
        background: rgba(167, 235, 242, 0.05);
    }

    /* Body overlay when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 998;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* --- MOBILE RESPONSIVENESS (Media Queries) --- */
    @media (max-width: 767px) {

        /* Navbar Adjustments */
        .navbar {
            padding: 1rem 1.5rem;
            padding-right: calc(1.5rem + env(safe-area-inset-right));
            max-width: 100vw;
        }

        .hamburger {
            display: flex;
            margin-left: auto;
        }

        .nav-links {
            display: none;
        }

        /* Hero Section Mobile Fixes */
        .hero-container {
            padding: 0 1.5rem;
        }

        .hero-content {
            text-align: center;
            max-width: 100%;
        }

        .hero-headline {
            font-size: 2.5rem;
            line-height: 1.3;
            margin-bottom: 1.5rem;
            /* Prevent overlap */
            padding: 0 0.5rem;
        }

        .hero-subheadline {
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            margin-bottom: 3rem;
            padding: 0 1rem;
        }

        .hero-cta-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .hero-cta {
            padding: 1rem 2rem;
            font-size: 0.7rem;
            min-height: 44px;
            /* Touch target size */
            min-width: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Philosophy Section Mobile */
        #philosophy {
            padding: 4rem 1.5rem;
        }

        #philosophy h2 {
            font-size: 2rem;
            line-height: 1.4;
        }

        #philosophy .grid {
            gap: 3rem;
        }

        /* Capabilities Section Mobile */
        #capabilities {
            padding: 4rem 1.5rem;
        }

        #capabilities h2 {
            font-size: 2.5rem;
            margin-bottom: 3rem;
        }

        #capabilities .flex {
            flex-direction: column;
            gap: 2rem;
        }

        /* Collections Section Mobile */
        #collections {
            padding: 4rem 1.5rem;
        }

        #collections h2 {
            font-size: 2.5rem;
            margin-bottom: 3rem;
        }

        .collection-card {
            padding: 2rem 1.5rem;
            min-height: auto;
        }

        .collection-card.featured {
            transform: translateY(0);
            margin: 1rem 0;
        }

        /* Contact Section Mobile */
        #contact {
            padding: 4rem 1.5rem;
        }

        .contact-info-col h2 {
            font-size: 2rem;
        }

        .contact-form-card {
            padding: 2rem 1.5rem;
        }

        /* Touch Targets */
        .social-btn,
        .info-icon,
        .input-field {
            min-width: 44px;
            min-height: 44px;
        }

        .orb-1,
        .orb-2 {
            width: 300px;
            height: 300px;
        }

        .orb-1 {
            top: -50px;
            left: -50px;
        }

        .orb-2 {
            bottom: 20%;
            right: -25px;
        }
    }

    @media (min-width: 768px) {

        .hamburger {
            display: none;
        }
        
        .mobile-menu {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }