/* 
  Enextia 2026 Design System 
  Philosophy: "Systemic Clarity"
  Trends: Glassmorphism 2.0, Bento Grids, Dark Mode, Neon Accents
*/

:root {
    /* --- Colors --- */
    --bg-deep: #0A0A0F;
    /* Deepest black for background */
    --bg-card: rgba(255, 255, 255, 0.03);
    /* Glass card background */
    --bg-card-hover: rgba(255, 255, 255, 0.06);

    --accent-primary: #4F9CF9;
    /* Bright Blue */
    --accent-secondary: #9747FF;
    /* Purple */
    --accent-cyan: #4F9CF9;
    /* Mapping cyan to blue for consistency or keeping as secondary accent? Let's keep consistency with new scheme */

    --accent-glow: rgba(79, 156, 249, 0.5);

    --text-main: #FFFFFF;
    /* White */
    --text-muted: #B8B8C8;
    /* Light Gray */
    --text-dark: #0F172A;

    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-hover: rgba(255, 255, 255, 0.15);

    /* --- Fonts --- */
    --font-heading: 'Instrument Sans', sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
    --font-body: 'Inter', sans-serif;

    /* --- Spacing & Radius --- */
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 128px;
}

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

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    color: #fff;
}



a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* --- Utilities --- */
.container {
    max-width: 1400px;
    /* Increased from standard for wider SaaS look */
    margin: 0 auto;
    padding: 0 var(--space-md);
}

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

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

.mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Glassmorphism 2.0 Card --- */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glass-hover);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Spotlight Effect (simplified via CSS) */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.1), transparent 40%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 100px;
    font-weight: 500;
    font-family: var(--font-heading);
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
    box-shadow: 0 0 20px -5px var(--accent-glow);
}

.btn--primary:hover {
    box-shadow: 0 0 30px -5px var(--accent-glow);
    transform: scale(1.05);
}

.btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
}

.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Ripple effect for buttons */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Bento Grid Layouts --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 12-column system */
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.bento-item {
    grid-column: span 4;
    /* Default 3 cards per row */
}

.bento-item--large {
    grid-column: span 6;
    /* 2 cards per row */
}

.bento-item--full {
    grid-column: span 12;
}

@media (max-width: 900px) {

    .bento-item,
    .bento-item--large {
        grid-column: span 6;
    }
}

@media (max-width: 600px) {

    .bento-item,
    .bento-item--large {
        grid-column: span 12;
    }
}

/* --- Header --- */
.header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    z-index: 1000;
    background: rgba(5, 5, 10, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}



.nav {
    display: flex;
    gap: 24px;
}

.nav__link {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.7;
}

.nav__link:hover {
    opacity: 1;
    color: var(--accent-cyan);
}

/* --- Fat Footer --- */
.footer-new {
    background: #050508;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 100px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 64px;
    margin-bottom: 64px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-brand-tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 280px;
}

.footer-socials {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-3px);
    border-color: var(--accent-cyan);
}

.footer-h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-item a {
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.footer-link-item a:hover {
    color: #fff;
    padding-left: 4px;
}

.hiring-badge {
    font-size: 0.7rem;
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    padding: 2px 8px;
    border-radius: 100px;
    margin-left: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.contact-info-item i {
    color: var(--accent-cyan);
    margin-top: 4px;
}

.contact-info-item a:hover {
    color: #fff;
}

/* Bottom Bar */
.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal-copy {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.legal-links a:hover {
    color: #fff;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10B981;
    animation: pulse-status 2s infinite;
}

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

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }

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

.status-text {
    font-size: 0.75rem;
    color: #10B981;
    font-weight: 500;
}

/* Mobile Footer Resp */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-bottom-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }
}

/* --- Mobile Menu & Hamburger --- */
.hamburger-btn {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 4px;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Hamburger Active State */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(5, 5, 10, 0.95);
    backdrop-filter: blur(20px);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}

.mobile-nav__link {
    font-size: 2rem;
    font-family: var(--font-heading);
    font-weight: 500;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active .mobile-nav__link {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger mobile links */
.mobile-menu-overlay.active .mobile-nav__link:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.active .mobile-nav__link:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.active .mobile-nav__link:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu-overlay.active .mobile-nav__link:nth-child(4) {
    transition-delay: 0.4s;
}

.mobile-menu-overlay.active .mobile-nav__link:nth-child(5) {
    transition-delay: 0.5s;
}


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

    .hamburger-btn {
        display: flex;
    }
}

/* Digital Mode Active State (Neon Plasma) */
.mode-digital .toggle-slider {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    /* Neon Purple/Blue */
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(139, 92, 246, 0.3);
    border: 1px solid #A78BFA;
}

/* Production Mode Active State (Precision Engineering) */
.mode-production .toggle-slider {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    /* Engineering Blue */
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(59, 130, 246, 0.3);
    border: 1px solid #60A5FA;
}

.holo-schematic {
    color: #3B82F6;
}

/* Energy Conduit Effect (Digital) */
.mode-digital .toggle-switch-container::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Bottom of toggle */
    left: 77%;
    /* Approximate center of right side */
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, #8B5CF6, transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 8px #8B5CF6;
    animation: conduitFlow 2s infinite ease-out;
    pointer-events: none;
    z-index: 0;
}

/* Energy Conduit Effect (Production) */
.mode-production .toggle-switch-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 23%;
    /* Approximate center of left side */
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, #3B82F6, transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 8px #3B82F6;
    animation: conduitFlow 2s infinite ease-out;
    pointer-events: none;
    z-index: 0;
}

@keyframes conduitFlow {
    0% {
        height: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        height: 100px;
        opacity: 0;
    }
}

/* Enhanced Lighting on Text */
.ticket-title {
    transition: text-shadow 0.3s ease;
}

/* --- Hero Section --- */
.hero {
    /* 
       User: "Jeszcze zmniejsz... dalej jest duża przepaść"
       Calculations:
       Header Top: 20px
       Header Height: ~50px
       Header Bottom: ~70px
       FINAL FIX FOR VERTICAL GAP:
       1. padding-top: 100px. (Safe clearance for fixed header ~80px).
       2. align-items: flex-start. (Forces content to top).
       3. height/min-height: auto (on mobile) or 100vh.
    */
    padding-top: 170px;
    /* Safe space for header */
    padding-bottom: 60px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    /* FORCE TOP ALIGNMENT */
    position: relative;
    overflow: hidden;
}

/* Highlight Node Style (Automatyzacja - Purple Glow) */
.glass-plate--highlight {
    border-color: rgba(151, 71, 255, 0.8) !important;
    /* using --accent-secondary */
    background: rgba(151, 71, 255, 0.15) !important;
    box-shadow: 0 0 35px rgba(151, 71, 255, 0.4) !important;
    transform: scale(1.15) translateZ(20px);
    /* Pop out more */
}

.glass-plate--highlight .plate-label {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(151, 71, 255, 0.5);
}

/* Background Gradients */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(5, 5, 10, 0) 70%);
    filter: blur(80px);
    z-index: -1;
    animation: pulse 10s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.hero__content {
    max-width: 800px;
    z-index: 1;
    margin-top: 0;
    /* Ensure text starts at the very top of the grid cell */
}

/* Main Container for Right Visual */
.hero__visual-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    /* removed fixed height constraint */
    perspective: 2000px;
    overflow: visible;
}

.infinity-loop-container {
    position: relative;
    width: 100%;
    /* 
       User: "Ucina mi animację... musi być wyżej"
       Fix: Reduced min-height from 700px to 500px.
       Since this container centers the loop, shrinking it pulls the loop UP towards the top of the grid.
    */
    height: 500px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    margin-top: 0;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 100px;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin-bottom: 24px;
}

/* --- Navigation --- */
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Increased from default */
}

