/* 
==========================================================================
   MINDI GLOBAL | Core Stylesheet - Phase 05
========================================================================== 
*/

:root {
    --color-bg-base: #FAFAF8; /* Warm off-white */
    --color-bg-surface: #FFFFFF;
    --color-bg-glow: rgba(250, 250, 248, 0.95);
    --color-text-primary: #111111; /* Deep charcoal */
    --color-text-secondary: #777570; /* Muted warm grey */
    --color-text-muted: #A09E98;
    --color-accent: #106AAF; /* Corporate Blue */
    --color-border: rgba(20, 20, 20, 0.08);
    --color-line: rgba(20, 20, 20, 0.08);
    --color-line-active: rgba(16, 106, 175, 0.8);
    
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
    
    --container-padding: 4vw;
    --panel-width: 420px;
    
    --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.2s ease;
}

/* ==========================================================================
   Base Styles
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body); background-color: var(--color-bg-base); color: var(--color-text-primary);
    line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; outline: none; }
button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ==========================================================================
   Circular Layout Structure
========================================================================== */
.circular-layout {
    position: relative; width: 100vw; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}

.global-header {
    width: 100%; padding: var(--spacing-md) var(--container-padding); z-index: 400; position: relative; pointer-events: none;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.brand-link { text-decoration: none; display: flex; align-items: center; pointer-events: auto; }
.brand-text { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.brand-logo-img { max-height: 64px; max-width: 300px; object-fit: contain; display: block; }

.desktop-nav { display: none; transition: opacity var(--transition-base); pointer-events: auto; }
.nav-list { display: flex; gap: 3rem; }
.nav-link { font-family: var(--font-heading); font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; transition: opacity var(--transition-fast), color var(--transition-fast); }
.nav-link:hover, .nav-link:focus, .nav-link.is-active { opacity: 1; color: var(--color-accent); }
.mobile-menu-trigger { display: flex; align-items: center; transition: opacity var(--transition-base); pointer-events: auto; }
.trigger-text { font-family: var(--font-heading); font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.8; transition: opacity var(--transition-fast); }
.mobile-menu-trigger:hover .trigger-text { opacity: 1; color: var(--color-accent); }

/* Hide nav items when overlay is open to avoid overlapping close buttons */
body.overlay-open .desktop-nav,
body.overlay-open .mobile-menu-trigger {
    opacity: 0; pointer-events: none;
}

.ecosystem-container {
    flex-grow: 1; position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
    perspective: 1000px;
}

/* Structural Connections SVG */
.ecosystem-connections {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none;
}
.connection-line {
    stroke: var(--color-line); stroke-width: 1px; fill: none;
    transition: stroke var(--transition-base), opacity var(--transition-base), stroke-width var(--transition-base);
}
.connection-line.is-active { stroke: var(--color-line-active); stroke-width: 2px; }
.connection-line.is-dimmed { opacity: 0.2; }

/* Central Identity */
.central-identity {
    position: absolute; top: calc(50% - 40px); left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 20; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
}
.hero-title {
    font-family: var(--font-heading); font-weight: 300; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--spacing-sm);
    display: flex; flex-direction: column;
}
.hero-logo { width: clamp(180px, 25vw, 320px); max-width: 100%; object-fit: contain; }
.hero-line { font-size: clamp(4rem, 8vw, 10rem); display: block; color: var(--color-text-primary); }
.hero-divider {
    width: 40px; height: 1px; background-color: var(--color-border); margin: var(--spacing-sm) 0;
}
.positioning-statement {
    font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--color-text-secondary); max-width: 300px; text-align: center; line-height: 1.6;
}

/* Ecosystem Layer & Nodes */
.ecosystem-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none;
}
.company-node-wrapper {
    position: absolute; pointer-events: none;
    transition: z-index 0s var(--transition-fast);
}
.company-node-wrapper.is-focused { z-index: 35; transition-delay: 0s; }
.company-node-wrapper.is-dimmed { opacity: 0.3; }

.node-category {
    font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color-text-muted); opacity: 0; transition: opacity var(--transition-base), color var(--transition-base);
    white-space: nowrap; pointer-events: none; position: absolute;
}
.company-node-wrapper[data-align="left"] .node-category {
    right: calc(100% + var(--spacing-sm)); top: 50%; transform: translateY(-50%);
}
.company-node-wrapper[data-align="right"] .node-category {
    left: calc(100% + var(--spacing-sm)); top: 50%; transform: translateY(-50%);
}
.company-node-wrapper[data-align="top"] .node-category {
    bottom: calc(100% + var(--spacing-sm)); left: 50%; transform: translateX(-50%);
}
.company-node-wrapper[data-align="bottom"] .node-category,
.company-node-wrapper[data-align="center"] .node-category {
    top: calc(100% + var(--spacing-sm)); left: 50%; transform: translateX(-50%);
}
.company-node-wrapper[data-align="mobile"] .node-category {
    bottom: calc(100% + var(--spacing-sm)); left: 50%; transform: translateX(-50%);
}
.company-node-wrapper.is-focused .node-category { opacity: 1; color: var(--color-text-primary); }

.company-node {
    width: clamp(100px, 10vw, 150px); height: clamp(100px, 10vw, 150px);
    border-radius: 50%; background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex; justify-content: center; align-items: center; pointer-events: auto;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    position: relative; overflow: hidden;
}
.company-node:hover, .company-node:focus-visible, .company-node-wrapper.is-focused .company-node {
    border-color: var(--color-accent); transform: scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}
.node-logo { max-width: 75%; max-height: 75%; object-fit: contain; pointer-events: none; display: block; margin: 0 auto; }
.node-wordmark { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 500; text-align: center; line-height: 1.1; padding: 0.5rem; pointer-events: none; }



