/* ===================================
   SONORA AI AGENT - MAIN STYLESHEET
   =================================== */

/* Font Face - Poppins */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===================================
   CSS VARIABLES - DESIGN SYSTEM
   =================================== */

:root {
    /* Colors */
    --color-black: #000000;
    --color-gray: #bfbfbf;
    --color-yellow: #e5e10c;
    --color-white: #ffffff;

    /* Theme colors */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #bfbfbf;
    --accent: #e5e10c;

    /* =========================================
       HERO BACKGROUND BRIGHTNESS CONTROL
       =========================================
       Adjust these values to control hero darkness.
       Higher = darker overlay, more contrast.
       Recommended range: 0.45 – 0.75

       DARK MODE:  0.50 (moderate darkness)
       LIGHT MODE: 0.65 (stronger to maintain contrast)
    */
    --hero-overlay-dark: 0.50;
    --hero-overlay-light: 0.65;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #e5e10c 0%, #000000 60%);
    --gradient-section: linear-gradient(180deg, rgba(229, 225, 12, 0.1) 0%, rgba(0, 0, 0, 0) 100%);

    /* Typography */
    --font-family: 'Poppins', system-ui, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 4rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.75rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index */
    --z-navbar: 1000;
    --z-overlay: 900;
    --z-background: -1;

    /* =========================================
       GLOBAL BACKGROUND CROSSFADE CONTROL
       =========================================
       --bgBlend: Controls the crossfade between BG.png and BG1.png
       0 = only BG.png (galaxy), 1 = only BG1.png (nebula)
       Updated by JavaScript based on scroll position.

       --bg-overlay-darkness: Darkens the background for text readability
       Recommended range: 0.25 (subtle) to 0.65 (heavy darkening)

       Current: 0.55 dark mode, 0.40 light mode (for good text readability)
    */
    --bgBlend: 0;
    --bg-overlay-darkness: 0.55;
}

/* ===================================
   LIGHT THEME - PREMIUM REDESIGN
   =================================== */

/* Light theme tokens - warm paper base with high contrast */
/* WCAG AA compliant: all text meets 4.5:1 contrast ratio minimum */
body.light-theme {
    --bg-primary: #F5F4EF;
    --bg-secondary: #FFFFFF;
    /* Near-black for maximum readability */
    --text-primary: #0e0e0e;
    /* Dark graphite - WCAG AA compliant on light backgrounds */
    --text-secondary: #2d2d2d;
    --accent: #e5e10c;
    /* Darker accent for text usage on light backgrounds */
    --accent-dark: #b5b108;
    --border-light: rgba(0, 0, 0, 0.12);
    --border-medium: rgba(0, 0, 0, 0.18);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    --gradient-hero: linear-gradient(135deg, #F5F4EF 0%, #FDFCF7 60%);
    --gradient-section: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Light theme - Hero overlay (only for non-cinematic hero sections) */
body.light-theme .hero:not(.section--cinematic) .hero-gradient {
    background: linear-gradient(135deg, rgba(245, 244, 239, 0.92) 0%, rgba(229, 225, 12, 0.15) 100%);
}

/* Light theme - Navbar */
body.light-theme .navbar {
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
}

body.light-theme .nav-menu a {
    color: var(--text-primary);
}

body.light-theme .nav-menu a:hover {
    color: var(--accent-dark);
}

body.light-theme .nav-menu a::after {
    background-color: var(--accent-dark);
}

body.light-theme .theme-toggle {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.light-theme .theme-toggle:hover {
    border-color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

body.light-theme .language-selector {
    border-color: var(--border-medium);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

body.light-theme .language-selector:hover {
    border-color: var(--text-primary);
}

body.light-theme .language-selector option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Light theme - Logo */
body.light-theme .logo-text {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--text-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Light theme - Hero section */
body.light-theme .hero-title {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-theme .eyebrow {
    color: var(--accent-dark);
}

/* Light theme - Cards (what-is, benefits, etc.) */
body.light-theme .what-is-item,
body.light-theme .benefit-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .what-is-item:hover,
body.light-theme .benefit-item:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium), inset 0 0 0 1px var(--border-light);
}

body.light-theme .what-is-item h3,
body.light-theme .benefit-item h3 {
    color: var(--text-primary);
}

/* Card body text - dark graphite for readability */
body.light-theme .what-is-item p,
body.light-theme .benefit-item p {
    color: var(--text-secondary);
}

body.light-theme .what-is-item:hover h3 {
    color: var(--accent-dark);
}

body.light-theme .benefit-item {
    border-left: 4px solid var(--accent-dark);
}

/* Light theme - Capabilities Orbital */
body.light-theme .capabilities::before {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    opacity: 0.4;
}

body.light-theme .orbital-core .core-pulse {
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .core-inner {
    background: var(--bg-secondary);
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
}

body.light-theme .core-icon {
    color: var(--accent-dark);
}

/* Light theme: slightly different glow color for check hover */
body.light-theme .core-check:hover .check--on {
    filter: drop-shadow(0 0 12px rgba(181, 177, 8, 0.5));
}

body.light-theme .core-label {
    color: var(--text-secondary);
}

body.light-theme .node-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .capability-node:hover .node-content {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium), 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 -2px 0 0 var(--accent);
}

body.light-theme .node-content h3 {
    color: var(--text-primary);
}

body.light-theme .node-content p,
body.light-theme .node-description {
    color: var(--text-secondary);
}

body.light-theme .capability-node:hover .node-content h3 {
    color: var(--accent-dark);
}

body.light-theme .node-connector {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
}

body.light-theme .capability-node:hover .node-connector {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

/* Light theme - How It Works Flow */
body.light-theme .how-it-works::before {
    background-image:
        radial-gradient(circle at 30% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
    opacity: 0.3;
}

body.light-theme .flow-core-icon {
    color: var(--accent-dark);
}

body.light-theme .flow-connections {
    color: var(--accent-dark, #b5b108);
}

body.light-theme .flow-path-bg {
    opacity: 0.25;
}

body.light-theme .flow-step.active .step-marker {
    box-shadow: 0 0 25px rgba(181, 177, 8, 0.5);
}

body.light-theme .flow-step.active .step-content {
    box-shadow: 0 0 30px rgba(181, 177, 8, 0.2);
}

body.light-theme .step-marker {
    background: var(--bg-secondary);
    border-color: var(--text-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
}

body.light-theme .flow-step:hover .step-marker {
    background: var(--text-primary);
    color: var(--bg-secondary);
    box-shadow: var(--shadow-medium);
}

body.light-theme .step-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .flow-step:hover .step-content {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium), inset 0 -2px 0 0 var(--accent);
}

body.light-theme .step-content h3 {
    color: var(--text-primary);
}

body.light-theme .step-content p {
    color: var(--text-secondary);
}

/* Light theme - Industry cards */
body.light-theme .industry-card {
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .industry-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 100%);
}

body.light-theme .industry-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-medium);
}

body.light-theme .industry-card:hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 244, 239, 0.85) 100%);
}

body.light-theme .industry-card h3 {
    color: var(--text-primary);
}

body.light-theme .industry-card p {
    color: var(--text-secondary);
}

body.light-theme .industry-card:hover h3 {
    color: var(--accent-dark);
}

/* Light theme - Advantages comparison */
body.light-theme .comparison-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .comparison-label {
    color: var(--text-primary);
    font-weight: 700;
}

body.light-theme .comparison-vs {
    color: var(--text-secondary);
}

/* Light theme - Team section */
body.light-theme .team-robot {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

/* Light theme - Contact section */
body.light-theme .contact-lead {
    color: var(--text-secondary);
}

/* Light theme - Buttons (for non-cinematic sections only) */
body.light-theme :not(.section--cinematic) > .container .btn-primary,
body.light-theme .contact .btn-primary,
body.light-theme .back-home .btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(229, 225, 12, 0.3);
}

body.light-theme :not(.section--cinematic) > .container .btn-primary:hover,
body.light-theme .contact .btn-primary:hover,
body.light-theme .back-home .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(229, 225, 12, 0.4);
}

body.light-theme :not(.section--cinematic) > .container .btn-secondary,
body.light-theme .contact .btn-secondary,
body.light-theme .back-home .btn-secondary {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

body.light-theme :not(.section--cinematic) > .container .btn-secondary:hover,
body.light-theme .contact .btn-secondary:hover,
body.light-theme .back-home .btn-secondary:hover {
    background: var(--text-primary);
    color: var(--bg-secondary);
    border-color: var(--text-primary);
}

/* Light theme - Footer */
body.light-theme .footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}

/* Light theme - Examples page */
body.light-theme .examples-hero::before {
    display: none; /* No overlay - galaxy visible in light mode too */
}

body.light-theme .demo-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
}

