/* =====================================================================
   SHARED STYLES — Loaded on all pages
   Nav, Footer, Chat, Grid Background, Neon Text
   ===================================================================== */

/* ── Heading system ────────────────────────────────────────────────────
   Apply ONLY these classes to all heading elements across every page.
   Never add font-size, font-weight, font-family, or line-height via
   Tailwind classes or inline styles directly on heading tags.
   Only add mb-*, max-w-*, text-center etc. for spacing/layout.

   .wlx-h1       Inner-page hero h1  (about, services, contact …)
   .wlx-h1-hero  Homepage/landing h1 (one size larger)
   .wlx-h2       Section heading h2
   .wlx-h3       Subsection / named-feature heading h3
   .wlx-h4       Card / component heading h4
────────────────────────────────────────────────────────────────────── */
.wlx-h1,
.wlx-h1-hero {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.wlx-h1      { font-size: 2.25rem; }   /* 36px  — text-4xl  */
.wlx-h1-hero { font-size: 3rem;    }   /* 48px  — text-5xl  */
@media (min-width: 640px) {
    .wlx-h1      { font-size: 3rem;    }   /* 48px  — text-5xl  */
    .wlx-h1-hero { font-size: 3.75rem; }   /* 60px  — text-6xl  */
}
@media (min-width: 1024px) {
    .wlx-h1      { font-size: 3.75rem; }   /* 60px  — text-6xl  */
    .wlx-h1-hero { font-size: 4.5rem;  }   /* 72px  — text-7xl  */
}

.wlx-h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;   /* 30px — text-3xl */
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
@media (min-width: 640px) {
    .wlx-h2 { font-size: 2.25rem; }   /* 36px — text-4xl */
}

.wlx-h3 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.125rem;   /* 18px — text-lg */
    font-weight: 700;
    line-height: 1.4;
}

.wlx-h4 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.9375rem;  /* 15px — between text-sm and text-base */
    font-weight: 700;
    line-height: 1.4;
}

/* ── Matte grain texture overlay ──────────────────────────────────────
   A fixed, pointer-events-none pseudo-element that overlays the entire
   viewport with a subtle SVG fractal noise pattern.
   Result: soft dusty / matte-screen tactile feel on all pages.
   Adjust opacity to taste — 0.04 is very subtle, 0.08 is more visible.
────────────────────────────────────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;   /* above all content, below nothing — it's a filter */
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* Navigation */
.nav-blur { backdrop-filter: blur(20px); background: rgba(6,6,26,0.8); }

