/* ================================================
   SCIENTIST TECHNOLOGIES — PREMIUM DESIGN SYSTEM
   ================================================ */

/* ---- CSS Variables / Design Tokens ---- */
:root {
    /* Backgrounds */
    --bg-primary: #222222;
    --bg-secondary: #1C1C1C;
    --bg-tertiary: #2C2C2C;
    --bg-card: rgba(44, 44, 44, 0.6);
    --bg-glass: rgba(44, 44, 44, 0.4);

    /* Text */
    --text-primary: rgb(237, 238, 240);
    --text-secondary: rgba(237, 238, 240, 0.7);
    --text-muted: rgba(237, 238, 240, 0.5);

    /* Accents */
    --accent-primary: #fed16b;
    --accent-secondary: #E6BC5C;
    --accent-tertiary: #FFD985;
    --accent-warm: #fed16b;
    --accent-coral: #FF8F6B;

    /* Orb Colors - Dark Theme (lighter glows) */
    --orb-1-color: rgba(0, 245, 212, 0.08);
    --orb-2-color: rgba(123, 97, 255, 0.08);
    --orb-3-color: rgba(0, 180, 216, 0.06);
    --cursor-glow-color: rgba(0, 245, 212, 0.06);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #fed16b 0%, #E6BC5C 100%);
    --gradient-warm: linear-gradient(135deg, #FF8F6B 0%, #fed16b 100%);
    --gradient-cool: linear-gradient(135deg, #E6BC5C 0%, #FFF5D6 100%);
    --gradient-bg: linear-gradient(180deg, #222222 0%, #1C1C1C 50%, #222222 100%);
    --gradient-hero: radial-gradient(ellipse at 30% 50%, rgba(254, 209, 107, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(230, 188, 92, 0.08) 0%, transparent 60%);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(254, 209, 107, 0.3);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(254, 209, 107, 0.15);
    --shadow-glow-purple: 0 0 40px rgba(230, 188, 92, 0.15);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --transition-fast: 0.2s var(--ease-out-expo);
    --transition-base: 0.4s var(--ease-out-expo);
    --transition-slow: 0.6s var(--ease-out-expo);
    --transition-slower: 0.8s var(--ease-out-expo);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
}

/* Light Theme Overrides */
[data-theme="light"] {
    /* ── Backgrounds ─────────────────────────────────────────────────────────
       Hero stays black (handled separately).
       Sections alternate between near-white and light cool grey
       exactly like the site: "Who we are" = cool grey, rest = white.        */
    --bg-primary: #ffffff;           /* Main sections — "What We Do", "Clientele" */
    --bg-secondary: #f1f1f1;         /* Alternate sections — "Who we are" grey band */
    --bg-tertiary: #f2f2f2;          /* Subtle in-between if needed */
    --bg-card: rgba(255, 255, 255, 1);        /* Cards are fully opaque white */
    --bg-glass: rgba(255, 255, 255, 0.85);    /* Glass panels */
    --bg-hero: #111111;              /* Hero section stays dark like the site */
    --bg-dark-band: #1a1a1a;         /* Dark bands like "Urban AI" section */

    /* ── Text ────────────────────────────────────────────────────────────────
       Site uses pure black text on light sections, white on dark sections.  */
    --text-primary: #111111;         /* Near-black, not pure — slightly softer */
    --text-secondary: #444444;       /* Subheadings, body copy */
    --text-muted: #777777;           /* Captions, small labels */
    --text-on-dark: #ffffff;         /* Text sitting on dark/hero sections */
    --text-on-accent: #111111;       /* Text on gold/yellow badges */

    /* ── Accents — BLACK for text, GREY for borders ──────────────────────── */
    --accent-primary: #000000;       /* BLACK for text instead of teal */
    --accent-secondary: #333333;     /* Dark grey */
    --accent-tertiary: #666666;      /* Medium grey */
    --text-accent: #000000;          /* Black for text that uses accent color */

    /* ── Orbs — Completely transparent in light theme (only borders visible) */
    --orb-1-color: transparent;
    --orb-2-color: transparent;
    --orb-3-color: transparent;
    --orb-blur: 0px;
    --cursor-glow-color: rgba(0, 0, 0, 0.02);

    /* ── Borders — CHANGED TO GREY, NO YELLOW/TEAL ─────────────────────────────────────────────────────────── */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.14);
    --border-accent: #cccccc;  /* GREY border instead of yellow/teal */
    --border-dark: rgba(0, 0, 0, 0.85);         /* Near-black borders on buttons */

    /* ── Gradients ───────────────────────────────────────────────────────── */
    --gradient-bg: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
    --gradient-hero: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(100, 100, 100, 0.06) 0%, transparent 60%);
    --gradient-primary: linear-gradient(135deg, #000000 0%, #333333 100%);  /* BLACK gradient */
    --gradient-warm: linear-gradient(135deg, #333333 0%, #000000 100%);  /* BLACK gradient */

    /* ── Shadows — NO GLOW, SIMPLE GREY SHADOWS ────────────────────────────── */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
    --shadow-glow: none;  /* NO GLOW in light theme */
    --shadow-glow-purple: none;  /* NO GLOW in light theme */

    /* ── Glass Effect — Clean frosted on light ───────────────────────────── */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-backdrop: blur(16px);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Buttons — White background with black text, grey on hover ─────── */
:not(.urban-ai-page) [data-theme="light"] .btn-primary,
:not(.urban-ai-page) [data-theme="light"] .nav-cta {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

:not(.urban-ai-page) [data-theme="light"] .nav-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #333333;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

:not(.urban-ai-page) [data-theme="light"] .btn-primary:hover,
:not(.urban-ai-page) [data-theme="light"] .nav-cta:hover {
    color: #ffffff;
    border-color: #333333;
}

:not(.urban-ai-page) [data-theme="light"] .nav-cta:hover::before {
    left: 0;
}

/* ── Gradient Text Override — Black in light theme ─────────────────────────── */
:not(.urban-ai-page) [data-theme="light"] .case-study-title,
:not(.urban-ai-page) [data-theme="light"] .stat-number,
:not(.urban-ai-page) [data-theme="light"] .story-number {
    background: #000000;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ================================================
   LIGHT THEME - REMOVE ALL YELLOW RGBA BACKGROUNDS
   ================================================ */
[data-theme="light"] .service-category-badge,
[data-theme="light"] .tech-tag,
[data-theme="light"] .service-offering-item,
[data-theme="light"] .option-card,
[data-theme="light"] .service-card,
[data-theme="light"] .why-connect-icon,
[data-theme="light"] .contact-detail-item,
[data-theme="light"] .contact-detail-icon,
[data-theme="light"] .chat-header,
[data-theme="light"] .suggestion-chip,
[data-theme="light"] .timeline-badge,
[data-theme="light"] .case-study-cta,
[data-theme="light"] .project-tag,
[data-theme="light"] .category-badge {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="light"] .service-offering-item:hover,
[data-theme="light"] .tech-tag:hover,
[data-theme="light"] .suggestion-chip:hover,
[data-theme="light"] .why-connect-card:hover .why-connect-icon,
[data-theme="light"] .contact-detail-item:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove yellow borders and shadows */
[data-theme="light"] .service-offering-item,
[data-theme="light"] .contact-detail-item,
[data-theme="light"] .tech-tag,
[data-theme="light"] .project-tag {
    border-color: #dddddd !important;
}

[data-theme="light"] .service-offering-item:hover,
[data-theme="light"] .contact-detail-item:hover,
[data-theme="light"] .tech-tag:hover {
    border-color: #cccccc !important;
    box-shadow: none !important;
}

/* ── Logo Text — Black in light theme ─────────────────────────────────────── */
[data-theme="light"] .logo-text {
    background: #000000;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Service Number on Hover — Black in light theme ─────────────────────────── */
[data-theme="light"] .service-card:hover .service-number {
    background: #000000;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Badges and Tags — Grey backgrounds in light theme ─────────────────────── */
:not(.urban-ai-page) [data-theme="light"] .section-tag,
:not(.urban-ai-page) [data-theme="light"] .hero-badge {
    background: transparent;
    border: 1px solid #cccccc;
    color: #000000;
}

:not(.urban-ai-page) [data-theme="light"] .tech-badge {
    background: transparent;
    border: 1px solid #cccccc;
    color: #000000;
}

:not(.urban-ai-page) [data-theme="light"] .story-tag {
    background: transparent;
    border: 1px solid #cccccc;
    color: #000000;
}

/* ── Text Elements — Black text in light theme ─────────────────────────────── */
:not(.urban-ai-page) [data-theme="light"] .breadcrumb a,
:not(.urban-ai-page) [data-theme="light"] .breadcrumb span:last-child,
:not(.urban-ai-page) [data-theme="light"] .summary-label,
:not(.urban-ai-page) [data-theme="light"] .metric-value,
:not(.urban-ai-page) [data-theme="light"] .result-arrow,
:not(.urban-ai-page) [data-theme="light"] .result-after,
:not(.urban-ai-page) [data-theme="light"] .result-improvement,
:not(.urban-ai-page) [data-theme="light"] .team-role {
    color: #000000;
}

/* ── Icon Backgrounds — Grey in light theme ─────────────────────────────────── */
:not(.urban-ai-page) [data-theme="light"] .contact-icon {
    background: transparent;
    border: 1px solid #cccccc;
    color: #000000;
}

/* ── Social Link Hovers — Grey in light theme ─────────────────────────────── */
:not(.urban-ai-page) [data-theme="light"] .social-link:hover,
:not(.urban-ai-page) [data-theme="light"] .footer-social-link:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #999999;
    color: #000000;
}

/* ── Teal accent badge/label — like "What We Do" heading background ────────── */
[data-theme="light"] .accent-badge {
    background: var(--accent-primary);
    color: #ffffff;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 4px;
}

/* ── Section alternating backgrounds — mirrors the site's banding ─────────── */
[data-theme="light"] .section-primary   { background: var(--bg-primary); }   /* white */
[data-theme="light"] .section-secondary { background: var(--bg-secondary); } /* cool grey */
[data-theme="light"] .section-dark      { background: var(--bg-dark-band); color: var(--text-on-dark); }

/* ── Glass card on light background ─────────────────────────────────────────  */
[data-theme="light"] .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    box-shadow: var(--glass-shadow);
}

/* ── Navigation on light — Transparent initially, gray on scroll ─────────── */
[data-theme="light"] .navbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(100, 100, 100, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-link {
    color: #111111;
}

[data-theme="light"] .navbar.scrolled .nav-link {
    color: #111111;
}

[data-theme="light"] .nav-link:hover {
    color: #000000;
}

[data-theme="light"] .nav-link.active {
    color: #111111;
}

[data-theme="light"] .navbar.scrolled .nav-link.active {
    color: #111111;
}

[data-theme="light"] .nav-link.active::after {
    background: #000000;
}

/* Logo filter for light theme - always black */
[data-theme="light"] .logo-img {
    filter: brightness(0);
}

[data-theme="light"] .navbar.scrolled .logo-img {
    filter: brightness(0);
}

/* Nav CTA button for light theme */
[data-theme="light"] .nav-cta {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

[data-theme="light"] .navbar.scrolled .nav-cta {
    background: #000000;
    color: #ffffff;
}

[data-theme="light"] .nav-cta:hover {
    background: #333333;
    color: #ffffff;
}

/* Mobile menu button for light theme - always black */
[data-theme="light"] .mobile-menu-btn span {
    background: #111111;
}

[data-theme="light"] .navbar.scrolled .mobile-menu-btn span {
    background: #111111;
}

/* ── Footer on light — Grey background with black text ─────────────────────────────────────── */
[data-theme="light"] .footer {
    background: rgba(100, 100, 100, 0.5);
    color: #111111;
}

[data-theme="light"] .footer-tagline,
[data-theme="light"] .footer-col a {
    color: #111111;
}

[data-theme="light"] .footer-col h4 {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="light"] .footer-col a {
    transition: font-weight 0.3s ease;
}

[data-theme="light"] .footer-col a:hover {
    color: #111111;
    font-weight: 600;
}

[data-theme="light"] .footer-bottom p {
    color: rgba(17, 17, 17, 0.8);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
}

::selection {
    background: rgba(0, 245, 212, 0.3);
    color: var(--text-primary);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ---- Utility ---- */
.container {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0 var(--space-xs);
}

.gradient-text {
    display: inline;
    color: var(--accent-primary);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Disable gradient-text in light theme */
[data-theme="light"] .gradient-text {
    display: inline;
    color: #444444;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .gradient-text::before {
    display: none !important;
}

.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.section {
    padding: var(--space-2xl) 0;
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-md);
}
.marque-sec-head{
    margin-bottom: 7%;
}

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: rgba(0, 245, 212, 0.08);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 245, 212, 0.2);
    margin-bottom: var(--space-md);
    
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
    color: var(--text-primary) !important;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* ---- Cursor Glow ---- */
.cursor-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, var(--cursor-glow-color) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    will-change: left, top;
}

/* ---- Particle Canvas ---- */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ================================================
   NAVBAR
   ================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md) 0;
    transition: all var(--transition-base);
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.95);
    /* Always black */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-sm) 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    z-index: 10;
}

.logo-img {
    height: 32px;
    width: auto;
}

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

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: var(--radius-full);
    padding: 0;
}

.theme-toggle-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 0 4px;
    position: relative;
}

.theme-toggle-icon {
    font-size: 12px;
    z-index: 1;
    transition: opacity var(--transition-fast);
}

.theme-toggle-thumb {
    position: absolute;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-primary);
    transition: transform var(--transition-base);
    z-index: 2;
}

.theme-toggle.light .theme-toggle-thumb {
    transform: translateX(24px);
}

.nav-cta {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: #222222;
    /* Always dark text on Gold button */
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.nav-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--accent-secondary);
    transition: left 0.4s var(--ease-out-expo);
    z-index: -1;
}

.nav-cta:hover::before {
    left: 0;
}

.nav-cta:hover {
    /* No movement, just color change from animation */
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    z-index: 1001;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    /* Always white on black navbar */
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    transform-origin: center;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    padding: var(--space-2xl);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.mobile-nav-link {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition-fast);
    position: relative;
}

.mobile-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width var(--transition-base);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--accent-primary);
}

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

/* Light theme mobile menu */
[data-theme="light"] .mobile-menu {
    background: var(--bg-primary);
}

[data-theme="light"] .mobile-nav-link {
    color: var(--text-primary);
}

[data-theme="light"] .mobile-nav-link:hover,
[data-theme="light"] .mobile-nav-link.active {
    color: var(--accent-primary);
}

/* ================================================
   HERO SECTION
   ================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero-orbs {
    position: absolute;
    inset: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: float 8s ease-in-out infinite;
}

/* Light theme: Hide blurry orbs, show geometric shapes instead */
[data-theme="light"] .orb {
    filter: none;
    border-radius: 0;
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.015);
    animation: floatGeometric 12s ease-in-out infinite;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.2;
}

[data-theme="light"] .orb-1 {
    border-radius: 12px;
    transform: rotate(15deg);
    border-color: rgba(0, 0, 0, 0.012);
}