body.light-theme .demo-btn {
    background: var(--accent);
    color: var(--text-primary);
}

body.light-theme .demo-btn-reset {
    background: transparent;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

body.light-theme .demo-btn-reset:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

body.light-theme .workflow-step {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
}

body.light-theme .workflow-step.active {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

body.light-theme .intent-input,
body.light-theme .transcript-box {
    background: var(--bg-primary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.light-theme .intent-input:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

body.light-theme .intent-tag {
    background: var(--accent);
    color: var(--text-primary);
}

body.light-theme .entity-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.light-theme .summary-card {
    background: var(--bg-primary);
    border-left-color: var(--accent-dark);
}

body.light-theme .summary-card h4 {
    color: var(--text-primary);
}

/* Light theme - Modal */
body.light-theme .modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

body.light-theme .modal-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

body.light-theme .modal-header {
    border-bottom-color: var(--border-light);
}

body.light-theme .modal-header h2 {
    color: var(--text-primary);
}

body.light-theme .modal-close {
    color: var(--text-secondary);
}

body.light-theme .modal-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .form-group label {
    color: var(--text-primary);
}

body.light-theme .form-group input,
body.light-theme .form-group textarea {
    background: var(--bg-primary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.light-theme .form-group input:focus,
body.light-theme .form-group textarea:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

body.light-theme .form-group input::placeholder,
body.light-theme .form-group textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

body.light-theme .success-icon {
    color: var(--accent-dark);
}

body.light-theme .form-success h3 {
    color: var(--text-primary);
}

/* Light theme - Mobile menu */
@media (max-width: 968px) {
    body.light-theme .nav-menu {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-light);
        box-shadow: var(--shadow-medium);
    }

    body.light-theme .nav-toggle span {
        background-color: var(--text-primary);
    }
}

/* ===================================
   CINEMATIC SECTIONS (Theme-Invariant Dark)
   These sections stay dark in both light and dark modes
   to preserve visual impact and background visibility.
   =================================== */

.section--cinematic {
    /* Force dark palette regardless of theme */
    --cinematic-bg: #000000;
    --cinematic-bg-secondary: #1a1a1a;
    --cinematic-text: #ffffff;
    /* WCAG AA compliant: #d9d9d9 on #000000 = 13.5:1 contrast ratio */
    --cinematic-text-secondary: #d9d9d9;
    --cinematic-accent: #e5e10c;
    --cinematic-border: rgba(229, 225, 12, 0.15);

    background-color: var(--cinematic-bg);
    color: var(--cinematic-text);
}

/* Cinematic section text overrides */
.section--cinematic h1,
.section--cinematic h2,
.section--cinematic h3,
.section--cinematic h4 {
    color: var(--cinematic-text);
}

.section--cinematic p {
    color: var(--cinematic-text-secondary);
}

.section--cinematic .eyebrow {
    color: var(--cinematic-accent);
}

/* Hero description - high contrast and legible on dark backgrounds */
.section--cinematic .hero-description {
    color: #ffffff;
    font-weight: 500;
    line-height: 1.8;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}


/* Hero title gradient - always use dark mode styling */
.section--cinematic .hero-title {
    background: linear-gradient(135deg, #ffffff 0%, var(--cinematic-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================
   HERO OVERLAY - DARK MODE
   =========================================
   TO ADJUST DARKNESS: Change the first number in rgba()

   Current: 0.55 (55% dark) - cinematic, background visible
   Darker:  0.65-0.75 (nearly black)
   Lighter: 0.35-0.45 (more background visible)
   ========================================= */
.section--cinematic .hero-gradient,
.section--cinematic.hero .hero-gradient {
    background:
        linear-gradient(135deg,
            rgba(0, 0, 0, 0.55) 0%,       /* ← ADJUST THIS: main darkness */
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.35) 70%,
            rgba(229, 225, 12, 0.12) 100%
        );
}

/* Examples hero overlay - DISABLED to show galaxy background directly */
.section--cinematic.examples-hero::before,
.section--cinematic .examples-hero::before {
    display: none; /* No overlay band - galaxy visible */
}

/* Cinematic section buttons - always visible */
.section--cinematic .btn-primary {
    background: linear-gradient(135deg, var(--cinematic-accent) 0%, #c4c109 100%);
    color: #000000;
    border: none;
}

.section--cinematic .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(229, 225, 12, 0.4);
}

/* ===================================
   HERO BUTTONS - BRAND ANCHORS
   Must look IDENTICAL in light and dark modes
   =================================== */

/* Primary button - yellow fill, black text */
.section--cinematic .btn-primary,
.section--cinematic .hero-cta .btn-primary,
body.light-theme .section--cinematic .btn-primary,
body.light-theme .section--cinematic .hero-cta .btn-primary {
    background: linear-gradient(135deg, #e5e10c 0%, #c4c109 100%);
    color: #000000;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(229, 225, 12, 0.3);
}

.section--cinematic .btn-primary:hover,
.section--cinematic .hero-cta .btn-primary:hover,
body.light-theme .section--cinematic .btn-primary:hover,
body.light-theme .section--cinematic .hero-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(229, 225, 12, 0.45);
}

/* Secondary button - visible by default, white text, yellow border */
.section--cinematic .btn-secondary,
.section--cinematic .hero-cta .btn-secondary,
body.light-theme .section--cinematic .btn-secondary,
body.light-theme .section--cinematic .hero-cta .btn-secondary {
    background: rgba(229, 225, 12, 0.12);
    border: 2px solid #e5e10c;
    color: #ffffff;
    font-weight: 600;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.section--cinematic .btn-secondary:hover,
.section--cinematic .hero-cta .btn-secondary:hover,
body.light-theme .section--cinematic .btn-secondary:hover,
body.light-theme .section--cinematic .hero-cta .btn-secondary:hover {
    background: #e5e10c;
    color: #000000;
    border-color: #e5e10c;
    box-shadow: 0 6px 20px rgba(229, 225, 12, 0.4);
}

/* ===================================
   DEMO BOXES - PREMIUM GLASSMORPHISM
   ===================================
   Semi-transparent over galaxy background with blur.

   TWEAKABLE VALUES:
   - Dark mode opacity: Change 0.45 in rgba(0,0,0,0.45)
   - Light mode opacity: Change 0.30 in body.light-theme rule
   - Blur intensity: Change backdrop-filter: blur(6px)
   - Border glow: Change rgba(229,225,12,0.20)
*/
.section--cinematic .demo-box {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(229, 225, 12, 0.20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.light-theme .section--cinematic .demo-box {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(229, 225, 12, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.section--cinematic .demo-box h2,
.section--cinematic .demo-box h3,
.section--cinematic .demo-box h4 {
    color: var(--cinematic-text);
}

.section--cinematic .demo-box p {
    color: var(--cinematic-text-secondary);
}

/* ===================================
   WORKFLOW STEPS - SEQUENTIAL REVEAL
   ===================================
   Steps hidden by default, revealed sequentially.

   TWEAKABLE VALUES:
   - Step delay: Change in js/examples.js WORKFLOW_CONFIG.stepDelay (default: 1200ms)
   =========================================
   DEMO STEP ICON - SIZE CONTROL
   =========================================
   MANUAL TUNING: Change --step-icon-size to resize
   Recommended range: 48px – 80px (desktop)
   Current: 68px desktop, 48px mobile
*/
.section--cinematic .workflow-step {
    --step-icon-size: 68px;  /* ← CHANGE THIS to resize step icons */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cinematic-border);
    color: var(--cinematic-text);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Hidden state for sequential reveal - MUST use display:none to not take space */
.section--cinematic .workflow-step.is-hidden {
    display: none;
}

/* Wrapper for smooth height animation
   TWEAKABLE: transition duration (0.4s) for grow speed */
.workflow-steps-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out;
}

/* When steps are being shown, wrapper expands */
.workflow-steps-wrap.is-expanded {
    /* max-height is set dynamically via JS */
}

.section--cinematic .workflow-step.active {
    border-color: var(--cinematic-accent);
    background: rgba(229, 225, 12, 0.08);
    box-shadow: 0 0 20px rgba(229, 225, 12, 0.15);
}

.section--cinematic .workflow-step.completed {
    opacity: 0.85;
}

.section--cinematic .workflow-step h4 {
    color: var(--cinematic-text);
}

.section--cinematic .workflow-step p {
    color: var(--cinematic-text-secondary);
}

/* Step icon + content layout */
.demo-step__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.demo-step__icon {
    width: var(--step-icon-size, 68px);
    height: var(--step-icon-size, 68px);
    flex-shrink: 0;
    align-self: center;  /* Keep vertically centered with text */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.demo-step__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Show icon when step is completed */
.workflow-step.completed .demo-step__icon {
    opacity: 1;
    transform: scale(1);
}

.demo-step__content {
    flex: 1;
}

.demo-step__content h4 {
    margin-bottom: 0.25rem;
}

.demo-step__content p {
    margin: 0;
}

/* Processing indicator (3 dots) */
.workflow-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--cinematic-accent);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workflow-processing.is-visible {
    opacity: 1;
}

.workflow-processing__dots {
    display: flex;
    gap: 4px;
}

.workflow-processing__dots span {
    width: 6px;
    height: 6px;
    background: var(--cinematic-accent);
    border-radius: 50%;
    animation: processingDot 1.2s ease-in-out infinite;
}

.workflow-processing__dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.workflow-processing__dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes processingDot {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Disabled button state */
.demo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.demo-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Intent/form inputs in cinematic sections */
.section--cinematic .intent-input,
.section--cinematic .transcript-box {
    background: var(--cinematic-bg);
    border: 1px solid rgba(229, 225, 12, 0.2);
    color: var(--cinematic-text);
}

.section--cinematic .intent-input:focus {
    border-color: var(--cinematic-accent);
    box-shadow: 0 0 0 3px rgba(229, 225, 12, 0.1);
}

.section--cinematic .intent-input::placeholder {
    color: var(--cinematic-text-secondary);
}

/* Tags and badges in cinematic sections */
.section--cinematic .intent-tag {
    background: var(--cinematic-accent);
    color: #000000;
}

.section--cinematic .entity-badge {
    background: rgba(229, 225, 12, 0.15);
    border: 1px solid var(--cinematic-accent);
    color: var(--cinematic-text);
}

/* Summary cards in cinematic sections */
.section--cinematic .summary-card {
    background: var(--cinematic-bg);
    border-left: 3px solid var(--cinematic-accent);
}

.section--cinematic .summary-card h4 {
    color: var(--cinematic-accent);
}

.section--cinematic .summary-card p,
.section--cinematic .summary-card li {
    color: var(--cinematic-text-secondary);
}

/* Demo buttons in cinematic sections */
.section--cinematic .demo-btn {
    background: var(--cinematic-accent);
    color: #000000;
}

.section--cinematic .demo-btn:hover {
    box-shadow: 0 5px 20px rgba(229, 225, 12, 0.4);
}

.section--cinematic .demo-btn-reset {
    background: transparent;
    border: 2px solid var(--cinematic-text-secondary);
    color: var(--cinematic-text-secondary);
}

.section--cinematic .demo-btn-reset:hover {
    border-color: var(--cinematic-accent);
    color: var(--cinematic-accent);
}

/* Intent results in cinematic sections */
.section--cinematic .intent-results h4 {
    color: var(--cinematic-accent);
}

.section--cinematic .suggested-action {
    background: rgba(229, 225, 12, 0.05);
    border-left: 3px solid var(--cinematic-accent);
    color: var(--cinematic-text);
}

/* Transcript styling */
.section--cinematic .transcript-box strong {
    color: var(--cinematic-accent);
}

/* =========================================
   HERO OVERLAY - LIGHT MODE
   =========================================
   TO ADJUST DARKNESS: Change 0.65 below

   Current: 0.65 (65% dark) - presentation-ready
   Darker:  0.70-0.80 (very dark, nearly black)
   Lighter: 0.50-0.60 (more background visible)

   IMPORTANT: Light mode needs MORE darkness than
   dark mode to maintain text contrast!
   ========================================= */
body.light-theme .section--cinematic.hero .hero-gradient,
body.light-theme .hero.section--cinematic .hero-gradient {
    background:
        /* Main overlay - ADJUST 0.65 for darkness */
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.65) 0%,       /* ← ADJUST THIS: main darkness */
            rgba(0, 0, 0, 0.55) 100%
        ),
        /* Brand accent layer (subtle) */
        linear-gradient(135deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(229, 225, 12, 0.08) 100%
        );
}

body.light-theme .section--cinematic .hero-title,
body.light-theme .hero.section--cinematic .hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #e5e10c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .section--cinematic .eyebrow {
    color: #e5e10c;
}

body.light-theme .section--cinematic .hero-description {
    /* High contrast white text with subtle shadow for legibility */
    color: #f0f0f0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Override light theme for cinematic examples hero - DISABLED overlay */
body.light-theme .section--cinematic.examples-hero::before,
body.light-theme .examples-hero.section--cinematic::before {
    display: none; /* No overlay band in light mode either */
}

body.light-theme .section--cinematic.examples-hero h1,
body.light-theme .examples-hero.section--cinematic h1 {
    color: #ffffff;
}

body.light-theme .section--cinematic.examples-hero p,
body.light-theme .examples-hero.section--cinematic > .container > p {
    /* High contrast for cinematic sections */
    color: #e8e8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .nav-menu {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-cta {
    flex-direction: row-reverse;
}

/* ===================================
   RESET & BASE STYLES
   =================================== */

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

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
}

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

/* ===================================
   GLOBAL BACKGROUND CROSSFADE LAYER
   ===================================
   Two fixed layers that crossfade based on scroll:
   - ::before = BG.png (galaxy) - always visible, fades out as you scroll
   - ::after  = BG1.png (nebula) - fades in as you scroll

   The --bgBlend variable (0 to 1) controls the transition.

   WHY #global-bg instead of body::before/after:
   - body has background-color: #000 for theming
   - Pseudo-elements with negative z-index render BEHIND parent's background
   - Using a dedicated div ensures BG images render ABOVE body's black background
   - This fixes the transparency bug where PNG overlays showed black
*/

#global-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

#global-bg::before,
#global-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
}

/* Base layer: BG.png (galaxy) - fades out */
#global-bg::before {
    background-image: url('../images/BG.png');
    opacity: calc(1 - var(--bgBlend));
}

/* Overlay layer: BG1.png (nebula) - fades in */
#global-bg::after {
    background-image: url('../images/BG1.png');
    opacity: var(--bgBlend);
}

/* Dark overlay for text readability - sits on top of background images
   Includes subtle blur to reduce galaxy detail distraction */
#global-bg > .bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, var(--bg-overlay-darkness));
    pointer-events: none;
    z-index: 1; /* Above ::before/::after within #global-bg */
    /* Subtle blur to soften galaxy details - improves text readability */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Light theme: moderate overlay for readability while keeping cosmic feel */
body.light-theme {
    --bg-overlay-darkness: 0.40;
}

::selection {
    background-color: var(--accent);
    color: var(--color-black);
}

/* ===================================
   TYPOGRAPHY
   =================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

p {
    margin-bottom: var(--spacing-sm);
}

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

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

/* ===================================
   LAYOUT
   =================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

section {
    padding: var(--spacing-xl) 0;
}

/* ===================================
   NAVIGATION
   =================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: var(--z-navbar);
    transition: background-color var(--transition-medium);
    border-bottom: 1px solid rgba(229, 225, 12, 0.1);
    /* Ensure icons are not clipped */
    overflow: visible;
}

.light-theme .navbar {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    /* Increased vertical padding for icon breathing room */
    padding: 1.125rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    transition: opacity var(--transition-fast);
}

.logo:hover {
    opacity: 0.8;
}

.logo-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--text-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}

.nav-menu a {
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.5rem 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width var(--transition-fast);
}

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

.nav-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    /* Fixed dimensions with room for icon */
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent icon clipping */
    overflow: visible;
    transition: all var(--transition-fast);

    /* TEMPORARY: Hide theme toggle - remove this line to re-enable */
    display: none !important;
}

.theme-toggle:hover {
    border-color: var(--accent);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.sun-icon {
    display: none;
}

.light-theme .sun-icon {
    display: block;
}

.moon-icon {
    display: block;
}

.light-theme .moon-icon {
    display: none;
}

.language-selector {
    background: none;
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: var(--font-family);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.language-selector:hover {
    border-color: var(--accent);
}

.language-selector option {
    background-color: var(--bg-primary);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background-color: var(--text-primary);
    transition: all var(--transition-fast);
}

/* ===================================
   HERO SECTION
   =================================== */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    /* Override .section--cinematic's black background so global BG shows through */
    background-color: transparent !important;
}

/* ===================================
   HERO WAVEFORM OVERLAY (sonora-bg4.png)
   ===================================
   Transparent PNG overlay visible ONLY in hero section.
   Fades out by ~300px scroll via JS.

   LAYER ORDER (within hero):
   - Global BG.png/BG1.png (behind everything via body::before/::after)
   - .hero-waveform-overlay (z-index: 0) - this overlay
   - .hero-gradient (z-index: 1) - darkening gradient
   - .hero .container (z-index: 2) - content
*/
.hero-waveform-overlay {
    position: absolute;
    inset: 0;
    background-image: url('../images/sonora-bg5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* NO background-color - keeps PNG transparency intact */
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    will-change: opacity;
}

/* Hero gradient + readability spotlight
   Creates a vignette effect that darkens edges while keeping center readable */
.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Radial spotlight: darker center fading to transparent edges */
        radial-gradient(
            ellipse 70% 60% at 50% 45%,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.35) 40%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.0) 100%
        ),
        /* Original accent gradient (subtle) */
        linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(229, 225, 12, 0.08) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.eyebrow {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    /* Line-height must allow full descenders (g, y, p, q) - minimum 1.15 */
    line-height: 1.2;
    /* Extra padding to prevent gradient-clip from cutting descenders */
    padding-bottom: 0.1em;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: var(--font-size-large);
    color: #fff; /* biały tekst zamiast --text-secondary */
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    line-height: 1.8;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}


.hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================================
   BUTTONS
   =================================== */

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #c4c109 100%);
    color: var(--color-black);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(229, 225, 12, 0.3);
}

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

.btn-secondary:hover {
    background: var(--accent);
    color: var(--color-black);
}

/* ===================================
   SECTIONS
   =================================== */

.what-is,
.capabilities,
.how-it-works,
.industries,
.benefits,
.advantages,
.team,
.contact {
    position: relative;
}

.what-is h2,
.capabilities h2,
.how-it-works h2,
.industries h2,
.benefits h2,
.advantages h2,
.team h2,
.contact h2 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.what-is-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.what-is-item {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid rgba(229, 225, 12, 0.1);
    transition: all var(--transition-medium);
}

.what-is-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(229, 225, 12, 0.1);
}