.nav__link {
    font-size: 0.95rem;
    /* ~text-sm/base */
    font-weight: 500;
    letter-spacing: 0.03em;
    /* tracking-wide */
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav__link:hover {
    color: #fff;
}

/* --- Hero Typography & Layout --- */
/* --- Hero Typography & Layout --- */
.hero__title {
    /* RADICAL SCALE: 8xl equivalent */
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 0.95;
    /* Ultra tight leading */
    font-weight: 800;
    /* Extra bold */
    margin-bottom: 32px;
    margin-top: 0;
    color: #fff;
    letter-spacing: -0.03em;
}

.hero__subtitle {
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;
    /* More breathing room */
    max-width: 600px;
    font-weight: 400;
}

.hero__actions {
    display: flex;
    gap: 16px;
    width: 100%;
}

/* Main CTA Button Styling - DOMINANT */
.hero-main-cta {
    width: 100%;
    max-width: 600px;
    /* MATCHING SUBTITLE WIDTH */
    min-width: unset;
    justify-content: center;
    border-radius: 12px;
    padding: 24px 32px;
    /* High vertical padding */
    font-size: 1.25rem;
    font-weight: 700;
    /* Bolder */
    box-shadow: 0 4px 20px rgba(79, 156, 249, 0.3);
    text-transform: none;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .hero-main-cta {
        width: 100%;
        min-width: unset;
        padding: 16px 24px;
    }

    .hero__title {
        font-size: 3rem;
        /* Mobile adjustment */
    }
}

/* --- KPI Bar (Footer Style - Subtle) --- */
.kpi-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 48px;
    opacity: 0.9;
    /* Slightly subdued */
}

.kpi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Tighter gap */
}

.kpi-icon {
    width: 20px;
    /* Reduced from 28px back to 20px */
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
}

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

.kpi-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-number {
    font-size: 1.2rem;
    /* Reduced from 1.5rem to be "text-xl/2xl" scale relative to base */
    font-weight: 700;
    color: #fff;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
    line-height: 1;
}

.kpi-label {
    font-size: 0.85rem;
    /* Reduced to small */
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    line-height: 1.2;
}

.kpi-separator {
    width: 1px;
    height: 32px;
    /* Slightly shorter */
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .kpi-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .kpi-separator {
        display: none;
    }
}


/* --- Section Headers --- */
.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.section-badge {
    color: var(--accent-secondary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 16px;
}

/* --- Specific Components --- */
/* Case Study Card */
.case-study-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.case-study-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 12px;
}

.case-study-title {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-glass);
}

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

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
}

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

/* Process Steps */
.process-step {
    position: relative;
    border-left: 2px solid var(--border-glass);
    padding-left: 32px;
    margin-left: 20px;
    padding-bottom: 40px;
}

.process-step::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-deep);
    border: 2px solid var(--accent-primary);
}

.process-step:last-child {
    border-left: none;
}

/* Footer */
.footer {
    border-top: 1px solid var(--border-glass);
    padding: 80px 0;
    margin-top: 100px;
    background: rgba(0, 0, 0, 0.2);
}

/* --- Animation System --- */

/* Easing curves from Web Animations Designer skill */
:root {
    --ease-fluid: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 1. ENTRANCE ANIMATIONS */

/* Fade in + Slide Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* Fade in + Slide from Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

/* Fade in + Slide from Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Scale + Fade */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Glow pulse for accent elements */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px -5px var(--accent-glow);
    }

    50% {
        box-shadow: 0 0 40px 0px var(--accent-glow);
    }
}

/* 2. SCROLL-TRIGGERED ANIMATIONS */

/* Elements waiting to be revealed */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-fluid);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Different animation types */
[data-animate="fade"] {
    opacity: 0;
    transform: none;
}

[data-animate="fade"].is-visible {
    opacity: 1;
}

[data-animate="slide-left"] {
    opacity: 0;
    transform: translateX(-50px);
}

[data-animate="slide-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

[data-animate="slide-right"] {
    opacity: 0;
    transform: translateX(50px);
}

[data-animate="slide-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

[data-animate="scale"] {
    opacity: 0;
    transform: scale(0.85);
}

[data-animate="scale"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* 3. HERO ANIMATIONS - Auto-play on load */

.hero__badge {
    animation: fadeInUp 0.8s var(--ease-fluid) 0.2s backwards;
}

.hero__title {
    animation: fadeInUp 1s var(--ease-fluid) 0.4s backwards;
}

.hero__subtitle {
    animation: fadeInUp 1s var(--ease-fluid) 0.6s backwards;
}

.hero__actions {
    animation: fadeInUp 1s var(--ease-fluid) 0.8s backwards;
}

/* Stagger hero buttons */
.hero__actions .btn:nth-child(1) {
    animation: scaleIn 0.6s var(--ease-bouncy) 1s backwards;
}

.hero__actions .btn:nth-child(2) {
    animation: scaleIn 0.6s var(--ease-bouncy) 1.15s backwards;
}

/* 4. ENHANCED BUTTON MICRO-INTERACTIONS */

.btn {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: translateY(2px);
    transition-duration: 0.1s;
}

.btn--primary {
    animation: glowPulse 3s infinite;
}

/* 5. ENHANCED GLASS CARD ANIMATIONS */

.glass-card {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.glass-card:hover {
    animation: none;
    /* Stop pulse on hover */
}

/* Bento cards stagger on scroll */
.bento-item:nth-child(1) {
    transition-delay: 0.1s;
}

.bento-item:nth-child(2) {
    transition-delay: 0.2s;
}

.bento-item:nth-child(3) {
    transition-delay: 0.3s;
}

.bento-item:nth-child(4) {
    transition-delay: 0.4s;
}

.bento-item:nth-child(5) {
    transition-delay: 0.5s;
}

.bento-item:nth-child(6) {
    transition-delay: 0.6s;
}

/* 6. HEADER SCROLL EFFECT */

.header {
    transition: all 0.4s var(--ease-fluid);
}

.header.scrolled {
    background: rgba(5, 5, 10, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* 7. FLOATING EFFECT FOR HERO SVG */

.hero-svg {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(5deg);
    }
}

/* 8. STAT COUNTER ANIMATION */

.stat-value {
    animation: countUp 1.5s var(--ease-fluid) forwards;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }

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

/* 9. PROCESS STEP PROGRESSIVE REVEAL */

.process-step {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s var(--ease-fluid);
}

.process-step.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.process-step:nth-child(1) {
    transition-delay: 0.1s;
}

.process-step:nth-child(2) {
    transition-delay: 0.3s;
}

.process-step:nth-child(3) {
    transition-delay: 0.5s;
}

/* 10. LOGO STAGGER */

.logo-item {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.6s var(--ease-fluid) forwards;
}

.logo-item:nth-child(1) {
    animation-delay: 0.2s;
}

.logo-item:nth-child(2) {
    animation-delay: 0.3s;
}

.logo-item:nth-child(3) {
    animation-delay: 0.4s;
}

.logo-item:nth-child(4) {
    animation-delay: 0.5s;
}

/* 11. ACCESSIBILITY - Respect prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {

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

    .hero-svg {
        animation: none;
    }
}

/* --- Social Proof / Marquee (Imported) --- */
.social-proof {
    text-align: center;
    overflow: hidden;
    /* Prevent horizontal scrollbar on body */
    position: relative;
    padding: 2rem 0;
}

.social-proof__title {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logo-bar {
    overflow: hidden;
    display: flex;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    user-select: none;
}

.marquee-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    animation: scroll 40s linear infinite;
    padding: 0;
    /* Removed padding to avoid gaps */
    min-width: 100%;
    /* Ensure it takes full width */
    flex-shrink: 0;
}

.logo-bar__item {
    height: 30px;
    opacity: 0.6;
    transition: all 0.3s;
}

.logo-bar__item:hover {
    opacity: 1;
    filter: brightness(1.2);
}

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

    100% {
        transform: translateX(-100%);
    }
}

/* 12. PERFORMANCE OPTIMIZATIONS */

/* Force GPU acceleration on animated elements */
.hero__content,
.glass-card,
.btn,
[data-animate] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* --- Split Hero Layout --- */
.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* More space for text, pushing visual right */
    gap: clamp(4rem, 8vw, 8rem);
    /* Generous responsive gap */
    align-items: center;
    position: relative;
    z-index: 10;
}

.hero__content-left {
    text-align: left;
    max-width: 800px;
    /* Much wider container explicitly */
}

/* Header Adjustments to match reference */
.header__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Specific Badge Style from Reference */
.hero__badge {
    background: rgba(79, 156, 249, 0.1);
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid rgba(79, 156, 249, 0.2);
    margin-bottom: 20px;
    display: inline-block;
    padding: 8px 18px;
    /* Slightly bigger padding */
    border-radius: 100px;
    /* Fully rounded pill */
    font-size: 0.85rem;
}

.hero__title {
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    /* Responsive typography */
    line-height: 1.15;
    /* More breathing room */
    letter-spacing: -0.02em;
    /* Tight tracking for modern feel */
    margin-bottom: 24px;
    text-align: left;
}

.hero__subtitle {
    text-align: left;
    margin: 0 0 48px 0;
    font-size: 1.25rem;
    /* Slightly larger readability text */
    line-height: 1.7;
    /* "Relaxed" reading experience */
    max-width: 90%;
    /* prevent full width stretch but wider than before */
    color: rgba(255, 255, 255, 0.85);
}

.hero__visual-right {
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pushing it slightly to the right visually if needed, grid handles it mostly */
}

@media (max-width: 1000px) {
    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
        /* Add spacing between content and visual */
        gap: 60px;
    }

    .hero__content-left {
        margin: 0 auto;
        /* Ensure content is above visual */
        order: 1;
    }

    .hero__visual-right {
        /* Visual below content */
        order: 2;
        display: flex;
        justify-content: center;
        /* Ensure visual container has height */
        height: 500px;
        width: 100%;
    }

    .hero__title,
    .hero__subtitle {
        text-align: center;
    }

    .nav {
        display: none;
        /* Hide nav on mobile for now (hamburger needed later) */
    }
}

/* --- Card Components --- */
/* --- Card Components (Refined) --- */
.card-icon-box {
    /* Removed container box for cleaner look */
    width: auto;
    height: auto;
    background: none;
    border: none;
    display: inline-block;
    margin-bottom: 24px;

    font-size: 3rem;
    /* Larger icons */
    line-height: 1;

    /* Gradient Icon Color */
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: transform 0.3s ease;
}

.glass-card:hover .card-icon-box {
    /* Remove the old background/border change */
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    transform: scale(1.1) rotate(-5deg);
    /* Dynamic hover movement */
}

/* Enhanced Glass Card for Problems */
#problemy .glass-card {
    background: rgba(255, 255, 255, 0.02);
    /* Very subtle fill */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
}

#problemy .glass-card:hover {
    border-color: rgba(151, 71, 255, 0.3);
    /* Purple hint on hover */
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4),
        0 0 20px -5px rgba(151, 71, 255, 0.1);
    /* Inner/Outer purple glow */
}