[data-theme="light"] .orb-2 {
    border-radius: 50%;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.015);
}

[data-theme="light"] .orb-3 {
    border-radius: 8px;
    transform: rotate(-20deg);
    border-color: rgba(0, 0, 0, 0.012);
}

@keyframes floatGeometric {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.15;
    }
    25% {
        transform: translate(10px, -10px) rotate(2deg);
        opacity: 0.2;
    }
    50% {
        transform: translate(-8px, 8px) rotate(-2deg);
        opacity: 0.18;
    }
    75% {
        transform: translate(5px, -5px) rotate(1deg);
        opacity: 0.2;
    }
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--orb-1-color);
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: var(--orb-2-color);
    top: 40%;
    right: 10%;
    animation-delay: -3s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--orb-3-color);
    bottom: 10%;
    left: 40%;
    animation-delay: -5s;
}

@keyframes float {

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

    25% {
        transform: translate(30px, -30px) scale(1.05);
    }

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

    75% {
        transform: translate(10px, -10px) scale(1.02);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    padding: 80px  20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-main-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1xl);
    width: 100%;
    margin-bottom: var(--space-xl);
    
}

.hero-video-container {
    flex: 1;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    height: auto;
}

.hero-video-container::before {
    /* Removed glowing pulse effect - too flashy for professional look */
    display: none;
}

/* Hero SVG Logo Styles */
/* Hero SVG Logo - Professional, One-time Animation on Load */
.hero-svg-logo {
    width: 75%;
    height: 75%;
    opacity: 0;
    animation: svgFadeIn 1.5s ease-out forwards;
    animation-delay: 0.3s;
}

/* Fade in animation - plays once */
@keyframes svgFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Main fill paths - Draw once on load, then stay solid */
.hero-svg-logo .svg-path-1,
.hero-svg-logo .svg-path-2 {
    stroke: #ffffff !important;
    stroke-width: 2.5;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    fill: #ffffff !important;
    fill-opacity: 0;
    animation: drawStroke 2.5s ease-in-out forwards;
}

.hero-svg-logo .svg-path-1 {
    animation-delay: 0.5s;
}

.hero-svg-logo .svg-path-2 {
    animation-delay: 1.2s;
}

/* Draw animation - stroke draws first, then fills */
@keyframes drawStroke {
    0% {
        stroke-dashoffset: 1500;
        fill-opacity: 0;
    }
    70% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

.hero-svg-logo .svg-path-2 {
    /* No animation delay needed */
}

/* Inner stroke paths - removed */
.hero-svg-logo .svg-detail-path {
    display: none;
}

/* Floating animation - gentle motion synchronized with drawing */
@keyframes svgFloat {
    0% {
        transform: translateY(0px);
    }
    /* Gentle float up during drawing (0-50%) */
    25% {
        transform: translateY(-6px);
    }
    50% {
        transform: translateY(0px);
    }
    /* Stay perfectly still while visible (50-80%) */
    80% {
        transform: translateY(0px);
    }
    /* Stay still during fade (80-100%) */
    100% {
        transform: translateY(0px);
    }
}

/* Dark theme animation: Draw → Fill → Hold → Fade out smoothly → Repeat */
@keyframes drawAndFillSVG {
    0% {
        stroke-dashoffset: 2000;
        fill: none;
        fill-opacity: 0;
        opacity: 0;
    }
    /* Draw in first 25% */
    25% {
        stroke-dashoffset: 0;
        fill: none;
        fill-opacity: 0;
        opacity: 1;
    }
    /* Smooth fill transition from 25% to 50% */
    30% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.2;
        opacity: 1;
    }
    35% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.4;
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.6;
        opacity: 1;
    }
    45% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.8;
        opacity: 1;
    }
    50% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 1;
        opacity: 1;
    }
    /* Hold visible from 50% to 80% */
    80% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 1;
        opacity: 1;
    }
    /* Smooth fade out from 80% to 100% */
    85% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.8;
        opacity: 0.8;
    }
    90% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.5;
        opacity: 0.5;
    }
    95% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0.2;
        opacity: 0.2;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #ffffff;
        fill-opacity: 0;
        opacity: 0;
    }
}

/* Inner stroke animation - fades as fill appears */
@keyframes drawDetailStroke {
    0% {
        stroke-dashoffset: 1000;
        stroke-opacity: 0;
    }
    40% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
    }
    55% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
    }
    65% {
        stroke-dashoffset: 0;
        stroke-opacity: 0;
    }
    100% {
        stroke-dashoffset: 1000;
        stroke-opacity: 0;
    }
}

/* Light theme SVG - One-time animation on load */
[data-theme="light"] .hero-svg-logo {
    /* Inherits fade-in animation */
}

[data-theme="light"] .hero-svg-logo .svg-path-1,
[data-theme="light"] .hero-svg-logo .svg-path-2 {
    stroke: #000000 !important;
    fill: #000000 !important;
    /* Inherits draw-once animation */
}

/* Light theme animation: Draw → Fill → Hold → Fade out smoothly → Repeat */
@keyframes drawAndFillSVGLight {
    0% {
        stroke-dashoffset: 2000;
        fill: none;
        fill-opacity: 0;
        opacity: 0;
    }
    /* Draw in first 25% */
    25% {
        stroke-dashoffset: 0;
        fill: none;
        fill-opacity: 0;
        opacity: 1;
    }
    /* Smooth fill transition from 25% to 50% */
    30% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.2;
        opacity: 1;
    }
    35% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.4;
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.6;
        opacity: 1;
    }
    45% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.8;
        opacity: 1;
    }
    50% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 1;
        opacity: 1;
    }
    /* Hold visible from 50% to 80% */
    80% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 1;
        opacity: 1;
    }
    /* Smooth fade out from 80% to 100% */
    85% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.8;
        opacity: 0.8;
    }
    90% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.5;
        opacity: 0.5;
    }
    95% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0.2;
        opacity: 0.2;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #000000;
        fill-opacity: 0;
        opacity: 0;
    }
}

@keyframes orb-glow-pulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.hero-logo-animation {
    width: 100%;
    height: 100%;
    /* Removed floating animation - logo stays in place */
}

/* SVG Logo Animation Styles - Circuit/Chip Design */
.animated-logo {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
}

