/* =========================================
   1. VARIABLES & DESIGN SYSTEM (Updated Phase 5)
========================================= */
:root {
    /* ULTRA-DARK FUTURISTIC PALETTE (Phase 6) */
    --bg-main: #000000;
    --bg-soft: #050505;
    --bg-elevated: #0A0A0A;

    --accent: #06F89D;
    /* Neon Green/Cyan */
    --accent-dim: rgba(6, 248, 157, 0.35);

    --text-main: #FFFFFF;
    --text-soft: #A1A1AA;
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* Mappings to old variables for compatibility */
    --bg-dark: var(--bg-main);
    --bg-secondary: var(--bg-soft);
    --bg-card: var(--bg-elevated);
    --primary: var(--accent);
    --primary-glow: var(--accent-dim);
    --text-muted: var(--text-soft);
    --border-light: var(--border-subtle);
    --border-glow: var(--accent-dim);

    /* Gradients */
    --gradient-glow: linear-gradient(135deg, #06F89D, #00C2FF);

    /* Typography */
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --spacing-container: 1200px;
    --spacing-section: 120px;

    /* Motion System */
    --ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-apple-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration-reveal: 1.2s;
    --duration-micro: 0.6s;
    --duration-dock: 0.5s;
}

@media (max-width: 768px) {
    :root {
        --spacing-section: 60px;
    }
}

/* =========================================
   2. RESET & GLOBAL STYLES
========================================= */

/* Motion: Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

body {
    background-color: var(--bg-main);
    background-image: none;
    /* Removed old gradient */
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Static Layered Background (Zero Lag) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(6, 248, 157, 0.04), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(6, 248, 157, 0.03), transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Removed #bg-canvas styles since element is gone */

img {
    max-width: 100%;
    display: block;
}

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

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-main);
    /* Pure White */
}

p,
span,
li,
a {
    color: var(--text-soft);
    /* Soft Grey */
}

.text-neon,
.highlight {
    color: var(--accent);
}

/* Container */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 600px) {
    .container {
        padding: 0 1.25rem;
    }
}

/* =========================================
   3. UTILITIES & COMPONENTS
========================================= */
/* Glass Card Utility (Upgraded Phase 5) */
/* Glass Card Utility (Optimized) */
.glass-card {
    background: var(--bg-card);
    /* backdrop-filter: var(--backdrop-blur); REMOVED for performance */
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    /* Cheaper shadow */
    transition: transform 0.2s ease-out, border-color 0.2s ease-out;
    /* Removed box-shadow transition */
    will-change: transform;
    /* Optimized */
}

.glass-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-4px);
    /* No heavy box-shadow or inset glown on hover */
}

/* Scroll Reveal Utility */
/* Scroll Reveal Utility */
[data-reveal="swipe"] {
    opacity: 0;
    transform: translateY(60px);
    /* Deeper start for more dramatic spring */
    /* filter: blur(10px); REMOVED */
    transition: opacity 1.0s var(--ease-apple-out),
        transform 1.2s var(--ease-spring);
    will-change: opacity, transform;
}

[data-reveal="swipe"].is-visible {
    opacity: 1;
    transform: translateY(0);
    /* filter: blur(0); REMOVED */
}

/* Stagger Delays */
[style*="--index"] {
    transition-delay: calc(var(--index) * 100ms);
}


/* Buttons */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.btn-primary,
.btn-neon {
    background: var(--accent);
    color: #000000;
    /* Contrast on neon */
    box-shadow: 0 0 15px var(--accent-dim);
}

.btn-primary:hover,
.btn-neon:hover {
    background: #4fffc3;
    box-shadow: 0 0 25px var(--accent-dim);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(6, 248, 157, 0.05);
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.75rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 2.25rem;
    }
}

.section-title h2 span {
    color: var(--accent);
    /* No gradient text, just strict neon accent per request */
    background: none;
    -webkit-text-fill-color: var(--accent);
}