.what-is-item h3 {
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
}

/* ===================================
   CAPABILITIES - ORBITAL SYSTEM
   =================================== */

.capabilities {
    position: relative;
    overflow: hidden;
}

/* Subtle background grid */
.capabilities::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, rgba(229, 225, 12, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 225, 12, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

.capabilities .container {
    position: relative;
    z-index: 1;
}

.capabilities-orbital {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-xl) 0;
}

/* Central Voice Intelligence Core */
.orbital-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* =========================================
   VOICE INTELLIGENCE CORE - SIZE CONTROL
   =========================================
   MANUAL TUNING GUIDE:
   - File: css/style.css
   - To adjust center icon size, change these values:
     • --core-size: Controls the container size (default: 220px)
     • --check-size: Controls the check icon size (default: 160px)
     • --pulse-size: Controls the pulsing ring (default: 260px)
   - Increase values for larger icons, decrease for smaller
   - Keep proportions: check-size ≈ 73% of core-size
*/
.core-inner {
    --core-size: 350px;      /* ← ADJUST: Main container size */
    --check-size: 390px;     /* ← ADJUST: Check icon size */
    width: var(--core-size);
    height: var(--core-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}

/* Core icon (legacy - replaced by .core-check) */
.core-icon {
    width: 100%;
    height: 100%;
    color: var(--accent);
}

/* Hover-swapping check icon in center of Voice Intelligence Core
   Default: check.png | Hover: check2.png with glow effect */
.core-check {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--check-size, 160px);
    height: var(--check-size, 160px);
    z-index: 5;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.core-check .check {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

/* Default state: check.png visible, check2.png hidden */
.core-check .check--off {
    opacity: 1;
}

.core-check .check--on {
    opacity: 0;
}

/* Hover state: crossfade to check2.png with scale + glow */
.core-check:hover .check--off {
    opacity: 0;
}

.core-check:hover .check--on {
    opacity: 1;
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px rgba(229, 225, 12, 0.45));
}

.core-pulse {
    --pulse-size: 260px;     /* ← ADJUST: Pulsing ring size */
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pulse-size);
    height: var(--pulse-size);
    transform: translate(-50%, -50%);
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.3;
    animation: corePulse 3s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.1;
    }
}