.animated-logo .logo-path {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

/* Dark theme: White stroke drawing in loop, then yellow fill */
.animated-logo .logo-path {
    stroke: #FFFFFF;
    animation: drawLogoLoop 10s ease-in-out infinite;
}

/* Light theme: Black stroke drawing in loop, then teal fill */
[data-theme="light"] .animated-logo .logo-path {
    stroke: #000000;
    animation: drawLogoLoopLight 10s ease-in-out infinite;
}

/* Dark theme animation: Draw → Fill Yellow → Hold → Erase → Repeat */
@keyframes drawLogoLoop {
    0% {
        stroke-dashoffset: 2000;
        fill: none;
        stroke: #FFFFFF;
    }
    40% {
        stroke-dashoffset: 0;
        fill: none;
        stroke: #FFFFFF;
    }
    60% {
        stroke-dashoffset: 0;
        fill: none;
        stroke: var(--accent-primary);
    }
    80% {
        stroke-dashoffset: 0;
        fill: var(--accent-primary);
        stroke: var(--accent-primary);
    }
    100% {
        stroke-dashoffset: 2000;
        fill: var(--accent-primary);
        stroke: none;
    }
}

/* Light theme animation: Draw → Fill Teal → Hold → Erase → Repeat */
@keyframes drawLogoLoopLight {
    0% {
        stroke-dashoffset: 2000;
        fill: none;
        stroke: #000000;
    }
    40% {
        stroke-dashoffset: 0;
        fill: none;
        stroke: #000000;
    }
    60% {
        stroke-dashoffset: 0;
        fill: #b4eee8;
        stroke:#aec2c0;
    }
    80% {
        stroke-dashoffset: 0;
        fill: #7ed4cc;
        stroke: #7ed4cc;
    }
    100% {
        stroke-dashoffset: 2000;
        fill: #000000;
        stroke: none;
    }
}

@keyframes fillColor {
    to {
        fill-opacity: 1;
    }
}

@keyframes orb-float {

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.hero-text-container {
    flex: 1.2;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: 5%;
    /* margin-top: 60px; */
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-primary);
    background: rgba(0, 245, 212, 0.06);
    border: 1px solid rgba(0, 245, 212, 0.15);
    margin-bottom: var(--space-xl);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

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

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    letter-spacing: -0.02em;
}

.title-line {
    display: block;
    width: fit-content;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 0 var(--space-2xl);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px 32px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

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

.btn-primary:hover::before {
    left: 0;
}

.btn-primary:hover {
    color: var(--bg-primary);
}

.btn-ghost {
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #2D7A7A;
    transition: left 0.4s var(--ease-out-expo);
    z-index: -1;
}

.btn-ghost:hover::before {
    left: 0;
}

.btn-ghost:hover {
    border-color: #2D7A7A;
    color: #ffffff;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
    flex-wrap: wrap;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

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

.stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-suffix {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.stat-divider {
    width: 1px;
    height: 48px;
    background: var(--border-subtle);
}

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent-primary), transparent);
    animation: scroll-line-pulse 2s ease-in-out infinite;
}

@keyframes scroll-bounce {

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

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

@keyframes scroll-line-pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ================================================
   TECHNOLOGY LOGO CAROUSEL
   ================================================ */
.marquee-section {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: #fff;
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .marquee-section {   
    background: var(--bg-secondary);
}

.company{
    border: none;
}

/* Match white PNG backgrounds to section background in dark mode */
[data-theme="dark"] .tech-logo {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tech-logo img {
    /* Remove white backgrounds by making them transparent */
    filter: brightness(1.2) contrast(1.1);
}

/* Continuous sliding animation for .company */
.company .tech-logos-container {
    overflow: hidden;
    max-width: 100%;
    padding: 0;
    position: relative;
}

.company .tech-logos-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-3xl);
    animation: scroll-seamless 60s linear infinite;
    width: max-content;
    will-change: transform;
}

@keyframes scroll-seamless {
    from {
        transform: translateX(0);
    }
    to {
        /* Move exactly 50% - the duplicate set will seamlessly take over */
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.company .tech-logos-track:hover {
    animation-play-state: paused;
}

.tech-logos-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-logos-set {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xl);
    flex-wrap: nowrap;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 3s ease-in-out; /* Slower fade: 3s for smoother transition */
}

.tech-logos-set.active {
    opacity: 1;
    position: relative;
}

.tech-logo {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px;
}

/* Light theme - white background */
[data-theme="light"] .tech-logo {
    background: rgba(255, 255, 255, 0.8);
}

.tech-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.tech-logo:hover img {
    transform: scale(1.05);
}

/* Individual Technology Logo Backgrounds - Apply to parent container */
.tech-logo:has(img[alt="TensorFlow"]) { background: #FF6F00 !important; }
.tech-logo:has(img[alt="scikit-learn"]) { background: #F7931E !important; }
.tech-logo:has(img[alt="Jenkins"]) { background: #D24939 !important; }
.tech-logo:has(img[alt="Apache Airflow"]) { background: #017CEE !important; }
.tech-logo:has(img[alt="Anthropic Claude"]) { background: #D97757 !important; }
.tech-logo:has(img[alt="LangChain"]) { background: #1C3C3C !important; }
.tech-logo:has(img[alt="FastAPI"]) { background: #009688 !important; }
.tech-logo:has(img[alt="DigitalOcean"]) { background: #0080FF !important; }
.tech-logo:has(img[alt="CouchDB"]) { background: #E42528 !important; }
.tech-logo:has(img[alt="OpenCV"]) { background: #5C3EE8 !important; }
.tech-logo:has(img[alt="OpenAI"]) { background: #0066FF !important; }
.tech-logo:has(img[alt="ONNX"]) { background: #005CED !important; }
.tech-logo:has(img[alt="Ray"]) { background: #028CF0 !important; }
.tech-logo:has(img[alt="Dask"]) { background: #FC6E6B !important; }
.tech-logo:has(img[alt="PaddlePaddle"]) { background: #0062B0 !important; }
.tech-logo:has(img[alt="Mistral AI"]) { background: #FA520F !important; }
.tech-logo:has(img[alt="Terraform"]) { background: #844FBA !important; }
.tech-logo:has(img[alt="Prefect"]) { background: #3B4FE8 !important; }
.tech-logo:has(img[alt="MLflow"]) { background: #0194E2 !important; }
.tech-logo:has(img[alt="Perplexity"]) {background: #1FB8CD; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Replicate"] { background: #2D3748; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Google Cloud"] { background: #4285F4; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Alibaba Cloud"] { background: #FF6A00; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Vultr"] { background: #007BFC; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Selenium"] { background: #43B02A; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="BentoML"] { background: #FF6B6B; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Neptune"] { background: #5B69C2; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Argo"] { background: #EF7B4D; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Kubernetes"] { background: #326CE5; border-radius: 8px; padding: 8px; }
.tech-logo img[alt="Docker"] { background: #2496ED; border-radius: 8px; padding: 8px; }

/* Light theme - grey by default, colored on hover */
/* [data-theme="light"] .tech-logo img {
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.3s ease;
} */

/* [data-theme="light"] .tech-logo:hover img {
    filter: grayscale(0%) brightness(1) !important;
} */

/* Responsive */
@media (max-width: 768px) {
    .marquee-section {
        padding: var(--space-xl) 0;
    }
    
    .tech-logos-container {
        min-height: 80px;
    }
    
    .tech-logos-set {
        gap: var(--space-lg);
    }
    
    .tech-logo {
        width: 60px;
        height: 60px;
    }
    
    .company .tech-logos-track {
        gap: var(--space-lg);
    }
}

/* ================================================
   PROCESS TIMELINE - MINIMAL DESIGN v2.0
   ================================================ */
.process-timeline-section {
    padding: var(--space-3xl) 0 !important;
    background: var(--bg-primary) !important;
    position: relative;
    z-index: 1;
}

.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

/* Horizontal Gold Line */
.timeline-line {
    position: absolute !important;
    top: 20px !important;
    left: 5% !important;
    right: 5% !important;
    height: 3px !important;
    background: var(--accent-primary) !important;
    z-index: 1;
}

/* Timeline Steps Container */
.timeline-steps {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    position: relative;
    z-index: 2;
}

/* Individual Step */
.timeline-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative;
}

/* Timeline Node (Simple Circle) */
.timeline-node {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--accent-primary) !important;
    margin-bottom: var(--space-md) !important;
    transition: all var(--transition-base);
    position: relative;
    z-index: 3;
    box-shadow: 0 0 15px rgba(254, 209, 107, 0.5) !important;
    border: none !important;
}

/* Remove inner circle - not needed */
.node-inner {
    display: none !important;
}

/* Inactive State - White/Gray Circle */
.timeline-step:not(.active) .timeline-node {
    background: #888888 !important;
    box-shadow: 0 0 10px rgba(136, 136, 136, 0.3) !important;
}

/* Hover Effects */
.timeline-step:hover .timeline-node {
    transform: scale(1.15);
}

.timeline-step.active:hover .timeline-node {
    box-shadow: 0 0 25px rgba(254, 209, 107, 0.8) !important;
}

/* Timeline Content */
.timeline-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
}

.timeline-label {
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

.timeline-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    display: none !important; /* Hide description for minimal look */
}

/* Active Step Text Styling */
.timeline-step.active .timeline-label {
    color: var(--text-primary) !important;
}

.timeline-step:not(.active) .timeline-label {
    color: var(--text-secondary) !important;
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .timeline-wrapper {
        padding: var(--space-xl) var(--space-md);
    }

    .timeline-line {
        top: 15px !important;
        height: 2px !important;
    }

    .timeline-node {
        width: 30px !important;
        height: 30px !important;
    }

    .timeline-label {
        font-size: 0.85rem !important;
    }

    .timeline-steps {
        gap: var(--space-sm);
    }
}

/* ================================================
   ABOUT / APPROACH
   ================================================ */
.about-section {
    background: var(--gradient-bg);
    z-index: 1;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.approach-card {
    padding: var(--space-2xl);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.approach-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.approach-card:hover::before {
    transform: scaleX(1);
}

.approach-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.approach-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-lg);
}

.approach-icon svg {
    width: 100%;
    height: 100%;
}

.approach-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.approach-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ================================================
   SERVICES
   ================================================ */
.services-section {
    background: var(--bg-secondary);
    z-index: 1;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.service-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.service-card-inner {
    position: relative;
    z-index: 2;
    padding: var(--space-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    height: 100%;
    transition: all var(--transition-base);
}

.service-card:hover .service-card-inner {
    border-color: var(--border-accent);
}

.service-glow {
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
    border-radius: var(--radius-lg);
    filter: blur(20px);
    z-index: 0;
}

.service-card:hover .service-glow {
    opacity: 0.08;
}

.service-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--bg-tertiary);
    line-height: 1;
    margin-bottom: var(--space-md);
    transition: color var(--transition-base);
}

.service-card:hover .service-number {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.service-icon-wrap {
    width: 48px;
    height: 48px;
    color: var(--accent-primary);
    margin-bottom: var(--space-lg);
    transition: transform var(--transition-base);
}

.service-card:hover .service-icon-wrap {
    transform: scale(1.1);
}

.service-icon-wrap svg {
    width: 100%;
    height: 100%;
}

.service-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.service-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.service-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--transition-base);
}

.service-card:hover .service-link {
    opacity: 1;
    transform: translateY(0);
}

.service-link:hover {
    color: var(--accent-secondary);
}

/* ================================================
   SUCCESS STORIES
   ================================================ */
.stories-section {
    background: var(--gradient-bg);
    z-index: 1;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.story-card {
    padding: var(--space-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.story-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.story-card:hover::after {
    transform: scaleX(1);
}

.story-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.story-metric {
    margin-bottom: var(--space-md);
}

.story-number {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-suffix {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.story-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.story-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.story-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
    background: rgba(0, 245, 212, 0.06);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 245, 212, 0.15);
}

/* ================================================
   TEAM SECTION - STICKY SCROLL LAYOUT
   ================================================ */
.team-section {
    background: var(--bg-secondary);
    z-index: 1;
    padding: 0;
    position: relative;
    min-height: 100vh;
}

/* Sticky Wrapper - Creates the scroll effect */
.team-sticky-wrapper {
    position: relative;
    /* Reduced height since cards are in 2 columns now */
    height: 200vh;
}

.team-content-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0;
    width: 100%;
}

/* Left Side: Sticky Header */
.team-header-sticky {
    flex: 0 0 45%;
    padding: var(--space-4xl) var(--space-3xl);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--bg-secondary);
    z-index: 2;
}

.team-header-sticky .section-header {
    text-align: left;
    max-width: 500px;
    margin: 0;
}

.team-header-sticky .section-tag {
    display: inline-block;
}

.team-header-sticky .section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--space-lg);
    color: var(--text-primary) !important;
    line-height: 1.1;
}

.team-header-sticky .section-subtitle {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Right Side: Scrollable Cards Container */
.team-cards-scroll {
    flex: 0 0 55%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    align-content: start;
    padding: var(--space-4xl) var(--space-3xl);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--bg-secondary);
    scrollbar-width: none;          
    -ms-overflow-style: none;
}

/* Custom Scrollbar for Cards Container */
.team-cards-scroll::-webkit-scrollbar {
    width: 8px;
}

.team-cards-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.team-cards-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: var(--radius-full);
}

.team-cards-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* Individual Team Cards */
.team-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    flex-shrink: 0;
    opacity: 1;
    transform: translateY(0);
    min-height: 420px;
    height: 420px;
    flex: 1 1 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

/* Meet the Team Button - Positioned in left corner */
.meet-team-btn {
    position: absolute;
    bottom: var(--space-2xl);
    left: var(--space-2xl);
    z-index: 10;
}

/* Meet the Team Button - Spans full width */
.meet-team-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-2xl);
    margin: var(--space-xl) 0;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
}

.meet-team-cta:hover {
    /* transform: translateY(-4px); */
    box-shadow: var(--shadow-glow);
}

.meet-team-cta svg {
    transition: transform var(--transition-base);
}

.meet-team-cta:hover svg {
    transform: translateX(5px);
}

.team-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.team-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-lg);
}

.avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient-primary);
    animation: ring-rotate 4s linear infinite;
    opacity: 0.6;
}

@keyframes ring-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.avatar-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg-card);
}

.avatar-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder svg {
    width: 80%;
    height: 80%;
}

.team-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.team-role {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}


.team-bio {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.team-social {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.social-link:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(0, 245, 212, 0.08);
}

/* ================================================
   CONTACT
   ================================================ */
.contact-section {
    background: var(--gradient-bg);
    z-index: 1;
}

/* New Contact Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

/* Left Column - Contact Info */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

.office-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.office-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.office-address {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.office-phone,
.office-email {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.office-phone:hover,
.office-email:hover {
    color: var(--accent-primary);
}

/* Right Column - Contact Form */
.contact-form-column {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.form-header {
    background: var(--accent-primary);
    padding: var(--space-sm);
    text-align: center;
}

[data-theme="light"] .form-header {
    background: #000000;
}

.form-header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

[data-theme="light"] .form-header h2 {
    color: #ffffff !important;
}

/* [data-theme="dark"] .form-header h2 {
    color: #000000 !important;
} */

/* Light theme: Add visible borders to form inputs */
[data-theme="light"] .simple-contact-form input,
[data-theme="light"] .simple-contact-form textarea {
    border-color: #cccccc !important;
}

[data-theme="light"] .simple-contact-form input:focus,
[data-theme="light"] .simple-contact-form textarea:focus {
    border-color: #000000 !important;
}

.simple-contact-form {
    padding: var(--space-xl);
}

.simple-contact-form .form-group {
    margin-bottom: var(--space-xl);
}

.simple-contact-form input,
.simple-contact-form textarea {
    width: 100%;
    background: transparent !important;
    border: none;
    border-bottom: 2px solid var(--border-subtle);
    padding: var(--space-sm) 0;
    font-size: 1rem;
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.simple-contact-form input:focus,
.simple-contact-form textarea:focus {
    outline: none;
    border-bottom-color: var(--accent-primary);
}

.simple-contact-form input::placeholder,
.simple-contact-form textarea::placeholder {
    color: rgba(237, 238, 240, 0.6) !important;
    opacity: 1 !important;
}

.simple-contact-form input::-webkit-input-placeholder,
.simple-contact-form textarea::-webkit-input-placeholder {
    color: rgba(237, 238, 240, 0.6) !important;
    opacity: 1 !important;
}

.simple-contact-form input::-moz-placeholder,
.simple-contact-form textarea::-moz-placeholder {
    color: rgba(237, 238, 240, 0.6) !important;
    opacity: 1 !important;
}

.simple-contact-form input:-ms-input-placeholder,
.simple-contact-form textarea:-ms-input-placeholder {
    color: rgba(237, 238, 240, 0.6) !important;
    opacity: 1 !important;
}

[data-theme="light"] .simple-contact-form input::placeholder,
[data-theme="light"] .simple-contact-form textarea::placeholder {
    color: rgba(17, 17, 17, 0.5) !important;
    opacity: 1 !important;
}

[data-theme="light"] .simple-contact-form input::-webkit-input-placeholder,
[data-theme="light"] .simple-contact-form textarea::-webkit-input-placeholder {
    color: rgba(17, 17, 17, 0.5) !important;
    opacity: 1 !important;
}

[data-theme="light"] .simple-contact-form input::-moz-placeholder,
[data-theme="light"] .simple-contact-form textarea::-moz-placeholder {
    color: rgba(17, 17, 17, 0.5) !important;
    opacity: 1 !important;
}

[data-theme="light"] .simple-contact-form input:-ms-input-placeholder,
[data-theme="light"] .simple-contact-form textarea:-ms-input-placeholder {
    color: rgba(17, 17, 17, 0.5) !important;
    opacity: 1 !important;
}

/* Prevent autofill from overriding styles */
.simple-contact-form input:-webkit-autofill,
.simple-contact-form input:-webkit-autofill:hover,
.simple-contact-form input:-webkit-autofill:focus,
.simple-contact-form textarea:-webkit-autofill,
.simple-contact-form textarea:-webkit-autofill:hover,
.simple-contact-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: transparent !important;
}

[data-theme="light"] .simple-contact-form input:-webkit-autofill,
[data-theme="light"] .simple-contact-form input:-webkit-autofill:hover,
[data-theme="light"] .simple-contact-form input:-webkit-autofill:focus,
[data-theme="light"] .simple-contact-form textarea:-webkit-autofill,
[data-theme="light"] .simple-contact-form textarea:-webkit-autofill:hover,
[data-theme="light"] .simple-contact-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #111 !important;
}

.simple-contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    background: var(--accent-primary);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[data-theme="light"] .btn-submit {
    background: #000000;
    color: #ffffff;
}

.btn-submit:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

/* Old Contact Styles - Keep for backward compatibility */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.contact-info .section-title {
    text-align: left;
}

.contact-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-2xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.contact-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-md);
    background: rgba(0, 245, 212, 0.06);
    border: 1px solid rgba(0, 245, 212, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.contact-detail-item h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.contact-detail-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.footer-social-links {
    display: flex;
    gap: var(--space-sm);
}

.footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.footer-social-link:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(0, 245, 212, 0.08);
    /* transform: translateY(-3px); */
}

/* Contact Layout Responsive */
@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .office-title {
        font-size: 1.3rem;
    }

    .form-header h2 {
        font-size: 1.5rem;
    }

    .simple-contact-form {
        padding: var(--space-xl);
    }
}



/* ================================================
   PRODUCTS PAGE
   ================================================ */

/* Product Hero Banner */
.product-hero-banner {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.product-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.product-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-sm) var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.product-hero-logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-md);
}

.product-hero-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.1;
}

.product-hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    line-height: 0.9;
}

.product-attribution {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--space-md);
}

/* Featured Product Section */
.featured-product-section {
    background: var(--gradient-bg);
    z-index: 1;
}

.featured-product-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
}

/* Product Visual */
.product-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-logo-container {
    width: 100%;
    max-width: 400px;
    padding: var(--space-md);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    /* border-radius: var(--radius-xl); */
    transition: all var(--transition-base);
}

.product-logo-container:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 32px rgba(254, 209, 107, 0.2);
}

[data-theme="light"] .product-logo-container:hover {
    box-shadow: 0 8px 32px rgba(21, 194, 177, 0.2);
}

.product-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Product Details */
.product-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.product-badge {
    display: inline-block;
    width: fit-content;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.15);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(254, 209, 107, 0.3);
}

[data-theme="light"] .product-badge {
    color: #15c2b1;
    background: rgba(21, 194, 177, 0.15);
    border-color: rgba(21, 194, 177, 0.3);
}

.product-name {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.product-tagline {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--accent-primary);
    
}

[data-theme="light"] .product-tagline {
    color: #000;
}

.product-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    
}

/* Product Features List */
.product-features-list {
    display: flex;
    
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.feature-item svg {
    width: 20px;
    height: 20px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

[data-theme="light"] .feature-item svg {
    color: #15c2b1;
}

/* Tech Stack */
.product-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.product-tech-stack .tech-badge {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.1);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(254, 209, 107, 0.25);
}

[data-theme="light"] .product-tech-stack .tech-badge {
    color: #15c2b1;
    background: rgba(21, 194, 177, 0.1);
    border-color: rgba(21, 194, 177, 0.25);
}

/* Product CTA Group */
.product-cta-group {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

/* Product Highlights Section */
.product-highlights-section {
    background: var(--bg-secondary);
    margin-top: 0px ;
}

.product-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.highlight-card {
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.highlight-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 32px rgba(254, 209, 107, 0.15);
}

[data-theme="light"] .highlight-card:hover {
    border-color: #15c2b1;
    box-shadow: 0 8px 32px rgba(21, 194, 177, 0.15);
}

.highlight-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

[data-theme="light"] .highlight-icon {
    color: #15c2b1;
}

.highlight-icon svg {
    width: 100%;
    height: 100%;
}

.highlight-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.highlight-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Coming Soon Section */
.coming-soon-section {
    background: var(--gradient-bg);
    text-align: center;
    
}

.coming-soon-content {
    max-width: 600px;
    margin: 0 auto;
}

.coming-soon-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    opacity: 0.6;
}

[data-theme="light"] .coming-soon-icon {
    color: #15c2b1;
}

.coming-soon-icon svg {
    width: 100%;
    height: 100%;
}

.coming-soon-content h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.coming-soon-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

/* CTA Section */
.cta-section {
    background: var(--bg-secondary);
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.cta-content p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-2xl);
}

.cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive - Products Page */
@media (max-width: 968px) {
    .featured-product-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .product-logo-container {
        max-width: 300px;
    }

    .product-name {
        font-size: 2rem;
    }

    .product-highlights-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .product-cta-group {
        flex-direction: column;
    }

    .product-cta-group .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .product-name {
        font-size: 1.8rem;
    }

    .product-tagline {
        font-size: 1rem;
    }

    .product-description {
        font-size: 0.9rem;
    }

    .coming-soon-content h2 {
        font-size: 1.6rem;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }
}

/* ================================================
   MAP SECTION
   ================================================ */
.map-section {
    margin-top: var(--space-3xl);
}

.map-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.map-header svg {
    flex-shrink: 0;
}

.map-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-base);
}

.map-container:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    filter: saturate(0.85);
    transition: filter var(--transition-slow);
}

.map-container:hover iframe {
    filter: saturate(1);
}

/* Map Pin Marker */
.map-pin-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 40px;
    height: 52px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    animation: pin-bounce 2s ease-in-out infinite;
}

.map-pin-pulse {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%) rotateX(60deg);
    width: 20px;
    height: 20px;
    background: var(--accent-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pin-bounce {

    0%,
    100% {
        transform: translate(-50%, -100%);
    }

    50% {
        transform: translate(-50%, -115%);
    }
}

@keyframes pulse-ring {
    0% {
        transform: translateX(-50%) translateY(50%) rotateX(60deg) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) translateY(50%) rotateX(60deg) scale(2.5);
        opacity: 0;
    }
}