/* Mobile menu — scroll, sections, toggle */
@media (max-width: 767px) {
    .nav-blur.nav-mobile-open {
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .nav-blur.nav-mobile-open > .max-w-7xl {
        flex-shrink: 0;
        padding-right: 3.25rem;
    }
    .mobile-menu-toggle {
        position: fixed;
        top: 0.75rem;
        right: 1rem;
        z-index: 70;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 0.5rem;
        background: rgba(10,12,30,0.85);
        color: rgba(255,255,255,0.75);
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .mobile-menu-toggle:hover,
    .nav-mobile-open .mobile-menu-toggle {
        color: #fff;
        border-color: rgba(99,102,241,0.35);
        background: rgba(99,102,241,0.12);
    }
    .mobile-menu-icon {
        width: 1.375rem;
        height: 1.375rem;
    }
    .mobile-menu-icon--close {
        display: none;
    }
    .nav-mobile-open .mobile-menu-icon--open {
        display: none;
    }
    .nav-mobile-open .mobile-menu-icon--close {
        display: block;
    }
    .mobile-menu-panel:not(.hidden) {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 1.5rem 1.5rem;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    }
    .mobile-menu-section {
        margin-bottom: 1.75rem;
        padding-bottom: 1.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mobile-menu-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .mobile-menu-group {
        margin: 0 0 1rem;
        padding: 0.5rem 0.75rem;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: 0.5rem;
        border-left: 3px solid transparent;
    }
    .mobile-menu-section--services .mobile-menu-group {
        color: #a5b4fc;
        background: rgba(99,102,241,0.1);
        border-left-color: #6366f1;
    }
    .mobile-menu-section--hire .mobile-menu-group {
        color: #67e8f9;
        background: rgba(34,211,238,0.08);
        border-left-color: #22d3ee;
    }
    .mobile-menu-section--products .mobile-menu-group {
        color: #d8b4fe;
        background: rgba(168,85,247,0.1);
        border-left-color: #a855f7;
    }
    .mobile-menu-section--company .mobile-menu-group {
        color: #6ee7b7;
        background: rgba(16,185,129,0.1);
        border-left-color: #10b981;
    }
    .mobile-menu-block {
        margin-bottom: 1rem;
    }
    .mobile-menu-block:last-child {
        margin-bottom: 0;
    }
    .mobile-menu-label {
        margin: 0 0 0.375rem;
        padding: 0 0 0 0.75rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.28);
    }
    .mobile-menu-link {
        display: block;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.125rem;
        font-size: 0.875rem;
        line-height: 1.35;
        color: rgba(255,255,255,0.55);
        border-radius: 0.5rem;
        transition: color 0.15s, background 0.15s;
    }
    .mobile-menu-link:hover {
        color: #fff;
        background: rgba(255,255,255,0.04);
    }
    .mobile-menu-view-all {
        display: inline-block;
        margin-top: 0.75rem;
        padding: 0 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #818cf8;
    }
    .mobile-menu-view-all:hover {
        color: #a5b4fc;
    }
    .mobile-menu-cta {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .mobile-menu-cta-btn {
        display: block;
        padding: 0.875rem 1rem;
        text-align: center;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        background: #6366f1;
        border-radius: 0.625rem;
        transition: background 0.15s;
    }
    .mobile-menu-cta-btn:hover {
        background: #4f46e5;
    }
}

/* Dropdown menus */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.2s; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.nav-dropdown-btn:hover, .nav-dropdown:hover .nav-dropdown-btn { color: #fff; }
.nav-dropdown-btn svg { width: 12px; height: 12px; transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-btn svg { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; padding: 8px 0; border-radius: 12px; background: rgba(10,12,30,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; pointer-events: none; z-index: 60; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.nav-dropdown-menu a { display: block; padding: 8px 20px; font-size: 13px; color: rgba(255,255,255,0.5); transition: all 0.15s; white-space: nowrap; }
.nav-dropdown-menu a:hover { color: #fff; background: rgba(99,102,241,0.08); }

/* Common card style */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-cta {
    background: linear-gradient(135deg, #6366f1 0%, #22d3ee 60%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.card {
    background: linear-gradient(180deg, rgba(15,18,40,0.9) 0%, rgba(10,12,30,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.card:hover { border-color: rgba(99,102,241,0.3); }

/* Neon glow animation — text shimmer sweep */
@keyframes neon-sweep {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.neon-text {
    background: linear-gradient(90deg, #6366f1 0%, #6366f1 35%, #22d3ee 50%, #6366f1 65%, #6366f1 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: neon-sweep 4s linear infinite;
    text-shadow: none;
}

/* Chat widget styles */
.chat-card {
    background: linear-gradient(135deg, #0f1228 0%, #161a3a 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}
@keyframes chat-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0), 0 0 0 0 rgba(99,102,241,0); }
    50% { box-shadow: 0 0 24px 4px rgba(99,102,241,0.35), 0 0 60px 12px rgba(34,211,238,0.12); }
}
.chat-glow-attention {
    animation: chat-attention 0.8s ease-in-out 3;
}
#chatMessages::-webkit-scrollbar,
#floatingChatMessages::-webkit-scrollbar { width: 4px; }
#chatMessages::-webkit-scrollbar-thumb,
#floatingChatMessages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08); border-radius: 4px;
}
#chatMessages::-webkit-scrollbar-track,
#floatingChatMessages::-webkit-scrollbar-track { background: transparent; }
@keyframes typing-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
.typing-dot { width:6px;height:6px;border-radius:50%;background:rgba(99,102,241,0.6);display:inline-block;animation:typing-dot 1.4s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
.chat-bubble-pulse {
    animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.suggestion-chip { transition: all 0.2s; }
.suggestion-chip:hover { border-color: rgba(99,102,241,0.5); color: #818cf8; background: rgba(99,102,241,0.05); }

/* ── Astra scroll-to-top conflicts with our chat bubble — hide it ── */
#ast-scroll-top { display: none !important; }

/* ── Floating chat bubble: lifted 50px above viewport bottom to clear sticky footers / cookie bars ── */
#floatingChat { bottom: 74px !important; }

/* ── reCAPTCHA badge: stack it above the chat bubble (74px chat bottom + 56px button + 16px gap) ── */
.grecaptcha-badge { bottom: 146px !important; }

/* === Mega / wide dropdowns === */
.nav-dropdown-wide .nav-dropdown-menu { min-width: 520px; padding: 20px; left: 0; transform: translateY(8px); }
.nav-dropdown-wide:hover .nav-dropdown-menu { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.nav-mega-grid { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 4px; }
.nav-mega-col-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.2); padding: 0 12px 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-mega-grid a { padding: 6px 12px; white-space: normal; }
.nav-mega-footer { margin-top: 12px; padding: 10px 12px 0; border-top: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; }
.nav-mega-footer a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(129,140,248,0.7); padding: 0; background: none !important; }
.nav-mega-footer a:hover { color: #818cf8; background: none !important; }
/* Hire Teams dropdown — 2-col layout */
.nav-dropdown-hire .nav-dropdown-menu { min-width: 360px; padding: 20px; }
.nav-hire-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; }
.nav-hire-col-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.2); padding: 0 12px 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-hire-grid a { padding: 6px 12px; white-space: normal; }