.core-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    white-space: nowrap;
    opacity: 0.7;
}

/* Orbiting Capability Nodes */
.capability-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    transform: translate(-50%, -50%)
               rotate(var(--angle))
               translateX(var(--radius))
               rotate(calc(-1 * var(--angle)));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.node-connector {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--radius);
    height: 1px;
    background: linear-gradient(90deg, rgba(229, 225, 12, 0.2) 0%, transparent 100%);
    transform-origin: left center;
    transform: translateX(-100%) translateY(-50%) rotate(calc(-1 * var(--angle)));
    opacity: 0.5;
    transition: opacity var(--transition-medium);
}

.capability-node:hover .node-connector {
    opacity: 1;
    background: linear-gradient(90deg, rgba(229, 225, 12, 0.6) 0%, transparent 100%);
}

.node-content {
    background: var(--bg-secondary);
    border: 2px solid rgba(229, 225, 12, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.capability-node:hover .node-content {
    border-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(229, 225, 12, 0.3);
    z-index: 20;
}

.capabilities-orbital:not(:hover) .capability-node .node-content,
.capabilities-orbital.has-hover .capability-node:not(:hover) .node-content {
    opacity: 1;
}

.capabilities-orbital.has-hover .capability-node:not(:hover) .node-content {
    opacity: 0.4;
}

.node-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--transition-medium);
}

.node-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capability-node:hover .node-icon {
    transform: scale(1.1);
}

.node-content h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.node-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
}

.capability-node:hover .node-description {
    opacity: 1;
    max-height: 200px;
    margin-top: 0.5rem;
}

/* ===================================
   HOW IT WORKS - RADIAL FLOW
   =================================== */

.how-it-works {
    position: relative;
    overflow: hidden;
}

/* Subtle signal waves background */
.how-it-works::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 30% 50%, rgba(229, 225, 12, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(229, 225, 12, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.how-it-works .container {
    position: relative;
    z-index: 1;
}

.process-flow {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-xl) 0;
}

/* Central Processing Core */
.flow-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    z-index: 5;
}

.flow-core-icon {
    width: 100%;
    height: 100%;
    color: var(--accent);
    animation: coreRotate 20s linear infinite;
}