/* Map Overlay Card */
.map-overlay-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: var(--space-lg);
    max-width: 280px;
    z-index: 10;
    background: var(--bg-tertiary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: overlay-slide-in 0.6s var(--ease-out-expo) both;
    animation-delay: 0.3s;
}

@keyframes overlay-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

.map-overlay-pin {
    position: relative;
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-overlay-pin::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(0, 245, 212, 0.15);
    animation: pin-pulse 2s ease-in-out infinite;
}

@keyframes pin-pulse {

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

    50% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.map-overlay-pin svg {
    position: relative;
    z-index: 1;
}

.map-overlay-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.map-overlay-address {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.map-overlay-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(0, 245, 212, 0.08);
    border: 1px solid rgba(0, 245, 212, 0.2);
    transition: all var(--transition-fast);
}

.map-overlay-link:hover {
    background: rgba(0, 245, 212, 0.15);
    border-color: rgba(0, 245, 212, 0.4);
    box-shadow: 0 4px 16px rgba(0, 245, 212, 0.15);
}

@media (max-width: 768px) {
    .map-container {
        height: 300px;
    }

    .map-overlay-card {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .map-container {
        height: 250px;
    }
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3xl) 0 var(--space-xl);
    position: relative;
    z-index: 1;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-2xl);
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: var(--space-md);
    max-width: 300px;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.footer-col a {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    transition: color var(--transition-fast);
}

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

.footer-bottom {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-subtle);
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ================================================
   SCROLL ANIMATIONS
   ================================================ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--ease-out-expo);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.approach-grid .animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.approach-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.approach-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.services-grid .animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.services-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.15s;
}

.services-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.services-grid .animate-on-scroll:nth-child(4) {
    transition-delay: 0.25s;
}

.services-grid .animate-on-scroll:nth-child(5) {
    transition-delay: 0.3s;
}

.services-grid .animate-on-scroll:nth-child(6) {
    transition-delay: 0.35s;
}

.stories-grid .animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.stories-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.stories-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.team-grid .animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.team-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.team-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

/* ================================================
   MAGNETIC BUTTON HOVER EFFECT
   ================================================ */
.btn-primary:active {
    /* transform: translateY(-1px) scale(0.98); */
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {

    .approach-grid,
    .services-grid,
    .stories-grid,
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .hero-main-flex {
        flex-direction: column;
        gap: var(--space-xl);
        text-align: center;
    }

    .hero-text-container {
        align-items: center;
        text-align: center;
    }

    .hero-video-container {
        justify-content: center;
        max-width: 100%;
    }

    .hero-subtitle {
        margin: 0 auto var(--space-2xl);
    }

    .approach-grid,
    .services-grid,
    .stories-grid {
        grid-template-columns: 1fr;
    }

    /* Team Section Responsive */
    .team-sticky-wrapper {
        height: auto;
    }

    .team-content-wrapper {
        position: relative;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: var(--space-3xl) 0;
    }

    .team-header-sticky {
        flex: 1;
        padding: var(--space-2xl) var(--space-md);
        margin-bottom: var(--space-2xl);
    }

    .team-header-sticky .section-header {
        text-align: center;
    }

    .team-cards-scroll {
        flex: 1;
        height: auto;
        padding: 0 var(--space-md);
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        overflow-y: visible;
    }

    .meet-team-cta {
        margin: var(--space-xl) 0;
        grid-column: 1;
    }

    .hero-stats {
        gap: var(--space-lg);
    }

    .stat-divider {
        display: none;
    }

    .hero-scroll-indicator {
        display: none;
    }

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

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }

    .hero-content {
        padding: 100px var(--space-md) var(--space-3xl);
    }

    .hero-cta-group {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   LOADING ANIMATION
   ================================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-ring {
    width: 60px;
    height: 60px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================================
   TILT EFFECT ON CARDS (applied via JS)
   ================================================ */
.service-card-inner.tilting {
    transition: none;
}

/* ================================================
   PRODUCT SECTION & CAROUSEL
   ================================================ */
.product-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 968px) {
    .product-showcase {
        grid-template-columns: 0.8fr 1.2fr;
    }
}

.product-info {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.product-image-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.product-main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.product-info:hover .product-main-image {
    transform: scale(1.05);
}

.product-details h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.product-details p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
}

/* CAROUSEL */
.product-carousel {
    position: relative;
    overflow: hidden;
    padding: var(--space-md);
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
}

.carousel-track-container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    display: flex;
    /* Horizontal layout */
}

.carousel-slide {
    position: absolute;
    /* Absolute positioning for slides */
    top: 0;
    bottom: 0;
    width: 100%;
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-content {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keep aspect ratio */
    border-radius: var(--radius-sm);
    background: #000;
}

/* Deployment Map Container */
.deployment-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Leaflet Map */
.leaflet-map {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    z-index: 1;
}

/* Dark theme for Leaflet */
.leaflet-map .leaflet-tile {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) invert(1);
}

/* Custom Marker Styling */
.leaflet-map .leaflet-marker-icon {
    filter: drop-shadow(0 0 10px var(--accent-primary));
}

/* Popup Styling */
.leaflet-popup-content-wrapper {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid var(--accent-primary) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
}

.leaflet-popup-content {
    margin: var(--space-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
}

.leaflet-popup-tip {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid var(--accent-primary) !important;
}

.leaflet-popup-close-button {
    color: var(--accent-primary) !important;
    font-size: 20px !important;
}

.leaflet-popup-close-button:hover {
    color: var(--accent-secondary) !important;
}

/* Map Info Overlay */
.map-info-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    min-width: 220px;
    z-index: 5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.map-info-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(254, 209, 107, 0.3);
}

.map-info-header svg {
    flex-shrink: 0;
}

.map-stats {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.map-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-stat-item .stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.map-stat-item .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Location List */
.map-locations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.location-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.location-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    box-shadow: 0 0 8px var(--accent-primary);
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.8);
    }
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-slide:hover .slide-caption {
    opacity: 1;
}

/* Controls */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.carousel-button:hover {
    background: var(--accent-primary);
    color: #000;
}

.carousel-button--left {
    left: 20px;
}

.carousel-button--right {
    right: 20px;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
}

.carousel-indicator {
    border: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicator.current-slide {
    background: var(--accent-primary);
    transform: scale(1.2);
}

.is-hidden {
    display: none !important;
}

/* ================================================
   AI CHATBOT
   ================================================ */
.chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.chatbot-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(254, 209, 107, 0.4);
    transition: all var(--transition-base);
    position: relative;
    cursor: pointer;
    border: none;
}

.chatbot-toggle:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 12px 40px rgba(254, 209, 107, 0.5);
}

.chatbot-pulse {
    position: absolute;
    inset: -5px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    animation: chatbot-pulse 2s ease-out infinite;
    z-index: -1;
}

@keyframes chatbot-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.chat-icon,
.close-icon {
    width: 28px;
    height: 28px;
    position: absolute;
    transition: all var(--transition-base);
}

.close-icon {
    opacity: 0;
    transform: scale(0) rotate(-90deg);
}

.chatbot-container.active .chat-icon {
    opacity: 0;
    transform: scale(0) rotate(90deg);
}

.chatbot-container.active .close-icon {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* Chat Window */
.chat-window-wrapper {
    position: absolute;
    bottom: 85px;
    right: 0;
    width: 380px;
    height: 550px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(30px) scale(0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
    pointer-events: none;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-light);
    background: rgba(44, 44, 44, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.chatbot-container.active .chat-window-wrapper {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.chat-header {
    padding: var(--space-md) var(--space-lg);
    background: rgba(254, 209, 107, 0.1);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.bot-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    position: relative;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #00F5D4;
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
}

.bot-info h3 {
    font-size: 1rem;
    font-weight: 700;
}

.bot-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-body {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chat-msg {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-msg.bot {
    align-self: flex-start;
}

.chat-msg.user {
    align-self: flex-end;
}

.msg-content {
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-msg.bot .msg-content {
    background: var(--bg-tertiary);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border-subtle);
}

.chat-msg.user .msg-content {
    background: var(--gradient-primary);
    color: #1a1a1a;
    border-bottom-right-radius: 4px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(254, 209, 107, 0.2);
}

.msg-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chat-footer {
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--border-light);
}

.chat-suggestions {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-md);
    overflow-x: auto;
    padding-bottom: 4px;
}

.chat-suggestions::-webkit-scrollbar {
    height: 0;
}

.suggestion-chip {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(254, 209, 107, 0.1);
    border: 1px solid rgba(254, 209, 107, 0.2);
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.suggestion-chip:hover {
    background: rgba(254, 209, 107, 0.2);
    border-color: var(--accent-primary);
}

.chat-input-area {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    padding: 4px 4px 4px 16px;
    border: 1px solid var(--border-light);
    transition: border-color 0.3s ease;
}

.chat-input-area:focus-within {
    border-color: var(--accent-primary);
}

#chatInput {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.send-btn:hover {
    transform: scale(1.1);
}

.send-btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 480px) {
    .chat-window-wrapper {
        width: calc(100vw - 40px);
        right: -10px;
        bottom: 80px;
    }
}


/* ================================================
   BREADCRUMB
   ================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xl);
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-xl);
}

.breadcrumb a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--accent-primary);
}

.breadcrumb-separator {
    color: var(--text-muted);
    opacity: 0.5;
}

.breadcrumb span:last-child {
    color: var(--accent-primary);
}

/* ================================================
   TEAM PAGE HERO
   ================================================ */
.team-hero {
    min-height: 60vh;
}

.team-hero .hero-content {
    padding: 180px var(--space-xl) var(--space-4xl);
}

.team-hero .hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================
   TEAM CATEGORY SECTIONS
   ================================================ */
.team-category-section {
    background: var(--bg-primary);
}

.team-category-section:nth-child(even) {
    background: var(--bg-secondary);
}

.team-category-section .container {
    max-width: 1400px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 1200px;
    margin: 0 auto;
}

/* For sections with few members (Leadership, Business Ops) - center the grid */
.team-grid:not(.engineer-team) {
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
}

/* For engineering team with multiple rows - use fixed 4 columns */
.engineer-team {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments for team grid */
@media (max-width: 968px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-card {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .team-card {
        max-width: 100%;
    }
}


/* ================================================
   ABOUT PAGE STYLES
   ================================================ */

/* CEO Journey Section */
.ceo-journey-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-3xl);
    margin-top: var(--space-xl);
    align-items: start;
}

.ceo-video-container {
    padding: 0;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.ceo-video-container .video-placeholder {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.video-wrapper {
    position: relative;
    width: 100%;
}

.video-thumb {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    /* cursor: pointer; */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-base);
}

.play-button svg {
    width: 48px;
    height: 48px;
}

.video-thumb:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-caption {
    margin-top: var(--space-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.ceo-story-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ceo-story-text h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--accent-primary);
    margin-bottom: var(--space-sm);
}

.ceo-story-text p {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Timeline Section */
/* ================================================
   VERTICAL TIMELINE - COMPANY HISTORY
   ================================================ */
.timeline-section {
    background: var(--bg-secondary);
    padding: var(--space-4xl) 0;
    position: relative;
}

/* ================================================
   HORIZONTAL TIMELINE (Desktop)
   ================================================ */
.horizontal-timeline {
    position: relative;
    max-width: 100%;
    margin: var(--space-2xl) auto 0;
    padding: var(--space-4xl) var(--space-md) var(--space-4xl) var(--space-md);
    min-height: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}

/* Horizontal line running left to right - positioned at dot level */
.horizontal-timeline::before {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--accent-primary);
    z-index: 1;
}

/* Arrow at the right end of timeline */
.horizontal-timeline::after {
    content: '';
    position: absolute;
    right: calc(5% - 2px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid var(--accent-primary);
    z-index: 2;
}

/* Light theme timeline line and arrow color */
[data-theme="light"] .horizontal-timeline::before {
    background: #000000;
}

[data-theme="light"] .horizontal-timeline::after {
    border-left-color: #000000;
}

/* Timeline Item - Vertical layout within horizontal flow */
.horizontal-timeline .timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 2;
    min-height: 350px;
}

/* Year wrapper - positioned above the line */
.horizontal-timeline .timeline-year-wrapper {
    order: 1;
    margin-bottom: var(--space-lg);
}

.horizontal-timeline .timeline-year {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.15);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(254, 209, 107, 0.3);
    white-space: nowrap;
}

[data-theme="light"] .horizontal-timeline .timeline-year {
    color: #000000;
    background: transparent;
    border-color: #cccccc;
}

/* Timeline Marker - positioned on the line */
.horizontal-timeline .timeline-marker {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    margin-bottom: var(--space-lg);
    
}

.horizontal-timeline .timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 4px solid var(--bg-secondary);
    box-shadow: 0 0 0 3px var(--accent-primary);
    animation: pulse-timeline 2s ease-in-out infinite;
}

[data-theme="light"] .horizontal-timeline .timeline-dot {
    background: #000000;
    box-shadow: 0 0 0 3px #000000;
    border-color: var(--bg-primary);
}

@keyframes pulse-timeline {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* Content Card - positioned below the line */
.horizontal-timeline .timeline-content-card {
    order: 3;
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-align: center;
    width: 100%;
    max-width: 280px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.horizontal-timeline .timeline-content-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 6px 24px rgba(254, 209, 107, 0.2);
}

[data-theme="light"] .horizontal-timeline .timeline-content-card:hover {
    border-color: #cccccc;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.horizontal-timeline .timeline-content-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
    line-height: 1.3;
}

.horizontal-timeline .timeline-content-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.85rem;
    flex: 1;
}

/* Responsive - Tablet */
@media (max-width: 968px) {
    .horizontal-timeline {
        padding: var(--space-lg) var(--space-sm);
    }
    
    .horizontal-timeline .timeline-item {
        min-height: 320px;
    }
    
    .horizontal-timeline .timeline-content-card {
        max-width: 220px;
        padding: var(--space-sm) var(--space-md);
        min-height: 160px;
    }
    
    .horizontal-timeline .timeline-content-card h3 {
        font-size: 1rem;
    }
    
    .horizontal-timeline .timeline-content-card p {
        font-size: 0.8rem;
    }
    
    .horizontal-timeline .timeline-year {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
}

/* Responsive - Mobile (Vertical Timeline) */
@media (max-width: 768px) {
    .horizontal-timeline {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-xl) var(--space-lg);
        gap: var(--space-3xl);
    }
    
    /* Vertical line in the center */
    .horizontal-timeline::before {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 60px;
        width: 4px;
        height: auto;
        transform: translateX(-50%);
    }
    
    /* Arrow at bottom of vertical line */
    .horizontal-timeline::after {
        display: block;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 40px;
        transform: translateX(-50%) rotate(90deg);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 14px solid var(--accent-primary);
    }
    
    [data-theme="light"] .horizontal-timeline::after {
        border-left-color: #000000;
    }
}

/* Desktop: Alternating above/below the line */
@media (min-width: 969px) {
    .horizontal-timeline .timeline-item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
        align-items: center;
        justify-items: center;
        min-height: 400px;
        gap: 0;
        padding: 0;
    }
    
    /* Odd items: Card ABOVE line, Year BELOW line */
    .horizontal-timeline .timeline-item:nth-child(odd) {
        grid-template-areas: 
            "card"
            "marker"
            "year";
    }
    
    .horizontal-timeline .timeline-item:nth-child(odd) .timeline-content-card {
        align-self: end;
        margin-bottom: 2rem;
    }
    
    .horizontal-timeline .timeline-item:nth-child(odd) .timeline-year-wrapper {
        align-self: start;
        margin-top: 2rem;
    }
    
    /* Even items: Year ABOVE line, Card BELOW line */
    .horizontal-timeline .timeline-item:nth-child(even) {
        grid-template-areas: 
            "year"
            "marker"
            "card";
    }
    
    .horizontal-timeline .timeline-item:nth-child(even) .timeline-year-wrapper {
        align-self: end;
        margin-bottom: 2rem;
    }
    
    .horizontal-timeline .timeline-item:nth-child(even) .timeline-content-card {
        align-self: start;
        margin-top: 2rem;
    }
    
    .horizontal-timeline .timeline-year-wrapper {
        grid-area: year;
        text-align: center;
        margin: 0;
    }
    
    .horizontal-timeline .timeline-marker {
        grid-area: marker;
        margin: 0;
        flex-shrink: 0;
        z-index: 10;
    }
    
    .horizontal-timeline .timeline-content-card {
        grid-area: card;
        width: 200%;
        max-width: 320px;
        height: 140px;
        text-align: left;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .horizontal-timeline .timeline-content-card h3 {
        margin-bottom: var(--space-sm);
        font-size: 1rem;
    }
    
    .horizontal-timeline .timeline-content-card p {
        flex: 1;
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .horizontal-timeline .timeline-dot {
        width: 16px;
        height: 16px;
    }
}

/* Responsive - Mobile/Tablet */
@media (max-width: 968px) {
    .horizontal-timeline {
        padding: var(--space-2xl) var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
        position: relative;
    }
    
    /* Vertical line on the left */
    .horizontal-timeline::before {
        display: block;
        left: 20px;
        right: auto;
        top: 0;
        bottom: 60px;
        width: 3px;
        height: calc(100% - 60px);
        background: var(--accent-primary);
    }
    
    [data-theme="light"] .horizontal-timeline::before {
        background: #000000;
    }
    
    /* Arrow at bottom of vertical line */
    .horizontal-timeline::after {
        display: block;
        left: 20px;
        right: auto;
        top: auto;
        bottom: 40px;
        transform: translateX(-50%) rotate(90deg);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 14px solid var(--accent-primary);
    }
    
    [data-theme="light"] .horizontal-timeline::after {
        border-left-color: #000000;
    }
    
    /* Mobile: Dots ON the vertical line, cards full width */
    .horizontal-timeline .timeline-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "marker year"
            "marker card";
        align-items: start;
        gap: 0 var(--space-lg);
        padding: 0;
        min-height: auto;
        position: relative;
    }
    
    .horizontal-timeline .timeline-marker {
        grid-area: marker;
        grid-row: 1 / 3;
        align-self: start;
        margin: 0;
        position: relative;
        left: -8px;
        padding-top: 2px;
    }
    
    .horizontal-timeline .timeline-dot {
        width: 18px;
        height: 18px;
    }
    
    .horizontal-timeline .timeline-year-wrapper {
        grid-area: year;
        text-align: left;
        align-self: center;
        margin: 0;
    }
    
    .horizontal-timeline .timeline-year {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
    
    .horizontal-timeline .timeline-content-card {
        grid-area: card;
        width: 100%;
        max-width: 100%;
        padding: var(--space-md);
        min-height: auto;
        margin-top: var(--space-sm);
        text-align: left;
    }
    
    .horizontal-timeline .timeline-content-card h3 {
        font-size: 1.05rem;
    }
    
    .horizontal-timeline .timeline-content-card p {
        font-size: 0.9rem;
    }
}
      

/* Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.value-card {
    padding: var(--space-md);
    transition: all var(--transition-base);
}

.value-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.value-icon {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: left;
    align-items: center;
    color: var(--accent-primary);
    margin-bottom: var(--space-md);
}

.value-icon svg {
    width: 10%;
    height: 100%;
}

.value-icon h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
    color: #ffffff;
    margin-left: var(--space-sm);
}
[data-theme="light"] .value-icon h3 {
    color: #000000;
}


.value-card > p {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.value-details {
    list-style: none;
    padding: 0;
}

.value-details li {
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
}

.value-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: bold;
}

/* Approach Details Section */
.approach-details-section {
    background: var(--bg-secondary);
}

/* Stacking container for approach details */
.approach-details-stack {
    position: relative;
}

.approach-detail {
    position: relative;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

/* Stack each card - LATER cards have HIGHER z-index so they slide OVER earlier ones */
.approach-detail:nth-child(1) {
    z-index: 1;
}

.approach-detail:nth-child(2) {
    z-index: 2;
}

.approach-detail:nth-child(3) {
    z-index: 3;
}

.approach-detail:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-accent);
}

.approach-detail:last-child {
    margin-bottom: 0;
}

.approach-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    width: 100%;
    height: 48px;
    
}

.approach-detail-header .approach-icon {
    height: 48px;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}
.approach-detail-header .approach-icon svg {
    height: 48px;
    width: 48px;
    flex-shrink: 0;
}

.approach-detail-header .approach-icon h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-left: var(--space-sm);
}