.global-footer { position: relative; z-index: 400; padding: var(--spacing-sm) var(--container-padding) var(--spacing-md); text-align: center; font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: 0.1em; pointer-events: auto; }


/* ==========================================================================
   Overlay Core Styles
========================================================================== */

.overlay-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; display: flex; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.overlay-layer:not([inert]) { opacity: 1; pointer-events: auto; }
/* IMPORTANT: We want the backdrop to NOT cover the header area on desktop so nav stays clickable. But simpler to just keep header z-index 400. */
.overlay-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--color-bg-glow); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-close { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--color-text-secondary); transition: color var(--transition-fast); background: transparent; border: none; padding: 0; cursor: pointer; }
.btn-close:hover, .btn-close:focus { color: var(--color-accent); }
.close-icon { font-size: 1.5rem; font-weight: 300; line-height: 1; }

/* ==========================================================================
   Company Detail Experience
========================================================================== */
.detail-layer { z-index: 250; justify-content: center; align-items: flex-start; overflow-y: auto; padding: var(--spacing-lg) 0; }
.detail-panel { position: relative; z-index: 260; width: 100%; max-width: 900px; margin: auto; padding: var(--spacing-lg) var(--container-padding); display: flex; flex-direction: column; align-items: center; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.detail-layer:not([inert]) .detail-panel { transform: translateY(0); }
.btn-close-detail { position: absolute; top: var(--spacing-md); right: var(--container-padding); z-index: 10; }
.detail-body { width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-md); }
.detail-logo-container { margin-bottom: var(--spacing-md); min-height: 60px; display: flex; align-items: center; }
.detail-logo-container img { max-width: 200px; max-height: 80px; object-fit: contain; }
.detail-logo-container .company-wordmark { font-size: 2rem; letter-spacing: -0.02em; }
.detail-typography { border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.detail-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.25rem; }
.detail-category { font-family: var(--font-heading); font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: 0.15em; text-transform: uppercase; }
.detail-description { color: var(--color-text-secondary); font-size: 1.125rem; font-weight: 300; line-height: 1.6; }
.detail-action-container { margin-top: var(--spacing-md); }
.btn-primary { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-heading); font-size: 0.875rem; letter-spacing: 0.15em; color: var(--color-bg-base); background-color: var(--color-accent); padding: 1rem 2rem; transition: transform var(--transition-fast), background-color var(--transition-fast); }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); background-color: var(--color-text-primary); }

/* ==========================================================================
   About Experience
========================================================================== */
.about-layer { z-index: 250; justify-content: center; align-items: flex-start; overflow-y: auto; padding: var(--spacing-lg) 0; }
.about-panel { position: relative; z-index: 260; width: 100%; max-width: 900px; margin: auto; padding: var(--spacing-lg) var(--container-padding); display: flex; flex-direction: column; align-items: center; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.about-layer:not([inert]) .about-panel { transform: translateY(0); }
.btn-close-about { position: absolute; top: var(--spacing-md); right: var(--container-padding); z-index: 10; }
.about-eyebrow { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); text-transform: uppercase; }
.about-statement { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--spacing-lg); color: var(--color-accent); }
.about-secondary { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--color-text-secondary); font-weight: 300; line-height: 1.6; max-width: 700px; margin: 0 auto; }

/* ==========================================================================
   Contact Experience
========================================================================== */
.contact-layer { z-index: 250; justify-content: center; align-items: flex-start; overflow-y: auto; padding: var(--spacing-lg) 0; }
.contact-panel { position: relative; z-index: 260; width: 100%; max-width: 900px; margin: auto; padding: var(--spacing-lg) var(--container-padding); display: flex; flex-direction: column; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.contact-layer:not([inert]) .contact-panel { transform: translateY(0); }
.btn-close-contact { position: absolute; top: var(--spacing-md); right: var(--container-padding); z-index: 10; }
.contact-content-wrapper { width: 100%; max-width: 700px; margin: 0 auto; }
.contact-eyebrow { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); text-transform: uppercase; }
.contact-statement { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--spacing-lg); color: var(--color-accent); }

.mindi-contact-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.form-group { display: flex; flex-direction: column; position: relative; }
.form-group label { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.25rem; transition: color var(--transition-fast); }
.form-group input, .form-group textarea { appearance: none; background: transparent; border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; color: var(--color-text-primary); font-family: var(--font-body); font-size: 1rem; padding: 0.5rem 0; width: 100%; transition: border-color var(--transition-fast); }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.form-group input:focus + label, .form-group textarea:focus + label,
.form-group:focus-within label { color: var(--color-text-secondary); }

.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.btn-submit-contact:disabled { opacity: 0.5; cursor: not-allowed; }
.form-feedback { font-size: 0.875rem; color: #D32F2F; margin-top: 0.5rem; display: none; }
.form-feedback.is-visible { display: block; }
.form-feedback.is-success { color: #2E7D32; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.contact-success-state { display: flex; flex-direction: column; align-items: flex-start; }

/* ==========================================================================
   Mobile Navigation Layer
========================================================================== */
.mobile-nav-layer { z-index: 500; background-color: var(--color-bg-base); flex-direction: column; }
.mobile-nav-header { width: 100%; padding: var(--spacing-md) var(--container-padding); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); }
.mobile-nav-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--spacing-xl) var(--container-padding); }
.mobile-nav-list { display: flex; flex-direction: column; gap: var(--spacing-md); align-items: center; }
.mobile-nav-item { font-family: var(--font-heading); font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 300; letter-spacing: -0.02em; opacity: 0.5; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.mobile-nav-item:hover, .mobile-nav-item:focus, .mobile-nav-item.is-active { opacity: 1; transform: translateX(10px); color: var(--color-accent); }