/* Typography Refinements */
.section-title {
    font-weight: 500;
    /* Lighter headline */
}

#problemy h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

#problemy p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    /* Higher contrast than text-muted */
    line-height: 1.6;
}

/* Increase Grid Gap */
.bento-grid {
    gap: 2rem;
    /* Increased space */
}

/* Visual Glow for Hero Right */
.hero__visual-right .glass-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, var(--accent-primary), transparent 70%);
    opacity: 0.15;
    filter: blur(50px);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* --- System OS Blueprint Section (Approach) --- */
.system-os-wrapper {
    background-color: #0A0A0B;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

.system-os-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 900px) {
    .system-os-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .system-module {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        /* Vertical Separator */
        padding: 0 40px;
        /* Breathing room */
    }

    .system-module:first-child {
        padding-left: 10px;
    }

    .system-module:last-child {
        border-right: none;
        padding-right: 10px;
    }
}

.system-module {
    padding: 30px;
    position: relative;
    transition: background 0.3s;
}

.system-module:hover {
    background: rgba(255, 255, 255, 0.02);
}

.module-header {
    margin-bottom: 24px;
}

.module-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.system-module:hover .module-icon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.08);
}

.glow-blue {
    color: var(--accent-primary);
    box-shadow: 0 0 20px -5px rgba(79, 156, 249, 0.3);
}

.glow-purple {
    color: var(--accent-secondary);
    box-shadow: 0 0 20px -5px rgba(151, 71, 255, 0.3);
}

.glow-green {
    color: #4CAF50;
    box-shadow: 0 0 20px -5px rgba(76, 175, 80, 0.3);
}

.module-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    opacity: 0.8;
}

.module-title {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 600;
}


/* --- ROI Dashboard (Results Section) --- */
.roi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
}

@media (min-width: 900px) {
    .roi-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.roi-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
}

.roi-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    display: inline-block;
    width: 100%;
}

.roi-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
}

.stat-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 85px;
    /* Ensure labels don't shift baseline */
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-big {
    font-family: var(--font-heading);
    /* Or 'Inter Tight' if imported */
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* --- Enterprise H1 Text (Platinum) --- */
.text-metal-glow {
    background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
    font-weight: 800;
    letter-spacing: -1px;
}

/* --- Enterprise CTA Button (Vivid Electric Ultramarine) --- */
.btn--primary-navy {
    background: radial-gradient(ellipse at top, #5B8DEF 0%, #2563EB 50%, #1E40AF 100%);
    /* Vivid Electric Ultramarine with 3D depth */
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.6),
        0 0 60px rgba(59, 130, 246, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 10;
    width: fit-content;
    transform: translateY(0);
}

.btn--primary-navy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn--primary-navy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s;
}

.btn--primary-navy:hover::before {
    opacity: 1;
}

.btn--primary-navy:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
}

.btn--primary-navy:hover {
    background: radial-gradient(ellipse at top, #6B9EFF 0%, #2E6FFF 50%, #1E40AF 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.7),
        0 0 80px rgba(59, 130, 246, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Spacing fix for micro-copy */
.hero__actions>div {
    gap: 14px !important;
}

/* --- Isometric Engine (Data Transformation Refinery) --- */
.iso-engine-container {
    width: 100%;
    height: 700px;
    /* Even taller for narrative */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1400px;
    position: relative;
    z-index: 5;
}

.iso-scene {
    position: relative;
    width: 450px;
    /* 50% larger than original */
    height: 450px;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
    animation: gentleFloat 8s ease-in-out infinite;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: rotateX(60deg) rotateZ(-45deg) translateZ(0px);
    }

    50% {
        transform: rotateX(60deg) rotateZ(-45deg) translateZ(35px);
    }
}

/* Floor Glow - Expanded */
.iso-floor {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, rgba(30, 64, 175, 0.1) 50%, transparent 70%);
    transform: translateZ(-70px);
    filter: blur(60px);
}

/* Processor Core (Glass Refinery) - Larger & More Complex */
.iso-processor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%) translateZ(80px);
    transform-style: preserve-3d;
    animation: processorPulse 3s ease-in-out infinite;
}

@keyframes processorPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) translateZ(80px) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) translateZ(80px) scale(1.08);
    }
}

.processor-glass {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    /* More frosted */
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 50px rgba(37, 99, 235, 0.5),
        inset 0 0 30px rgba(59, 130, 246, 0.3);
    backdrop-filter: blur(8px);
}