@keyframes coreRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* SVG Connection Paths - Sequential Pulse Animation
   ================================================
   Steps activate in sequence: 01 → 02 → 03 → 04
   Each connection animates as a glowing pulse traveling forward.

   TIMING ADJUSTABLE:
   - Pulse duration: Change animation-duration in .flow-path-pulse
   - Sequence timing: Change delays in JS (processFlowAnimation)
   - Glow intensity: Change filter stdDeviation in HTML SVG filter
*/
.flow-connections {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    color: var(--accent);
    z-index: 1;
    pointer-events: none;
}

/* Background paths - always visible, subtle */
.flow-path-bg {
    transition: opacity 0.4s ease;
}

/* Pulse paths - animated with stroke-dashoffset */
.flow-path-pulse {
    stroke-linecap: round;
    /* Total path length set via JS, dash covers ~15% of path */
    stroke-dasharray: var(--path-length, 300);
    stroke-dashoffset: var(--path-length, 300);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When connection is animating */
.flow-connection.animating .flow-path-pulse {
    opacity: 1;
    animation: pulseTravel var(--pulse-duration, 0.8s) ease-in-out forwards;
}

/* When connection is complete (pulse reached destination) */
.flow-connection.complete .flow-path-bg {
    opacity: 0.4;
}

/* Pulse travel animation - moves dash from start to end */
@keyframes pulseTravel {
    0% {
        stroke-dashoffset: var(--path-length, 300);
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Active step highlight */
.flow-step.active .step-marker {
    transform: scale(1.15);
    box-shadow: 0 0 25px rgba(229, 225, 12, 0.6);
    background: var(--accent);
    color: var(--bg-primary);
}

.flow-step.active .step-content {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(229, 225, 12, 0.25);
}

/* Completed step - subtle highlight remains */
.flow-step.completed .step-marker {
    box-shadow: 0 0 15px rgba(229, 225, 12, 0.3);
}

.flow-step.completed .step-content {
    border-color: rgba(229, 225, 12, 0.4);
}

/* Flow Steps */
.flow-step {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%)
               rotate(var(--step-angle))
               translateY(calc(-1 * var(--step-radius)))
               rotate(calc(-1 * var(--step-angle)));
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-marker {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 auto 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.flow-step:hover .step-marker {
    transform: scale(1.3);
    box-shadow: 0 0 30px rgba(229, 225, 12, 0.5);
    background: var(--accent);
    color: var(--bg-primary);
}

.step-content {
    background: var(--bg-secondary);
    border: 2px solid rgba(229, 225, 12, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.flow-step:hover .step-content {
    border-color: var(--accent);
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(229, 225, 12, 0.3);
    z-index: 20;
}

.process-flow:not(:hover) .flow-step .step-content,
.process-flow.has-hover .flow-step:not(:hover) .step-content {
    opacity: 1;
}

.process-flow.has-hover .flow-step:not(:hover) .step-content {
    opacity: 0.5;
}

.process-flow.has-hover .flow-step:not(:hover) .step-marker {
    opacity: 0.5;
}

.step-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

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

/* ===================================
   INDUSTRIES
   =================================== */

/* -----------------------------------------
   INDUSTRIES CAROUSEL VARIABLES
   Adjust these to fine-tune carousel
   ----------------------------------------- */
:root {
    --industries-card-width-desktop: 380px;    /* Card width on desktop - TWEAK HERE */
    --industries-card-width-mobile: 85vw;      /* Card width on mobile - TWEAK HERE */
    --industries-gap: var(--spacing-md);       /* Gap between cards - TWEAK HERE */
}

/* Carousel wrapper */
.industries-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

/* Track - horizontal scroll carousel (all breakpoints) */
.industries-track {
    display: flex;
    gap: var(--industries-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: var(--spacing-sm) 0;
    flex: 1;
}

.industries-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Cards in carousel */
.industries-track .industry-card {
    flex: 0 0 var(--industries-card-width-desktop);
    scroll-snap-align: start;
}

/* Navigation buttons */
.industries-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    z-index: 2;
}

.industries-nav:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 225, 12, 0.1);
}

.industries-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.industries-nav svg {
    width: 20px;
    height: 20px;
}

/* Pagination dots */
.industries-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
}

.industries-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--text-secondary);
    opacity: 0.4;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.industries-dot:hover {
    opacity: 0.7;
}

.industries-dot.active {
    background: var(--accent);
    opacity: 1;
}

.industries-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tablet adjustments */
@media (max-width: 1023px) {
    .industries-track .industry-card {
        flex: 0 0 min(var(--industries-card-width-desktop), 70vw);
    }
}

/* Mobile: smaller cards, hide nav buttons (swipe only) */
@media (max-width: 599px) {
    .industries-nav {
        display: none;
    }

    .industries-carousel {
        display: block;
    }

    .industries-track .industry-card {
        flex: 0 0 var(--industries-card-width-mobile);
        scroll-snap-align: center;
    }

    .industries-track {
        padding-left: calc((100vw - var(--industries-card-width-mobile)) / 2);
        padding-right: calc((100vw - var(--industries-card-width-mobile)) / 2);
    }
}

.industry-card {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: 12px;
    border: 1px solid rgba(229, 225, 12, 0.1);
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 200px;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 0;
}

.industry-card h3,
.industry-card p {
    position: relative;
    z-index: 1;
}

.industry-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.industry-card:hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(229, 225, 12, 0.3) 100%);
}

.industry-card h3 {
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
}

/* Individual industry backgrounds */
.industry-healthcare {
    background-image: url('../images/healthcare_bg.jpg');
}

.industry-support {
    background-image: url('../images/logistic_bg.jpg');
}

.industry-field {
    background-image: url('../images/manafacturing_bg.jpg');
}

.industry-admin {
    background-image: url('../images/education_bg.jpg');
}

.industry-enterprise {
    background-image: url('../images/automotive_bg.jpg');
}

/* ===================================
   BENEFITS
   =================================== */

.benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.benefit-item {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 12px;
    border-left: 4px solid var(--accent);
}

/* ===================================
   ADVANTAGES
   =================================== */

.comparison {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comparison-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 12px;
    gap: var(--spacing-md);
}

.comparison-label {
    font-weight: 600;
    color: var(--accent);
    flex: 1;
}

.comparison-vs {
    font-weight: 700;
    color: var(--text-secondary);
}

.comparison-competitor {
    flex: 1;
    text-align: right;
    color: var(--text-secondary);
    text-decoration: line-through;
}

/* ===================================
   TEAM
   =================================== */

.team-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.team-text {
    flex: 1;
    min-width: 300px;
}


.team-intro {
    text-align: left;
    max-width: 600px;
    font-size: var(--font-size-large);
    color: var(--text-secondary);
}