.approach-detail-content .lead-text {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    line-height: 1.6;
    font-weight: 400;
}

.approach-detail-content p {
    font-weight: 400;
    line-height: 1.6;
}

.approach-detail-content h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--accent-primary);
    margin: var(--space-lg) 0 var(--space-sm);
    font-weight: 600;
}

.approach-detail-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-md);
}

.approach-detail-content ul li {
    padding-left: var(--space-md);
    position: relative;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
    font-size: 0.95rem;
    font-weight: 400;
}

.approach-detail-content ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.approach-detail-content ul li strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Industry Tags */
.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tag {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(254, 209, 107, 0.1);
    border: 1px solid rgba(254, 209, 107, 0.3);
    border-radius: var(--radius-full);
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Outcome Stats */
.outcome-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.stat-box {
    text-align: center;
    padding: var(--space-xl);
    background: rgba(254, 209, 107, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

[data-theme="light"] .stat-box{
    background: none;

}

.stat-box .stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    margin-bottom: var(--space-xs);
}

.stat-box .stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Deployment Options */
.deployment-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.option-card {
    padding: var(--space-lg);
    background: rgba(254, 209, 107, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition-base);
}

.option-card:hover {
    border-color: var(--accent-primary);
}

.option-card h5 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--accent-primary);
    margin-bottom: var(--space-xs);
}

.option-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Responsive Styles for About Page */
@media (max-width: 968px) {
    .ceo-journey-content {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .outcome-stats {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {

    .timeline-nav {
        width: 40px;
        height: 40px;
    }

    .timeline-slide-content {
        padding: var(--space-lg);
    }

    .timeline-counter {
        font-size: 1rem;
        top: 10px;
        right: 10px;
    }

    .deployment-options {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   SERVICES PAGE STYLES
   ================================================ */

/* Service Categories Section */
.service-categories-section {
    background: var(--bg-secondary);
}

/* Stacking container */
.service-categories-stack {
    position: relative;
}

.service-category {
    position: relative;
    padding: var(--space-3xl);
    margin-bottom: var(--space-2xl);
    transition: all var(--transition-base);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

/* Stack each card - LATER cards have HIGHER z-index so they slide OVER earlier ones */
.service-category:nth-child(1) {
    z-index: 1;
}

.service-category:nth-child(2) {
    z-index: 2;
}

.service-category:nth-child(3) {
    z-index: 3;
}

.service-category:nth-child(4) {
    z-index: 4;
}

.service-category:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-accent);
}

.service-category-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.service-category-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    color: var(--accent-primary);
}

.service-category-icon svg {
    width: 100%;
    height: 100%;
}

.service-category-header h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.service-category-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.service-category-content {
    position: relative;
}

.service-offerings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.service-offering-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(254, 209, 107, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(254, 209, 107, 0.1);
    transition: all var(--transition-base);
}

.service-offering-item:hover {
    background: rgba(254, 209, 107, 0.06);
    border-color: rgba(254, 209, 107, 0.2);
    transform: translateX(4px);
}

.offering-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
}

.service-offering-item h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.service-offering-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Technology Stack Section */
.tech-stack-section {
    background: var(--bg-primary);
    padding: var(--space-2xl) 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 100%;
    padding: 0 var(--space-xl);
}

.tech-stack-category {
    padding: var(--space-md);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tech-stack-category:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-accent);
}

.tech-stack-category h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
}

.tech-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(254, 209, 107, 0.08);
    border: 1px solid rgba(254, 209, 107, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition-base);
    cursor: default;
}

.tech-tag:hover {
    background: rgba(254, 209, 107, 0.15);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 209, 107, 0.2);
}

/* CTA Section */
.cta-section {
    background: rgba(100, 100, 100, 0.4);
    background: var(--bg-secondary);
    padding: var(--space-4xl) 0;
}

.cta-card {
    text-align: center;
    padding: var(--space-4xl) var(--space-3xl);
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.cta-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.cta-card p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Responsive Design for Services Page */
@media (max-width: 1024px) {
    .service-offerings-grid {
        grid-template-columns: 1fr;
    }

    .tech-stack-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .service-category {
        padding: var(--space-2xl);
    }

    .service-category-header {
        flex-direction: column;
        gap: var(--space-md);
    }

    .service-category-icon {
        width: 48px;
        height: 48px;
    }

    .service-category-header h3 {
        font-size: 1.5rem;
    }

    .service-offering-item {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .tech-stack-category {
        padding: var(--space-xl);
    }

    .cta-card {
        padding: var(--space-3xl) var(--space-xl);
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}


/* Smooth scroll offset for anchor links */
.service-category[id] {
    scroll-margin-top: 100px;
}

/* Highlight animation when navigating to a specific service */
.service-category:target {
    animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 209, 107, 0.4);
        border-color: var(--accent-primary);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(254, 209, 107, 0);
        border-color: var(--accent-primary);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(254, 209, 107, 0);
        border-color: var(--border-subtle);
    }
}


/* ================================================
   CONTACT PAGE STYLES
   ================================================ */

/* Why Connect Section */
.why-connect-section {
    background: var(--bg-primary);
    padding: var(--space-3xl) 0;
}

.why-connect-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.why-connect-card {
    padding: var(--space-md) var(--space-md);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.why-connect-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.why-connect-card:hover::before {
    transform: scaleX(1);
}

.why-connect-card:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-accent);
}

.why-connect-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-md);
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.why-connect-card:hover .why-connect-icon {
    transform: scale(1.1);
    background: rgba(254, 209, 107, 0.15);
}

.why-connect-icon svg {
    width: 36px;
    height: 36px;
}

.why-connect-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.why-connect-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
    min-height: 60px;
}

.why-connect-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-top: var(--space-xl);
    margin-top: var(--space-xl);
    border-top: 1px solid var(--border-subtle);
    min-height: 80px;
}

.stat-highlight {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
    margin: 0;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Contact Section */
.contact-section {
    background: var(--bg-secondary);
    padding: var(--space-4xl) 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
    max-width: 90%;
    margin: 0 auto;
}

.contact-info {
    position: sticky;
    top: 100px;
}

.contact-info h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    line-height: 1.2;
}

.contact-intro {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-2xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-detail-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(254, 209, 107, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(254, 209, 107, 0.1);
    transition: all var(--transition-base);
}

.contact-detail-item:hover {
    background: rgba(254, 209, 107, 0.06);
    border-color: rgba(254, 209, 107, 0.2);
    transform: translateX(4px);
}

.contact-detail-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(254, 209, 107, 0.15);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
}

.contact-detail-icon svg {
    width: 24px;
    height: 24px;
}

.contact-detail-item h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.contact-detail-item p,
.contact-detail-item a {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: color var(--transition-fast);
}

.contact-detail-item a:hover {
    color: var(--accent-primary);
}

/* Contact Form */
.contact-form-wrapper {
    padding: var(--space-xl) var(--space-md);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* border: 1px solid rgba(254, 209, 107, 0.1); */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    padding-top: calc(var(--space-md) + 10px);
    background: #f1f1f1;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all var(--transition-base);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23fed16b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-lg) center;
    background-color: #f1f1f1;
    padding-right: var(--space-3xl);
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    padding-top: calc(var(--space-md) + 10px);
}

.form-group label {
    position: absolute;
    left: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #000000;
    transition: all var(--transition-base);
    pointer-events: none;
    background: transparent;
    padding: 0 4px;
    font-weight: 400;
}

.form-group textarea ~ label {
    top: var(--space-lg);
    transform: translateY(0);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent-primary);
    /* background: rgba(28, 28, 28, 0.8); */
    box-shadow: 0 0 0 3px rgba(254, 209, 107, 0.08);
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group select:focus ~ label,
.form-group select:not([value=""]) ~ label {
    top: 8px;
    transform: translateY(0);
    left: var(--space-md);
    font-size: 0.7rem;
    color: var(--accent-primary);
    font-weight: 600;
    /* background: rgba(28, 28, 28, 0.9); */
    padding: 0 6px;
}

.form-group select {
    cursor: pointer;
}

/* ================================================
   CHATBOT STYLES (Contact Page Only)
   ================================================ */

/* Chatbot Container */
.chatbot-container {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 360px;
    max-height: 500px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-container.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* Chatbot Header */
.chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.chatbot-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(254, 209, 107, 0.3);
}

.chatbot-avatar svg {
    width: 22px;
    height: 22px;
}

.chatbot-header-info h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.chatbot-status {
    font-size: 0.75rem;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chatbot-status::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.chatbot-actions {
    display: flex;
    gap: var(--space-xs);
}

.chatbot-minimize,
.chatbot-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chatbot-minimize:hover,
.chatbot-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.chatbot-close:hover {
    color: #FF4444;
}

/* Chatbot Body */
.chatbot-body {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chatbot-body::-webkit-scrollbar {
    width: 5px;
}

.chatbot-body::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 85%;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-msg.bot {
    align-self: flex-start;
}

.chat-msg.user {
    align-self: flex-end;
}

.msg-content {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
}

.chat-msg.bot .msg-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-msg.user .msg-content {
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.msg-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 0 var(--space-xs);
}

.chat-msg.user .msg-time {
    text-align: right;
}

/* Chat Suggestions */
.chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.suggestion-chip {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.suggestion-chip:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateX(4px);
}

/* Chatbot Input */
.chatbot-input {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.chatbot-input input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.chatbot-input input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(254, 209, 107, 0.1);
}

.chatbot-input input::placeholder {
    color: var(--text-muted);
}

.chatbot-input button {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.chatbot-input button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(254, 209, 107, 0.4);
}

/* Chatbot Toggle Button */
.chatbot-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(254, 209, 107, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all var(--transition-base);
}

.chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(254, 209, 107, 0.5);
}

.chatbot-toggle.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    pointer-events: none;
}

