@layer components;

@layer components {

    /* Navbar */
    .nav-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding-block: var(--space-4);
        transition: var(--transition-base);
        background-color: var(--color-bg);
        /* Opaque on mobile for readability */
        border-bottom: 1px solid var(--color-border);
    }

    @media (min-width: 1024px) {
        .nav-bar {
            position: sticky;
            background-color: transparent;
            border-bottom: none;
        }
    }

    .nav-bar--scrolled {
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        padding-block: var(--space-3);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    /* Ensure backdrop-blur works on light backgrounds */
    @supports not (backdrop-filter: blur(12px)) {
        .nav-bar--scrolled {
            background-color: rgba(var(--color-bg-rgb, 15, 23, 42), 0.95);
        }
    }

    .nav-bar__brand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-3);
        text-decoration: none;
        color: var(--color-text-primary);
        z-index: 1001;

        /* Ensure logo stays left-aligned on mobile */
        @media (max-width: 1023px) {
            margin-inline-end: auto;
        }
    }

    .nav-bar__brand svg,
    .nav-bar__brand img {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        display: block;
    }

    /* Navigation Menu */
    .nav-bar__menu {
        display: none;
        /* Hidden by default on mobile */
    }

    @media (min-width: 1024px) {
        .nav-bar__menu {
            display: flex;
        }
    }

    .nav-bar__menu--open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        top: 65px;
        background-color: var(--color-bg);
        padding: var(--space-8);
        z-index: 999;
    }

    .nav-bar__link {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        font-weight: 700;
        text-decoration: none;
        color: var(--color-text-primary);
        padding-block: var(--space-4);
        border-block-end: 1px solid var(--color-border);
    }

    @media (min-width: 1024px) {
        .nav-bar__link {
            font-size: var(--text-base);
            font-weight: 500;
            padding: 0;
            border: none;
        }
    }

    .nav-bar__actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-4);
        z-index: 1001;

        @media (max-width: 1023px) {
            position: relative;
            margin-inline-start: auto;
            /* Push to right */
        }
    }

    .nav-bar__actions .btn--primary {
        display: none;
    }

    /* Stats Section */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-8);
        justify-items: center;
    }

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

    /* Partners Marquee Overflow Fix */
    .partners-marquee {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* Form Rows */
    .contact-form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    @media (max-width: 767px) {
        .contact-form__row {
            grid-template-columns: 1fr !important;
        }
    }

    @media (min-width: 768px) {
        .nav-bar__actions .btn--primary {
            display: inline-flex;
        }
    }

    /* Theme Toggle Button */
    .theme-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: var(--radius-md);
        transition: var(--transition-base);
        color: var(--color-text-primary);
    }

    .theme-toggle:hover {
        background-color: var(--color-surface);
    }

    .theme-toggle__icon {
        width: 24px;
        height: 24px;
    }

    /* Hide duplicate Free Consultation button in nav menu on desktop */
    @media (min-width: 1024px) {
        .nav-bar__menu .btn--primary {
            display: none;
        }
    }

    /* Nav Toggle (Burger) */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        z-index: 1000;
        height: 40px;
        /* Match logo height for better centering */
        width: 40px;
    }

    @media (min-width: 1024px) {
        .nav-toggle {
            display: none;
        }
    }

    .nav-toggle span {
        width: 24px;
        height: 2px;
        background-color: var(--color-text-primary);
        transition: var(--transition-base);
        transform-origin: left center;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: rotate(-45deg);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-md);
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-base);
        border: 2px solid transparent;
    }

    .btn--primary {
        background-color: var(--color-primary);
        color: white;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .btn--primary:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 24px rgba(100, 180, 255, 0.35);
    }

    .btn--outline {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .btn--outline:hover {
        background-color: var(--color-primary);
        color: white;
    }

    .btn.bg-surface {
        background-color: var(--color-surface);
        color: var(--color-text-primary);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .btn.bg-surface:hover {
        background-color: var(--color-bg);
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 24px rgba(100, 180, 255, 0.25);
    }

    /* Cards */
    .card {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        transition: var(--transition-base);
        contain: layout style;
    }

    .card:hover {
        border-color: var(--color-primary);
        transform: translateY(-4px);
    }

    /* Logo Frame - Squircle with Glassmorphism */
    .logo-frame {
        --logo-frame-size: clamp(44px, 5vw, 52px);
        --logo-frame-inner: calc(var(--logo-frame-size) - 8px);
        --logo-frame-glow: rgba(100, 180, 255, 0.12);
        --logo-frame-glow-hover: rgba(100, 180, 255, 0.25);
        
        position: relative;
        width: var(--logo-frame-size);
        height: var(--logo-frame-size);
        min-width: var(--logo-frame-size);
        min-height: var(--logo-frame-size);
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Squircle shape - modern super-ellipse approximation */
        border-radius: 28% / 22%;
        
        /* Glassmorphism effect with backdrop-filter */
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        
        /* Fallback for browsers without backdrop-filter support */
        @supports not (backdrop-filter: blur(12px)) {
            background: rgba(15, 39, 68, 0.9);
        }
        
        /* Light theme fallback */
        isolation: isolate;
    }
    
    .logo-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(100, 180, 255, 0.15) 100%
        );
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
} 

    /* Logo Frame - Squircle with Glassmorphism */
    .logo-frame {
        --logo-frame-size: clamp(44px, 5vw, 52px);
        --logo-frame-inner: calc(var(--logo-frame-size) - 8px);
        
        position: relative;
        width: var(--logo-frame-size);
        height: var(--logo-frame-size);
        min-width: var(--logo-frame-size);
        min-height: var(--logo-frame-size);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 28% / 22%;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        isolation: isolate;
        box-shadow: 
            0 0 16px rgba(100, 180, 255, 0.12),
            0 0 32px rgba(100, 180, 255, 0.06),
            inset 0 0 12px rgba(255, 255, 255, 0.03);
        transition: box-shadow 0.3s ease, transform 0.2s ease, background 0.3s ease;
    }
    
    @supports not (backdrop-filter: blur(12px)) {
        .logo-frame {
            background: rgba(15, 39, 68, 0.9);
        }
    }
    
    .logo-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(100, 180, 255, 0.15) 100%
        );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    
    .logo-frame:hover {
        box-shadow: 
            0 0 24px rgba(100, 180, 255, 0.25),
            0 0 48px rgba(100, 180, 255, 0.12),
            inset 0 0 16px rgba(255, 255, 255, 0.05);
        transform: scale(1.03);
    }
    
    .logo-frame img {
        width: var(--logo-frame-inner);
        height: var(--logo-frame-inner);
        object-fit: contain;
        border-radius: 20% / 16%;
    }

    /* ============================================
       INFINITE LOGO MARQUEE - Glassmorphism 2026
       ============================================ */

    .logo-marquee-section {
        container-type: inline-size;
        container-name: marquee;
        overflow: hidden;
        padding-block: var(--space-12);
        background: var(--color-bg);
    }

    .logo-marquee-wrapper {
        position: relative;
        width: 100%;
        min-height: 120px;
        overflow: hidden;
        /* Gradient mask for edge fade effect */
        mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    }

    .logo-marquee {
        display: flex;
        gap: var(--space-8);
        width: max-content;
        /* GPU acceleration */
        will-change: transform;
        transform: translateZ(0);
        padding-block: var(--space-4);
    }

    /* Glassmorphism Logo Card */
    .logo-card {
        width: clamp(120px, 15vw, 180px);
        height: clamp(70px, 8vh, 90px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg);
        box-shadow: 0 0 20px rgba(100, 180, 255, 0.06);
        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
    }

    /* Logo image styling - Monochrome by default */
    .logo-card__image {
        width: 70%;
        height: 70%;
        object-fit: contain;
        filter: grayscale(1) brightness(1.2) contrast(1.1);
        opacity: 0.7;
        transition: filter 0.5s ease, opacity 0.4s ease, transform 0.4s ease;
    }

    /* Hover state - reveal brand colors */
    .logo-card:hover {
        transform: translateY(-4px) scale(1.02);
        border-color: rgba(100, 180, 255, 0.3);
        box-shadow: 0 8px 32px rgba(100, 180, 255, 0.15), 0 0 48px rgba(100, 180, 255, 0.08);
        cursor: pointer;
    }

    .logo-card:hover .logo-card__image {
        filter: grayscale(0) brightness(1) contrast(1);
        opacity: 1;
        transform: scale(1.05);
    }

    /* Pause animation on hover - Smart Pause */
    .logo-marquee-wrapper:hover .logo-marquee {
        animation-play-state: paused;
    }

    /* Container Query adjustments */
    @container marquee (max-width: 600px) {
        .logo-marquee {
            gap: var(--space-6);
        }
        
        .logo-card {
            width: clamp(100px, 25cqw, 140px);
            height: clamp(60px, 12cqh, 80px);
        }
    }

    /* Light theme support for logo frame */
    [data-theme="light"] .logo-frame {
        background: rgba(255, 255, 255, 0.4);
    }
    
    @supports not (backdrop-filter: blur(12px)) {
        [data-theme="light"] .logo-frame {
            background: rgba(255, 255, 255, 0.9);
        }
    }

    /* ============================================
       FOOTER STYLES
       ============================================ */

    .footer {
        background-color: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding-block: var(--space-8);
    }

    @media (min-width: 768px) {
        .footer {
            padding-block: var(--space-12);
        }
    }

    .footer .container:first-of-type {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-12);
        align-items: start;
        justify-items: center;
    }

    .footer__brand h3 {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        color: var(--color-text-primary);
    }

    .footer__brand p {
        color: var(--color-text-secondary);
        line-height: 1.6;
    }

    .footer__links h4,
    .footer__contact h4 {
        font-family: var(--font-display);
        font-size: var(--text-lg);
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .footer__links ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer__links a {
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color 0.2s ease, padding-left 0.2s ease;
        display: inline-block;
    }

    .footer__links a:hover {
        color: var(--color-primary);
        padding-left: var(--space-2);
    }

    .footer__contact p {
        color: var(--color-text-secondary);
        margin: 0;
        line-height: 1.6;
    }

    .footer__contact p:first-of-type {
        margin-block-end: var(--space-2);
    }

    .footer .container:last-of-type {
        padding-block-start: var(--space-8);
        border-top: 1px solid var(--color-border);
        margin-block-start: var(--space-12);
    }

    .footer .container:last-of-type p {
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        text-align: center;
    }

    /* Desktop: align copyright text to start of the line */
    @media (min-width: 768px) {
        .footer .container:last-of-type p {
            text-align: start;
        }
    }

    /* Responsive - Mobile Footer */
    @media (max-width: 767px) {
        .footer .container:first-of-type {
            grid-template-columns: 1fr;
            gap: var(--space-8);
            text-align: center;
            justify-items: center;
        }

        .footer__links ul {
            align-items: center;
        }

        .footer__links a:hover {
            padding-left: 0;
        }
    }

    /* Tablet specific adjustments - use 3 columns for consistent alignment */
    @media (min-width: 768px) and (max-width: 1023px) {
        .footer .container:first-of-type {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-8);
        }
    }

    /* ============================================
       FAQ ACCORDION SECTION
       ============================================ */

    .faq-section {
        padding-block: var(--space-16);
        background: var(--color-bg);
    }

    .faq-section__header {
        text-align: center;
        margin-block-end: var(--space-12);
    }

    .faq-section__header h2 {
        margin-block-end: var(--space-4);
    }

    .faq-section__header p {
        margin-inline: auto;
    }

    .faq-accordion {
        max-width: 800px;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .faq-accordion details {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .faq-accordion details:hover {
        border-color: var(--color-primary);
    }

    .faq-accordion details[open] {
        border-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(100, 180, 255, 0.1);
    }

    .faq-accordion summary {
        padding: var(--space-5) var(--space-6);
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
        color: var(--color-text-primary);
        transition: color 0.2s ease;
    }

    .faq-accordion summary:hover {
        color: var(--color-primary);
    }

    /* Hide default marker */
    .faq-accordion summary::-webkit-details-marker {
        display: none;
    }

    /* Custom chevron icon */
    .faq-accordion summary::after {
        content: '';
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364b4ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: rotate(0deg);
    }

    .faq-accordion details[open] summary::after {
        transform: rotate(180deg);
    }

    .faq-accordion summary:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .faq-accordion__content {
        padding: 0 var(--space-6) var(--space-6);
        padding-block-start: 0;
        color: var(--color-text-secondary);
        line-height: 1.7;
        animation: faq-fade-in 0.3s ease-out;
    }

    @keyframes faq-fade-in {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .faq-accordion summary {
            padding: var(--space-4);
            font-size: var(--text-base);
        }

        .faq-accordion__content {
            padding: 0 var(--space-4) var(--space-4);
        }
    }

    /* Desktop large screen adjustments - make FAQ items bigger */
    @media (min-width: 1280px) {
        .faq-accordion {
            max-width: 900px;
        }

        .faq-accordion summary {
            padding: var(--space-6) var(--space-8);
            font-size: var(--text-lg);
        }

        .faq-accordion__content {
            padding: 0 var(--space-8) var(--space-8);
            font-size: var(--text-base);
        }

        .faq-accordion summary::after {
            width: 28px;
            height: 28px;
        }
    }
}