.processor-core {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background: radial-gradient(circle, #5B8DEF 0%, #2563EB 50%, #1E40AF 100%);
    box-shadow: 0 0 80px #3B82F6,
        0 0 40px #2563EB,
        inset 0 0 40px rgba(255, 255, 255, 0.4);
    transform: translateZ(60px);
    opacity: 0.95;
    animation: coreGlow 2.5s ease-in-out infinite;
}

@keyframes coreGlow {

    0%,
    100% {
        box-shadow: 0 0 80px #3B82F6, 0 0 40px #2563EB, inset 0 0 40px rgba(255, 255, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 120px #3B82F6, 0 0 60px #2563EB, inset 0 0 60px rgba(255, 255, 255, 0.6);
    }
}

/* The Energy Beam (Pulse) */
.track-pulse {
    stroke: url(#beamGradient);
    stroke-linecap: round;
    fill: none;
    /*
       THE "THREE LINES" EFFECT (Premium Hi-Tech):
       Cycle = 1300px total.
       Dash: 400px (Longer, sweeping beam).
       Gap: 900px.
       Offset matches cycle (-1300) for seamless loop.
    */
    stroke-dasharray: 400 900;
    /* Neon Glow: Strong Cyan Shadow */
    filter: drop-shadow(0 0 10px #06b6d4) drop-shadow(0 0 20px rgba(6, 182, 212, 0.6));
    animation: energyFlow 3s linear infinite;
    opacity: 1;
}

@keyframes energyFlow {
    to {
        stroke-dashoffset: -1300;
        /* Matches Dash+Gap */
    }
}

/* Rotating Ring (Connecting layers) */
.processor-ring {
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    border: 2px solid rgba(91, 141, 239, 0.5);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
    animation: ringRotate 10s linear infinite;
}

.iso-core::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 1px solid rgba(139, 92, 246, 0.5);
    /* Violet */
    border-radius: 50%;
    /* Pulsing Core Border */
    animation: pulseBorder 3s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

@keyframes pulseBorder {

    0%,
    100% {
        opacity: 0.4;
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.1);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 25px rgba(124, 58, 237, 0.5);
        border-color: rgba(139, 92, 246, 0.9);
    }
}

@keyframes ringRotate {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

/* Light Beams (Connecting Input to Core to Output) */
.light-beam {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
    animation: beamPulse 2s ease-in-out infinite;
}

.beam1 {
    top: 30%;
    left: 20%;
    transform: translateZ(40px) rotateX(-30deg);
    animation-delay: 0s;
}

.beam2 {
    top: 30%;
    right: 20%;
    transform: translateZ(40px) rotateX(-30deg);
    animation-delay: 1s;
}

@keyframes beamPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* Raw Cubes (Chaotic Input) - More cubes */
.cube.raw {
    background: linear-gradient(135deg, #52525B 0%, #3F3F46 100%);
    /* Zinc gradient */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 16px;
    height: 16px;
}

/* Animation: Move from Left to Center */
.cube.raw.c1 {
    top: 10%;
    left: -10%;
    animation: moveRaw 4s linear infinite 0s;
}

.cube.raw.c2 {
    top: 25%;
    left: -5%;
    animation: moveRaw 4s linear infinite 0.8s;
}

.cube.raw.c3 {
    top: 15%;
    left: 0%;
    animation: moveRaw 4s linear infinite 1.6s;
}

.cube.raw.c4 {
    top: 30%;
    left: -8%;
    animation: moveRaw 4s linear infinite 2.4s;
}

.cube.raw.c5 {
    top: 20%;
    left: -12%;
    animation: moveRaw 4s linear infinite 3.2s;
}

@keyframes moveRaw {
    0% {
        transform: translate(0, 0) translateZ(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        transform: translate(200px, 100px) translateZ(20px) scale(0.8);
        opacity: 1;
    }

    100% {
        transform: translate(220px, 110px) translateZ(20px) scale(0);
        opacity: 0;
    }
}

/* Processed Cubes (Structured Output) - More cubes forming tower */
.cube.processed {
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    /* Blue gradient */
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.9),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(147, 197, 253, 0.8);
    width: 18px;
    height: 18px;
}

/* Animation: Stack Upwards from Center to form Tower */
.cube.processed.p1 {
    animation: stackUp 5s ease-out infinite 0s;
}

.cube.processed.p2 {
    animation: stackUp 5s ease-out infinite 0.8s;
}

.cube.processed.p3 {
    animation: stackUp 5s ease-out infinite 1.6s;
}

.cube.processed.p4 {
    animation: stackUp 5s ease-out infinite 2.4s;
}

.cube.processed.p5 {
    animation: stackUp 5s ease-out infinite 3.2s;
}

.cube.processed.p6 {
    animation: stackUp 5s ease-out infinite 4s;
}

@keyframes stackUp {
    0% {
        transform: translate(-50%, -50%) translateZ(60px) translateY(0) scale(0);
        opacity: 0;
    }

    15% {
        transform: translate(-50%, -50%) translateZ(60px) translateY(0) scale(1);
        opacity: 1;
    }

    85% {
        transform: translate(-50%, -50%) translateZ(180px) translateY(-120px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translateZ(200px) translateY(-140px) scale(0.8);
        opacity: 0;
    }
}

/* Colors for Stats */
.text-green-gradient {
    background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-purple-gradient {
    background: linear-gradient(135deg, #9747FF 0%, #C490FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-neon-green {
    color: #00FF94;
    text-shadow: 0 0 20px rgba(0, 255, 148, 0.4);
}

.text-cyan {
    color: #06B6D4;
}


/* --- Industries Section (Tabbed Layout) --- */
.industry-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

.industry-tabs {
    position: relative;
    display: inline-flex;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    padding: 6px;
    backdrop-filter: blur(10px);
}

.industry-tab {
    position: relative;
    z-index: 2;
    padding: 12px 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.3s ease;
    font-weight: 500;
}

.industry-tab.active {
    color: #fff;
}

.industry-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.tab-highlight {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: calc(50% - 6px);
    /* Assuming 2 equal tabs */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Production Tab Active */
.industry-tabs.production-active .tab-highlight {
    transform: translateX(0);
    background: linear-gradient(90deg, rgba(255, 140, 0, 0.2), rgba(255, 140, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.3);
    box-shadow: 0 0 20px -5px rgba(255, 140, 0, 0.3);
}

/* Digital Tab Active */
.industry-tabs.digital-active .tab-highlight {
    transform: translateX(100%);
    /* Need exact calc? JS creates dynamic width, but for fixed 2 buttons we can try calc */
    /* Wait, width depends on the button width. Better: JS sets width/left of highlight. 
       But simpler CSS approach: 50% width if buttons are equal. I'll make them equal width or use JS. 
       Let's stick to simple JS toggle class on parent + generic CSS for now, or strict separate classes. */
    background: linear-gradient(90deg, rgba(157, 78, 221, 0.2), rgba(157, 78, 221, 0.1));
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 0 20px -5px rgba(157, 78, 221, 0.3);
}

.industry-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.industry-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
    margin-top: 20px;
}

.industry-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
    flex-grow: 1;
    /* Push benefit to bottom */
}

.card-benefit {
    padding: 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: auto;
    border-left: 3px solid;
}

.production-accent {
    background: rgba(255, 140, 0, 0.05);
    border-color: #FF8C00;
    color: #FFD180;
}

.digital-accent {
    background: rgba(157, 78, 221, 0.05);
    border-color: #9D4EDD;
    color: #E0AAFF;
}

.industry-content {
    animation: fadeScale 0.5s ease forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

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


/* --- Bi-Modal Industries Section --- */
.bi-modal-wrapper {
    position: relative;
    padding: 60px 20px;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bi-modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.bg-production {
    background-color: #121214;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-digital {
    background-color: #05050A;
    background-image: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
}

/* Toggle visibility based on parent mode */
.mode-production .bg-digital {
    opacity: 0;
}

.mode-production .bg-production {
    opacity: 1;
}

.mode-digital .bg-digital {
    opacity: 1;
}

.mode-digital .bg-production {
    opacity: 0;
}

.mode-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
}

.mode-toggle {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 6px;
    display: inline-flex;
    position: relative;
}

.toggle-btn {
    background: transparent;
    border: none;
    padding: 12px 28px;
    color: var(--text-muted);
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s;
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.toggle-btn.active {
    color: #fff;
}

.toggle-slider {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: calc(50% - 6px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s;
    z-index: 1;
}

.mode-digital .toggle-slider {
    transform: translateX(100%);
    background: linear-gradient(90deg, #7C3AED, #2563EB);
    /* Cyber Gradient */
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.mode-production .toggle-slider {
    transform: translateX(0);
    background: #3B82F6;
}

/* --- Enterprise Wizard Modal Styles --- */

/* Modal Overlay - Full Screen */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

/* Large Centered Modal Card */
.modal-glass-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Large centered focus mode */
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10;
}

.modal-close-btn:hover {
    color: #fff;
}

/* Modal Header */
.modal-header {
    text-align: center;
    margin-bottom: 48px;
}

.modal-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5B8DEF;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.modal-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 16px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563EB 0%, #5B8DEF 100%);
    width: 25%;
    /* Will be updated by JS */
    transition: width 0.4s ease;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
}

/* Wizard Steps (Refactored to match bottom definitions) */
/* Old definitions removed to avoid conflicts */

.option-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.option-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(91, 141, 239, 0.4);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
    transform: translateY(-2px);
}

.option-card.selected {
    background: rgba(37, 99, 235, 0.15);
    border-color: #2563EB;
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.4);
}

.option-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    display: block;
}

/* Enterprise Input */
.enterprise-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px 24px;
    color: #fff;
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s;
    text-align: center;
}

.enterprise-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.enterprise-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Form Groups */
.form-group {
    margin-bottom: 24px;
}

.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
}

.form-group input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Wizard Actions (Hidden - Auto-advance) */
.wizard-actions {
    display: none;
    /* Hidden since we auto-advance on selection */
}

/* Success Message */
.modal-content-success {
    text-align: center;
    padding: 40px 0;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-glass-card {
        padding: 32px 24px;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .step-question {
        font-size: 1.4rem;
    }

    .option-card {
        padding: 20px;
    }
}

.industry-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
    z-index: 2;
    animation: fadeUp 0.6s ease;
}

@media (min-width: 900px) {
    .industry-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Ticket Card */
.ticket-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    position: relative;
    backdrop-filter: blur(5px);
}

.ticket-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.4);
}

.mode-production .ticket-card:hover {
    border-color: #3B82F6;
}

.mode-digital .ticket-card {
    background: rgba(255, 255, 255, 0.02);
}

.mode-digital .ticket-card:hover {
    border-color: #7C3AED;
    box-shadow: 0 10px 40px -5px rgba(124, 58, 237, 0.15);
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ticket-icon {
    font-size: 1.5rem;
}

.ticket-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.4;
}

.ticket-pain {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Status Badge */
.ticket-status {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
}

.status-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #4ADE80;
    font-size: 0.7rem;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.ticket-card:hover .status-badge {
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
    background: rgba(34, 197, 94, 0.2);
    border-color: #4ADE80;
}

/* Result Footer */
.ticket-result {
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 54px;
    /* Ensure space for 2 lines */
    display: flex;
    align-items: center;
    /* Optional: center vertically if 1 line? Or flex-start? User wants "alignment". Center might be better or top. Top is safer for flow. Let's stick to default block but min-height implies maybe alignment needed. Let's try flexible centering if 1 line? No, keep top aligned. */
    align-items: flex-start;
}

.result-production {
    color: #60A5FA;
}

.result-digital {
    background: linear-gradient(90deg, #A78BFA, #60A5FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Energy Stream Process (CSS Grid Zig-Zag) --- */
.energy-stream-container {
    position: relative;
    max-width: 1000px;
    margin: 80px auto 0;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: Single column */
    gap: 40px;
}

/* Central Line */
.stream-line-tract {
    position: absolute;
    left: 20px;
    /* Mobile line position */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.stream-energy-beam {
    width: 2px;
    height: 0%;
    background: linear-gradient(to bottom, #3B82F6, #7C3AED, #10B981);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    transition: height 0.1s linear;
}

/* Rows (Mobile Default) */
.process-step-row {
    position: relative;
    z-index: 2;
    padding-left: 50px;
    /* Space for line on mobile */
}

/* Desktop Grid Logic */
@media (min-width: 900px) {
    .energy-stream-container {
        display: grid;
        grid-template-columns: 1fr 2px 1fr;
        /* Left | Line | Right */
        gap: 0;
        /* Gap handled by connection padding */
        row-gap: 80px;
        /* Vertical space between steps */
    }

    .stream-line-tract {
        left: auto;
        position: relative;
        /* Let it sit in the grid track */
        grid-column: 2;
        grid-row: 1 / span 3;
        /* Spans all 3 rows */
        width: 100%;
        /* Fill the 2px track */
        background: rgba(255, 255, 255, 0.05);
    }

    .stream-energy-beam {
        width: 100%;
    }

    .process-step-row {
        padding-left: 0;
        display: flex;
        align-items: center;
    }

    /* Column Placement */
    .process-step-row.left {
        grid-column: 1;
        justify-content: flex-end;
        padding-right: 40px;
        /* Distance from center line */
    }

    .process-step-row.right {
        grid-column: 3;
        justify-content: flex-start;
        padding-left: 40px;
        /* Distance from center line */
    }

    /* Explicit Grid Rows for Zig-Zag */
    .process-step-row[data-step="1"] {
        grid-column: 1;
        grid-row: 1;
    }

    .process-step-row[data-step="2"] {
        grid-column: 3;
        grid-row: 2;
    }

    .process-step-row[data-step="3"] {
        grid-column: 1;
        grid-row: 3;
    }

    /* Connectors (Horizontal Arms) */
    .step-card::after {
        content: '';
        position: absolute;
        top: 50%;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        width: 40px;
        /* span the padding gap */
        transition: all 0.5s;
    }

    .process-step-row.left .step-card::after {
        right: -40px;
        left: auto;
    }

    .process-step-row.right .step-card::after {
        left: -40px;
        right: auto;
    }

    /* Mirror Header for Left Side */
    .process-step-row.left .step-header {
        flex-direction: row-reverse;
    }
}

/* Step Card & Themes (Preserved) */
.step-card {
    background: rgba(10, 10, 12, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 36px;
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0.2;
    transform: translateY(20px);
}

.step-card:hover {
    transform: scale(1.02);
}

.step-card.active {
    opacity: 1;
    transform: translateY(0);
    background: rgba(15, 15, 20, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.7);
}

.step-card.active::after {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Icon & Text Styles */
.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 899px) {
    .process-step-row.left .step-header {
        flex-direction: row;
    }

    /* Reset on mobile */
    .step-card::after {
        display: none;
    }

    /* No complex connectors on mobile */
}

.step-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s;
    overflow: hidden;
}

.step-number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.step-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.step-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #a1a1aa;
}

/* Themes & Radar */
.scanner-theme.active .step-icon-box {
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.scanner-theme.active {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
}

.scanner-theme.active::after {
    background: #3B82F6;
    box-shadow: 0 0 15px #3B82F6;
}

.blueprint-theme.active .step-icon-box {
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}

.blueprint-theme.active {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.15);
}

.blueprint-theme.active::after {
    background: #7C3AED;
    box-shadow: 0 0 15px #7C3AED;
}

.construct-theme.active .step-icon-box {
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.construct-theme.active {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.15);
}

.construct-theme.active::after {
    background: #10B981;
    box-shadow: 0 0 15px #10B981;
}

/* Radar Sweep (Refined) */
.radar-sweep {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #3B82F6;
    top: 0;
    left: 0;
    opacity: 0;
}

.scanner-theme.active .radar-sweep {
    animation: scanDown 2.5s infinite ease-in-out;
    opacity: 1;
}

/* --- FAQ Accordion (Stripe Style) --- */
.faq-accordion {
    border-radius: 20px;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    /* Question Text: White */
    transition: background 0.3s;
    position: relative;
    z-index: 5;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.faq-toggle {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-secondary);
    transition: transform 0.3s;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    color: var(--accent-primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    position: relative;
    z-index: 1;
}

.faq-answer p {
    padding: 24px 32px 32px 32px;
    color: #ffffff !important;
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
    opacity: 1 !important;
}

.faq-item.active .faq-answer {
    max-height: 500px !important;
    opacity: 1 !important;
    visibility: visible;
}

/* --- Professional Contact Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 10, 0.85);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-glass-card {
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    padding: 40px;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modal-overlay.active .modal-glass-card {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close-btn:hover {
    color: #fff;
}

.modal-header {
    text-align: center;
    margin-bottom: 32px;
}

.modal-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-primary);
    border: 1px solid rgba(124, 58, 237, 0.3);
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: 16px;
    background: rgba(124, 58, 237, 0.1);
}

.modal-title {
    font-size: 1.75rem;
    margin-bottom: 12px;
    background: linear-gradient(to right, #fff, #9CA3AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-primary);
    background: rgba(124, 58, 237, 0.05);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

/* Autofill Fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0A0A0F inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-group select option {
    background-color: #1a1a1a;
    color: #fff;
}

.form-footer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin-top: 8px;
}

/* --- Hero Benefit Card (Eye-Catcher) --- */
.hero-benefit-card {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Glass Border */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 16px 28px;
    gap: 32px;
    margin-top: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Subtle spotlight effect on hover */
.hero-benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
}

.hero-benefit-card:hover::before {
    opacity: 1;
}

.hero-benefit-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hero-benefit-card:hover .benefit-icon {
    transform: scale(1.05);
}

.box-glow-green {
    box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.25);
    color: #10B981;
    /* Emerald 500 */
}

.box-glow-blue {
    box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.25);
    color: #3B82F6;
    /* Blue 500 */
}

.benefit-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    font-weight: 400;
}

.benefit-text strong {
    color: #F8FAFC;
    /* Slate 50 */
    font-weight: 600;
    display: block;
    font-size: 1.05rem;
    margin-bottom: 2px;
}

/* Vertical divider */
.benefit-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* Mobile Response */
@media (max-width: 768px) {
    .hero-benefit-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px;
        width: 100%;
        border-radius: 16px;
    }

    .benefit-item {
        width: 100%;
    }

    .benefit-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
    }

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

    .hero__actions .btn {
        width: 100%;
    }
}

/* ============================================
   INFINITY LOOP HERO (REACTOR CORE EDITION)
   ============================================ */

/* Main Container */
.hero__visual-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 2000px;
    /* Deep Architectural Perspective */
    overflow: visible;
}

.infinity-loop-container {
    position: relative;
    width: 100%;
    height: 500px;
    /* Reduced from 700px to pull content up */
    min-height: 500px;
    /* Reduced from 700px */
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    /* Negative margin to pull visual EVEN HIGHER if needed */
    margin-top: -50px;
}

/* 
   THE STAGE: Tilted Floor 
   User Request: "Lies on a table" -> Standard Isometric is approx 60deg
*/
.isometric-stage {
    position: relative;
    width: 1000px;
    height: 1000px;
    transform-style: preserve-3d;
    /* User: "Powiększ..." -> Increased to 1.25 for maximum impact */
    transform: rotateX(60deg) rotateZ(-45deg) scale(1.25);
    will-change: transform;
}

/* 1. THE TRACK (Energy Beam) */
.loop-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Keep 1:1 viewbox match */
    width: 1000px;
    height: 500px;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* ... Pulse CSS ... */

/* 2. THE REACTOR CORE (Solid Black Sphere) */
.iso-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(50px);
    transform-style: preserve-3d;
    z-index: 50;
    pointer-events: none;
}

.core-sphere {
    /* 
       BILLBOARDING: 
       Stage: rotateX(60deg)
       Core: rotateX(-60deg)
    */
    transform: rotateZ(45deg) rotateX(-60deg);

    /* User: "Odrobinę mniejsze" + "Okrągłe (nie jajko)" */
    width: 180px;
    height: 180px;

    /* SOLID BLACK + Dark Gradient (Occludes background) */
    background: radial-gradient(circle at 30% 30%, #1a1a2e, #000 80%);
    border: 2px solid rgba(79, 156, 249, 0.3);
    border-radius: 50%;
    /* Forced Circle */

    /* Strong Shadows */
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.9),
        inset 0 0 30px rgba(79, 156, 249, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.core-label {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 800;
    /* Adjusted font size for smaller sphere */
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.core-label.text-gradient {
    background: linear-gradient(135deg, #22D3EE 0%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Adjusted size */
    font-size: 2rem;
    filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.4));
}


/* 3. ORBITING NODES (Vertical Glass Cards) */
.iso-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    z-index: 20;

    /* Matching the Massive Loop SVG Path */
    offset-path: path("M0,0 C250,-200 450,-200 450,0 C450,200 250,200 0,0 C-250,-200 -450,-200 -450,0 C-450,200 -250,200 0,0 Z");
    offset-rotate: 0deg;
    /* Fixed Orientation */
    animation: orbitTrace 20s linear infinite;
    transform-style: preserve-3d;
}

@keyframes orbitTrace {
    from {
        offset-distance: 0%;
        z-index: 60;
        /* Front */
    }

    49% {
        z-index: 60;
    }

    50% {
        offset-distance: 50%;
        z-index: 1;
        /* Behind Core */
    }

    99% {
        z-index: 1;
    }

    to {
        offset-distance: 100%;
        z-index: 60;
    }
}

.node-pos-1 {
    animation-delay: -0s;
}

.node-pos-2 {
    animation-delay: -3.33s;
}

.node-pos-3 {
    animation-delay: -6.66s;
}

.node-pos-4 {
    animation-delay: -10s;
}

.node-pos-5 {
    animation-delay: -13.33s;
}

.node-pos-6 {
    animation-delay: -16.66s;
}

/* Glass Cards - Vertical Billboard */
.glass-plate {
    position: absolute;
    top: 50%;
    left: 50%;

    /* 
       BILLBOARDING: 
       Must match Core: rotateZ(45deg) rotateX(-60deg) 
    */
    transform: translate(-50%, -50%) rotateZ(45deg) rotateX(-60deg);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: max-content;
    padding: 10px 18px;

    background: rgba(10, 10, 20, 0.6);
    /* Darker glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.iso-node:hover .glass-plate {
    background: #000;
    border-color: #22D3EE;
    /* Cyan */
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
    transform: translate(-50%, -50%) rotateZ(45deg) rotateX(-60deg) scale(1.1);
    z-index: 100;
}

.glass-plate i {
    width: 18px;
    height: 18px;
    color: #A78BFA;
}

.plate-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #eee;
    text-align: left;
    line-height: 1.2;
}

/* Mobile Responsive */
@media (max-width: 1000px) {
    .isometric-stage {
        /* Bumped up slightly to 0.75 */
        transform: rotateX(60deg) rotateZ(-45deg) scale(0.75);
    }
}

@media (max-width: 600px) {
    .isometric-stage {
        /* Bumped up slightly to 0.5 */
        transform: rotateX(60deg) rotateZ(-45deg) scale(0.5);
    }

    .infinity-loop-container {
        min-height: 500px;
    }

    .core-sphere {
        width: 180px;
        height: 180px;
    }
}

/* ============================================
   WIZARD 2.0 - TYPEFORM STYLE (Premium B2B)
   ============================================ */

/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-glass-card {
    background: rgba(15, 15, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    max-width: 580px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- Modal Header (Compact) --- */
.modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.modal-badge {
    display: inline-block;
    background: rgba(79, 156, 249, 0.12);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* --- Progress Bar (Compact) --- */
.progress-bar-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    margin-top: 14px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-indicator {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* --- Wizard Steps --- */
.wizard-step {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wizard-step.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    /* Force disable animation to prevent glitches */
}

.wizard-step.exiting {
    animation: wizardStepOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes wizardStepIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes wizardStepOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}

/* --- Step Question (Compact) --- */
.step-question {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.3;
}

.step-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 16px;
    margin-top: -8px;
}

/* --- Option Cards Grid (2-Column for Steps 1-2) --- */
.option-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.option-cards--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* --- Single Option Card (Premium Anti-AI Style) --- */
.option-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 48px;
}

.option-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(79, 156, 249, 0.5);
}

.option-card.selected {
    background: rgba(79, 156, 249, 0.08);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(79, 156, 249, 0.2);
}

.option-card.selected .option-text {
    color: #fff;
}

/* Card Text */
.option-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    line-height: 1.3;
}

/* Small Card Variant (for Step 3 timeline/budget) */
.option-card--small {
    padding: 10px 14px;
    min-height: 44px;
}

.option-cards--timeline,
.option-cards--budget {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

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

    .option-cards--timeline,
    .option-cards--budget {
        grid-template-columns: 1fr;
    }
}

/* "Inne" Input Container */
.other-input-container {
    margin-top: 12px;
    animation: wizardStepIn 0.3s ease forwards;
}

/* --- Form Inputs (Step 4) --- */
.form-group {
    margin-bottom: 20px;
}

.wizard-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 500;
}