.section-title p {
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================
   4. LAYOUT SECTIONS
========================================= */




/* Navbar (Apple Dock Style Refactor - Restored & Optimized) */
.navbar {
    position: fixed;
    z-index: 1900;
    /* Increased and set below logo-fixed */
    transition: all 0.4s var(--ease-spring);
    /* Faster transition */

    /* Default: Dock State (Bottom Center) */
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    top: auto;
    right: auto;
    width: auto;
    max-width: 90vw;

    padding: 12px 32px;
    background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
    will-change: transform, width, top, right, bottom;
}

@media (max-width: 768px) {
    .navbar {
        padding: 10px 20px;
        bottom: 20px;
        /* Closer to bottom on mobile */
        width: 95vw;
        max-width: none;
    }

    .nav-wrapper {
        gap: 15px;
    }
}

/* Minified State (Top Right) */
/* Minified State (Top Right) */
.navbar.is-minified {
    bottom: auto;
    left: auto;
    transform: none;
    top: 24px;
    right: 32px;

    padding: 8px 24px;
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    scale: 1;
}

/* Navbar Layout */
.nav-wrapper {
    display: flex;
    justify-content: center;
    /* Centered links */
    align-items: center;
    gap: 32px;
}


.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

@media (max-width: 600px) {
    .nav-links {
        gap: 0.5rem;
    }

    .nav-links a {
        padding: 6px 8px;
        font-size: 0.85rem;
    }
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    transition: transform 0.2s var(--ease-spring), color 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Apple Dock Magnification (Hover) - Only in Dock Mode */
.navbar:not(.is-minified) .nav-links a:hover {
    transform: scale(1.3) translateY(-10px);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
}

/* Neighboring siblings effect would require JS, but CSS can do simple hover. 
   User asked for "magnification based on cursor proximity" (Dock style). 
   Pure CSS can't do true proximity, but we get close with simple hover scale. */

.navbar.is-minified .nav-links a:hover {
    color: var(--primary);
    transform: none;
    /* Disable magnification in minified mode */
}

.navbar .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

.navbar.is-minified .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    /* More top padding for nav */
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-text h1 span {
    color: var(--primary);
}

.hero-text p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* Hero Vanta Background (Contained in Hero) */
.hero-bg-vanta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* Static Glow behind Vanta */
.hero-bg-vanta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(6, 248, 157, 0.05), transparent 70%);
    z-index: 1;
    pointer-events: none;
}


/* Clients Grid (Trusted By) */
.clients {
    padding: 60px 0;
    border-bottom: 1px solid var(--border-light);
    background: rgba(2, 6, 23, 0.5);
}

.clients h3 {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    opacity: 0.7;
}

/* Removed static logo-track to use automated carousel below */

.client-logo span {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-muted);
}

/* Services / Features Grid */
.about,
.services {
    padding: var(--spacing-section) 0;
    position: relative;
}

/* Using general grid for feature cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    /* extends glass-card */
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Founder / Quote Section */
.founder-message {
    padding: var(--spacing-section) 0;
    background: linear-gradient(to right, rgba(34, 211, 238, 0.03), transparent);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.founder-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.founder-img-wrapper {
    position: relative;
}

.founder-img-wrapper img {
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.founder-text blockquote {
    font-size: 1.75rem;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.founder-text cite {
    font-style: normal;
    color: var(--primary);
    font-weight: 600;
    display: block;
    margin-top: 1rem;
}

/* Portfolio / Initiatives */
.portfolio {
    padding: var(--spacing-section) 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.portfolio-item {
    /* extends glass-card */
    overflow: hidden;
    padding: 0;
    /* Removing padding for full-image look if desired, or keeping structure */
    padding: 1.5rem;
    /* Match existing structure */
}

.portfolio-image {
    background: #0f172a;
    border-radius: 8px;
    height: 200px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: var(--transition);
}

.portfolio-item:hover .portfolio-image img {
    opacity: 1;
    transform: scale(1.05);
    /* Slight zoom on hover, acceptable transition */
}

/* Stats / Results */
.results {
    padding: var(--spacing-section) 0;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.result-card {
    /* extends glass-card */
    padding: 2rem;
    text-align: center;
}

.result-card h3 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

/* Footer */
.footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--border-light);
    background: #000205;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand p {
    margin-top: 1rem;
    max-width: 300px;
}

.footer-col h4 {
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: var(--text-muted);
}

.footer-col a:hover {
    color: var(--primary);
}

/* Contact Page specific */
.contact-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contact-item {
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.contact-item i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

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

    .hero-content,
    .founder-grid,
    .stats-grid,
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        order: -1;
        /* Image on top on mobile? Or bottom? Let's keep typical flow */
        margin-bottom: 2rem;
    }

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

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Mobile menu would be needed, but hiding for now per existing behavior */
    }

    .contact-menu,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 2rem;
    }
}

/* =========================================
   PHASE 5: LAYOUT OVERHAUL STYLES
========================================= */

/* 1. Cinematic Hero */
.hero-cinematic {
    position: relative;
    min-height: 100vh;
    /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 160px;
    /* pt-32 equivalent */
    padding-bottom: 120px;
    overflow: hidden;
    text-align: left;
    /* Changed from center */
}

@media (max-width: 900px) {
    .hero-cinematic {
        text-align: center;
        padding-top: 140px;
    }
}

/* Removed .hero-layer-back as globe is gone/replaced by grid */