.chatbot-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: #FF4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    border: 3px solid var(--bg-primary);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Responsive Design for Contact Page */
@media (max-width: 1024px) {
    .why-connect-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .chatbot-container {
        width: 340px;
        right: 20px;
        bottom: 90px;
    }

    .chatbot-toggle {
        right: 20px;
        bottom: 20px;
    }
}

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

    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .contact-form-wrapper {
        padding: var(--space-2xl);
    }

    .contact-form {
        gap: var(--space-lg);
    }

    .contact-info {
        position: relative;
        top: 0;
    }

    .chatbot-container {
        width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        bottom: 80px;
    }

    .chatbot-toggle {
        width: 56px;
        height: 56px;
    }
}


/* ================================================
   PROJECTS PAGE
   ================================================ */

/* Projects Hero */
.projects-hero {
    padding: 180px 0 80px;
    background: var(--gradient-bg);
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 60vh;
}

.projects-hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.projects-hero .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.projects-hero .hero-orbs {
    position: absolute;
    inset: 0;
}

.projects-hero .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: float 8s ease-in-out infinite;
}

.projects-hero .orb-1 {
    width: 400px;
    height: 400px;
    background: rgba(0, 245, 212, 0.08);
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.projects-hero .orb-2 {
    width: 350px;
    height: 350px;
    background: rgba(123, 97, 255, 0.08);
    top: 40%;
    right: 10%;
    animation-delay: -3s;
}

.projects-hero .orb-3 {
    width: 300px;
    height: 300px;
    background: rgba(0, 180, 216, 0.06);
    bottom: 10%;
    left: 40%;
    animation-delay: -5s;
}

.projects-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.projects-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

.projects-hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Filter Section - Floating Card */
.projects-filter-section {
    padding: 0;
    background: transparent;
    position: sticky;
    top: 70px;
    z-index: 100;
    margin-top: -40px;
}

.filter-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Dropdown Filters */
.filter-dropdowns {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-dropdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.filter-dropdown-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-primary);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23fed16b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.filter-select:hover {
    border-color: var(--accent-primary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(254, 209, 107, 0.1);
}

.filter-select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 10px;
    font-size: 0.9rem;
}

/* Clear Filters Button */
.clear-filters-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    height: 38px;
}

.clear-filters-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.05);
}

.clear-filters-btn svg {
    width: 16px;
    height: 16px;
}

/* Projects Grid */
.projects-grid-section {
    padding: var(--space-4xl) 0;
    background: var(--bg-primary);
    position: relative;
    z-index: 1;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

/* Project Card */
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    opacity: 1;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

/* Project Image */
.project-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-tertiary);
    position: relative;
}

.project-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image-placeholder svg {
    width: 100%;
    height: 100%;
}

/* Project Content */
.project-content {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.project-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.project-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Project Tags */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}

.project-tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.1);
    border: 1px solid rgba(254, 209, 107, 0.2);
}

/* Project Button */
.project-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: transparent;
    border: 1px solid var(--accent-primary);
    transition: all var(--transition-base);
    text-decoration: none;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.project-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    z-index: 0;
    transition: left 0.6s ease-out;
}

.project-btn:hover::before {
    left: 0;
}

.project-btn span,
.project-btn svg {
    position: relative;
    z-index: 1;
    transition: color var(--transition-fast);
}

.project-btn:hover {
    box-shadow: 0 12px 40px rgba(254, 209, 107, 0.3);
    color: var(--bg-primary);
}

.project-btn svg {
    transition: transform var(--transition-fast);
}

.project-btn:hover svg {
    transform: translateX(4px);
}

/* No Results */
.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
    color: var(--text-secondary);
}

.no-results svg {
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.no-results h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

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

/* Responsive - Projects Page */
@media (max-width: 768px) {
    .projects-hero {
        padding: 140px 0 60px;
    }

    .projects-hero-title {
        font-size: 2rem;
    }

    .projects-filter-section {
        padding: 40px 0 30px;
    }

    .filter-wrapper {
        padding: 20px;
    }

    .filter-dropdowns {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }

    .filter-dropdown {
        min-width: 100%;
    }

    .clear-filters-btn {
        width: 100%;
        justify-content: center;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .project-content {
        padding: var(--space-lg);
    }

    .project-title {
        font-size: 1.1rem;
    }
}

@media (min-width: 1600px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}


/* ================================================
   CASE STUDY PAGE STYLES
   ================================================ */

/* Case Study Sections with Alternating Backgrounds */
.case-study-overview {
    /* First section after hero - transparent (shows grid background) */
}

.case-study-problem {
    background: var(--bg-secondary); /* Black background - second section */
}

.case-study-solution {
    /* Transparent - third section */
}

.case-study-results {
    background: var(--bg-secondary); /* Black background - fourth section */
}

.case-study-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.case-study-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: var(--space-md);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.case-study-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
}

/* Case Study Hero */
.case-study-hero .hero-content {
    max-width: 1200px;
}

.breadcrumb {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.breadcrumb a {
    color: var(--accent-primary);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--accent-secondary);
}

.breadcrumb-separator {
    margin: 0 var(--space-sm);
    color: var(--text-muted);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
}

.metric-card {
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.metric-card:hover {
    box-shadow: var(--shadow-glow);
}

.metric-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.metric-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Quick Summary */
.case-study-summary {
    background: var(--bg-secondary);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    padding: var(--space-2xl);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-top: var(--space-3xl);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.summary-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
}

.summary-value {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.summary-value.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.tech-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(254, 209, 107, 0.1);
    border: 1px solid rgba(254, 209, 107, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--accent-primary);
}

/* Problem Section */
.case-study-problem {
    background: var(--gradient-bg);
}

.problem-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.problem-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.pain-points {
    list-style: none;
    padding: 0;
}

.pain-points li {
    position: relative;
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.7;
}

.pain-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.2rem;
}

.problem-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-height: 300px;
}

.problem-visual svg {
    width: 100%;
    max-width: 200px;
    height: auto;
    opacity: 0.6;
}

/* Solution Section */
.case-study-solution {
}

.solution-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.solution-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.solution-approach {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.solution-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.highlight-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.highlight-item:hover {
    border-color: var(--border-accent);
    transform: translateX(8px);
}

.highlight-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.highlight-content h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.highlight-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.solution-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-height: 400px;
}

.solution-visual svg {
    width: 100%;
    max-width: 200px;
    height: auto;
    color: var(--accent-primary);
}

.solution-steps {
    position: relative;
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-3xl);
}

.solution-steps::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-primary);
    transform: translateX(-50%);
}

.solution-step {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
    align-items: center;
}

.solution-step:nth-child(even) .step-content:first-child {
    order: 3;
}

.step-content {
    padding: var(--space-xl);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.step-content:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.step-content h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--accent-primary);
}

.step-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.step-duration {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bg-primary);
    z-index: 2;
    position: relative;
    box-shadow: 0 0 20px rgba(254, 209, 107, 0.4);
}

.tech-stack h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.tech-tag {
    padding: 12px 24px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.tech-tag:hover {
    border-color: var(--accent-primary);
    background: rgba(254, 209, 107, 0.1);
}

/* Results Section */
.case-study-results {
    background: var(--bg-secondary);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.result-card {
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
}

.result-card:hover {
    box-shadow: var(--shadow-glow);
}

.result-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.result-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.result-before {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 107, 107, 0.8);
}

.result-arrow {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.result-after {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.result-improvement {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.results-impact {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Technical Details Section */
.case-study-technical {
    background: var(--bg-secondary);
}

.architecture-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-3xl);
    padding: var(--space-2xl);
    background: var(--bg-glass);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.feature-card {
    padding: var(--space-xl);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.feature-card h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--accent-primary);
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* CTA Section */
.case-study-cta {
    background: linear-gradient(135deg, rgba(254, 209, 107, 0.1) 0%, rgba(230, 188, 92, 0.05) 100%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

/* ================================================
   SCQA FRAMEWORK SECTION
   ================================================ */
.scqa-section {
    background: var(--bg-primary);
    padding: var(--space-4xl) 0;
}

.scqa-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: var(--space-3xl) 0;
    position: relative;
}

.scqa-card {
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s var(--ease-out-expo);
}

.scqa-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.scqa-card[data-step="1"].visible { transition-delay: 0.1s; }
.scqa-card[data-step="2"].visible { transition-delay: 0.2s; }
.scqa-card[data-step="3"].visible { transition-delay: 0.3s; }
.scqa-card[data-step="4"].visible { transition-delay: 0.4s; }

.scqa-arrow-shape {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    padding: var(--space-2xl) var(--space-xl);
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: all var(--transition-base);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%, 30px 50%);
}

.scqa-card:first-child .scqa-arrow-shape {
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.scqa-card:last-child .scqa-arrow-shape {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30px 50%);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Color gradients for each step */
.scqa-card[data-step="1"] .scqa-arrow-shape {
    background: rgba(173, 216, 230, 0.3);
    border-color: rgba(173, 216, 230, 0.5);
}

.scqa-card[data-step="2"] .scqa-arrow-shape {
    background: rgba(176, 196, 222, 0.3);
    border-color: rgba(176, 196, 222, 0.5);
}

.scqa-card[data-step="3"] .scqa-arrow-shape {
    background: rgba(216, 191, 216, 0.3);
    border-color: rgba(216, 191, 216, 0.5);
}

.scqa-card[data-step="4"] .scqa-arrow-shape {
    background: rgba(221, 160, 221, 0.3);
    border-color: rgba(221, 160, 221, 0.5);
}

.scqa-arrow-shape:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.scqa-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: all var(--transition-base);
}

.scqa-card[data-step="1"] .scqa-icon {
    background: rgba(135, 206, 235, 0.4);
    color: #5BC0EB;
}

.scqa-card[data-step="2"] .scqa-icon {
    background: rgba(100, 149, 237, 0.4);
    color: #4285F4;
}

.scqa-card[data-step="3"] .scqa-icon {
    background: rgba(147, 112, 219, 0.4);
    color: #7B61FF;
}

.scqa-card[data-step="4"] .scqa-icon {
    background: rgba(186, 85, 211, 0.4);
    color: #9C27B0;
}

.scqa-arrow-shape:hover .scqa-icon {
    transform: scale(1.05);
}

.scqa-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.scqa-points {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.scqa-points li {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-left: var(--space-md);
    position: relative;
}

.scqa-points li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.scqa-card[data-step="1"] .scqa-points li::before { color: #5BC0EB; }
.scqa-card[data-step="2"] .scqa-points li::before { color: #4285F4; }
.scqa-card[data-step="3"] .scqa-points li::before { color: #7B61FF; }
.scqa-card[data-step="4"] .scqa-points li::before { color: #9C27B0; }

/* Key Highlights */
.scqa-highlights {
    background: rgba(100, 100, 100, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-top: var(--space-3xl);
}

.scqa-highlights h5 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--accent-primary);
}

.scqa-highlights p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Light Theme Adjustments */
[data-theme="light"] .scqa-card[data-step="1"] .scqa-arrow-shape {
    background: linear-gradient(135deg, rgba(91, 192, 235, 0.25) 0%, rgba(91, 192, 235, 0.1) 100%);
}

[data-theme="light"] .scqa-card[data-step="2"] .scqa-arrow-shape {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.25) 0%, rgba(66, 133, 244, 0.1) 100%);
}

[data-theme="light"] .scqa-card[data-step="3"] .scqa-arrow-shape {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.25) 0%, rgba(123, 97, 255, 0.1) 100%);
}

[data-theme="light"] .scqa-card[data-step="4"] .scqa-arrow-shape {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.25) 0%, rgba(156, 39, 176, 0.1) 100%);
}

[data-theme="light"] .scqa-highlights {
    background: rgba(200, 200, 200, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .scqa-flow {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .scqa-arrow-shape {
        clip-path: none;
        border-radius: var(--radius-lg);
    }
    
    .scqa-card:first-child .scqa-arrow-shape,
    .scqa-card:last-child .scqa-arrow-shape {
        clip-path: none;
    }
}

@media (max-width: 768px) {
    .scqa-flow {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .scqa-arrow-shape {
        min-height: auto;
        padding: var(--space-xl) var(--space-lg);
    }
    
    .scqa-highlights {
        padding: var(--space-xl);
    }
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.cta-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .problem-content {
        grid-template-columns: 1fr;
    }
    
    .solution-content {
        grid-template-columns: 1fr;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
    
    .solution-steps::before {
        left: 28px;
    }
    
    .solution-step {
        grid-template-columns: auto 1fr;
    }
    
    .solution-step:nth-child(even) .step-content:first-child {
        order: initial;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .case-study-item .container {
        padding: var(--space-xl);
    }
    
    .hero-metrics {
        grid-template-columns: 1fr;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .metric-value {
        font-size: 2.5rem;
    }
    
    .solution-steps::before {
        left: 20px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}



/* ================================================
   CHATBOT STYLES
   ================================================ */

/* Chatbot Minimized Button */
.chatbot-minimized {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    z-index: 9998;
}

/* Blinking pulse ring animation - like timeline dots */
.chatbot-pulse-ring {
    position: absolute;
    inset: -8px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    animation: chatbot-pulse-ring 2s ease-out infinite;
    z-index: -1;
}

@keyframes chatbot-pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

[data-theme="light"] .chatbot-pulse-ring {
    border-color: #000000;
}

.chatbot-minimized:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

.chatbot-minimized svg {
    color: var(--bg-primary);
}

.chatbot-minimized.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

[data-theme="light"] .chatbot-minimized {
    background: #000000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .chatbot-minimized svg {
    color: #ffffff;
}

/* Chatbot Expanded Window */
.chatbot-expanded {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 450px;
    height: 600px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
    transition: all var(--transition-base);
    z-index: 9999;
    backdrop-filter: blur(20px);
}

.chatbot-expanded.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

[data-theme="light"] .chatbot-expanded {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Chatbot Header */
.chatbot-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

[data-theme="light"] .chatbot-header {
    background: #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.chatbot-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.chatbot-avatar {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-avatar svg {
    color: var(--bg-primary);
}

[data-theme="light"] .chatbot-avatar {
    background: #000000;
}

[data-theme="light"] .chatbot-avatar svg {
    color: #ffffff;
}

.chatbot-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chatbot-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.chatbot-minimize-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-minimize-btn:hover {
    background: var(--bg-glass);
    color: var(--text-primary);
}

/* Chatbot Messages Area */
.chatbot-messages {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: var(--radius-full);
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-accent);
}

/* Chatbot Message */
.chatbot-message {
    display: flex;
    gap: var(--space-sm);
    animation: messageSlideIn 0.3s var(--ease-out-expo);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-message.user {
    flex-direction: row-reverse;
}

.chatbot-message-avatar {
    width: 32px;
    height: 32px;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chatbot-message-avatar svg {
    color: var(--bg-primary);
}

[data-theme="light"] .chatbot-message-avatar {
    background: #000000;
}

[data-theme="light"] .chatbot-message-avatar svg {
    color: #ffffff;
}

.chatbot-message-content {
    background: var(--bg-tertiary);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 85%;
}

.chatbot-message-content a {
    color: var(--accent-primary);
    text-decoration: underline;
}

.chatbot-message-content ul,
.chatbot-message-content ol {
    margin: 6px 0;
    padding-left: 18px;
}

.chatbot-message-content li {
    margin: 3px 0;
}

.chatbot-message-content p {
    margin: 6px 0;
}

.chatbot-message-content p:first-child {
    margin-top: 0;
}

.chatbot-message-content p:last-child {
    margin-bottom: 0;
}

.chatbot-message-content strong {
    font-weight: 500;
    color: var(--text-primary);
}

/* Typing Indicator */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-6px);
    }
}

[data-theme="light"] .typing-dots span {
    background: #666;
}

[data-theme="light"] .chatbot-message-content a {
    color: #000000;
}

.chatbot-message.user .chatbot-message-content {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

[data-theme="light"] .chatbot-message.user .chatbot-message-content {
    background: #000000;
    color: #ffffff;
}

[data-theme="light"] .chatbot-message.bot .chatbot-message-content {
    background: #f0f0f0;
    color: var(--text-primary);
}

/* Quick Questions */
/* Quick Questions - Subtle hints style */
.chatbot-quick-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    animation: messageSlideIn 0.5s var(--ease-out-expo);
}

.quick-questions-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}

.chatbot-quick-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
    transition: all var(--transition-fast);
    opacity: 0.6;
}

.chatbot-quick-btn:hover {
    opacity: 1;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
    transform: translateX(2px);
}

[data-theme="light"] .chatbot-quick-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #666666;
}

[data-theme="light"] .chatbot-quick-btn:hover {
    background: #f8f8f8;
    color: #000000;
    border-color: rgba(0, 0, 0, 0.15);
}

/* Chatbot Input Area */
.chatbot-input-area {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

[data-theme="light"] .chatbot-input-area {
    background: #f8f8f8;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.chatbot-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    outline: none;
    transition: all var(--transition-fast);
}

.chatbot-input:focus {
    border-color: var(--accent-primary);
}

[data-theme="light"] .chatbot-input {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .chatbot-input:focus {
    border-color: #000000;
}

.chatbot-send-btn {
    background: var(--accent-primary);
    border: none;
    color: var(--bg-primary);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.chatbot-send-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-glow);
}

[data-theme="light"] .chatbot-send-btn {
    background: #000000;
    color: #ffffff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chatbot-expanded {
        width: calc(100vw - 32px);
        height: calc(100vh - 100px);
        right: 16px;
        bottom: 16px;
    }

    .chatbot-minimized {
        bottom: 16px;
        right: 16px;
        width: 56px;
        height: 56px;
    }
}


/* ================================================
   SCQA DETAILED SECTIONS - COMPACT DESIGN
   ================================================ */

/* Common Detail Section Styles */
.scqa-detail-section {
    padding: var(--space-4xl) 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.scqa-detail-section:nth-child(even) {
    background: var(--bg-secondary);
}

/* Section Header */
.scqa-detail-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-3xl);
}

.scqa-detail-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: rgba(21, 194, 177, 0.1);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-full);
    border: 1px solid rgba(21, 194, 177, 0.3);
    margin-bottom: var(--space-lg);
}

.scqa-detail-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.scqa-detail-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* Compact Grid */
.scqa-compact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: 1100px;
    margin: 0 auto;
}

.scqa-questions-grid {
    grid-template-columns: repeat(3, 1fr);
}

.scqa-compact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
    opacity: 0;
    transform: translateY(20px);
}