.wizard-label .required {
    color: #F87171;
}

.wizard-label .optional {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    font-size: 0.85rem;
}

.wizard-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.wizard-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.wizard-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(79, 156, 249, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

.wizard-input:invalid:not(:placeholder-shown) {
    border-color: #F87171;
}

/* --- Wizard Actions (Navigation) --- */
.wizard-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.btn-back {
    flex-shrink: 0;
    min-width: 120px;
}

.btn-next,
.btn-submit {
    flex: 1;
}

/* Cyan color for Next button (matching section headers) */
.btn-next.btn--primary {
    background: var(--accent-cyan);
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #3B82F6 100%);
    box-shadow: 0 0 20px -5px rgba(79, 156, 249, 0.4);
}

.btn-next.btn--primary:hover {
    box-shadow: 0 0 30px -5px rgba(79, 156, 249, 0.6);
}

/* Cyan color for Submit button (matching Next button) */
.btn-submit.btn--primary {
    background: var(--accent-cyan);
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #3B82F6 100%);
    box-shadow: 0 0 20px -5px rgba(79, 156, 249, 0.4);
}

.btn-submit.btn--primary:hover {
    box-shadow: 0 0 30px -5px rgba(79, 156, 249, 0.6);
}

/* Pulsing Glow for Primary Button */
.glow-button {
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(79, 156, 249, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(79, 156, 249, 0.5);
    }
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    .modal-glass-card {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .step-question {
        font-size: 1.2rem;
    }

    .option-card {
        padding: 16px;
    }

    .wizard-actions {
        flex-direction: column-reverse;
    }

    .btn-back {
        width: 100%;
    }
}

/* --- Form Group for old inputs compatibility --- */
.contact-form .form-group input:not(.wizard-input) {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-group input:not(.wizard-input):focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(79, 156, 249, 0.15);
}

/* --- New Contact Section Styles --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.contact-info-card {
    padding: 60px;
    display: flex;
    flex-direction: column;
}

.benefit-list {
    margin-top: 30px;
}

.benefit-item {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    color: var(--text-main);
    font-size: 1.05rem;
}

.benefit-icon {
    width: 24px;
    height: 24px;
    background: rgba(79, 156, 249, 0.1);
    color: var(--accent-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0;
}

.team-avatars {
    display: flex;
    margin-left: 8px;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--bg-deep);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
}

.avatar-circle:first-child {
    margin-left: 0;
}

/* Direct Form Styles */
.contact-form-card {
    padding: 60px;
    position: relative;
}

.direct-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.direct-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.direct-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(79, 156, 249, 0.1);
}

.form-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: inherit;
    z-index: 10;
}