.hero-layer-front {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* Grid-like behavior with flex */
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-content-left {
    flex: 1;
    min-width: min(100%, 300px);
    max-width: 700px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left aligned for desktop */
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .hero-content-left {
        align-items: center;
        max-width: 100%;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 100px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Hero Stats Card (Now Relative in flow) */
.hero-stats-card {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    min-width: 250px;
}

@media (max-width: 900px) {
    .hero-stats-card {
        margin-top: 40px;
        flex-direction: row;
        justify-content: center;
        gap: 32px;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}

.stat-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pill-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.pill-label {
    font-size: 0.8rem;
    color: var(--text-soft);
    font-weight: 500;
}

@media (max-width: 900px) {
    .hero-stats-card {
        position: static;
        margin-top: 40px;
        flex-direction: row;
        justify-content: center;
        gap: 32px;
        background: none;
        border: none;
        box-shadow: none;
    }

    .hero-content-left {
        margin-top: 0;
    }
}


.pulsing-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(34, 211, 238, 0.4);
    animation: pulse 2s infinite;
}

.hero-cinematic h1 {
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: -2px;
}

@media (max-width: 768px) {
    .hero-cinematic h1 {
        font-size: 2.75rem;
        letter-spacing: -1px;
    }
}

.text-gradient {
    background: var(--gradient-glow);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.btn-glow {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    transition: var(--transition);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

@keyframes floatGlobe {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-20px) scale(1.02);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    }
}

/* 2. Credibility Strip */
.glass-strip {
    margin-top: -60px;
    padding: 30px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    z-index: 2;
}

.credibility-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    /* Added for mobile */
}

@media (max-width: 600px) {
    .credibility-grid {
        justify-content: center;
        text-align: center;
    }
}

.trusted-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.label-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-track-static {
    display: flex;
    gap: 32px;
}

.client-logo {
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.client-logo:hover {
    opacity: 1;
    color: var(--text-main);
}

.msme-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: 12px;
    box-shadow: var(--inner-glow);
}

.msme-pill i {
    font-size: 24px;
    color: var(--primary);
}

.msme-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.msme-text strong {
    color: var(--text-main);
    font-size: 0.95rem;
}

.msme-text span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* 3. Stats Panel (Unified) */
.glass-panel {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.stat-item h3 {
    font-size: 3.5rem;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.stat-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* 4. Asymmetric Features Grid */
.feature-grid-asym {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
}

.feature-large {
    grid-row: span 2;
    background: linear-gradient(145deg, var(--bg-elevated), var(--bg-soft));
}

.feature-wide {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 32px;
}

.feature-wide .feature-icon {
    margin-bottom: 0;
    width: 64px;
    height: 64px;
    font-size: 2rem;
}

/* 5. Founder Spotlight */
.founder-spotlight {
    position: relative;
    padding: 140px 0;
    background: radial-gradient(circle at 70% 50%, rgba(34, 211, 238, 0.05), transparent 60%);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
}

.spotlight-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 900px) {
    .spotlight-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .founder-portrait {
        max-width: 300px;
        margin: 0 auto;
    }
}

.founder-portrait {
    position: relative;
}

.founder-portrait img {
    border-radius: 24px;
    box-shadow: 0 20px 80px -20px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border-light);
}

.founder-portrait::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(closest-side, rgba(34, 211, 238, 0.15), transparent);
    z-index: -1;
}

.quote-glass {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: 40px;
    border-radius: 24px;
    position: relative;
}

/* 6. Gallery Carousel */
.gallery-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 32px;
    padding: 40px 0 60px;
    -webkit-overflow-scrolling: touch;
}

.gallery-card {
    flex: 0 0 400px;
    scroll-snap-align: center;
    transition: var(--transition);
}

.gallery-card:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* 7. Contact Glow */
.contact-glow-container {
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
    border: 1px solid var(--border-subtle);
    border-radius: 32px;
    padding: 60px 40px;
    /* Adjusted padding */
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 600px) {
    .contact-glow-container {
        padding: 40px 20px;
    }

    .contact-menu {
        gap: 16px;
    }
}

.contact-glow-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    box-shadow: 0 0 30px var(--primary);
}

/* Responsive Overrides phase 5 */
@media (max-width: 900px) {
    .feature-grid-asym {
        grid-template-columns: 1fr;
    }

    .feature-large,
    .feature-wide {
        grid-column: auto;
        grid-row: auto;
    }

    .feature-wide {
        flex-direction: column;
        align-items: flex-start;
    }

    .spotlight-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .glass-panel {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }
}

/* =========================================
   TRUSTED BY SECTION (Logos3 Port)
========================================= */
.trusted-section {
    padding: 100px 0;
    background: #000;
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--border-subtle);
}

.trusted-heading {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 3rem;
    opacity: 0.7;
}