.scqa-compact-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.scqa-compact-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Icons and Numbers */
.scqa-compact-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-lg);
    display: block;
}

.scqa-compact-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--space-lg);
    opacity: 0.3;
}

.scqa-compact-card h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.scqa-compact-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Light Theme */
[data-theme="light"] .scqa-detail-tag {
    background: transparent;
    border-color: #cccccc;
    color: #000000;
}

[data-theme="light"] .scqa-compact-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .scqa-compact-card:hover {
    border-color: #cccccc;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .scqa-compact-number {
    color: #000000;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .scqa-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scqa-questions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scqa-detail-section {
        min-height: auto;
        padding: var(--space-3xl) 0;
    }
}

@media (max-width: 768px) {
    .scqa-compact-grid,
    .scqa-questions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .scqa-compact-card {
        padding: var(--space-xl);
    }
    
    .scqa-detail-title {
        font-size: 1.8rem;
    }
    
    .scqa-detail-intro {
        font-size: 1rem;
    }
}


/* ================================================
   DETAIL SECTIONS (SITUATION, COMPLICATION, QUESTION, ANSWER)
   ================================================ */

.detail-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Section-specific backgrounds with gradients */
.situation-detail-section {
    background: linear-gradient(135deg, rgba(91, 192, 235, 0.03) 0%, var(--bg-primary) 100%);
}

.complication-detail-section {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.03) 0%, var(--bg-secondary) 100%);
}

.question-detail-section {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.03) 0%, var(--bg-primary) 100%);
}

.answer-detail-section {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, var(--bg-secondary) 100%);
}

.detail-section .container {
    max-width: 1200px;
    padding: 0 40px;
}

/* Section Header */
.detail-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.detail-section-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.detail-section-tag:hover::before {
    left: 100%;
}

/* Tag colors for each section */
.situation-detail-section .detail-section-tag {
    color: #5BC0EB;
    background: rgba(91, 192, 235, 0.1);
    border: 1px solid rgba(91, 192, 235, 0.3);
}

.complication-detail-section .detail-section-tag {
    color: #F44336;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.question-detail-section .detail-section-tag {
    color: #7B61FF;
    background: rgba(123, 97, 255, 0.1);
    border: 1px solid rgba(123, 97, 255, 0.3);
}

.answer-detail-section .detail-section-tag {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.detail-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.detail-section-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* Cards Grid */
.detail-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.detail-cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    text-align: center;
    transition: all var(--transition-base);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    position: relative;
    overflow: hidden;
}

.detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.detail-card:hover::before {
    transform: translateX(100%);
}

.detail-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: cardSlideIn 0.6s ease-out forwards;
}

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.detail-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Section-specific card hover effects */
.situation-detail-section .detail-card:hover {
    border-color: rgba(91, 192, 235, 0.5);
    box-shadow: 0 12px 40px rgba(91, 192, 235, 0.15);
}

.complication-detail-section .detail-card:hover {
    border-color: rgba(244, 67, 54, 0.5);
    box-shadow: 0 12px 40px rgba(244, 67, 54, 0.15);
}

.question-detail-section .detail-card:hover {
    border-color: rgba(123, 97, 255, 0.5);
    box-shadow: 0 12px 40px rgba(123, 97, 255, 0.15);
}

.answer-detail-section .detail-card:hover {
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 12px 40px rgba(76, 175, 80, 0.15);
}

/* Card Icons and Numbers */
.detail-card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
    transition: all var(--transition-base);
    filter: grayscale(0.3);
}

.detail-card:hover .detail-card-icon {
    transform: scale(1.15) rotate(5deg);
    filter: grayscale(0);
}

.detail-card-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    opacity: 0.2;
    transition: all var(--transition-base);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.detail-card:hover .detail-card-number {
    opacity: 0.4;
    transform: scale(1.1);
}

.detail-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-primary);
    transition: color var(--transition-base);
}

.detail-card:hover h4 {
    color: var(--accent-primary);
}

.detail-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Light Theme */
[data-theme="light"] .situation-detail-section {
    background: linear-gradient(135deg, rgba(91, 192, 235, 0.05) 0%, var(--bg-primary) 100%);
}

[data-theme="light"] .complication-detail-section {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, var(--bg-secondary) 100%);
}

[data-theme="light"] .question-detail-section {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.05) 0%, var(--bg-primary) 100%);
}

[data-theme="light"] .answer-detail-section {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, var(--bg-secondary) 100%);
}

[data-theme="light"] .detail-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .detail-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .detail-section {
        min-height: auto;
        padding: 60px 0;
    }
    
    .detail-section .container {
        padding: 0 30px;
    }
    
    .detail-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .detail-cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detail-section-header {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .detail-section {
        padding: 50px 0;
    }
    
    .detail-section .container {
        padding: 0 20px;
    }
    
    .detail-cards-grid,
    .detail-cards-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detail-card {
        padding: 30px 25px;
    }
    
    .detail-section-header {
        margin-bottom: 40px;
    }
    
    .detail-section-title {
        font-size: 1.8rem;
    }
    
    .detail-section-intro {
        font-size: 1rem;
    }
    
    .detail-card-icon {
        font-size: 2.5rem;
    }
    
    .detail-card-number {
        font-size: 2rem;
    }
}


/* ================================================
   HERO WITH BREADCRUMB - CENTERED WITH MAX WIDTH
   ================================================ */

/* For pages with breadcrumbs, limit hero title width */
.hero:has(.breadcrumb) .hero-title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero:has(.breadcrumb) .hero-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* ================================================
   REMOVE BORDER RADIUS FROM ALL BUTTONS (EXCEPT NAV-CTA & THEME-TOGGLE)
   ================================================ */

/* Remove border-radius from all buttons except nav-cta and theme-toggle */
.btn:not(.nav-cta),
.btn-primary:not(.nav-cta),
.btn-ghost:not(.nav-cta),
.btn-secondary,
button:not(.nav-cta):not(.theme-toggle):not(.mobile-menu-btn),
.hero-cta,
.cta-button,
.product-cta,
.service-cta,
.project-cta,
.contact-cta,
.team-cta,
.case-study-cta,
.submit-btn,
.form-button,
.action-button,
.meet-team-cta,
.carousel-btn,
.timeline-btn,
.story-cta,
.urban-btn,
.urban-btn-primary,
.urban-btn-secondary,
input[type="submit"],
input[type="button"] {
    border-radius: 0 !important;
}


/* ================================================
   AGGRESSIVE BORDER RADIUS REMOVAL FOR ALL BUTTONS
   ================================================ */

/* More aggressive - target all button-like elements */
a.btn,
a.btn-primary,
a.btn-ghost,
a.cta,
a[class*="btn"],
a[class*="cta"],
button[class*="btn"],
button[class*="cta"],
.project-card .btn,
.service-card .btn,
.product-card .btn,
.case-study-card .btn {
    border-radius: 0 !important;
}

/* ================================================
   LIGHT THEME - REMOVE ALL YELLOW BACKGROUNDS
   ================================================ */

[data-theme="light"] .section-tag,
[data-theme="light"] .hero-badge,
[data-theme="light"] .tech-badge,
[data-theme="light"] .story-tag,
[data-theme="light"] .timeline-badge,
[data-theme="light"] .badge,
[data-theme="light"] .tag,
[data-theme="light"] .label,
[data-theme="light"] .chip,
[data-theme="light"] .pill,
[data-theme="light"] [class*="badge"],
[data-theme="light"] [class*="tag"],
[data-theme="light"] [class*="label"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure borders are visible when background is removed */
[data-theme="light"] .section-tag,
[data-theme="light"] .hero-badge,
[data-theme="light"] .tech-badge,
[data-theme="light"] .story-tag {
    border: 1px solid #000000 !important;
}


/* ================================================
   LIGHT THEME - COMPREHENSIVE BACKGROUND REMOVAL
   ================================================ */

/* Remove all yellow/gold/accent colored backgrounds in light theme */
[data-theme="light"] .service-card,
[data-theme="light"] .service-icon,
[data-theme="light"] .feature-card,
[data-theme="light"] .feature-icon,
[data-theme="light"] .benefit-card,
[data-theme="light"] .benefit-icon,
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-icon,
[data-theme="light"] .process-card,
[data-theme="light"] .process-icon,
[data-theme="light"] .timeline-card,
[data-theme="light"] .timeline-icon,
[data-theme="light"] .step-card,
[data-theme="light"] .step-icon,
[data-theme="light"] .icon-wrapper,
[data-theme="light"] .icon-container,
[data-theme="light"] .icon-box,
[data-theme="light"] [class*="icon"],
[data-theme="light"] [class*="-icon"],
[data-theme="light"] .contact-icon,
[data-theme="light"] .social-icon,
[data-theme="light"] .category-icon {
    /* background: transparent !important;
    background-color: transparent !important; */
}

/* Add borders to icons so they're still visible */
[data-theme="light"] .service-icon,
[data-theme="light"] .feature-icon,
[data-theme="light"] .benefit-icon,
[data-theme="light"] .stat-icon,
[data-theme="light"] .process-icon,
[data-theme="light"] .timeline-icon,
[data-theme="light"] .step-icon,
[data-theme="light"] .icon-wrapper,
[data-theme="light"] .icon-container,
[data-theme="light"] .contact-icon {
    /* border: 1px solid #cccccc !important; */
}


/* ================================================
   LIGHT THEME - REMOVE ALL YELLOW/GOLD STYLING
   ================================================ */

/* Remove all rgba yellow/gold backgrounds */
[data-theme="light"] * {
    /* Override any rgba yellow backgrounds */
}

[data-theme="light"] *[style*="rgba(254"],
[data-theme="light"] *[style*="rgba(230"],
[data-theme="light"] *[style*="rgba(255, 209"],
[data-theme="light"] *[style*="rgba(212"] {
    /* background: transparent !important; */
}

/* Remove yellow borders in light theme */
[data-theme="light"] .project-card,
[data-theme="light"] .case-study-card,
[data-theme="light"] .service-card,
[data-theme="light"] .feature-card {
    /* border-color: #dddddd !important; */
}

/* Remove yellow shadows on hover */
[data-theme="light"] .btn:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .case-study-card:hover,
[data-theme="light"] .project-card:hover,
[data-theme="light"] button:hover,
[data-theme="light"] a:hover {
    /* box-shadow: none !important; */
}

/* Remove section header highlights - make them simple */
[data-theme="light"] .section-title,
[data-theme="light"] .section-header h2,
[data-theme="light"] .section-header h3,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    /* background: none !important;
    background-color: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important; */
}