.team-visual {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.team-robot {
    max-width: 400px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(229, 225, 12, 0.3));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Responsive - Orbital and Flow Systems */
@media (max-width: 968px) {
    .capabilities-orbital,
    .process-flow {
        min-height: auto;
        display: block;
        padding: 2rem 0;
    }

    .orbital-core,
    .flow-core {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 3rem;
    }

    .flow-connections {
        display: none;
    }

    .capability-node,
    .flow-step {
        position: relative;
        transform: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 2rem;
        left: auto;
        top: auto;
    }

    .node-connector {
        display: none;
    }

    .node-description {
        opacity: 1;
        max-height: none;
        margin-top: 0.5rem;
    }

    .step-marker {
        margin: 0 auto 1rem;
    }
}

@media (max-width: 968px) {
    .team-content {
        flex-direction: column;
        text-align: center;
    }

    .team-text h2,
    .team-intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===================================
   CONTACT
   =================================== */

.contact {
    text-align: center;
}

.contact-lead {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

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

/* -----------------------------------------
   FOOTER SPACING VARIABLES
   Adjust these to fine-tune footer layout
   ----------------------------------------- */
:root {
    --footer-padding-y: 2.5rem;         /* Vertical padding (top & bottom) - TWEAK HERE */
    --footer-padding-x: 2rem;           /* Horizontal padding */
    --footer-logo-size: 200px;          /* Logo width (2.5x of 80px) - TWEAK HERE */
    --footer-gap: 3rem;                 /* Gap between logo and content */
    --footer-mobile-padding-y: 2rem;    /* Vertical padding on mobile */
    --footer-mobile-padding-x: 1.5rem;  /* Horizontal padding on mobile */
    --footer-mobile-logo-size: 140px;   /* Logo size on mobile */
    --footer-icon-size: 20px;           /* Social icon size - TWEAK HERE */
    --footer-icon-gap: 1rem;            /* Gap between social icons */
}

.footer {
    background: var(--bg-secondary);
    padding: var(--footer-padding-y) var(--footer-padding-x);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    border-top: 1px solid rgba(229, 225, 12, 0.1);
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Footer main content layout */
.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--footer-gap);
    margin-bottom: var(--spacing-sm);
}

/* Logo styling */
.footer-logo {
    flex-shrink: 0;
}

.footer-logo img {
    width: var(--footer-logo-size);
    height: auto;
    display: block;
}

/* Contact info block */
.footer-contact {
    text-align: left;
    line-height: 1.6;
}

/* Footer info wrapper (contact + socials) */
.footer-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Social icons row */
.footer-socials {
    display: flex;
    align-items: center;
    gap: var(--footer-icon-gap);
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-socials a:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.footer-socials svg {
    width: var(--footer-icon-size);
    height: var(--footer-icon-size);
    fill: currentColor;
}

/* Language-specific contact blocks - hide by default */
.footer-contact-lang {
    display: none;
}

/* Show only the active language block */
html[lang="pl"] .footer-contact-lang[data-lang="pl"],
html[lang="en"] .footer-contact-lang[data-lang="en"],
html[lang="jp"] .footer-contact-lang[data-lang="jp"],
html[lang="ar"] .footer-contact-lang[data-lang="ar"] {
    display: block;
}

/* Contact heading */
.footer-contact-heading {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Address styling */
.footer-address {
    margin-bottom: 0.5rem;
    font-style: normal;
}

/* Contact links */
.footer-contact a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.footer-contact-item {
    margin-bottom: 0.15rem;
}

/* Copyright section */
.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(229, 225, 12, 0.05);
    margin-top: 0;
}

/* Arabic RTL support */
html[dir="rtl"] .footer-contact {
    text-align: right;
}

html[dir="rtl"] .footer-content {
    flex-direction: row-reverse;
}

/* Mobile responsive footer */
@media (max-width: 768px) {
    .footer {
        padding: var(--footer-mobile-padding-y) var(--footer-mobile-padding-x);
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .footer-logo img {
        width: var(--footer-mobile-logo-size);
    }

    .footer-info {
        align-items: center;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
    }

    html[dir="rtl"] .footer-contact {
        text-align: center;
    }

    html[dir="rtl"] .footer-content {
        flex-direction: column;
    }
}

/* ===================================
   EXAMPLES PAGE
   =================================== */

.examples-hero {
    padding-top: 120px;
    padding-bottom: var(--spacing-lg);
    text-align: center;
    /* REMOVED: background-image: url('../images/sonora-bg2.jpg');
       Global BG.png/BG1.png crossfade handles page background */
    background-color: transparent !important; /* Override .section--cinematic black */
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
}

/* REMOVED: Semi-transparent overlay band - galaxy background now visible directly
.examples-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(229, 225, 12, 0.2) 100%);
    z-index: 0;
}
*/

/* Examples Hero Header - flex layout with robot image */
.examples-hero-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.examples-hero-text {
    text-align: center;
}

.examples-hero-text h1 {
    margin-bottom: var(--spacing-sm);
}

.examples-hero-text p {
    margin: 0;
}

/* =========================================
   EXAMPLES HERO ROBOT - SIZE CONTROL
   =========================================
   MANUAL TUNING: Change --hero-robot-size to resize
   Recommended range: 350px – 550px (desktop)
   Current: 450px desktop, 220px mobile
*/
.examples-hero-robot {
    --hero-robot-size: 450px;  /* ← CHANGE THIS to resize robot */
    width: var(--hero-robot-size);
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
    animation: float 5s ease-in-out infinite;
}

/* Mobile: robot below text */
@media (max-width: 768px) {
    .examples-hero-header {
        flex-direction: column;
        gap: 1.5rem;
    }

    .examples-hero-robot {
        --hero-robot-size: 220px;  /* ← Mobile size (change here) */
        width: var(--hero-robot-size);
        order: -1; /* Robot above text on mobile */
    }
}

.examples-hero .container {
    position: relative;
    z-index: 1;
}

.examples-hero h1 {
    margin-bottom: var(--spacing-sm);
}

.demo-section {
    padding: var(--spacing-lg) 0;
}

/* Demo sections on examples.html: transparent background to show global BG */
.demo-section.section--cinematic {
    background-color: transparent !important;
}

.demo-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.demo-section > .container > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.demo-box {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid rgba(229, 225, 12, 0.1);
}

/* Workflow demo box - compact mode, grows with content
   TWEAKABLE: padding for compactness */
.demo-box--workflow {
    /* No fixed min-height - box grows naturally with content */
}

.demo-box--workflow .demo-controls {
    margin-bottom: 0; /* No gap when steps are collapsed */
}

/* Wrapper handles spacing via padding-top when expanded */
.demo-box--workflow .workflow-steps-wrap {
    padding-top: 0;
    transition: max-height 0.4s ease-out, padding-top 0.3s ease;
}

.demo-box--workflow .workflow-steps-wrap.is-expanded {
    padding-top: var(--spacing-md); /* Add gap above steps when visible */
}

.demo-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.demo-btn {
    background: var(--accent);
    color: var(--color-black);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 50px;
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.demo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(229, 225, 12, 0.3);
}

.demo-btn-reset {
    background: transparent;
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
}

.demo-btn-reset:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Workflow Steps */
.workflow-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid rgba(229, 225, 12, 0.1);
    transition: all var(--transition-medium);
}

.workflow-step.active {
    border-color: var(--accent);
    background: rgba(229, 225, 12, 0.05);
}

.workflow-step.completed {
    opacity: 0.7;
}

.step-status {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.step-content h4 {
    margin-bottom: 0.25rem;
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
}

/* Intent Classification */
.intent-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.intent-input {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    border: 1px solid rgba(229, 225, 12, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 1rem;
    resize: vertical;
}

.intent-input:focus {
    outline: none;
    border-color: var(--accent);
}

.intent-results {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(229, 225, 12, 0.2);
}

.intent-results h4 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    color: var(--accent);
}

.intent-tag {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--accent);
    color: var(--color-black);
    border-radius: 20px;
    font-weight: 600;
}

.entities-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.entity-badge {
    padding: 0.5rem 1rem;
    background: rgba(229, 225, 12, 0.2);
    border: 1px solid var(--accent);
    border-radius: 20px;
    font-size: 0.9rem;
}

.suggested-action {
    padding: var(--spacing-sm);
    background: rgba(229, 225, 12, 0.05);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

/* Call Summary */
.transcript-box {
    background: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
}

.transcript-box p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.8;
}

.transcript-box strong {
    color: var(--accent);
}

.summary-results {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.summary-card {
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}

.summary-card h4 {
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
}

.summary-card ul {
    list-style-position: inside;
    color: var(--text-secondary);
}

.summary-card li {
    margin-bottom: 0.5rem;
}

.back-home {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 968px) {
    :root {
        --font-size-h1: 3rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.5rem;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
        border-bottom: 1px solid rgba(229, 225, 12, 0.1);
        transform: translateY(-100%);
        opacity: 0;
        transition: all var(--transition-medium);
        pointer-events: none;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-toggle {
        display: flex;
    }

    .steps {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .comparison-item {
        flex-direction: column;
        text-align: center;
    }

    .comparison-competitor {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .nav-container {
        /* Maintain vertical padding for icon breathing room on mobile */
        padding: 1.125rem 1rem;
    }

    /* Workflow steps - mobile responsive */
    .workflow-step {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .step-status {
        font-size: 1.25rem;
        min-width: 32px;
    }

    .demo-step__wrapper {
        gap: 0.5rem;
    }

    .demo-step__icon {
        --step-icon-size: 48px;  /* ← Mobile icon size (change here) */
    }

    .demo-step__content h4 {
        font-size: 0.95rem;
    }

    .demo-step__content p {
        font-size: 0.85rem;
    }

    .workflow-processing {
        font-size: 0.8rem;
        padding: 0.75rem;
    }
}

/* ===================================
   ANIMATIONS
   =================================== */

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

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ===================================
   ACCESSIBILITY
   =================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===================================
   CONTACT MODAL
   =================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium), visibility var(--transition-medium);
}

.modal-overlay:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.modal-container {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid rgba(229, 225, 12, 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--transition-medium);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-overlay:not([hidden]) .modal-container {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(229, 225, 12, 0.1);
}

.modal-header h2 {
    font-size: var(--font-size-h3);
    margin: 0;
    color: var(--accent);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--accent);
    background: rgba(229, 225, 12, 0.1);
}

.modal-form {
    padding: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.optional-label {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-primary);
    border: 1px solid rgba(229, 225, 12, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229, 225, 12, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input.error,
.form-group textarea.error {
    border-color: #e74c3c;
}

.form-error {
    display: block;
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    min-height: 1.2em;
}

.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding-top: var(--spacing-sm);
}

.form-actions .btn {
    padding: 0.875rem 2rem;
}

/* Form Success State */
.form-success {
    padding: var(--spacing-lg);
    text-align: center;
}

.form-success[hidden] {
    display: none;
}

.success-icon {
    color: var(--accent);
    margin-bottom: var(--spacing-md);
}

.success-icon svg {
    width: 64px;
    height: 64px;
}

.form-success h3 {
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
}

.form-success p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Modal RTL Support */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-group label {
    text-align: right;
}

[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea {
    text-align: right;
}

[dir="rtl"] .form-group input[type="email"] {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .form-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-error {
    text-align: right;
}

[dir="rtl"] .optional-label {
    margin-right: 0.25rem;
}

/* Body scroll lock */
body.modal-open {
    overflow: hidden;
}

/* Modal responsive */
@media (max-width: 640px) {
    .modal-container {
        max-height: 95vh;
        margin: var(--spacing-sm);
    }

    .modal-header,
    .modal-form,
    .form-success {
        padding: var(--spacing-sm);
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    [dir="rtl"] .form-actions {
        flex-direction: column;
    }
}

/* ===================================
   ROBOT GUIDE - PROMINENT SCROLL COMPANION
   ===================================

   HOW TO CUSTOMIZE:
   - Size: Change --robot-size below (default 200px)
   - Position: Adjust bottom/right in .robot-buddy
   - Brightness: Modify filter in dark/light theme sections
   - Transition speed: Change --robot-transition (default 0.6s)

   The robot images are defined in js/main.js in the
   ROBOT_CONFIG object. See initRobotSwap() function.
   =================================== */

:root {
    --robot-size: 200px;
    --robot-transition: 0.6s;
    /* =========================================
       ROBOT SCALE CONTROL
       Change this value to resize the robot:
       1.0 = original (200px)
       1.5 = 150% (300px equivalent)
       2.0 = 200% (400px equivalent)
       ========================================= */
    --robot-scale: 2;
}

.robot-buddy {
    position: fixed;
    /* Positioned higher - as a prominent guide, not corner decoration */
    bottom: 25vh;
    right: 6vw;
    width: var(--robot-size);
    height: var(--robot-size);
    z-index: 500;
    pointer-events: none;
    /* Scale from bottom-right to keep position stable */
    transform-origin: bottom right;
    transform: scale(var(--robot-scale));
}

.robot-buddy__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--robot-transition) ease-in-out,
                transform var(--robot-transition) ease-in-out;
    /* Strong shadow for prominence */
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.robot-buddy__img--active {
    opacity: 1;
}

/* Subtle scale on change for emphasis */
.robot-buddy__img--active {
    transform: scale(1);
}

.robot-buddy__img:not(.robot-buddy__img--active) {
    transform: scale(0.95);
}

/* Dark theme - bright and visible */
.robot-buddy__img {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 40px rgba(229, 225, 12, 0.15))
            brightness(1.1);
}

/* Light theme - strong contrast */
body.light-theme .robot-buddy__img {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 20px rgba(0, 0, 0, 0.1))
            brightness(0.95)
            contrast(1.1);
}

/* Gentle floating animation - includes scale to preserve sizing */
.robot-buddy {
    animation: robotFloat 5s ease-in-out infinite;
}

@keyframes robotFloat {
    0%, 100% {
        transform: scale(var(--robot-scale)) translateY(0) rotate(0deg);
    }
    25% {
        transform: scale(var(--robot-scale)) translateY(-12px) rotate(1deg);
    }
    75% {
        transform: scale(var(--robot-scale)) translateY(-6px) rotate(-1deg);
    }
}

/* Responsive - tablets */
@media (max-width: 1200px) {
    :root {
        --robot-size: 160px;
    }

    .robot-buddy {
        right: 4vw;
        bottom: 20vh;
    }
}

/* Responsive - smaller tablets */
@media (max-width: 968px) {
    :root {
        --robot-size: 130px;
    }

    .robot-buddy {
        right: 3vw;
        bottom: 15vh;
    }
}

/* Responsive - mobile: smaller but still visible */
@media (max-width: 640px) {
    :root {
        --robot-size: 100px;
    }

    .robot-buddy {
        right: 2vw;
        bottom: 12vh;
    }
}

/* Hide robot when modal is open */
body.modal-open .robot-buddy {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ===================================
   USE CASES PAGE - FULL-SCREEN SLIDES
   ===================================
   Wheel-navigated use cases with glassmorphism cards.
   No native scroll - JS handles slide transitions.

   CONFIGURATION:
   - Animation speed: Change transition duration in .use-case-slide
   - Card opacity: Change rgba() values in .use-case-card
   - Blur intensity: Change backdrop-filter blur value
*/

/* Page-level styles - disable scroll */
.use-cases-page {
    overflow: hidden;
    height: 100vh;
}

.use-cases-page .navbar {
    background-color: rgba(0, 0, 0, 0.8);
}

body.light-theme.use-cases-page .navbar {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Main container */
.use-cases-main {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Individual slides - full screen */
.use-case-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 2rem 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
    z-index: 1;
}

/* Active slide */
.use-case-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 10;
}

/* Leaving animations */
.use-case-slide.is-leaving-up {
    opacity: 0;
    transform: translateY(-50px);
    z-index: 5;
}

.use-case-slide.is-leaving-down {
    opacity: 0;
    transform: translateY(50px);
    z-index: 5;
}

/* Entering animations (initial state before active) */
.use-case-slide.is-entering-from-below {
    transform: translateY(50px);
}

.use-case-slide.is-entering-from-above {
    transform: translateY(-50px);
}

/* ===================================
   USE CASE CARD - GLASSMORPHISM
   =================================== */
.use-case-card {
    --card-bg-dark: rgba(0, 0, 0, 0.40);
    --card-bg-light: rgba(0, 0, 0, 0.25);
    --card-border: rgba(229, 225, 12, 0.20);
    --card-max-width: 700px;

    position: relative;
    max-width: var(--card-max-width);
    width: 100%;
    padding: 3rem;
    background: var(--card-bg-dark);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
}

body.light-theme .use-case-card {
    background: var(--card-bg-light);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Industry tag */
.use-case-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    background: rgba(229, 225, 12, 0.1);
    border: 1px solid rgba(229, 225, 12, 0.3);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

/* Title */
.use-case-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.3;
}

body.light-theme .use-case-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Description */
.use-case-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

body.light-theme .use-case-description {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Icon */
.use-case-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    color: var(--accent);
    opacity: 0.7;
}

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

/* ===================================
   NAVIGATION DOTS
   =================================== */
.use-case-nav {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
}

.use-case-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.use-case-dot:hover {
    border-color: var(--accent);
    transform: scale(1.2);
}

.use-case-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.3);
}

body.light-theme .use-case-dot {
    border-color: rgba(0, 0, 0, 0.3);
}

body.light-theme .use-case-dot.active {
    border-color: var(--accent);
}

/* ===================================
   SCROLL HINT
   =================================== */
.use-case-scroll-hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    z-index: 100;
    transition: opacity 0.5s ease;
    animation: scrollHintBounce 2s ease-in-out infinite;
}

.use-case-scroll-hint svg {
    width: 24px;
    height: 24px;
}

.use-case-scroll-hint.is-fading {
    opacity: 0.3;
}

.use-case-scroll-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes scrollHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

body.light-theme .use-case-scroll-hint {
    color: rgba(255, 255, 255, 0.7);
}

/* ===================================
   USE CASES FOOTER
   =================================== */
.use-cases-footer {
    display: none; /* Hidden on use-cases page */
}

/* ===================================
   USE CASES RESPONSIVE
   =================================== */
@media (max-width: 768px) {
    .use-case-slide {
        padding: 90px 1rem 1rem;
    }

    .use-case-card {
        padding: 2rem 1.5rem;
    }

    .use-case-title {
        font-size: 1.5rem;
    }

    .use-case-description {
        font-size: 1rem;
    }

    .use-case-nav {
        right: 1rem;
        gap: 10px;
    }

    .use-case-dot {
        width: 10px;
        height: 10px;
    }

    .use-case-scroll-hint {
        bottom: 1.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .use-case-card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .use-case-tag {
        font-size: 0.65rem;
        padding: 0.3rem 0.75rem;
    }

    .use-case-icon {
        width: 36px;
        height: 36px;
    }
}

/* ===================================
   TEAM CAROUSEL - CENTER FOCUSED
   =================================== */

/*
   CUSTOMIZATION GUIDE:
   --team-card-size: Center image size (default: 280px)
   --team-blur-strength: Side slide blur (default: 6px)
   --team-side-opacity: Side slide opacity (default: 0.65)
   --team-side-scale: Side slide scale (default: 0.92)
   --team-transition-speed: Animation duration (default: 0.4s)
*/

.team-carousel {
    --team-card-size: 280px;
    --team-blur-strength: 6px;
    --team-side-opacity: 0.65;
    --team-side-scale: 0.92;
    --team-transition-speed: 0.4s;

    position: relative;
    width: 100%;
    max-width: 900px;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md) 0;
    /* No overflow:hidden - let galaxy background show through */
}

.team-carousel__track {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: calc(var(--team-card-size) + 120px);
}

.team-carousel__slide {
    position: absolute;
    transition: all var(--team-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity, filter;
}

/* Center slide - active, crisp, floating */
.team-carousel__slide[data-position="center"] {
    z-index: 10;
    transform: translateX(-50%) scale(1);
    left: 50%;
    opacity: 1;
    filter: none;
}

/* Left slide - blur + opacity only, no darkening */
.team-carousel__slide[data-position="left"] {
    z-index: 5;
    transform: translateX(-50%) scale(var(--team-side-scale));
    left: 15%;
    opacity: var(--team-side-opacity);
    filter: blur(var(--team-blur-strength));
}

/* Right slide - blur + opacity only, no darkening */
.team-carousel__slide[data-position="right"] {
    z-index: 5;
    transform: translateX(-50%) scale(var(--team-side-scale));
    left: 85%;
    opacity: var(--team-side-opacity);
    filter: blur(var(--team-blur-strength));
}

/* Hidden slides - smooth exit */
.team-carousel__slide[data-position="hidden-left"] {
    z-index: 1;
    transform: translateX(-50%) scale(calc(var(--team-side-scale) - 0.1));
    left: -5%;
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
}

.team-carousel__slide[data-position="hidden-right"] {
    z-index: 1;
    transform: translateX(-50%) scale(calc(var(--team-side-scale) - 0.1));
    left: 105%;
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
}

/* Card styling */
.team-carousel__card {
    width: var(--team-card-size);
    background: var(--bg-secondary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(229, 225, 12, 0.05);
    border: 1px solid rgba(229, 225, 12, 0.12);
    transition: box-shadow var(--team-transition-speed) ease,
                border-color var(--team-transition-speed) ease;
}

/* Center card - elevated with stronger presence */
.team-carousel__slide[data-position="center"] .team-carousel__card {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45),
                0 0 50px rgba(229, 225, 12, 0.12);
    border-color: rgba(229, 225, 12, 0.2);
}

/*
   PORTRAIT POSITIONING:
   --portrait-y: vertical position (0% = top, 50% = center, 100% = bottom)
   Default is 20% (shows more of the head/face area)
   Override per-person using: .team-carousel__slide[data-person="name"] { --portrait-y: X%; }
*/
.team-carousel__slide {
    --portrait-y: 20%;
}

.team-carousel__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% var(--portrait-y);
    display: block;
}

/* Per-person portrait position overrides */
.team-carousel__slide[data-person="kinga"] {
    --portrait-y: 15%;
}

.team-carousel__caption {
    padding: 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.team-carousel__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.team-carousel__role {
    font-size: 0.85rem;
    color: var(--accent);
    margin: 0;
    font-weight: 500;
}

/* Navigation arrows */
.team-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(229, 225, 12, 0.3);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.team-carousel__nav:hover {
    background: rgba(229, 225, 12, 0.2);
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.1);
}

.team-carousel__nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.team-carousel__nav--prev {
    left: 0;
}

.team-carousel__nav--next {
    right: 0;
}

/* Dots navigation */
.team-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--spacing-md);
}

.team-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.team-carousel__dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.team-carousel__dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

.team-carousel__dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Team section text alignment */
.team .team-text {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.team .team-intro {
    max-width: 600px;
    margin: var(--spacing-sm) auto 0;
}

/* Light theme adjustments */
body.light-theme .team-carousel__card {
    background: var(--bg-secondary);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1),
                0 0 25px rgba(229, 225, 12, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .team-carousel__slide[data-position="center"] .team-carousel__card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15),
                0 0 40px rgba(229, 225, 12, 0.08);
    border-color: rgba(229, 225, 12, 0.25);
}

body.light-theme .team-carousel__nav {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

body.light-theme .team-carousel__dot {
    background: rgba(0, 0, 0, 0.2);
}

body.light-theme .team-carousel__dot:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .team-carousel {
        --team-card-size: 240px;
        --team-side-opacity: 0.55;
        --team-side-scale: 0.88;
    }

    .team-carousel__slide[data-position="left"] {
        left: 8%;
    }

    .team-carousel__slide[data-position="right"] {
        left: 92%;
    }

    .team-carousel__nav {
        width: 40px;
        height: 40px;
    }
}

/* Responsive - Mobile: hide side slides, show only center */
@media (max-width: 576px) {
    .team-carousel {
        --team-card-size: 260px;
    }

    .team-carousel__track {
        height: calc(var(--team-card-size) + 100px);
    }

    .team-carousel__slide[data-position="left"],
    .team-carousel__slide[data-position="right"] {
        opacity: 0;
        pointer-events: none;
    }

    .team-carousel__nav--prev {
        left: 0.5rem;
    }

    .team-carousel__nav--next {
        right: 0.5rem;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .navbar,
    .nav-controls,
    .hero-cta,
    .demo-controls {
        display: none;
    }
.hero-description {
    color: #fff !important;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;
}
.team-text h2 {
    text-align: center;
}

/* =========================
   COOKIE BANNER
   ========================= */

/* =========================
   COOKIE MODAL (CENTER)
   ========================= */

.cookie-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-modal {
    background: rgba(0, 0, 0, 0.95);
    color: #ffffff;

    max-width: 420px;
    width: calc(100% - 2rem);
    padding: 2rem;

    border-radius: 18px;
    border: 1px solid rgba(229, 225, 12, 0.25);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(229, 225, 12, 0.15);

    text-align: center;

    animation: cookiePop 0.35s ease-out;
}

.cookie-modal h3 {
    margin-bottom: 0.75rem;
    color: var(--accent);
}

.cookie-modal p {
    font-size: 0.95rem;
    color: #d9d9d9;
    margin-bottom: 1.5rem;
}

.cookie-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Animation */
@keyframes cookiePop {
    from {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .cookie-modal {
        padding: 1.5rem;
    }
}