.logo-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* Constrain width for cleaner look */
    margin: 0 auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
    display: flex;
    width: max-content;
    /* Auto width based on children */
    animation: scroll 40s linear infinite;
    align-items: center;
}

.logo-track:hover {
    animation-play-state: paused;
    /* Optional: Pause on hover */
}

.logo-item {
    padding: 0 50px;
    /* Spacing between logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    height: 60px;
    /* Increased height for consistency */
    width: auto;
    opacity: 0.6;
    /* Muted default state */
    filter: grayscale(100%) brightness(1.5);
    /* Monochrome look */
    transition: all 0.3s ease;
}

.logo-item:hover img {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
    /* Color on hover */
    transform: scale(1.15);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move half the track length (since it's duplicated) */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trusted-section {
        margin-top: 0;
        padding: 60px 0;
    }

    .logo-item {
        padding: 0 25px;
    }

    .logo-item img {
        height: 40px;
    }
}

/* =========================================
   MSME SECTION
========================================= */
.msme-section {
    padding: 40px 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

.msme-dropdown {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.msme-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    background: var(--bg-soft);
    transition: all 0.3s var(--ease-spring);
}

.msme-trigger:hover {
    border-color: var(--accent);
    background: rgba(6, 248, 157, 0.05);
    transform: translateY(-2px);
}

.msme-trigger i:last-child {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.msme-dropdown.active .msme-trigger i:last-child {
    transform: rotate(180deg);
}

.msme-content {
    display: none;
    margin-top: 20px;
    padding: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-soft);
    text-align: left;
    line-height: 1.7;
    animation: slideDown 0.4s var(--ease-spring);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.msme-content strong {
    color: var(--text-main);
}

@media (max-width: 900px) {
    .who-we-are-main-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .about-logo-card {
        padding: 40px !important;
        max-width: 400px;
        margin: 0 auto;
    }

    .who-we-are-list li {
        justify-content: center;
    }

    .section-title h2 {
        font-size: 2.25rem;
    }
}

.who-we-are-section {
    padding: var(--spacing-section) 0;
}

.who-we-are-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 64px;
    align-items: center;
}

@media (max-width: 1200px) {
    .who-we-are-main-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 48px;
    }
}

.about-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.who-we-are-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.who-we-are-list li {
    display: flex;
    align-items: flex-start;
    /* Better for multiline */
    gap: 12px;
    color: var(--text-soft);
    font-size: 1.05rem;
}

.who-we-are-list i {
    color: var(--accent);
}

.identity-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.identity-card {
    padding: 40px;
    height: 100%;
}

.identity-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--accent);
}

@media (max-width: 600px) {
    .identity-card {
        padding: 30px 20px;
    }

    .identity-card h3 {
        font-size: 1.35rem;
    }
}

.identity-card p {
    color: var(--text-soft);
}

/* Testimonials Slider (Infinite Scroll) */
.testimonial-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    cursor: grab;
    /* Suggest interaction */
}

.about-logo-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    background: radial-gradient(circle at center, rgba(6, 248, 157, 0.05) 0%, transparent 80%);
}

.about-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 30px rgba(6, 248, 157, 0.2));
}

.slider-track {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite;
}

/* Pause animation on hover */
.testimonial-slider:hover .slider-track {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-3 * (450px + 40px)));
        /* Move by 3 cards' width + gaps */
    }
}

.testimonial-card {
    flex: 0 0 450px;
    padding: 40px;
    margin-right: 40px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.testimonial-stars {
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.student-info strong {
    font-family: var(--font-heading);
}

.avatar-circle {
    box-shadow: 0 0 15px var(--accent-dim);
}

@media (max-width: 900px) {
    .testimonial-card {
        flex: 0 0 320px;
        padding: 30px;
        margin-right: 20px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-3 * (320px + 20px)));
        }
    }
}

@media (max-width: 900px) {
    .identity-cards {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        flex: 0 0 280px;
        /* Reduced further to avoid overflow on small mobiles */
        padding: 24px;
        margin-right: 16px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-3 * (280px + 16px)));
        }
    }
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    z-index: 10;
}

.carousel-arrow:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent-dim);
}

.carousel-container {
    padding-bottom: 20px;
}


/* Workshop Grid Styles */
.workshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 30px;
}

@media (max-width: 1100px) {
    .workshop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .workshop-grid {
        grid-template-columns: 1fr;
    }
}

.badge-webinar {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 20px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Workshops One-at-a-time Sliding */
.workshops-manual-carousel {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.manual-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}


.workshop-card.single-view {
    flex: 0 0 100%;
    min-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}


.testimonial-card.single-view {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    margin: 0 !important;
    box-sizing: border-box;
}