.success-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

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

    .contact-info-card,
    .contact-form-card {
        padding: 40px 30px;
    }
}

/* --- HIGH-END SAAS CONTACT SECTION (REDESIGN) --- */
:root {
    --he-bg-deep: #09090b;
    /* Zinc 950 */
    --he-border: rgba(255, 255, 255, 0.08);
    --he-glass: rgba(255, 255, 255, 0.02);
    --he-text-muted: #a1a1aa;
    /* Zinc 400 */
    --he-accent: #3b82f6;
}

.he-contact-section {
    background-color: var(--he-bg-deep);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

/* Background Effects */
.he-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);
    opacity: 0.2;
    pointer-events: none;
}

.he-glow-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Container Constraint (max-w-5xl + center) */
.he-container {
    max-width: 64rem;
    /* ~1024px */
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* Grid Layout */
.he-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    /* Reduced from 64px */
    align-items: start;
    /* Top alignment */
    position: relative;
    z-index: 1;
}

/* Left Column */
.he-content {
    max-width: 100%;
    /* Allow full width within grid */
    padding-top: 1rem;
    /* Optical top alignment */
}

.he-headline {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    background: linear-gradient(to bottom right, #ffffff, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.he-subtext {
    font-size: 1.125rem;
    color: var(--he-text-muted);
    line-height: 1.6;
    margin-bottom: 40px;
}

.he-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.he-benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e4e4e7;
    font-weight: 500;
}