/* Remove highlight spans in headings */
[data-theme="light"] .section-title span,
[data-theme="light"] .section-header span,
[data-theme="light"] h2 span,
[data-theme="light"] h3 span {
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Specific fixes for service offerings, timeline, etc. */
[data-theme="light"] .service-category-title,
[data-theme="light"] .timeline-title,
[data-theme="light"] .section-heading,
[data-theme="light"] .category-title {
    background: none !important;
    color: #000000 !important;
}


/* ================================================
   LIGHT THEME - REMOVE GRADIENT TEXT HIGHLIGHTS
   ================================================ */

/* Remove all gradient-text highlights in light theme */
[data-theme="light"] .gradient-text {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #444444 !important;
    color: 444444 !important;
    text-fill-color: #444444 !important;
}

/* Remove stat highlights */
[data-theme="light"] .stat-highlight,
[data-theme="light"] .scqa-highlights {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
}

/* ================================================
   LIGHT THEME - COMPREHENSIVE FIXES FOR ALL ISSUES
   ================================================ */

/* IMPORTANT: Product page (Urban AI) uses separate CSS file (urban-ai-product.css)
   and should NOT be affected by these overrides. Product page keeps teal colors. */
/* All rules below use :not(.urban-ai-page) to exclude product page */

/* 1. Remove ALL yellow/gold backgrounds from cards, icons, badges, tags */
/* NOTE: .highlight-icon and .coming-soon-icon removed - they are product page elements that should keep teal */
:not(.urban-ai-page) [data-theme="light"] .service-offering-item,
:not(.urban-ai-page) [data-theme="light"] .service-offering-item:hover,
:not(.urban-ai-page) [data-theme="light"] .tech-tag,
:not(.urban-ai-page) [data-theme="light"] .tech-tag:hover,
:not(.urban-ai-page) [data-theme="light"] .project-tag,
:not(.urban-ai-page) [data-theme="light"] .project-tag:hover,
:not(.urban-ai-page) [data-theme="light"] .option-card,
:not(.urban-ai-page) [data-theme="light"] .option-card:hover,
:not(.urban-ai-page) [data-theme="light"] .why-connect-icon,
:not(.urban-ai-page) [data-theme="light"] .why-connect-card:hover .why-connect-icon,
:not(.urban-ai-page) [data-theme="light"] .contact-detail-item,
:not(.urban-ai-page) [data-theme="light"] .contact-detail-item:hover,
:not(.urban-ai-page) [data-theme="light"] .contact-detail-icon,
:not(.urban-ai-page) [data-theme="light"] .chat-header,
:not(.urban-ai-page) [data-theme="light"] .suggestion-chip,
:not(.urban-ai-page) [data-theme="light"] .suggestion-chip:hover,
:not(.urban-ai-page) [data-theme="light"] .timeline-badge,
:not(.urban-ai-page) [data-theme="light"] .case-study-cta,
:not(.urban-ai-page) [data-theme="light"] .category-badge,
:not(.urban-ai-page) [data-theme="light"] .value-icon,
:not(.urban-ai-page) [data-theme="light"] .approach-icon {
    background: transparent !important;
    background-color: transparent !important;
}

/* NOTE: .highlight-icon and .coming-soon-icon removed from above - they are product page elements that should keep teal */

/* 2. Change yellow borders to grey */
:not(.urban-ai-page) [data-theme="light"] .service-offering-item,
:not(.urban-ai-page) [data-theme="light"] .tech-tag,
:not(.urban-ai-page) [data-theme="light"] .project-tag,
:not(.urban-ai-page) [data-theme="light"] .contact-detail-item,
:not(.urban-ai-page) [data-theme="light"] .option-card,
:not(.urban-ai-page) [data-theme="light"] .project-card,
:not(.urban-ai-page) [data-theme="light"] .project-card:hover {
    border-color: #dddddd !important;
}

/* 3. Remove ALL yellow shadows on hover */
:not(.urban-ai-page) [data-theme="light"] .project-btn:hover,
:not(.urban-ai-page) [data-theme="light"] .case-study-btn:hover,
:not(.urban-ai-page) [data-theme="light"] .btn:hover,
:not(.urban-ai-page) [data-theme="light"] .btn-primary:hover,
:not(.urban-ai-page) [data-theme="light"] .project-card:hover,
:not(.urban-ai-page) [data-theme="light"] .case-study-card:hover,
:not(.urban-ai-page) [data-theme="light"] .service-card:hover,
:not(.urban-ai-page) [data-theme="light"] .service-offering-item:hover,
:not(.urban-ai-page) [data-theme="light"] .contact-detail-item:hover,
:not(.urban-ai-page) [data-theme="light"] .tech-tag:hover,
:not(.urban-ai-page) [data-theme="light"] button:hover,
:not(.urban-ai-page) [data-theme="light"] a.btn:hover,
:not(.urban-ai-page) [data-theme="light"] a[class*="btn"]:hover {
    box-shadow: none !important;
}

/* 4. Remove border-radius from ALL buttons except nav-cta and theme-toggle */
:not(.urban-ai-page) [data-theme="light"] .btn,
:not(.urban-ai-page) [data-theme="light"] .btn-primary,
:not(.urban-ai-page) [data-theme="light"] .btn-ghost,
:not(.urban-ai-page) [data-theme="light"] .hero-cta,
:not(.urban-ai-page) [data-theme="light"] .cta-button,
:not(.urban-ai-page) [data-theme="light"] .project-btn,
:not(.urban-ai-page) [data-theme="light"] .case-study-btn,
:not(.urban-ai-page) [data-theme="light"] .service-btn,
:not(.urban-ai-page) [data-theme="light"] .contact-btn,
:not(.urban-ai-page) [data-theme="light"] a.btn,
:not(.urban-ai-page) [data-theme="light"] a.btn-primary,
:not(.urban-ai-page) [data-theme="light"] a.btn-ghost,
:not(.urban-ai-page) [data-theme="light"] button.btn,
:not(.urban-ai-page) [data-theme="light"] button.btn-primary,
:not(.urban-ai-page) [data-theme="light"] .project-card .btn,
:not(.urban-ai-page) [data-theme="light"] .service-card .btn,
:not(.urban-ai-page) [data-theme="light"] .case-study-card .btn {
    border-radius: 0 !important;
}

/* Keep rounded for nav-cta and theme-toggle */
:not(.urban-ai-page) [data-theme="light"] .nav-cta,
:not(.urban-ai-page) [data-theme="light"] .theme-toggle,
:not(.urban-ai-page) [data-theme="light"] .theme-toggle-track,
:not(.urban-ai-page) [data-theme="light"] .theme-toggle-thumb,
:not(.urban-ai-page) [data-theme="light"] .mobile-menu-btn {
    border-radius: var(--radius-full) !important;
}

/* 5. Remove gradient-text highlights completely */
[data-theme="light"] .gradient-text::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* 6. Make section headers simple - no highlights */
[data-theme="light"] .section-title .gradient-text,
[data-theme="light"] h2 .gradient-text,
[data-theme="light"] h3 .gradient-text {
    display: inline !important;
    position: static !important;
    background: none !important;
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
}

/* 7. Override any inline yellow backgrounds */
[data-theme="light"] [style*="background: rgba(254"],
[data-theme="light"] [style*="background-color: rgba(254"],
[data-theme="light"] [style*="background: rgba(230"],
[data-theme="light"] [style*="background-color: rgba(230"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ================================================
   LIGHT THEME - OVERRIDE ALL CARD HOVER STATES
   ================================================ */

/* Remove ALL colored borders and shadows on hover for ALL cards */
/* NOTE: .highlight-item and .feature-card removed - they are product page elements */
[data-theme="light"] .approach-card:hover,
[data-theme="light"] .value-card:hover,
[data-theme="light"] .approach-detail:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .service-card:hover .service-card-inner,
[data-theme="light"] .story-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .map-container:hover,
[data-theme="light"] .service-category:hover,
[data-theme="light"] .tech-stack-category:hover,
[data-theme="light"] .why-connect-card:hover,
[data-theme="light"] .project-card:hover,
[data-theme="light"] .metric-card:hover,
[data-theme="light"] .step-content:hover,
[data-theme="light"] .result-card:hover,
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .cta-card:hover,
[data-theme="light"] .contact-card:hover {
    border-color: #cccccc !important;
    box-shadow: none !important;
}

/* Remove ALL colored backgrounds on hover */
[data-theme="light"] .approach-card:hover::before,
[data-theme="light"] .value-card:hover::before,
[data-theme="light"] .service-card:hover::before {
    display: none !important;
}

/* Override meet-team-cta hover */
[data-theme="light"] .meet-team-cta:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Override chatbot hover */
[data-theme="light"] .chatbot-minimized:hover,
[data-theme="light"] .chatbot-send-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Override scrollbar thumb hover */
[data-theme="light"] .chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: #999999 !important;
}

/* ================================================
   LIGHT THEME - REMOVE ALL TEAL/YELLOW COLORS
   ================================================ */

/* Change all teal headings to black */
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .approach-icon h3,
[data-theme="light"] .value-icon h3,
[data-theme="light"] .section-subtitle,
[data-theme="light"] .lead-text {
    color: #000000 !important;
}

/* Remove teal/yellow from all text elements */
[data-theme="light"] .industry-tags .tag,
[data-theme="light"] .deployment-options .option-card h5,
[data-theme="light"] .outcome-stats .stat-label {
    color: #000000 !important;
}

/* Make sure stat numbers are black, not teal */
[data-theme="light"] .stat-number,
[data-theme="light"] .outcome-stats .stat-number {
    background: none !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================
   LIGHT THEME - FIX FILTER DROPDOWNS AND BUTTONS
   ================================================ */

/* Remove yellow/teal from dropdown arrows */
[data-theme="light"] .filter-select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

[data-theme="light"] .filter-select:hover,
[data-theme="light"] .filter-select:focus {
    border-color: #999999 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

/* Remove teal from clear filters button */
[data-theme="light"] .clear-filters-btn:hover {
    border-color: #999999 !important;
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ================================================
   LIGHT THEME - FIX ALL ICON BORDERS
   ================================================ */

/* Remove borders from decorative icons - they should be borderless */
[data-theme="light"] .approach-icon,
[data-theme="light"] .value-icon,
[data-theme="light"] .approach-detail-header .approach-icon {
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
}

/* Only add borders to functional icons like contact icons */
[data-theme="light"] .service-category-icon,
[data-theme="light"] .service-icon-wrap,
[data-theme="light"] .contact-icon {
    border: 1px solid #cccccc !important;
    color: #000000 !important;
}

/* Remove teal from icon SVGs */
[data-theme="light"] .approach-icon svg,
[data-theme="light"] .value-icon svg,
[data-theme="light"] .service-category-icon svg,
[data-theme="light"] .service-icon-wrap svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* ================================================
   LIGHT THEME - FIX ALL TAGS
   ================================================ */

/* Remove teal from all tags */
[data-theme="light"] .industry-tags .tag,
[data-theme="light"] .tag,
[data-theme="light"] .tech-tag,
[data-theme="light"] .project-tag {
    background: transparent !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
}






/* ================================================
   THEME TOGGLE - LIGHT THEME ICON COLOR
   ================================================ */

/* Make sun icon black in light theme */
[data-theme="light"] .theme-toggle-icon {
    color: #000000 !important;
}

/* Make the thumb (sliding circle) black in light theme */
[data-theme="light"] .theme-toggle-thumb {
    background: #000000 !important;
}

/* Keep moon icon visible in light theme */
[data-theme="light"] .theme-toggle.light .theme-toggle-icon:first-child {
    opacity: 0.5;
}

[data-theme="light"] .theme-toggle.light .theme-toggle-icon:last-child {
    opacity: 1;
}


/* ================================================
   SERVICE OFFERINGS & DATA SCIENCE CARDS - LIGHT THEME FIX
   ================================================ */

/* Make checkmark icons visible in light mode with black background */
[data-theme="light"] .offering-icon {
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Remove borders from service category icons in light mode */
[data-theme="light"] .service-category-icon {
    border: none !important;
    background: transparent !important;
}

/* Ensure service offering items have no background in light mode */
[data-theme="light"] .service-offering-item {
    background: transparent !important;
}


/* ================================================
   HERO TITLE - IMPACT STYLE
   Bold, large text with accent colors and outline
   ================================================ */
.hero-title-impact {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 0.9;
    letter-spacing: -0.02em;
    max-width: 100%;
}

.hero-title-impact .title-line-1,
.hero-title-impact .title-line-2,
.hero-title-impact .title-line-3 {
    display: block;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    /* text-transform: uppercase; */
    font-family: var(--font-display);
}

/* Line 1: WE HELP - White */
.hero-title-impact .title-line-1 {
    color: #ffffff;
}

[data-theme="light"] .hero-title-impact .title-line-1 {
    color: #000000;
}

/* Line 2: CTOS DELIVER - CTOS in accent color */
.hero-title-impact .title-line-2 {
    color: #ffffff;
}

[data-theme="light"] .hero-title-impact .title-line-2 {
    color: #000000;
}

.hero-title-impact .title-accent {
    color: #fed16b;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-title-impact .title-accent {
    color: #444444;
    background: linear-gradient(135deg, #444444 0%, #666666 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Line 3: AI THAT WORKS - Outlined/stroke text */
.hero-title-impact .title-outline {
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
    opacity: 0.6;
}

[data-theme="light"] .hero-title-impact .title-outline {
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    opacity: 0.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title-impact .title-line-1,
    .hero-title-impact .title-line-2,
    .hero-title-impact .title-line-3 {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }
    
    .hero-title-impact .title-outline {
        -webkit-text-stroke: 1.5px #ffffff;
        text-stroke: 1.5px #ffffff;
    }
    
    [data-theme="light"] .hero-title-impact .title-outline {
        -webkit-text-stroke: 1.5px #000000;
        text-stroke: 1.5px #000000;
    }
}




/* ================================================
   ENHANCED MOBILE MENU - PROFESSIONAL HAMBURGER
   ================================================ */

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Container - 3/4 screen width */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: var(--space-lg);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

/* Light theme mobile menu */
[data-theme="light"] .mobile-menu {
    background: var(--bg-primary);
}

[data-theme="light"] .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.3);
}

/* Mobile Navigation Links */
.mobile-nav-links {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
    flex: 1;
    padding: var(--space-2xl) 0;
}

.mobile-nav-link {
    padding: var(--space-lg) var(--space-md);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    position: relative;
    display: block;
    text-align: left;
    border-bottom: 1px solid transparent;
}

.mobile-nav-link:hover {
    color: var(--text-primary);
}

.mobile-nav-link.active {
    color: var(--accent-primary);
    font-weight: 500;
    border-bottom: 2px solid var(--accent-primary);
}

.mobile-nav-link.active.coral {
    color: var(--accent-coral);
    border-bottom: 2px solid var(--accent-coral);
}

[data-theme="light"] .mobile-nav-link {
    color: var(--text-secondary);
}

[data-theme="light"] .mobile-nav-link:hover {
    color: var(--text-primary);
}

[data-theme="light"] .mobile-nav-link.active {
    color: var(--accent-primary);
    border-bottom: 1px solid var(--accent-primary);
}

[data-theme="light"] .mobile-nav-link.active.coral {
    color: var(--accent-coral);
    border-bottom: 1px solid var(--accent-coral);
}

/* Responsive: Show mobile menu on small screens */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex !important;
    }

    .nav-links {
        display: none !important;
    }

    .nav-cta {
        display: none !important;
    }

    .mobile-menu {
        display: flex !important;
    }

    .mobile-menu-overlay {
        display: block !important;
    }
}

/* Ensure mobile menu is hidden on desktop */
@media (min-width: 769px) {
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }
}

/* Smooth scroll lock transition */
body.menu-open {
    overflow: hidden;
}

/* Accessibility: Focus visible states */
.mobile-nav-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Prevent layout shift when scrollbar disappears */
html {
    overflow-y: scroll;
}