.he-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--he-accent);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}

/* Right Column (Form) */
.he-form-container {
    background: var(--he-glass);
    border: 1px solid var(--he-border);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

.he-input-group {
    margin-bottom: 20px;
}

.he-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--he-text-muted);
    margin-bottom: 8px;
}

.he-input {
    width: 100%;
    height: 48px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--he-border);
    border-radius: 12px;
    padding: 0 16px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.he-input:focus {
    outline: none;
    border-color: var(--he-accent);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.he-textarea {
    min-height: 120px;
    padding: 16px;
    resize: vertical;
}

/* Magnetic Shimmer Button */
.he-btn-submit {
    position: relative;
    width: 100%;
    height: 52px;
    background: #000;
    border: 1px solid var(--he-border);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    overflow: hidden;
    margin-top: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.he-btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 60%,
            transparent 80%);
    animation: shimmer 3s infinite linear;
}

.he-btn-submit:hover {
    border-color: var(--he-text-muted);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.1);
}

@keyframes shimmer {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(150%);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .he-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .he-headline {
        font-size: 2.5rem;
    }

    .he-form-container {
        padding: 24px;
    }
}


/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

@media screen and (max-width: 900px) {

    /* Hide desktop nav, show hamburger */
    .desktop-nav {
        display: none !important;
    }

    .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 9999 !important;
        /* MAX Z-INDEX */
        pointer-events: auto !important;
        /* FORCE CLICKABLE */
        padding: 0;
        margin-left: auto;
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 40px !important;
        /* Larger width */
        height: 30px !important;
        /* Larger height */
        padding: 5px;
        /* Hit area */
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        /* REQUIRED for z-index to work! */
        z-index: 2147483647 !important;
        /* MAX INT */
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger-line {
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    /* Hamburger Animation */
    .hamburger-btn.active .hamburger-line {
        background-color: var(--accent-cyan);
        /* Blue when active */
    }

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

    .hamburger-btn.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

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

    /* Mobile Menu Overlay */
    /* Mobile Menu Overlay - CARBO STYLE */
    .mobile-menu-overlay {
        display: block;
        /* Hidden by opacity/pointer-events */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 15, 30, 0.98);
        /* CARBO / Deep Blue-Black */
        backdrop-filter: blur(12px);
        z-index: 9998;
        /* Below hamburger */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        padding-top: 80px;
        /* Space for header */
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .mobile-nav__link {
        font-size: 1.5rem;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .mobile-nav__link:hover {
        color: var(--accent-cyan);
    }

    .mobile-cta {
        margin-top: 16px;
        width: 80%;
        text-align: center;
        background: #3b82f6 !important;
        /* User specified: --he-accent */
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 25px rgba(59, 130, 246, 0.5) !important;
    }

    /* Global Container */
    .container {
        padding: 0 20px;
    }

    /* Header */
    /* Header */
    .header {
        width: 90%;
        justify-content: space-between;
        padding: 10px 20px;
        /* Ensure header stays on top */
        z-index: 2147483647 !important;
        /* MAX INT to be absolutely sure */
        position: relative;
    }

    /* Hero Section */
    .hero {
        padding-top: 60px !important;
        /* AGGRESSIVE REDUCTION */
        /* Adjusted top alignment */
        flex-direction: column;
        height: auto;
        min-height: auto;
        gap: 10px;
        /* Reduced gap */
        overflow: hidden;
        /* Prevent horizontal overflow */
    }

    .hero__grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        /* Text on top, Visual below */
        gap: 20px;
        /* Reduced gap */
    }

    .hero__content {
        max-width: 100%;
        margin: 0 auto !important;
        /* ELIMINATE GAP */
        /* Center with auto margins */
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        /* Safety padding */
    }

    .hero__title {
        font-size: 2.5rem !important;
        /* Slightly smaller to fit better? Keep 2.75 if user wanted big */
        /* Let's keep it readable but tight */
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
        /* Reduced bottom margin */
    }

    .hero__subtitle {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
        /* SQUEEZED */
        line-height: 1.3;
    }

    .hero__actions {
        align-items: center !important;
        margin-top: 4px !important;
        /* SQUEEZED */
    }

    .hero__actions>div {
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Force Button to be Cyan (Bright Blue) */
    /* Hero CTA - Reverted to allow inline Navy Blue or default */
    .hero-main-cta,
    a.hero-main-cta {
        margin-bottom: 4px !important;
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px 0;
        font-size: 1.15rem;
        font-weight: 600;
        border-radius: 9999px;
        text-decoration: none;
        color: #fff !important;
    }




    .hero__visual-right {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(0.4);
        opacity: 0.3;
        /* Subtle background */
        z-index: -1;
        /* Behind text */
        pointer-events: none;
        /* No interaction */
        width: 100vw;
        height: 100%;
        overflow: hidden;
    }

    .infinity-loop-container {
        transform: translateX(0) !important;
        left: 0;
    }

    /* KPI Bar */
    .kpi-bar {
        margin-top: 40px;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        align-items: center;
    }

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

    /* Bento Grid */
    .bento-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 40px;
    }

    .bento-item,
    .bento-item--large {
        width: 100%;
        margin: 0;
        grid-column: span 12;
    }

    /* System / Solution */
    .system-os-grid {
        grid-template-columns: 1fr;
    }

    .system-module {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 30px 20px;
    }

    /* ROI Grid */
    .roi-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
    }

    /* Bi-Modal Industries */
    .industry-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* Process Section */
    .process-step-row {
        width: 100%;
        padding: 0;
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .step-card {
        margin: 0;
        width: 100%;
    }

    .stream-line-tract {
        display: none;
    }

    /* Contact Section */
    .he-grid {
        grid-template-columns: 1fr;
    }

    .he-benefits {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .he-form-container {
        padding: 24px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

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

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

    .contact-info-list {
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }

    .no-scroll {
        overflow: hidden;
    }

    /* Mobile Hero Reordering */
    .hero__content {
        display: contents;
        /* Allows reordering children */
    }

    .hero__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center children horizontally */
        width: 100%;
        max-width: 100%;
        /* Prevent blowout */
        overflow: hidden;
        /* Clip anything too wide */
    }

    .hero__title {
        order: 1;
        margin-top: 0px !important;
        /* Removed top margin */
        text-align: center !important;
        /* Override desktop left-align */
        width: 100%;
        margin-bottom: 0px !important;
        /* Zero margin */
        padding: 0 10px;
    }

    .hero__subtitle {
        order: 2;
        text-align: center !important;
        /* Override desktop left-align */
        width: 100%;
        margin-bottom: -10px !important;
        /* Pull visual up */
        position: relative;
        z-index: 2;
    }

    /* Restore 3D Scene for Orbiting Effect */
    /* Restore 3D Scene for Orbiting Effect - Target both potential classes */
    /* Restore 3D Scene for Orbiting Effect - Target both potential classes */
    .iso-scene,
    .isometric-stage {
        transform: rotateX(60deg) rotateZ(-45deg) !important;
        /* The Orbit Tilt */
        width: 320px !important;
        height: 320px !important;
        display: block !important;
        transform-style: preserve-3d !important;
        margin: 0 auto !important;
        /* Center the scene itself */
    }

    /* BILLBOARD EFFECT: SIMPLIFIED STRATEGY 
       Rotate the WRAPPER (.iso-core) directly to face the screen. 
       Disconnect it from the 3D floor tilt locally. 
    */
    .iso-core,
    .iso-scene .processor-core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 140px !important;
        height: 140px !important;
        /* Center via margins/translate. Since we are using rotate transforms, 
           we combine translate(-50%, -50%) with the counter-rotation. */
        margin: 0 !important;
        border-radius: 50% !important;

        /* THE BILLBOARD FIX: 
           1. center it: translate3d(-50%, -50%, 50px) -> lift it up slightly?
           2. counter-rotate: rotateZ(45deg) rotateX(-60deg) 
        */
        transform: translate(-50%, -50%) translateZ(40px) rotateZ(45deg) rotateX(-60deg) !important;
        transform-style: flat !important;
        /* It's a flat billboard now */
        background: transparent !important;
        /* Visuals are inside */
        box-shadow: none !important;
    }

    /* Inner Sphere - Just fill the billboard */
    .iso-core .core-sphere,
    .iso-scene .core-sphere,
    .core-sphere {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        /* No extra rotation */
        border-radius: 50% !important;
        box-shadow: 0 0 50px rgba(37, 99, 235, 0.8) !important;
        margin: 0 !important;
    }

    /* NODES - Same strategy: Absolute positioning (handled by desktop CSS animation usually) 
       BUT we need to override the rotation part of the transform.
       Since we can't easily merge transforms in CSS, we rely on the specific .node-pos classes
       to set position, and we force the rotation here? 
       Actually, if desktop uses 'transform', we might be overwriting the orbit position.
       
       SAFE BET: Target inner .glass-plate again, but consistently.
    */
    .glass-plate {
        /* Counter-rotate: Undo Z(-45) then X(60) */
        transform: rotateZ(45deg) rotateX(-60deg) !important;
        backface-visibility: hidden;
    }

    /* Ensure Wrappers preserve 3D for nodes */
    .iso-node {
        transform-style: preserve-3d !important;
    }

    /* Reset text inside */
    .iso-text,
    .node-label,
    .core-label,
    .plate-label {
        transform: none !important;
    }

    .hero__visual-right {
        order: 3;
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        margin: -40px auto 0 auto !important;
        /* Pull UP even more */
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        pointer-events: none;
        left: auto !important;
        overflow: visible !important;
        justify-content: center;
        align-items: center;
    }

    /* Scale the inner container instead of the wrapper */
    .hero__visual-right .infinity-loop-container {
        transform: scale(1.0) !important;
        /* Full size for maximum impact */
        transform-origin: center center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero__actions {
        order: 4;
        justify-content: center !important;
        /* Center buttons */
        width: 100%;
        display: flex;
    }

    .hero-micro-copy {
        order: 5;
    }

    .kpi-bar {
        order: 6;
    }

    /* KPI Fixes: Restore Row Layout for 2nd Item - Label | Number */
    .kpi-item:last-child .kpi-text {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .kpi-item:last-child .kpi-text .kpi-label {
        text-align: left !important;
        order: 1;
        /* First */
    }

    .kpi-item:last-child .kpi-text .kpi-number {
        margin-top: 0 !important;
        order: 2;
        /* Second */
    }


}